• jQuery的选择器


    1、首先是JavaScript的DOM 和 jQuery包装集的区分

    1.1、在JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有:

    document.getElementById("ID"):根据ID获取DOM对象。

    document.getElementsByName("name"):根据HTML标记name属性获取一个DOM数组。

    document.getElementsByTagName("Tag"):根据HTML的Tag获取一个DOM数组。

    1.2、jQuery相对DOM则提供了许多可用的方法和属性。

     jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式,它的书写方式和css3.0相似 id用#class(css)用.HTMl Tag则直接书写

    1.3、JavaScript的DOM对象转可以化为jQuery包装集:通过$(element)赴会就为jQuery包装集。

    只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
    普通的dom对象一般可以通过$()转换成jquery对象。
    如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
    由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
    如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
    以下几种写法都是正确的:
    $("#msg").html();
    $("#msg")[0].innerHTML;
    $("#msg").eq(0)[0].innerHTML;
    $("#msg").get(0).innerHTML;

    2、jQuery提供了一个万能的属性选择器。

    2.1基本选择器

    选择表达式

    说明

    举例

    #id

    根据给定的id匹配一个元素用#

    $("#testDiv2")  获取id为testDiv2的元素

    .class

    根据给定的类匹配元素(也就是取class的值)用.

    $(".myDiv")    获取class为myDiv的一组元素

    element

    根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)

    $("div")    获取所有的div元素

    selector1,selector2,selectorN

    将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开

    $("#testDiv2,p")

    $("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素

    *

    选择所有的元素

    $("*")

    2.2简单选择器

    选择表达式

    说明

    举例

    :first

    匹配找到的第一个元素

    $("div:first")

    :last

    匹配找到的最后一个元素

    $("div:last")

    :eq(index)

    匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始

    $("div:eq(1)")

    :gt(index)

    匹配所有大于给定索引值的元素

    $("div:gt(0)")    查找第1个以后的元素

    :lt(index)

    匹配所有小于给定索引值的元素

    $("div:lt(2)")     查找第一行和第二行的元素

    :even

    匹配所有索引值为偶数的元素,从0 开始计数

    $("div:even") 
    查找第1,3,5个div

    :odd

    匹配所有索引值为奇数的元素,从0 开始计数

    $("div:odd") 
    查找第2,4个div

    :not(selector)

    去除所有与给定选择器匹配的元素
    selector为表达式,可以是属性里面的一个值

    $("input:not(:checked)") 
    查找所有未选中的input 元素[注:checked为自定义筛选选择器,后面会讲到]

    :header

    匹配如 h1, h2, h3之类的标题元素

    $(":header").css("background", "#EEE"); 
    添加样式

    :animated

    匹配所有正在执行动画效果的元素

    暂无例子

    2.3内容选择器

    选择表达式

    说明

    举例

    :contains(text)

    匹配包含给定文本的元素,只要里面出现即可

    $("p:contains('段落')") 
    找带有段落字样的p元素

    :empty

    匹配所有不包含子元素或者文本的空元素

    $("div:empty")

    :has(selector)

    匹配含有选择器所匹配的元素的元素

    $("div:has('p')")

    :parent

    匹配含有子元素或者文本的元素

    $("div:parent")

    2.4子元素选择器

    选择器

    说明

    举例

    :first-child

    匹配第一个子元素

    $("ul li:first-child")//在每个 ul 中查找第一个 li

    :last-child

    匹配最后一个子元素

    $("ul li:last-child")//在每个 ul 中查找最后一个 li

    :nth-child(index/even/odd/equation)

    匹配其父元素下的第N个子或奇偶元素

    ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

    可以使用:
    nth-child(even)//偶数行

    :nth-child(odd)//奇数行
    :nth-child(3n)
    :nth-child(2)//索引为2的
    :nth-child(3n+1)
    :nth-child(3n+2)

    $("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

    :nth-child(index/even/odd/equation)

    匹配其父元素下的第N个子或奇偶元素

    $("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

    :only-child

    如果某个元素是父元素中唯一的子元素,那将会被匹配

    如果父元素中含有其他元素,那将不会被匹配。

    $("ul li:only-child")//在 ul 中查找是唯一子元素的 li

    2.5:可见性选择器

    选择器

    说明

    举例

    :hidden

    匹配所有的不可见元素,input 元素的 type属性为 "hidden" 的话也会被匹配到

    $("div:hidden")

    :visible

    匹配所有的可见元素

    $("div:visible")//元素来匹配

    $(".divH:visible")//根据class来匹配

  • 相关阅读:
    Asp.Net构架(Http请求处理流程)、(Http Handler 介绍)、(HttpModule 介绍)
    JQuery中的事件(三)
    关于asp.net mvc中的httpModules 与 httpHandler
    jQuery中的CSS(二)
    JQuery选择器(一)
    JavaScript中利用Ajax 实现客户端与服务器端通信(九)
    JavaScriptDom操作与高级应用(八)
    oracle(二)V$lock 视图中ID1 , ID2 列的含义
    关于static、内部类
    oracle(一)复习起航
  • 原文地址:https://www.cnblogs.com/Kevin-mao/p/5711291.html
Copyright © 2020-2023  润新知