jquery中DOM節點操做（四）

時間 2019-11-13

標籤 jquery dom 節點欄目 JQuery 简体版

原文原文鏈接

3、設置和獲取HTML，文本和值javascript

1.html()：得到或設置某個元素的內容（包括 HTML 標記）css

2.text()：得到或設置某個元素的文本值html

3.val()：得到或設置某個元素的值java

<!DOCTYPE html>jquery

<html>code

<head>htm

<title></title>blog

$(function(){

// 獲取和設置html

$("button:eq(0)").click(function(){

var html=$("p").html();//這個段落的<b>粗體</b>

console.log(html);

$("p").html("hello world");

console.log($("p").html());

});

// 獲取和設置文本

$("button:eq(1)").click(function(){

var text=$("p").text();

console.log(text);

$("p").text("jquery");

});

// 獲取和設置值

$("button:eq(2)").click(function(){

var val=$("input").val();

console.log(val);

$("input").val("姓名");

});

</script>

</head>

<body>

<button>獲取和設置html</button>

<button>獲取和設置文本</button>

<button>獲取和設置值</button>

<p>這個段落的<b>粗體</b></p>

</body>

</html>

4、CSS-DOM操做

1.css()：用於獲取、設置元素的一個或多個屬性

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// css方法獲取和設置屬性

$(".btn1").click(function(){

var width=$("div").css("width");

console.log(width);//100px

$("div").css("width","200px");

$("div").css({"height":"100px","color":"green"});

});

</script>

<body>

<button class="btn1">css方法獲取和設置屬性</button>

</body>

2.關於尺寸

width()

設置或返回元素的寬度（不包括內邊距、邊框或外邊距）

height()

設置或返回元素的高度（不包括內邊距、邊框或外邊距）

innerWidth

返回元素的寬度（包括內邊距）

innerHeight

返回元素的高度（包括內邊距）

outerWidth()

返回元素的寬度（包括內邊距和邊框)

outerHeight()

返回元素的高度（包括內邊距和邊框）

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

// 獲取尺寸

$(".btn2").click(function(){

console.log($("div").width());//100

console.log($("div").height());//200

$("div").width("200px");

$("div").height("400px");

console.log($("div").innerWidth());//220

console.log($("div").innerHeight());//420

console.log($("div").outerWidth());//222

console.log($("div").outerHeight());//422

});

</script>

</head>

<body>

<div style="width: 100px; height: 200px;padding: 10px;border: 1px solid red;">我是div</div>

</body>

</html>

3.關於位置位置

offset()

用於獲取或設置元素相對當前窗體的偏移量

position()

用於獲取元素相對於父元素的偏移量

scrollTop()

用於獲取或設置元素的滾動條的垂直位置

scrollLeft()

用於獲取或設置元素的滾動條的水平位置

<!DOCTYPE html>

<head>

<title>Document</title>

$(function(){

$("input").click(function(){

// offset

// var offset=$("div").offset();

// console.log(offset);

// console.log("offset:"+offset.top+","+offset.left);

// $("div").offset({"left":100,"top":100});

// position

var position=$("div").position();

console.log(position);

console.log("position:"+position.top+","+position.left);

// scrollLeft scrollTop

var left=$("div").scrollLeft();

var top=$("div").scrollTop();

console.log(left+","+top);

$("div").scrollLeft(100);

$("div").scrollTop(100);

});

</script>

</head>

<body>

<div id="div2" style="height:500px;width:300px;">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div>

</body>

</html>