jQuery选择器小结 VS 节点查找（附css的一些东西）

最新推荐文章于 2022-11-02 16:54:00 发布

Everyday都不同

最新推荐文章于 2022-11-02 16:54:00 发布

阅读量543

点赞数

分类专栏： jquery name选择器追加元素查找节点 css

本文链接：https://blog.csdn.net/qq_18875541/article/details/69391167

版权

jquery 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

name选择器

1 篇文章 0 订阅

订阅专栏

追加元素

1 篇文章 0 订阅

订阅专栏

最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：

测试页面：

<html>
	<head>
		<script src="jquery-1.7.2.min.js"></script>
		<script>
		/*$(function() {
			$(document).ready(function(){
				var $obj = $("div[name='div'] a");
			alert("the first: " + $obj.html());
			});
			
		});*/
		</script>
		<script>
		</script>
		
	</head>
	<body>
		<div name="parent">
			<div name="div">
				<c>ok</c>
				<a>lala</a>
				<b>Just Test</b>
				<a class="d">hahha</a>
			</div>
			<div class="div2">wuwuwu</div>
		</div>
	</body>
</html>

jQuery的常用操作：

1.追加元素

1）向后追加：append appendTo after用法及区别（含demo测试）；

当取取示例中的var $obj = <a>lala</a>对象时，执行

append写法：$obj.append("<e>test</e>")

appendTo写法：$("<e>test</e>").appendTo($obj)后，

会出现<a>lala<e>test</e></a>（在<a></a>的内部）;

而当执行$obj.after("<e>test</e>")之后，会得到<a>lala</a><e>test</e>的结果——说明是当作兄弟节点追加的！

向前追加: prepend prependTo before（用法及区别同上）

2）查找父节点(parent(), parents())、子节点(children,find)、兄弟节点(prev,prevAll, next,nextAll)

parent()：查找当前节点的（直属）父节点；parents()查找当前节点的所有父节点(包含<html>对象)。

——当取示例中的<a>lala</a>对象时，他的parent().length的值为1，而parents().length的值为4(包括2个div，1个body，1个html);

——当取示例中的<a>lala</a>对象时，他的parent().html()的值为<c>ok</c><a>lala</a><b>Just Test</b><a class="d">hahha</a>，

而parents().html()的值为<c>ok</c><a>lala</a><b>Just Test</b><a class="d">hahha</a>;

children():查找当前节点的所有子节点（更多时候是用find方法）：

——当取示例中的<div name="parent"></div>对象时，他的children().html()的值为：<c>ok</c><a>lala</a><b>Just Test</b><a class="d">hahha</a>;

他的children().length的值为2(两个div)

children($selector)查找符合条件的子节点：

——当取示例中的<div name="parent"></div>对象时，他的children(".div2").html()的内容为wuwuwuwu，而尝试children(".d").html()则会得到null，因为

<a class="d">hahha</a>不是其“直接子节点”

“上、下一个”兄弟节点：

——当取示例中的<a>lala</a>对象时，他的prev().html()的值为ok, 他的next().html()的值为Just Test，他的nextAll().html()的值也为Just Test，

他的nextAll().length的值为2, nextAll(".d").html()的值为haha（可以传递参数过滤，所以此时不支持nextAll().find($selector)的用法了哈。。prevAll($selector)也一样）；

3）jQuery name选择器["name='xxx'"] id/class选择器["id/class='yyy'"]与(".class") ("#id")等效（因为name选择器没有对应的标识符，所以只能通过中括号的形式）

复合选择器 $("#app134 tr td.lefttop")——查找id为#app134的元素下的tr下的td并且td的class属性是lefttop,为了易读性，可以写成这样（这2中写法是等效的）：

$("#app134").find("tr td").find(".lefttop") $("#app134").find("tr td.lefttop")

-----------------------------------------

附：css相关

注：一般都是把style属性中的东西单独抽离出来写样式.class{....}，再引用class="xxx" 这样有利于解耦！

4）rowspan（跨行）、colspan(跨列)是td的属性，不是tr的（怪不得我之前一直把他当做tr的属性，不起作用）！

5）为避免窗口浏览器缩小造成div之间位置“错位”时，最好在body下套一个大的div,并且把这个起包围作用的div的width, height设置为合理的固定值。

6）th和td一样（同级），表示表头，字体会被自动加粗。一般写在第一行，也需要被tr包围。th可以在<thead><tr><th>title</th></tr></thead>里，也可以直接在<tbody><tr><th>title</th></tr></tbody>里。。注意不要搞混<thead>与<th>。。

Everyday都不同

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器小结 VS 节点查找（附css的一些东西）

最近做前端页面，频繁用到一些jQuery的选择器，所以特意来总结一下：测试页面： /*$(function() { $(document).ready(function(){ var $obj = $("div[name='div'] a"); alert("the first: " + $obj.html()); });
复制链接

扫一扫

专栏目录