• jQuery(2)——选择器


    选择器

    利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为。jQuery的行为规则都必须在获取到元素后才能生效。

    【jQuery选择器的优势】

    (1)简洁的写法;

    (2)支持CSS1到CSS3选择器;

    (3)完善的处理机制;

    【jQuery选择器】

    jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器。

    基本选择器:是jQuery最简单的选择器,通过id、class和标签名等来查找DOM元素。在网页中,id名称只能使用一次,class允许重复使用。详细介绍在《锋利的jQuery》p32。

    层次选择器:通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等。

    过滤选择器:通过特定的过滤规则来筛选出所需的DOM元素,选择器都已冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

    表单选择器:能极其方便地获取到表单的某个或某类型的元素。

    【利用jQuery改写事例】

    给网页中所有的<p>元素添加onclick事件。

    $("p").click(function(){//获取页面中所有的p元素添加单击事件
            //do something
    })

    使一个特定的表格隔行变色

    $("#tb tbody tr:even").css("backgroundColor","#888");
    /*获取id为tb的元素,然后寻找它下面的tbody标签,再寻找tbody下索引值是偶数的tr元素,改变它的背景颜色。css("property","value"):用来设置jQuery对象的样式*/

    对多选框进行操作,输出选中的多选框的个数。

    $("#btn").click(function(){
        //先使用属性选择器,然后用表单对象属性过滤,最后获取jQuery对象的长度
        var items=$("input[name='check']:checked");
        alert("选中的个数为:"+item.length);
    });    

    【选择器中的一些注意事项】

    含有特殊符号的注意事项

    (1)选择器含有“.”、“#”、“(”或“]”等特殊字符。

    不能含有,解决此类错误的方法是使用转义符转义。

    (2)属性选择器的@符号问题。

    不需要在属性前添加@符号,去掉@符号即可。

      【其他选择器】

    jQuery提供的选择器的扩展

    (1)MoreSelectors for jQuery:用于增加更多的选择器。

    (2)Basic XPath:可以让让用户使用基本的XPath。

  • 相关阅读:
    面对苹果的抄袭指责,小米到底有没有抄袭?
    如何用Ajax传一个数组数据
    为何日本人如此重视孩子的早餐问题
    常见编程语言对REPL支持情况小结
    坚持未必都是美德,也可能是无知
    PHP 5.4语法改进与弃用特性
    解决CI框架的Disallowed Key Characters错误提示
    如何抓取开了gzip的网页
    CodeIgniter自带的数据库类使用介绍
    Python内部变量与外部变量
  • 原文地址:https://www.cnblogs.com/wlfsmile/p/5898171.html
Copyright © 2020-2023  润新知