xdxxdx
www.xdxxdxxdx.com
jquery常用选择器

1.按id寻找

var selector=$('#div_id');

2.按class寻找

var selector=$('.div_class');

3.按照tag寻找

    $(function(){
            var selector=$('div');
            console.log(selector.length);
            selector.each(function(i){
                console.log($(this).html());
            });
        });

 4.按照多个class寻找,查找同时拥有class1和class2的元素，注意中间没有空格

<div class="div_class1 div_class2">div_class</div>
var selector=$('.div_class1.div_class2');

5.除了id和class还有其他属性，我们可按其他属性来查找

--是否拥有某属性

<input  type="text" value="input1"></input>
<input type="password" value="input2"></input>
------------------------------------------------------
        var selector=$('[type]');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                console.log(_this.val());
            });
        });

--是否拥有某属性且某属性为特定值

    $(function(){
            var selector=$('[type="text"]');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                console.log(_this.val());
            });
        });

--前缀查找：查找所有class属性以div打头的元素

<div class="div_class1">div_class1</div>
<div class="div_class2 ">div_class2</div>
-------------------------------------------------
    $(function(){
            var selector=$('[class^="div"]');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                console.log(_this.html());
            });
        });

--后缀查找

<div class="div1_d">div1_d</div>
<div class="div2_d">div2_d</div>
-----------------------------------------------
    $(function(){
            var selector=$('[class$="d"]');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                console.log(_this.html());
            });
        });

6.组合查找，组合查找就是多种方式组合来查找，不需要使用空格隔开，组合查找是一种取交集的方式。

--tag和class组合，查找tag为input且class为class1的元素

<div class="class1">div1_d</div>
<input class="class1"  type="text" value="input1"></input>
-------------------------------------------------------------------
    $(function(){
            var selector=$('input.class1');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                console.log(_this.val());
            });
        });

--tag和属性组合，查找tag为div且包含了name属性的元素

<div class="class1" name="name1">div1_d</div>
<div class="class2">div2_d</div>
----------------------------------------------------------
    $(function(){
            var selector=$('div[name]');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                console.log(_this.html());
            });
        });

7.多选择器，与组合选择器相对应，是一种取并集的方式，各选择器之间用，隔开。注意的是取并的结果不会有重复的元素。

--选择tag为div加上class为class1的元素,得到的是三个元素，需要注意的是tagName是原生的js的方法，所以需要用_this[0]

<div class="class1" name="name1">div1_d</div>
<div class="class2">div2_d</div>
<input class="class1"  type="text" value="input1"></input>
---------------------------------------------------------------------
    $(function(){
            var selector=$('div,.class1');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else{
                    console.log(_this.val());
                }
            });
        });

8.层级选择器

与组合选择器不一样，层级选择器的祖先和后代之间是用空格隔开的。这里的层级只需要满足祖先与后辈就可以，并不要求一定是父子关系。

--两层，由于div和ul都是li的祖先，所以这两种做法都可以。

<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>
------------------------------------------------------------
    <script>
        $(function(){
            var selector=$('ul.lang li.lang-javascript');
            //var selector=$('div.testing li.lang-javascript');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else if(_this[0].tagName=="INPUT"){
                    console.log(_this.val());
                }else{
                    console.log(_this.text());
                }
            });
        });
    </script>

--多层

    <div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ul class="lang2">
        <li class="lang-javascript">JavaScript2</li>
        <li class="lang-python2">Python</li>
        <li class="lang-lua2">Lua</li>
    </ul>
</div>
--------------------------------------------------------------------
    <script>
        $(function(){
            //var selector=$('ul.lang li.lang-javascript');
            var selector=$('div ul.lang li.lang-javascript');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else if(_this[0].tagName=="INPUT"){
                    console.log(_this.val());
                }else{
                    console.log(_this.text());
                }
            });
        });
    </script>

9.子选择器

与层级选择器的区分在于要求两个元素之间是父子的关系。此时用>代替空格。下面的例子中第一条语句可以，第二条语句就不行了，因为div与li并非父子关系

    <div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ul class="lang2">
        <li class="lang-javascript">JavaScript2</li>
        <li class="lang-python2">Python</li>
        <li class="lang-lua2">Lua</li>
    </ul>
</div>
-------------------------------------------------------------------------
    <script>
        $(function(){
            var selector=$('ul.lang>li.lang-javascript');
            //var selector=$('div>li.lang-javascript');
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else if(_this[0].tagName=="INPUT"){
                    console.log(_this.val());
                }else{
                    console.log(_this.text());
                }
            });
        });
    </script>

10.过滤器

过滤器是在原来的选择器之后加一个冒号，冒号的后面为过滤的规则，还是以上述例子来讲

$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

11.表单相关

表单相关是针对表单的过滤器

  • :input：可以选择<input>，<textarea>，<select>和<button>；如$('div :input')为查询div下所有的input类型表单。

  • :file：可以选择<input type="file">，和input[type=file]一样；

  • :checkbox：可以选择复选框，和input[type=checkbox]一样；

  • :radio：可以选择单选框，和input[type=radio]一样；

  • :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；

  • :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；

  • :enabled：可以选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；

  • :disabled：和:enabled正好相反，选择那些不能输入的。

　$('div:visible'); // 所有可见的div
  $('div:hidden'); // 所有隐藏的div
　判断checkbox是否选中， $(':checkbox').is(':checked');
　判断selectbox是否选中：is(':selected')

 12.查找

查找指的是在现有的选择器的基础上运用一些函数（如find(),parents(),next(),prev()）进行进一步的查找。这些函数里面同样可以加选择器。

--find()用于在原来的选择器结果的子节点中进一步查找。非常注意，是在第一个选择器的子节点中使用find继续查找。而不是针对第一个选择器本身。

    <div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ul class="lang2">
        <li class="lang-javascript">JavaScript2</li>
        <li class="lang-python2">Python</li>
        <li class="lang-lua2">Lua</li>
    </ul>
</div>
-----------------------------------------------------------------
    <script>
        $(function(){
            var ul=$('div ul.lang');
            console.log(ul.length);
            var selector=ul.find(".lang-javascript");
            //var selector=ul.find(":first-child");
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else if(_this[0].tagName=="INPUT"){
                    console.log(_this.val());
                }else{
                    console.log(_this.text());
                }
            });
        });
    </script>

--parent()则与find()正好相反，是在该选择器的父节点中寻找。下面的第一条语句查找到两个ul，第二条语句过滤了，所以只查到第一个ul。parents不止选择直接的父级节点，它是一直遍历到祖先节点。

    <div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ul class="lang2">
        <li class="lang-javascript">JavaScript2</li>
        <li class="lang-python2">Python</li>
        <li class="lang-lua2">Lua</li>
    </ul>
</div>
-----------------------------------------------------------------------
    <script>
        $(function(){
            var li=$('.lang-javascript');
            var selector=li.parent();
            //var selector=li.parent(".lang");
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else if(_this[0].tagName=="INPUT"){
                    console.log(_this.val());
                }else{
                    console.log(_this.text());
                }
            });
        });
    </script>

--next()和prev()这是针对同级节点而言的，分别是指下一个元素和上一个元素。下面的第一条有两个元素（Python和Python2），第二条因为过滤了只有一个元素（Python）

    <div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ul class="lang2">
        <li class="lang-javascript">JavaScript2</li>
        <li class="lang-python2">Python2</li>
        <li class="lang-lua2">Lua</li>
    </ul>
</div>
-------------------------------------------------------------
    <script>
        $(function(){
            var li=$('.lang-javascript');
            //var selector=li.next();
            var selector=li.next(".lang-python");
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else if(_this[0].tagName=="INPUT"){
                    console.log(_this.val());
                }else{
                    console.log(_this.text());
                }
            });
        });
    </script>

13.过滤

过滤主要用到两个方法filter()和map().

--filter()是在原有的查找的结果（这也是过滤跟上述查找的区别）中进行过滤，得到子集。以下代码先得到两个ul下的li集合（总共6个li）,然后从这6个中找出class为lang-javascript的元素（有两个JavaScript和JavaScript2）

    <div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ul class="lang2">
        <li class="lang-javascript">JavaScript2</li>
        <li class="lang-python2">Python2</li>
        <li class="lang-lua2">Lua2</li>
    </ul>
</div>
------------------------------------------------------------------
    <script>
        $(function(){
            var li=$('ul li');
            var selector=li.filter(".lang-javascript");
            console.log(selector.length);
            selector.each(function(i){
                var _this=$(this);
                if(_this[0].tagName=="DIV"){
                    console.log(_this.html());
                }else if(_this[0].tagName=="INPUT"){
                    console.log(_this.val());
                }else{
                    console.log(_this.text());
                }
            });
        });
    </script>

也可以用回调函数的方式来定义filter中的规则，this为dom对象。

var langs = $('ul.lang li'); // 拿到JavaScript, Python,Lua
langs.filter(function () {
 return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
 }); //

--map

map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Lua
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array：['JavaScript', 'Python', 'Lua']

--first()、last()和slice()

一个jQuery对象如果包含了不止一个DOM节点，first()、last()和slice()方法可以返回一个新的jQuery对象，把不需要的DOM节点去掉。

var langs = $('ul.lang li'); // 拿到JavaScript, Python, Lua
var js = langs.first(); // JavaScript，相当于$('ul.lang li:first-child')
var haskell = langs.last(); // Lua, 相当于$('ul.lang li:last-child')
var sub = langs.slice(1, 3); // Python, Lua, 参数和数组的slice()方法一致

 

posted on 2018-01-04 14:51  xdxxdx  阅读(223)  评论(0)  编辑  收藏  举报

Copyright © 2024 xdxxdx
Powered by .NET 8.0 on Kubernetes Powered By博客园