zoukankan      html  css  js  c++  java

  • 选择器$("parent > child")、$("A B")、$("div#test")、$("div,#test")、$(".test","div")



    目录(?)[+]

    这个标题似乎有些奇怪，但这些都是合法有效的jquery选择器。在这里将他们逻列一起，是因为他们比较容易引起混淆。下面就通过例子来说明他们之间的不同之处。

    $("parent > child")

    1. <div>  
    2.   <span>123</span>  
    3.   <p>  
    4.     <span>456</span>  
    5.   </p>  
    6.   <span>789</span>  
    7. </div>  
    [javascript] view plaincopy
    1. $('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")

    1. <form>  
    2.   <label>Name:</label>  
    3.   <input name="name" value="a" />  
    4.   <fieldset>  
    5.     <label>Newsletter:</label>  
    6.     <input name="newsletter" value="b" />  
    7.   </fieldset>  
    8. </form>  
    9. <input name="a1" value='c' />  
    10. <div>789</div>  
    11. <input name="a2" value='d' />  
    12. <fieldset>  
    13.   <label>Newsletter:</label>  
    14.   <input name="newsletter" value="e" />  
    15. </fieldset>  
    [javascript] view plaincopy
    1. $("form input").css('color', '#FF0000');  
    2. //它也等同于：$("input","form").css('color','#ff0000');这在下面会有讲解  
    3. //也等同于：$("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：

    1. <div>  
    2.   <span class="test">123</span>  
    3.   <p>  
    4.     <span class="test">456</span>  
    5.   </p>  
    6.   <span>789</span>  
    7.   <div class="test">abc</div>  
    8. </div>  
    [javascript] view plaincopy
    1. $("span.test").css('color', '#FF0000');  
    结果如下：

    123

    456

    789
    abc

    例2：

    1. <div>  
    2.   <span class="intro">123</span>  
    3.   <p>  
    4.     <span class="intro demo">456</span>  
    5.   </p>  
    6.   <span>789</span>  
    7.   <div class="demo">abc</div>  
    8. </div>  
    [javascript] view plaincopy
    1. $(".intro.demo") .css('color', '#FF0000');  
    结果如下所示：

    123

    456

    789
    abc

    例3：

    $("div#intro .head")  id="intro" 的 <div> 元素中的所有 class="head" 的元素

    $("div,#test")

    一个双引号中用逗号分隔不同的选择器，称之为并列选择器。

    1. <div>123</span>  
    2. <div style="border:1px solid #ccc;">  
    3.     <span id="test">456</span>  
    4. </div>  
    [javascript] view plaincopy
    1. $('div,#test').css('color', '#FF0000');  
    结果如下图所示：

    将div、id="test"元素设为红色字体。

    $(".test","div")

    这个看似有些奇特，它与上面的并列选择器虽然相似，但有本质的不同。其实这里的第二个参数"div"是限定查找.test的范围。

    先看个简单例子：

    1. <div>  
    2.   <span class="test">123</span>  
    3. </div>  
    4. <span class="test">456</span>  
    [javascript] view plaincopy
    1. $(".test","div").css('color', '#FF0000');  
    结果为：

    123

    456

    在看个稍微复杂一点的例子：

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4. <script language="JavaScript" type="text/JavaScript" src="http://lock.5186.me/js/jQuery1.6.2.js"></script>  
    5. <script>  
    6. $(document).ready(function(){  
    7.   $(".del").click(function(){  
    8.     id=$("input[name='id']",$(this).parents("form:first")).val();  
    9.     alert(id);  
    10.   });  
    11. });  
    12. </script>  
    13. </head>  
    14. <body>  
    15. <table width="100%">  
    16.   <tr style="text-align:center;">  
    17.     <td>1</td>  
    18.     <td>218.11.56.*</td>  
    19.     <td>16:51 2012-10-30</td>  
    20.     <td><form><input type="hidden" name="id" value="1" /><span class="del">删除</span></form></td>  
    21.   </tr>  
    22.   <tr style="text-align:center;">  
    23.     <td>2</td>  
    24.     <td>218.11.56.*</td>  
    25.     <td>16:59 2012-10-30</td>  
    26.     <td><form><input type="hidden" name="id" value="2" /><span class="del">删除</span></form></td>  
    27.   </tr>  
    28. </table>  
    29. </body>  
    30. </html>  
    你会发现，点击不同数据的删除，会弹出当前数据的ID值。

    jQuery()函数有三种用法。利用选择器进行的操作只是其中的一种用法。其语法为：

    jQuery(selector, [context])

    这种用法还包含了四种用法。

    设置选择器环境

    接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器

    一般情况对jquery的选择器的用法，都是做为第一个参数的用法。其实jquery()函数的这种用法还可以传递第二个参数。传递这个参数的目的是将前面选择器限定在context这个环境中。在默认情况下，即不传第二个参数，选择器从文档根部对 DOM 进行搜索（$()将在当前的HTML document中查找DOM元素）；如果指定了第二个参数，如一个DOM元素集或jquery对象，那就会在这个context中查找。

    下面看个例子

    [javascript] view plaincopy
    1. $("div.foo").click(function() {  
    2.     $("span", this).addClass("bar");  
    3. });  
    由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的class。在内部，选择器环境是通过 .find() 方法实现的，因此 $("span", this) 等价于 $(this).find("span")。

    这里结合一下去掉的一个项目做说明：

    1. 下面这个tr有N个，这里只列出一个做为演示  
    2. <tr style="text-align:center;">  
    3.     <td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>  
    4.     <td>$arr[id]</td>  
    5.     <td>$arr[log]</td>  
    6.     <td>$arr[ip]</td>  
    7.     <td>$arr[time]</td>  
    8.     <td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span></form></td>  
    9. </tr>  
    [javascript] view plaincopy
    1. //del event  
    2. $(".del").bind("click",function(event){  
    3.     var _tmpQuery=$(this);//为什么要加上这一句？  
    4.     var id=$("input[name='id']",$(this).parents("form:first")).attr("value");//要关注的就是这一句，获取当前点击“删除”信息的ID  
    5.     art.dialog.confirm('你确认删除该日志吗？',function(){  
    6.         $.post("myRun/managerlog_del.php",{id:id},function(tips){  
    7.             if(tips=='ok'){  
    8.                 art.dialog.tips('成功删除');  
    9.                 $(_tmpQuery.parents('tr:first')).hide();//如果不加第一句，这里用$(_tmpQuery.parents('tr:first')).hide();则不会隐藏。因为这里的this，并不是当前的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试：alert(this.url); 大头爸爸注：现在处理这个隐藏有更好的方案，详细请访问：  
    10.             }else{  
    11.                 art.dialog.tips(tips,5);  
    12.             }  
    13.         });  
    14.         return true;  
    15.     });  
    16. });  
    现在，终于明白了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
    1. //edit event  
    2. $(".edit").click(function(){  
    3.   art.dialog.open('manager_edit_control.php?'+$($(this).parents('form:first')).serialize(),{id:'edit',title:'管理员修改',lock:true,resize:false},false);  
    4. });  

    用法 3 ：克隆 jQuery 对象
    语法
    jQuery(jQuery object)

    当以参数的形式向 $() 函数传递 jQuery 对象后，会创建一个该对象的副本。与初始对象一样，新的 jQuery 对象引用相同的 DOM 元素。
     
    完全可以将上面代码改为：

    _tmpQuery.parents('tr:first').hide();

    $(this).parents('form:first').serialize()
  • 相关阅读:
    java-Math类
    java-Random类
    java-SimpleDateFormat类
    java-Calendar类+
    java-Calendar类
    java-System类
    java-Integer的面试题
    Android中怎么用this
    adapter(转自Devin Zhang）
    实例变量和局部变量
  • 原文地址：https://www.cnblogs.com/xiaohong/p/4610826.html
Copyright © 2011-2022 走看看