当前位置:首页 > 开发 > Web前端 > Jquery > 正文

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

发表于: 2015-06-08   作者:Everyday都不同   来源:转载   浏览:
摘要: 最近做前端页面,频繁用到一些jQuery的选择器,所以特意来总结一下:   测试页面: <html> <head> <script src="jquery-1.7.2.min.js"></script> <script> /*$(function() { $(documen

最近做前端页面,频繁用到一些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>。。

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery借用了一套css选择器,共有5种,即标签选择器,ID选择器,类选择器,通用选择器和群组选择器
* Matches any element.( 匹配任何元素 ) 声明 $("*") E Matches all element with tag name E. (
1.首先查看你所要修改页面值的class或者ID或者Element 2.获取你所要修改页面值的节点 $(".yellowbtn"
1.首先查看你所要修改页面值的class或者ID或者Element 2.获取你所要修改页面值的节点 $(".yellowbtn"
CSS的选择器 最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一
三种基本选择器: 类型选择器:以文档语言对象类型作为选择符,匹配指定的元素。 p {color:red;}
1. 选择器浏览器支持情况 使用CSS选择器时,要考虑到不同浏览器下的支持情况,主要是IE的不同版本。
1、标签选择器 p{ font-size: 12px; background: #900; color: 090; } 2、ID选择器 <style> #
CSS选择器用于选择你想要的元素的样式的模式。 "CSS"列表示在CSS版本的属性定义(CSS1,CSS2,或对C
在这里主要总结了三个较为常用的选择器,熟练掌握这些选择器的使用,能够灵活地处理网页,作为初学
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号