您的位置：首页 > Web前端 > JQuery

jquery中DOM节点操作（四）

2016-12-13 00:00 281 查看

三、设置和获取HTML，文本和值

1.html()：获得或设置某个元素的内容（包括 HTML 标记）

2.text()：获得或设置某个元素的文本值

3.val()：获得或设置某个元素的值

<!DOCTYPE html>

<html>

<head>

<title></title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(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>

<input type="text" value="文本">

</body>

</html>

四、CSS-DOM操作

1.css()：用于获取、设置元素的一个或多个属性

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(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>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(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>

<button class="btn2">获取尺寸</button>

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

</body>

</html>

3.关于位置位置

offset()

用于获取或设置元素相对当前窗体的偏移量

position()

用于获取元素相对于父元素的偏移量

scrollTop()

用于获取或设置元素的滚动条的垂直位置

scrollLeft()

用于获取或设置元素的滚动条的水平位置

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(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>

<input type="button" value="获取和设置div元素的的位置"/>

<div id="div1" style="width: 200px; height:300px; padding:10px;margin: 5px;border: 1px solid black;overflow:scroll;">

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 设置获取 css 尺寸位置

相关文章推荐

新的分享

章节导航