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

阅读更多

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

 

测试页面：

	
		
		
		
		
	
	
		

			

				ok
				lala
				Just Test
				hahha
			
			
wuwuwu
		
	

 

jQuery的常用操作：

1.追加元素 （参数类型：字符串/dom元素/jquery对象）

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

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

append写法：$obj.append("test")

appendTo写法：$("test").appendTo($obj)后，

会出现lalatest（在的内部）;

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

   向前追加: prepend prependTo before(兄弟节点)（用法及区别同上）

 

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

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

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

——当取示例中的lala对象时，他的parent().html()的值为oklalaJust Testhahha，

而parents().html()的值为oklalaJust Testhahha;

 

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

——当取示例中的

对象时，他的children().html()的值为：oklalaJust Testhahha;

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

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

——当取示例中的

对象时，他的children(".div2").html()的内容为wuwuwuwu，而尝试children(".d").html()则会得到null，因为

hahha不是其“直接子节点”

 

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

——当取示例中的lala对象时，他的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可以在title里，也可以直接在title里。。注意不要搞混与。。