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>