jQuery之DOM操作二

最新推荐文章于 2021-07-20 10:24:32 发布

bruth_lee

最新推荐文章于 2021-07-20 10:24:32 发布

阅读量636

点赞数

分类专栏： jquery 文章标签： jquery dom 遍历 js

本文链接：https://blog.csdn.net/lxy2010love/article/details/23047525

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

接着上一节，介绍几个常用的jQuery的DOM操作方法

<body>
  <div>
    <p title="title"><b>test</b></p>

    <h3><b>h3</b></h3>

 <div>
<input type="text" name="textInput" value="hello">input <input type="radio" name="radioInput" value="1">radio1

         <input type="radio" name="radioInput" value="2" checked="checked">radio2
    </div>

 </div>
</body>

一、获取、修改HTML

1、html()：获取或者修改指定元素的html内容，类似于js原生的innerHTML属性

alert($("p").html());//获取p标签的html内容并输出<b>test</b>

$("p").html("<strong>title</strong>");//修改p标签的html内容
p标签变为：
<p title="title"><strong>title</strong></p>

2、text()：获取或者修改指定元素的文本内容，类似于js原生的innerText属性

alert($("p").text());//获取p标签的文本内容并输出test

$("p").text("update title");//修改p标签的文本内容
p标签变为：
<p title="title"><b>update title</b></p>

3、val()：获取指定文本框、下拉框、复选框、单选框等的value值，类似于js原生的value属性

var value = $(":input[name=textInput]").val();//获取文本框的value
alert(value);//输出value值hello

$(":input[name=textInput]").val("文本框");//设置文本框的value

变为：<input type="text" name="textInput" value="文本框">input

var radioValue = $(":input[name=radioInput]:checked").val();//获取单选框选中的value 
alert(radioValue);//输出radioValue值2
$(":input[name=radioInput]").val(["1"]);//选中值为1的单选框，注意是用数组的方式

二、遍历节点

1、children()：获取指定元素的一级子节点集合，不包括一级子节点下面的子节点

alert($("body").children().length);//输出1
alert($("div").children().length);//输出6
alert($("div:first").children().length);//输出3
alert($("p").children().length);//输出1

或者遍历指定元素的指定一级子节点
$("div").children("input").length;//输出3

2、next()：获取指定元素后面紧邻的同辈元素（紧邻的第一个）

nextAll()：获取指定元素后面紧邻的所有同辈元素

var pnext = $('p').next();
pnext为：（可以新建一个div并append(pnext)检验）
<div>
<input type="text" name="textInput" value="hello">input
<input type="radio" name="radioInput" value="1">radio1
<input type="radio" name="radioInput" value="2" checked>radio2
</div>

3、prev()：获取指定元素前面紧邻的同辈元素（紧邻的第一个）

prevAll()：获取指定元素前面所有的同辈元素

var divprev = $("div:eq(1)").prev();
divprev为：（可以新建一个div并append(pnext)检验）
<p title="title"><b>test</b></p>

4、siblings()：获取指定元素前后的所有同辈元素

var h3_siblings = $("h3").siblings();
h3_siblings为：（可以新建一个div并append(pnext)检验）
<p title="title"><b>test</b></p>
<div>
<input type="text" name="textInput" value="hello">input
<input type="radio" name="radioInput" value="1">radio1
<input type="radio" name="radioInput" value="2" checked>radio2
</div>

5、closest()：获取离指定位置最近的匹配元素。这个方法会首先检查当前元素，如果匹配则返回元素本身，否则向上查找父元素，直到找到匹配的元素并返回；如果没有匹配到则返回一个空的jQuery对象

$(document).click(function(e){
	var closest = $(e.target).closest("h3");
	$("div:last").append(closest.clone());
})
当我们点击document文档时就可以发现点击h3标签才会append，点击其他标签不会

三、CSS常用的DOM操作

1、css()：获取或者设置直到元素的样式，获取到的值带单位px

//设置h3标签的字体大小为2.0em
$("h3").css("font-size","28px");

//输出h3标签的字体大小样式
alert($("h3").css("font-size"));//输出28px

如果要同时设置多个样式，则可以将参数写成键值对的样式

//同时设置h3标签的字体大小、样式、颜色
$("h3").css({"font-size":"28px","color":"#ada","font-style":"italic"});

2、offset()：获取指定元素在当前窗口的相对偏移，返回一个对象{top:mm,left:nn}，该方法只对可见元素有效

var h3_offset = $("h3").offset();
var offset_top = h3_offset.top;
var offset_left = h3_offset.left;
alert("top:"+offset_top+",left:"+offset_left);

3、position()：获取指定元素相对于最近的一个position为relative、absolute的祖父节点的相对偏移，返回一个对象{top:mm,left:nn}

var h3_position = $("h3").position();
var position_top = h3_position.top;
var position_left = h3_position.left;
alert("top:"+position_top+",left:"+position_left);

4、scrollTop()、scrollLeft()：分别获取指定元素的滚动条距离顶部、左侧的距离

var scroll_top = $("h3").scrollTop();
var scroll_left = $("h3").scrollLeft();
alert("scroll--top:"+scroll_top+",left:"+scroll_left);

bruth_lee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery之DOM操作二

接着上一节，介绍几个常用的jQuery
复制链接

扫一扫

专栏目录

jQuery之DOM操作二

一、获取、修改HTML

二、遍历节点

三、CSS常用的DOM操作

“相关推荐”对你有帮助么？