$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div") 几个特殊的选择器
2014-04-08 14:14
471 查看
转自:http://blog.csdn.net/zm2714/article/details/8128747
这个标题似乎有些奇怪,但这些都是合法有效的jquery选择器。在这里将他们逻列一起,是因为他们比较容易引起混淆。下面就通过例子来说明他们之间的不同之处。
<div>
<span>123</span>
<p>
<span>456</span>
</p>
<span>789</span>
</div>
[javascript] view plaincopy
$('div > span').css('color', '#FF0000');
结果显示如下:
123
456
789
这样理解:在parent的儿子辈中找child。这里div有三个儿子:span p和span,> 表示仅在div的儿子辈中查找。这里<span>456</span>不符合条件,因为他是div的孙子辈(二公子p的儿子)。
它等同于$("parent").children("child");
<form>
<label>Name:</label>
<input name="name" value="a" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="b" />
</fieldset>
</form>
<input name="a1" value='c' />
<div>789</div>
<input name="a2" value='d' />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="e" />
</fieldset>
[javascript] view plaincopy
$("form input").css('color', '#FF0000');
//它也等同于:$("input","form").css('color','#ff0000');这在下面会有讲解
//也等同于:$("form").find("input").css('color', '#FF0000');
设置form中的所有input为红色。祖先为form,子孙为input。也可以理解,只要在form的后代中有input,就符合条件。思考一下与:$("form > input").css('color','#ff0000')的区别。
它等同于:$("A").find("B")
例1:
[html] view plaincopy
<div>
<span class="test">123</span>
<p>
<span class="test">456</span>
</p>
<span>789</span>
<div class="test">abc</div>
</div>
[javascript] view plaincopy
$("span.test").css('color', '#FF0000');
结果如下:
123
456
789
abc
例2:
[html] view plaincopy
<div>
<span class="intro">123</span>
<p>
<span class="intro demo">456</span>
</p>
<span>789</span>
<div class="demo">abc</div>
</div>
[javascript] view plaincopy
$(".intro.demo") .css('color', '#FF0000');
结果如下所示:
123
456
789
abc
例3:
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("div,#test")
一个双引号中用逗号分隔不同的选择器,称之为并列选择器。
[html] view plaincopy
<div>123</span>
<div style="border:1px solid #ccc;">
<span id="test">456</span>
</div>
[javascript] view plaincopy
$('div,#test').css('color', '#FF0000');
结果如下图所示:
将div、id="test"元素设为红色字体。
先看个简单例子:
[html] view plaincopy
<div>
<span class="test">123</span>
</div>
<span class="test">456</span>
[javascript] view plaincopy
$(".test","div").css('color', '#FF0000');
结果为:
123
456
等价于:$('.child','.parent') === $('.parent')find('.child')
在看个稍微复杂一点的例子:
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>
<script>
$(document).ready(function(){
$(".del").click(function(){
id=$("input[name='id']",$(this).parents("form:first")).val();
alert(id);
});
});
</script>
</head>
<body>
<table width="100%">
<tr style="text-align:center;">
<td>1</td>
<td>218.11.56.*</td>
<td>16:51 2012-10-30</td>
<td><form><input type="hidden" name="id" value="1" /><span class="del">删除</span></form></td>
</tr>
<tr style="text-align:center;">
<td>2</td>
<td>218.11.56.*</td>
<td>16:59 2012-10-30</td>
<td><form><input type="hidden" name="id" value="2" /><span class="del">删除</span></form></td>
</tr>
</table>
</body>
</html>
你会发现,点击不同数据的删除,会弹出当前数据的ID值。
jQuery()函数有三种用法。利用选择器进行的操作只是其中的一种用法。其语法为:
jQuery(selector, [context])
这种用法还包含了四种用法。
设置选择器环境
接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器
一般情况对jquery的选择器的用法,都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的
是将前面选择器限定在context这个环境中。在默认情况下,即不传第二个参数,选择器从文档根部对 DOM 进行搜索($()将在当前的HTML
document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。
下面看个例子
[javascript] view plaincopy
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由
于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的class。在内部,选择器环境是通过
.find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span")。
这里结合一下去掉的一个项目做说明:
[html] view plaincopy
下面这个tr有N个,这里只列出一个做为演示
<tr style="text-align:center;">
<td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>
<td>$arr[id]</td>
<td>$arr[log]</td>
<td>$arr[ip]</td>
<td>$arr[time]</td>
<td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span></form></td>
</tr>
[javascript] view plaincopy
//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);//为什么要加上这一句?
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");//要关注的就是这一句,获取当前点击“删除”信息的ID
art.dialog.confirm('你确认删除该日志吗?',function(){
$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art.dialog.tips('成功删除');
$(_tmpQuery.parents('tr:first')).hide();//
如果不加第一句,这里用$(_tmpQuery.parents('tr:first')).hide();则不会隐藏。因为这里的this,并不是当前
的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试:alert(this.url); 大
头爸爸注:现在处理这个隐藏有更好的方案,详细请访问:
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});
现
在,终于明白了var
id=$("input[name='id']",$(this).parents("form:first")).attr("value");的来龙
去脉。它的意思是在被点击元素最近的父元素开始向外寻找第一个form元素,这个jquery对象就做为前面input[name='id']的范围。实
际上在<form><input type="hidden" name="id" value="$arr[id]"
/><span class="del">删除</span><img
src="images/del.gif" width="16" height="16"
/></form>中,input[name='id']是唯一的,即只有一个name值等于id的input,只有一个。
更多了解请访问:http://www.w3school.com.cn/jquery/core_jquery.asp
那么,在看一下jQuery(selector, [context]),这种用法的第二个用法:克隆 jQuery 对象
在上面例子中有这样一句:$(_tmpQuery.parents('tr:first')).hide();
在其它页面中,有这样的句子:$($(this).parents('form:first')).serialize()。完整代码如下:
[javascript] view plaincopy
//edit event
$(".edit").click(function(){
art.dialog.open('manager_edit_control.php?'+$($(this).parents('form:first')).serialize(),{id:'edit',title:'管理员修改',lock:true,resize:false},false);
});
用法 3 :克隆 jQuery 对象
语法
jQuery(jQuery object)
当以参数的形式向 $() 函数传递 jQuery 对象后,会创建一个该对象的副本。与初始对象一样,新的 jQuery 对象引用相同的 DOM 元素。
完全可以将上面代码改为:
_tmpQuery.parents('tr:first').hide();
$(this).parents('form:first').serialize()
这个标题似乎有些奇怪,但这些都是合法有效的jquery选择器。在这里将他们逻列一起,是因为他们比较容易引起混淆。下面就通过例子来说明他们之间的不同之处。
$("parent > child")
[html] view plaincopy<div>
<span>123</span>
<p>
<span>456</span>
</p>
<span>789</span>
</div>
[javascript] view plaincopy
$('div > span').css('color', '#FF0000');
结果显示如下:
123
456
789
这样理解:在parent的儿子辈中找child。这里div有三个儿子:span p和span,> 表示仅在div的儿子辈中查找。这里<span>456</span>不符合条件,因为他是div的孙子辈(二公子p的儿子)。
它等同于$("parent").children("child");
$("A B")
[html] view plaincopy<form>
<label>Name:</label>
<input name="name" value="a" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="b" />
</fieldset>
</form>
<input name="a1" value='c' />
<div>789</div>
<input name="a2" value='d' />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" value="e" />
</fieldset>
[javascript] view plaincopy
$("form input").css('color', '#FF0000');
//它也等同于:$("input","form").css('color','#ff0000');这在下面会有讲解
//也等同于:$("form").find("input").css('color', '#FF0000');
设置form中的所有input为红色。祖先为form,子孙为input。也可以理解,只要在form的后代中有input,就符合条件。思考一下与:$("form > input").css('color','#ff0000')的区别。
它等同于:$("A").find("B")
$("div#test")
中间没有空格,表示是“且”的关系。$("div#test")意思是所有的div且id=test的元素。在看个例子:$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素。例1:
[html] view plaincopy
<div>
<span class="test">123</span>
<p>
<span class="test">456</span>
</p>
<span>789</span>
<div class="test">abc</div>
</div>
[javascript] view plaincopy
$("span.test").css('color', '#FF0000');
结果如下:
123
456
789
abc
例2:
[html] view plaincopy
<div>
<span class="intro">123</span>
<p>
<span class="intro demo">456</span>
</p>
<span>789</span>
<div class="demo">abc</div>
</div>
[javascript] view plaincopy
$(".intro.demo") .css('color', '#FF0000');
结果如下所示:
123
456
789
abc
例3:
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("div,#test")
一个双引号中用逗号分隔不同的选择器,称之为并列选择器。
[html] view plaincopy
<div>123</span>
<div style="border:1px solid #ccc;">
<span id="test">456</span>
</div>
[javascript] view plaincopy
$('div,#test').css('color', '#FF0000');
结果如下图所示:
将div、id="test"元素设为红色字体。
$(".test","div")
这个看似有些奇特,它与上面的并列选择器虽然相似,但有本质的不同。其实这里的第二个参数"div"是限定查找.test的范围。先看个简单例子:
[html] view plaincopy
<div>
<span class="test">123</span>
</div>
<span class="test">456</span>
[javascript] view plaincopy
$(".test","div").css('color', '#FF0000');
结果为:
123
456
等价于:$('.child','.parent') === $('.parent')find('.child')
在看个稍微复杂一点的例子:
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>
<script>
$(document).ready(function(){
$(".del").click(function(){
id=$("input[name='id']",$(this).parents("form:first")).val();
alert(id);
});
});
</script>
</head>
<body>
<table width="100%">
<tr style="text-align:center;">
<td>1</td>
<td>218.11.56.*</td>
<td>16:51 2012-10-30</td>
<td><form><input type="hidden" name="id" value="1" /><span class="del">删除</span></form></td>
</tr>
<tr style="text-align:center;">
<td>2</td>
<td>218.11.56.*</td>
<td>16:59 2012-10-30</td>
<td><form><input type="hidden" name="id" value="2" /><span class="del">删除</span></form></td>
</tr>
</table>
</body>
</html>
你会发现,点击不同数据的删除,会弹出当前数据的ID值。
jQuery()函数有三种用法。利用选择器进行的操作只是其中的一种用法。其语法为:
jQuery(selector, [context])
这种用法还包含了四种用法。
设置选择器环境
接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器
一般情况对jquery的选择器的用法,都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的
是将前面选择器限定在context这个环境中。在默认情况下,即不传第二个参数,选择器从文档根部对 DOM 进行搜索($()将在当前的HTML
document中查找DOM元素);如果指定了第二个参数,如一个DOM元素集或jquery对象,那就会在这个context中查找。
下面看个例子
[javascript] view plaincopy
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由
于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的class。在内部,选择器环境是通过
.find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span")。
这里结合一下去掉的一个项目做说明:
[html] view plaincopy
下面这个tr有N个,这里只列出一个做为演示
<tr style="text-align:center;">
<td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>
<td>$arr[id]</td>
<td>$arr[log]</td>
<td>$arr[ip]</td>
<td>$arr[time]</td>
<td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span></form></td>
</tr>
[javascript] view plaincopy
//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);//为什么要加上这一句?
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");//要关注的就是这一句,获取当前点击“删除”信息的ID
art.dialog.confirm('你确认删除该日志吗?',function(){
$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art.dialog.tips('成功删除');
$(_tmpQuery.parents('tr:first')).hide();//
如果不加第一句,这里用$(_tmpQuery.parents('tr:first')).hide();则不会隐藏。因为这里的this,并不是当前
的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试:alert(this.url); 大
头爸爸注:现在处理这个隐藏有更好的方案,详细请访问:
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});
现
在,终于明白了var
id=$("input[name='id']",$(this).parents("form:first")).attr("value");的来龙
去脉。它的意思是在被点击元素最近的父元素开始向外寻找第一个form元素,这个jquery对象就做为前面input[name='id']的范围。实
际上在<form><input type="hidden" name="id" value="$arr[id]"
/><span class="del">删除</span><img
src="images/del.gif" width="16" height="16"
/></form>中,input[name='id']是唯一的,即只有一个name值等于id的input,只有一个。
更多了解请访问:http://www.w3school.com.cn/jquery/core_jquery.asp
那么,在看一下jQuery(selector, [context]),这种用法的第二个用法:克隆 jQuery 对象
在上面例子中有这样一句:$(_tmpQuery.parents('tr:first')).hide();
在其它页面中,有这样的句子:$($(this).parents('form:first')).serialize()。完整代码如下:
[javascript] view plaincopy
//edit event
$(".edit").click(function(){
art.dialog.open('manager_edit_control.php?'+$($(this).parents('form:first')).serialize(),{id:'edit',title:'管理员修改',lock:true,resize:false},false);
});
用法 3 :克隆 jQuery 对象
语法
jQuery(jQuery object)
当以参数的形式向 $() 函数传递 jQuery 对象后,会创建一个该对象的副本。与初始对象一样,新的 jQuery 对象引用相同的 DOM 元素。
完全可以将上面代码改为:
_tmpQuery.parents('tr:first').hide();
$(this).parents('form:first').serialize()
相关文章推荐
- 选择器$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
- jQuery选择器的过滤器,即对选择的结果再进行一个过滤(如我不想要在<div id="test"></div>这里的input控件)
- $("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")
- 属性选择器div[class*="test"]
- 层次选择器当中的 $("ancestor desendant") 与 $("parent>child")的区别
- 【JQuery】parent > child选择器
- jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理续(伪类选择器“PSEUDO”和子伪类选择器"CHILD"原子选择器详解)
- 【mybatis】IF判断的坑 (实现<if test=" status == 'zhangsan'">)
- Caffe部署中的几个train-test-solver-prototxt-deploy等说明<三>
- <div class="article_content tracking-ad" id="article_content" data-mod="popu_307" data-dsm="post"> <
- mybatics中【<if test="takeWay == '0'">】mybatis的if判断
- HTML中显示特殊字符,如尖括号 “<”,">"等等
- &lt;?php echo &quot;&lt;p&gt;test&lt;/p&gt;&quot;;
- 正则表达式- 将div#demo.demo转化成<div id="demo" class="demo"></div>
- jq选择器 $("#myDiv>p") 和 $("#myDiv p")的区别
- 在字符串中使用特殊字符<>"'&空格
- <c:if test="${fn:contains(name, searchString)}">
- mybatis中sql中的特殊符号<trim prefix="" suffix="" suffixOverrides="" prefixOverrides=""></trim>
- Post传值时间特殊字符处理比如 "<p></p>"当作参数传递到后台
- this is a test:::"><img src=hi onerror=alert(document.cookie)>