精华内容
下载资源
问答
  • jQuery的选择器

    2019-06-12 14:56:56
    jQuery的选择器 选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')。 按ID查找 如果某个DOM节点有id属性,利用jQuery查找如下 // 查找<div id="abc">: var div = $('#abc'); #abc以#开头。返回的对象...

    选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')

    按ID查找

    如果某个DOM节点有id属性,利用jQuery查找如下

    // 查找<div id="abc">:
    var div = $('#abc');
    

    #abc#开头。返回的对象是jQuery对象。

    JQuery对象类似数组,它的每个元素都是一个引用了DOM节点的对象。以上面的查找为例,如果idabc<div>存在,返回的jQuery对象如下:

    [<div id="abc">...</div>]
    

    如果idabc<div>不存在,返回的jQuery对象为[]

    JQuery的选择器不会返回undefined或者null,不必在判断if (div === undefined)

    jQuery对象和DOM对象之间可以互相转化:

    var div = $('#abc'); // jQuery对象
    var divDom = div.get(0); // 假设存在div,获取第1个DOM元素
    var another = $(divDom); // 重新把DOM包装为jQuery对象
    

    按tag查找:

    var tagps = $('tagName');//返回所有<tagName>节点
    var tagpsNum =  tagps .length;// 页面有多少个<tagName>节点
    

    class查找:

    注意在class名称前加一个.

    var _search = $('.search');//所有“class=red”的节点
    //<div class="search">.....</div>
    //<p class = "name search"></p>
    

    属性查找

    //找出<name="username"/>
    var username = $('[name =username]');
    

    当属性的值包含空格等特殊字符时,需要用双引号括起来

    支持前缀、后缀查找

    var username = $('[name^=chen]');//以chen开头的Dom的name属性值 name="chengou",name="chenxiang"
    var username = $('[name$=m]');//name的属性值为m结尾的Dom name="chenTom"
    

    多项组合查找

    var password = $('input[name=password]');//找出<input name='password'/>
    var _password= $('input.password');
    

    多项选择:

    多项选择器就是把多个选择器用,组合起来一块选,就是前面所学的左右选择,当要获取多个标签是的选择就是多项选择,一般用,,隔开即可

    $('input,div')//按出现的顺序
    
    展开全文
  • jQuery 的选择器

    2016-11-01 19:39:26
    jQuery 选择器

    一、JQuery的工厂函数 $

        在jQuery中,无论我们使用哪种类型的选择符都需要从一个“$”符号和一对“()”开始。在“()”中通常使用字符串参数,参数中可以包含jiegou任何CSS选择符表达式。下面介绍几种比较常见的用法。
    1)、在参数中使用标记名
    $('div'):用于获取文档中全部的<div>。
    
    2)、在参数中使用ID
    $('#username'):用于获取文档中ID属性值为username的 
    一个元素。
    
    3)、在参数中使用CSS类名
    $('.btn_grey'):用于获取文档中使用CSS类名为btn_grey的
    所有元素。
    

    二、常用的基本选择器

    jQuery 基本选择器 包括 : ID选择器、元素选择器、类名选择器、多种匹配条件选择器 和 通配符选择器。

    1、ID选择器(#id)
    就是利用DOM元素的id属性值来筛选匹配的元素,并以jQuery包装集的形式返回给对象。这就像一个学校中每个学生都有自己的学号一样,学生的姓名是可以重复的但是学号却是不可以的,根据学生的学号就可以获取指定学生的信息。
    ID选择器的使用方法如下:
    $(‘#id’);

    其中,id为要查询元素的ID属性值。例如,要查询ID属性值为user的元素,可以使用下面的jQuery代码:$('#user');
    

    2.元素选择器(element)
    元素选择器 是根据元素名称匹配相应的元素。元素选择器 指向 的是DOM元素的 标记名,也就是说元素选择器是根据元素的标记名选择的。可以把元素的标记名理解成学生的姓名,在一个学校中可能有多个姓名为“老张”的学生,但是姓名为“老王”的学生也许只有一个,所以通过元素选择器匹配到的元素可能有多个,也可能是一个。多数情况下,元素选择器匹配的是一组元素。

    元素选择器的使用方法如下:
    
    $('element');   其中,element为要查询元素的标记名。例如,要查询全部 div  元素,可以使用下面的jQuery代码: 
    $('div');
    

    3.类名选择器(.class)

        类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到。
    
        类名选择器很好理解,在大学的时候大部分人一定都选过课,可以把CSS类名理解为课程名称,元素理解成学生,学生可以选择多门课程,而一门课程又可以被多名学生所选择。CSS类与元素的关系既可以是多对多的关系,也可以是一对多或多对一的关系。简单地说类名选择器就是以元素具有的CSS类名称为条件来查找匹配的元素。
    
    类名选择器的使用方法如下:
    
    $('.class');     
    其中,class为要查询元素所用的CSS类名。
    例如,要查询 使用  CSS  类名为word_orange的元素,可以使用下面的jQuery码          
    $('word_orange');  
    
    
    4.复合选择器(selector1,selector2,selectorN)
    
        复合选择器将多个选择器(可以是ID选择器、元素选择或是类名选择器)组合在一起,两个选择器之间以逗号“,”分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象。
    
    复合选择器的使用方法如下:
    
    $(" selector1,selector2,selectorN");
    
    selector1:为一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。
    selector1:为另一个有效的选择器,可以是ID选择器、无素选择器或是类名选择器等。
    selectorN:(可选择)为任意多个选择器,可以是ID选择器、无素选择器或是类名选择器等。
    
    例如,要查询文档中的全部的<span>标记和使用CSS类myClass的<div>标记,可以使用下面的jQuery代码:
    $('span,div.myClass');
    
    
    5.通配符选择器(*)
    
        所谓的通配符,就是指符号“*”,它代表着页面上的每一个元素,也是说如果使用$('*')将取得页面上所有的DOM元素集合的jQuery包装集。通配符选择器比较好理解,这里就不再给予示例程序。
    

    三、层级选择器 ——(重点)

        所谓的层级选择器,就是根据页面DOM元素之间的父子关系来作为匹配的筛选条件。 下面的代码是最为常用也是最简单的DOM元素结构。
    
            <html>
                <head>  </head>
                <body>  </body>
            </html>
    这段代码页面结构中,html元素是页面上其他所有元素的祖先元素,那么head元素就是html元素的子元素,同时html元素也是head元素的父元素。页面上的head素与<body元素就是同辈元素。也就是说html元素是head元素和body元素的“爸爸”,head元素和body元素是html元素的“儿子”,head元素与body元素是“兄弟”。具体关系如图所示。
    

    HTML基本代码结构元素关系图

      了解了页面上元素的关系后,才能更好的理解jQuery层级选择器。jQuery提供了Ancestor descendan选择器、parent > child选择器、prev + next选择器和prev ~ siblings选择器,下面进行详细介绍。
    

    1.ancestor descendan 选择器

        ancestor descendan选择器中的ancestor代表祖先,descendant代表子孙,用于在给定的祖先元素下匹配所有的后代元素。ancestor descendan选择器的使用方法如下:
    $("ancestor descendant");
    ancestor是指任何有效的选择器。
    descendant是用以匹配元素的选择器,并且它是ancestor所指定元素的后代元素。
    例如,要匹配ul元素下的全部li元素,可以使用下面的jQuery代码:
    $("ul li");
    

    2.parent > child 选择器

        parent > child选择器中的parent代表父元素,child代表子元素,用于在给定的父元素下匹配所有的子元素。使用该选择器只能选择父元素的直接子元素。parent > child选择器的使用方法如下:
    
    $('parent > child');  
    
    parent是指任何有效的选择器。
    
    child是用以匹配元素的选择器,并且它是匹配元素的选择器,并且它是parent元素的子元素。   
    
    例如,要匹配表单中所有的子元素input,可以使用下面的jQuery代码:   
    
    $('form > input');   
    

    3.prev + next选择器

        prev + next选择器用于匹配所有紧接在prev元素后的next元素。其中,prev和next是两个相同级别的元素。prev + next选择器的使用方法如下:  
    
    $('prev + next');   
    
    prev是指任何有效的选择器。   
    
    next是一个有效选择器并紧接着prev选择器。   
    
    例如,要匹配<div>标记后的<img>标记,可以使用下面的jQuery代码:
    $('div + img');      
    

    4.prev ~ siblings选择器

        prev ~ siblings选择器用于匹配prev元素之后的所有siblings元素。其中,prev和siblings是两个相同辈元素。prev ~ siblings选择器的使用方法如下:
    $('prev ~ siblings');     
    
    prev是指任何有效的选择器。    
    
    siblings是一个有效选择器并紧接着prev选择器。     
    
    例如,要匹配div元素的同辈元素ul,可以使用下面的jQuery代码:    
    
    $('div ~ ul');     
    

    四、过滤选择器

        过滤选择器包括简单过滤器、内容过滤器、可见性过滤器、表单对象属性过滤器和子元素选择器等。下面进行详细介绍。   
    
        1.简单过滤器    
    
        简单过滤器是指以冒号开头,通常用于实现简单过滤效果的过滤器。例如,匹配找到的第一个元素等。  提供的过滤器如表所示。     
    

    jQueryjQuery 过滤选择器--简单过滤器

        2.内容过滤器    
    
        内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。
        内容过滤器共包括:contains(text)、 :empty 、 :has(selector)和    :parent   4种,如表所示。      
    

    jQuery过滤选择器---内容过滤器

        3.可见性过滤器  
    
        元素的可见状态有两种,分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此,可见性过滤器也有两种,一种是匹配所有可见元素的:visible过滤器,另一种是匹配所有不可见元素的:hidden过滤器。      
    
        4.表单对象的属性过滤器          
    
        表单对象的属性过滤器通过表单元素的状态属性(例如选中、不可用等状态)匹配元素,包括: checked过滤器、   :disabled过滤器  、  :enabled过滤器和    :selected过滤器4种,如表所示。      
    

    jQuery过滤选择器-表单对象的属性过滤器

    5、子元素选择器

        子元素选择器就是筛选给定某个元素的子元素,具体的过滤条件由选择器的种类而定。jQuery提供的子无素选择器如表所示。   
    

    这里写图片描述

    五、属性选择器

        属性选择器就是通过元素的属性作为过滤条件进行筛选对象。jQuery提供的属性选器如表所示。
    

    jQuery属性选择器

    六、表单选择器

        表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。jQuery提供的表单选择器如表所示。
    

    这里写图片描述

    展开全文
  • JQuery的选择器

    2016-09-29 21:44:05
    JQuery选择器 JQuery选择器类似于CSS选择(定位元素,施加样式),能够实现定位元素,施加行为 使用JQuery选择器能够将内容与行为分离选择器种类:基本选择器 层次选择器 过滤选择器 表单选择器可以参考JQuery...

    JQuery选择器
    JQuery选择器类似于CSS选择(定位元素,施加样式),能够实现定位元素,施加行为
    使用JQuery选择器能够将内容与行为分离

    选择器种类:

    基本选择器
    层次选择器
    过滤选择器
    表单选择器

    可以参考JQuery文档

    基本选择器

    元素选择器:依据标签名定位元素

    $(“标签名”);

    类选择器:根据class属性定位元素

    $(“.class属性名”);

    id选择器:根据id属性定位元素

    $(“#id”);

    选择器组:定位一组选择器所对应的所有元素
    $(“#id,.importent”);

    这里写图片描述

    这里写图片描述

    组合

    这里写图片描述

    基本选择器确实和css类似

    层次选择器

    在select1元素下,选中所有满足select2的子孙元素

    $(“select1 select2”)

    在select1元素下,选中所有满足select2的子元素

    $(“select1 > select2 ”)

    选中select1元素的满足select2的下一个弟弟

    $(“select1 + select2 ”)

    选中select1元素的,满足select2的所有弟弟

    $("select1~select2")

    例如: $("#d1 .importent")

    这里写图片描述

    过滤选择器:

    基本过滤选择器

    根据元素的基本特征定位元素,常用于表格和列表
    first:  第一个元素
    last:   最后一个元素
    not(selector)  把selector排除在外
    even:   挑选偶数行
    odd:    挑选奇数行
    eq(index):下标等于index的元素
    gt(index): 下标大于index的元素
    lt(index): 下标小于index的元素

    如:

    $("tr:first")

    对table的操作。

    可以获取第一个tr

    这里写图片描述

    这里写图片描述

    odd获取奇数行,但是是从0开始的!!!

    这里写图片描述

    获取偶数:

    这里写图片描述

    获取固定的下标,同样也是从0开始的。

    这里写图片描述

    获取小于这个下标的。lt 
    这里写图片描述

    not是筛选,里面写#id,然后返回的就是排除掉这个id的。

    内容过滤选择器

    根据文本内容定位元素
    :contains(text)匹配包含给定文本的元素
    :empty         匹配所有不包含子元素或者文本的空元素

    如:
    $("p:contains('月饼')")

    这里写图片描述

    可见性过滤选择器

    根据可见性定位元素
    :hidden     匹配所有不可见元素,或type为hidden的元素
    :visible    匹配所有的可见元素

    如:
    $("input:hidden")

    这里写图片描述

    记住选择器的功能,实现功能时,想到可以用什么选择器

    属性过滤器

    根据属性定位元素
    [attribute]   匹配具有attribute属性的元素
    [attribute = vale]  匹配属性等于value的元素
    [attribute!=vale]   匹配属性不等于value的元素
    如:

    $("input[value="你好"]")

    选出带有id属性的div

    这里写图片描述

    状态过滤选择器

    根据状态定位元素
    :enabled     匹配可用的元素
    :disabled    匹配不可用的元素
    :checked     匹配选中的checkbox
    :selected    匹配选中的option

    如:
    $("input:selected")

    <input type="text" value="中国" disabled />

    这个disabled是文本框不可用,就不能改了

    可以根据文本框的状态来选择

    这里写图片描述

    选中!

    这里写图片描述

    表单选择器

    包括:
    :text 匹配文本框
    :password 匹配密码框
    :radio 匹配单选框
    :checkbox 匹配多选框
    :submit 匹配提交按钮
    :reset 匹配重置按钮
    :button 匹配普通按钮
    :file 匹配文件框
    :hidden 匹配隐藏框
    $(“:text”)

    这里写图片描述

    JQ实现图片轮播:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQ版图片轮播</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    var index =0;//记录循环次数
        function start(){
            setInterval(function(){
                //将显示的图片隐藏,:visible
                $("li:visible").hide();
                //将下一张图片显示
                $("li:eq("+(++index%$("li").length)+")").show();
                },1000);
            }
    </script>
    <style type="text/css">
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .show {
        display: block;
    }
    .hide {
        display: none;
    }
    </style>
    </head>
    
    <body onload="start();">
    <ul id="photos">
      <li class="show"><img src="2.jpg" /></li>
      <li class="hide"><img src="3.jpg" /></li>
    </ul>
    </body>
    </html>
    展开全文
  • jquery的选择器

    2011-06-19 12:42:00
    jquery的选择器其实借鉴了css的选择器jQuery选择器的分类–基本选择器 (basic)Basic–层次选择器 (level)Hierarchy–过滤选择器 (filter)–表单选择器 (form)这个可以参看帮助文档,英文帮助文档如下过滤选择...

    jquery的选择器其实借鉴了css的选择器

    jQuery选择器的分类
    –基本选择器 (basic)Basic
    –层次选择器 (level)Hierarchy
    –过滤选择器 (filter)
    –表单选择器 (form)

    这个可以参看帮助文档,英文帮助文档如下

    过滤选择器
    –基本过滤
    –内容过滤
    –可见性过滤
    –属性过滤
    –子元素过滤
    –表单对象属性过滤

    过滤选择器其实就是从一堆元素里面过滤出满足条件的来.读法从后读到前:$("input:not(.myClass)")选取所有class不是myClass的<input>元素.
    jquery中$(document).ready(function(){});$().ready(function(){});$(function(){})的写法都是一样的意思

     

    表单选择器和表单对象属性过滤都放在了FORM这个文档里面了.

     

    注意一点:


    $("select option:selected")这个要注意哦:匹配所有选中的option元素,而这样写:$("select :selected")中间是要有空格的,为什么?这个意思是说匹配select下的所有的:selected的元素,这个是从前往后读的,属于层次选择器中的.而如果不用空格$("select:selected"),则是表单对象属性中的选择器

    展开全文
  • Jquery的选择器

    千次阅读 2013-06-19 08:51:08
    1、选择器的使用:     基本选择器: #id(根据给定ID匹配一个元素)、element(根据给定元素名匹配所有元素)、.class(根据给定类匹配元素)、*(匹配所有元素)、selector1,selectorN(将每个选择...
  • jquery的选择器概述

    千次阅读 2020-09-18 09:13:05
    jquery的选择器概述 (1)选择器是什么? $() 特殊的”函数”,不同的字符串参数(代表不同的规则),执行之后可以获取页面的符合条件的元素返回 (2)选择器分类 基本选择器 层级选择器 属性选择器 基本过滤...
  • jQuery的选择器大全

    千次阅读 多人点赞 2018-08-11 17:15:38
    jQuery的选择器  一、 基本选择器  1. ID选择器  ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。  使用公式:$("#id")  示例:$("#box") /...
  • jQuery的选择器分类都有哪些? 根据所获取页面中元素的不同,可以将jQuery选择器分为四大类:基本选择器、层次选择器、过滤选择器、表单选择器。其中在过滤选择器中又可分为:简单过滤选择器、内容过滤选择器、可见...
  • 封装类似jQuery的选择器

    千次阅读 2017-11-02 17:37:42
    封装类似jQuery的选择器在也可以很轻
  • jquery的选择器的9种类型

    千次阅读 2018-06-08 11:23:32
    jquery的选择器有9种类型 (1)基本 #id element .class selector1,selector2,selectorN (2)层次选择器: ancestor descendant parent &gt; child prev + next prev ~ siblings (3)基本过滤器...
  • jQuery的选择器举例

    千次阅读 2012-05-11 16:46:11
    jQuery的选择器非常强大,其实是完全借鉴了CSS的选择器,有类选择器,ID选择器,标签选择器,还有其他的很多 层次选择器,等等,下面我们列举一下他们。 Jquery的基本选择器 $(document).ready...
  • JQuery的选择器使用

    2013-03-13 16:48:28
    一个优秀的Javascript库必定要有一个强大...JQuery的选择器使用的是CSS的风格,学习起来也是非常的方便.   这次先介绍简单的基本的一些选择器   1.基本选择器 (1) #id 根据ID选取页面元算,相当于docume
  • jQuery的选择器中的通配符 1.选择器 (1)通配符:  $("input[id^='code']");//id属性以code开始的所有input标签  $("input[id$='code']");//id属性以code结束的所有input标签  $("input...
  • jQuery的选择器主要有三大类,即CSS3的基本选择器,CSS3的位置选择器和过滤选择器。 基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素 改变 ...
  • JS与Jquery的选择器

    千次阅读 2020-04-07 22:32:11
    文章目录一、JS的基本选择器1、ID选择器 document.getElementById()2、类选择器 document.getElementsByClassName()3、Name选择器 document.getElementsByName()4、标签名...JS中原生的选择器主要有以下四种 docu...
  • jQuery的选择器和筛选器

    万次阅读 2018-03-25 18:18:34
    jQuery基本选择器: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/...
  • JQuery的选择器对控件ID含有特殊字符的解决方法 jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素。但是:当id含有特殊字符的时候,是不能选中的。 自己简单的测试了下,jquery的...
  • jQuery的选择器分类

    千次阅读 2018-06-08 16:39:24
    1.基本选择器$("#id") //ID选择器$("div") //元素选择器$(".classname") //类选择器$(".classname,.classname1,#id1") //组合选择器2.层次选择器 $("#id&gt;....
  • jQuery的选择器性能

    2014-09-24 09:07:42
    发现自己经常在涉及到jQuery选择器性能时候犯迷糊,已。
  • 3.jquery的选择器语法

    2020-05-01 10:56:34
    jquery中只有三种选择器 二、基本选择器 1、定位条件 可以根据ID编号,根据标签类型名,根据Class名(和CSS一样都是三种) 2、选择器的使用(第四种几乎不用) $("#idname") 代替document.getElementById(“idname”)...
  • jQuery 常规选择器 1.简单选择器 2.进阶选择器 3.高级选择器 4.属性选择器 一.简单选择器  ID 类(class) 二.进阶选择器  群组选择器 $('ul,li,a') 选取页面标签为 ul,li,a对象集合 后代选择
  • [重要]jQuery的选择器

    2014-08-08 09:46:49
    jQuery的属性选择器配合类、id选择器后代选择器的shiy
  • jQuery的选择器原理

    2018-03-18 16:33:00
    建立一个$函数,通过传元素名称前缀来判断选取元素类型,名称来选取元素,并进行相应操作,如改变属性,元素内容,以及css样式function $(selected){ //alert(selected); //获取要得到对象标识 var ...
  • JQuery的选择器样式会被CSS覆盖

    千次阅读 2011-02-03 13:20:00
    JQuery的选择器样式会被CSS覆盖。例如,我在css样式表中定义了一个td的背景颜色为红色,但是如果我在JQuery里面设置其为绿色。在IE里面运行的时候,JQuery的设置对页面不起效果。
  • jQuery的可见性选择器是根据元素的可见和不可见状态来选择相对应的元素。主要有两个:可见:visible和不可见:hidden。今天我们主要来学习这两个选择器的使用。先来看一个HTML结构,方便学习这两个选择器的使用: div ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,933
精华内容 10,373
关键字:

jquery的选择器