zoukankan      html  css  js  c++  java
  • jQuery第二章

    一、jQuery选择器

    jQuery的行为规则都必须在获取到元素后才能生效。来看一个简单的例子:

             <p class = “demo”>jQuery Demo</p>

             <script type = “text/javascript”>

                      $(“.class”).click(function(){

            alert(“jQuery demo!”);

          })

    本段代码的作用是为<p>元素设置一个onclick事件,当单击此元素时,会弹出一个对话框。

    二、jQuery选择器

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

    (1)基本选择器:

             基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id、class和标签名等来查找DOM元素。在网页中,每个id名称只能使用一次,class允许重复使用。基本选择器的介绍说明如下:

    $(“#test”)选取id为test的元素

    $(“.test”)选取所有class为test的元素

    $(“p”)选取所有的<p>元素

    $(“div,span,p.myClass”)选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素

    (2)层次选择器:

             如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素、子元素、相邻元素和同辈元素等,那么层次选择器是一个非常好的选择。层次选择器的介绍说明如下:

    $(“div span”)选取<div>里的所有的<span>元素

    $(“div > span”)选取<div>元素下元素名是<span>的子元素

    $(“.one + div”)选取class为one的下一个<div>同辈元素

    $(“#two ~ div”)选取id为two的元素后面的所有<div>同辈元素

    可以使用next()来代替$(“prev+next”)选择器,例如

    $(“ .one + div ”);等价于$(“ . one ”). next(“ div ”) ;

    可以使用nextAll()来代替$(“prev ~ siblings”)选择器,例如

    $(“ #prev ~ div”)等价于$(“ #prev ”).nextAll(“div”) ;

             siblings()方法与$(“prev ~ siblings”)选择器的对比:

    $(“prev ~ div”)选择器只能选择“prev”元素后面的同辈<div>元素。而      sibling()方法与前后位置无关,只要是同辈节点就能匹配。

    (3)过滤选择器:

             过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,即选择器都以一个冒号:开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

    ①基本过滤选择器

    :first 选取第一个元素,例如:$(“div : first”)选取所有<div>元素中第1个<div>元素

    :last 选取最后一个元素,例如:$(“div : last”)选取所有<div>元素中最后一个<div>元素

    :not(selector) 去除所有与给定选择器匹配的元素,例如:$(“input : not(myClass)”)选取class不是myClass的<input>元素

    :even 选取索引是偶数的所有元素,索引从0开始,例如:$(“input : even”)选取索引是偶数的<input>元素

    :odd 选取索引是奇数的所有元素,索引从0开始,例如:$(“input : odd”)选取索引是奇数的<input>元素

    :eq(index) 选取索引等于index的元素(index从0开始),例如:$(“input : eq(1)”)选取索引等于1的<input>元素

    :gt(index) 选取索引大于index的元素(index从0开始),例如:$(“input : gt(1)”)选取索引大于1的<input>元素(注,大于1而不包括1)

    :lt(index) 选取索引小于index的元素(index从0开始),例如:$(“input : lt(1)”)选取索引小于1的<input>元素(注,小于1而不包括1)

    :header 选取所有的标题元素,例如h1,h2,h3等等 ,例如:$(“:header”)选取网页中所有的<h1>,<h2>,<h3>……

    :animated 选取当前正在执行动画的所有元素,例如:$(“div : animated”)选取正在执行动画的<div>元素

    :focus 选取当前获取焦点的元素 $(“: focus”)选取当前获取焦点的元素

    ②内容过滤选择器:

    :contains(text) 选取含有文本内容为”text”的元素,例如:$(“div : contains(‘我’)”)选取不包含子元素的<div>元素

    :empty 选取不包含子元素或者文本的空元素,例如:$(“div : empty”)选取不包含子元素的<div>空元素

    :has(selector)选取含有选择器所匹配的元素的元素,例如:$(“div : has(p)”)选取含有<p>元素的<div>元素

    :parent选取含有子元素或者文本的元素,例如:$(“div : parent”)选取拥有子元素的<div>元素

    ③可见性过滤选择器

    :hidden 选取所有不可见的元素,例如:$(“: hidden”)选取所有不可见的元素。包括<input type=”hidden”/>,<div style=”display : none;”>和<div style=”visibility : hidden;”>等元素。如果只想选取<input>元素,可以使用$(“input : hidden”)

    :visible 选取所有可见的元素,例如:$(“div : visible”)选取所有可见的<div>元素

    ④属性过滤选择器

    属性过滤选择器的过滤规则是通过属性来获取相应的元素。

    [attribute]选取拥有此属性的元素,例如:$(“div[id]”)选取拥有属性id的元素

    [attribute=value]选取属性的值为value的元素,例如:$(“div[title = test]”)选取属性title为“test”的元素

    [attribute!=value]选取属性的值不等于value的元素,例如:$(“div[title!=test]”)选取属性title不等于“test”的<div>元素

    [attribute^=value]选取属性的值以value开始的元素,例如:$(“div[title^=test]”)选取属性title以“test”开始的<div>元素

    [attribute$=value]选取属性的值含以value结束的元素,例如:$(“div[title$=test]”)选取属性title以“test”结束的<div>元素

    [attribute*=value]选取属性的值含有value的元素,例如:$(“div[title*=test]”)选取属性以“test”结束的<div>元素

    [attribute|=value]选取属性等于给定字符串或以该字符串为前缀(该字符串后跟一个连字符“-”)的元素,例如:$(“div[title|=”en”]”)选取属性title等于en或以en为前缀(该字符串后跟一个连字符‘-’)的元素

    [attribute~=value]选取属性用空格分隔的值中包含一个给定值的元素,例如:$(“div[title~=”uk”]”)选取属性title用空格分隔的值中包含字符uk的元素

    [attribute1][attribute2][attributeN]用属性选择器合并成一个符合属性选择器,满足多个条件。每选择一次,缩小一次范围,例如:$(“div[div][title$=’test’]”)选取拥有属性id,并且属性title以“test结束的<div>元素”

    ⑤子元素过滤选择器

    :nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素(index从1算起),例如::eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起的。

    :first-child选取每个父元素的第1个子元素,:first-child选择符将为每个父元素匹配第1个子元素,例如:$(“ul li:first-child”);选取meige<ul>中第1个<li>元素

    :last-child选取每个父元素的最后一个子元素,同样,:last只返回单个元素,而:last-child选取将为每个父元素匹配最后一个子元素,例如:$(“ul li:last-child”);选择每个<ul>中最后一个<li>元素

    :only-child如果某个元素是它父元素中唯一的子元素,那么将会被匹配。如果父元素中含有其他元素,则不会被匹配,例如:$(“ul li : only-child”)在<ul>中选取时唯一子元素的<li>元素

    ⑥表单对象属性过滤性选择器

    :enabled选取所有可用元素,例如:$(“#form1 : enabled”)选取id为”form1”的表单内的所有可用元素

    :disabled选取所有不可用元素,例如:$(“#form2 : disabled”)选取id为“form2”的表单内的所有不可用元素

    :checked选取所有被选中的元素(单选框,复选框),例如:$(“input : checked”)选取所有被选中的<input>元素

    :selected选取所有被选中的选项元素(下拉列表),例如:$(“select option : selected”)选取所有被选中的选项元素

    (4)表单选择器

    表单对象属性过滤示例

    :input选取所有的<input>、<textarea>、<select>、<button>元素,例如:$(“:input”)选取所有<input>、<textarea>、<select>、<button>元素

    :text选取所有的单行文本框,例如:$(“:text”)选取所有的单行文本框

    :password选取所有的密码框,例如:$(“:password”)选取所有的密码框

    :radio选取所有的单选框,例如:$(“:radio”)选取所有的单选框

    :checkbox选取所有的多选框,例如:$(“:checkbox”)选取所有的多选框

    :submit选取所有的提交按钮,例如:$(“:submit”)选取所有的提交按钮

    :image选取所有的图像按钮,例如:$(“:image”)选取所有的图像按钮

    :reset选取所有的重置按钮,例如:$(“:reset”)选取所有的重置按钮

    :button选取所有的按钮,例如:$(“:button”)选取所有的按钮

    :file选取所有的上传域,例如:$(“:file”)选取所有的上传域

    :hidden选取所有不可见元素,例如:$(“:hidden”)选取所有不可见元素

  • 相关阅读:
    最快速度找到内存泄漏
    PostMessage与SendMessage各自的问题
    分享一个javascript alert精简框架
    SendMessage、PostMessage原理
    八款常用的 Python GUI 开发框架推荐
    大学学物理将来到底能干什么?
    私有虚函数的特点(C++和Java的机制还有所不同)
    BS与CS的比较
    Eclipse代码自动提示设置
    打印TMemo的内容到打印机
  • 原文地址:https://www.cnblogs.com/koto/p/5161496.html
Copyright © 2011-2022 走看看