jQuery选择器

jQuery基础教程第2章 选择元素 (部分例子来自w3school)

理解DOM

DOM结构显示工具

• Firefox的Firebug插件
• Safari和Chrome的Web Inspector

使用$()函数

• $是标识符jQuery的别名

避免$标识冲突的方法：

<script src = "prototype.js"></script>
<script src = "jquery.js"></script>
<script>
   jQuery.noConflict();
</script>
<script src = "myscript.js"></script>

 


这样子就可以在自定义脚本通过“$”中使用prototype库了，只是访问jquery时需要使用jQuery调用。

在.ready()中使用“$”的方法：

jQuery(document).ready(function($){
    //在这里“$”可以正常使用
});

简写方法：
jQuery(function($){
    //在这里“$”可以正常使用
});

CSS选择符

• $("p") 选取 <p> 元素。
• $("p.intro") 选取所有 class="intro" 的 <p> 元素。
• $("p#demo") 选取所有 id="demo" 的 <p> 元素。

属性选择符

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

• $("[href]")选取所有带有 href 属性的元素。
• $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
• $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
• $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
• $("[href^='http']") 选取所有 href 值以 "http" 开始的元素。

自定义选择符

• :even偶数行
• :odd 奇数行

jQuery中除了nth-child()从1开始计数，其他都是从0开始计数。nth-child相对于当前元素父元素来计算元素位置。

$('tr:nth-child(odd)')

 


• :contains(Henry)内容选择器，区分大小写，括号里写成henry不一样
• :first第一个子元素
• :last最后一个子元素

表单选择符

• :input
• :button
• :enabled
• :disabled
• :checked
• :selected
• :hidden
• $('input[type="radio"]:checked')
• $('input[type="text"]:disabled')
• :text
• :password
• :button
• :reset
• :submit
• :radio
• :checkbox
• :image
• :file

自定义选择器实例：强大的jQuery自定义选择器:css

/**
 * Created by du on 16/12/10.
 */
!function ($) {
    $.extend($.expr[':'],
        {
            css: function (e, i, m) {
                "use strict";
                var s = eval("(" + m[3] + ")")
                var r = /^[><=!]?=?/;
                for (var c in s) {
                    var t,v
                    s[c] = s[c].replace(r, function (w) {t = w;return ""})
                    if(!t) t="==";
                    if (!m[9]) {
                        var d = $("#_cs");
                        m[9] = d[0] && d || $("<div id='_cs' style='display:none'>").appendTo("body")
                    }
                    m[9].css(c, s[c]);
                    v = m[9].css(c);
                    if (!eval("$(e).css(c)" + t + "v")) {
                        return false
                    }
                }
                return true;
            }
        });
}(jQuery);

Select all elements with red color :

$("#c :css({color:'red'})")
//Select all elements the fontSize of which is greater than or equal to 16px:

 $("#c :css({fontSize:'>=16px'})")
//you can also use operators "=="、">"、"<"、">="、"<="、"!=".

//Select all elements with white color and backgroundColor yellow:

$("#c :css({backgroundColor:'white',color:'yellow'})");
//Select all elements with fontSize 14px under the elements with red color:

$("#c :css({color:'red'}) :css({fontSize:'14px'})")
//All css attributes are supported by ":css" selector.

 

自定义选择器可参考的另一篇文章：jQuery 自定义选择器

DOM遍历方法

//.filter()
$('tr').filter(':even').addClass('alt');
//筛选函数
$('a').filter(function{
    return this.hostname && this.hostname != location.hostname;
}).addClass('external');
//特定元素选择
.next() .nextAll()
.prev() .prevAll()
.siblings()
.addBack() //将自身包括在内
.parent() .child()
//jquery方法连缀可以分行写来提高代码可读性

访问DOM元素

//.get()访问DOM元素属性
var myTag = $('#my-element').get(0).tagName;
//简写
var myTag = $('#my-element')[0].tagName