专栏首页前端博客:https://alili.techjquery选择器 (nth-of-type() nth-child()区别内容更新)

抱歉,你查看的文章已删除

jquery选择器 (nth-of-type() nth-child()区别内容更新)

官网传送门: http://jquery.com/ 中文API文档: http://jquery.cuishifeng.cn/ jQuery是一个快速,小巧,功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。

小例子

    
1.引入文件<script src="jquery-3.3.1.js"></script>
<div id="div1">div1</div>
$('#div1').css('background','red'); //表示给前面这个对象加css样式
2.<div class="aa">div2</div>
<div class="aa">div3</div> 
$('.aa').css('background','green');

对象

<div id="div1">div1</div>
原生js方法获取对象:var oDiv1 = document.getElementById('div1');//原生对象
jquery获取对象: var $div1 = $('#div1');//jq对象
将两种方式得到的对象打印出来看一下区别
console.log(oDiv1);
console.log($div1);

这里jq对象是有长度的,相当于数组。

如果想打印输出对象的内容。
console.log(oDiv1.innerHTML);//obj.innerHTML是原生对象的方法
console.log($div1.get(0).innerHTML);
原生对象的方法和jq的方法是不一样的,不能混用,但是两者可以相互转化。
//原生对象转化成jq对象  $(obj)
//obj.css()是jq对象的方法 原生对象使用jq对象的。css()方法
$(oDiv1).css('background','red'); 

//jq对象转化成原生对象   $obj.get(0)
//jq对象就想使用原生对象的.innerHTML方法
console.log($div1.get(0).innerHTML);

文档就绪函数

在写jquery代码的时候建议将代码写在文档就绪函数里面
//当dom已经加载 并且页面已经完全呈现时 会ready事件
//因为ready()最后执行 所以将其他函数事件放在ready()中
$(document).ready(function(){
    var a = 5;
});

//是上面的简写形式
$(function(){

});

$和jquery是一个意思,源码中有解释。

![图片上传中...]

几种选择器

1 空格表示后代 2 >表示亲子代 3 +表示紧挨着的兄弟 4 ~表示所有兄弟 5 :eq()

 <ul id="ul1">
     <li>001</li>
     <li>002</li>
     <li>003</li>
     <li>004</li>
     <li>005</li>    
 </ul>
$('#ul1 li').css('background','red');
5项全是红色
 //选中第3个元素 003   正值从前往后找
 $('#ul1 li:eq(2)').css('background','red');
 第3项是红色
//选中第6行,什么效果也没有,但是也不会报错
$('#ul1 li:eq(5)').css('background','red');
 //倒数第一个   负值从后往前找
 $('#ul1 li:eq(-1)').css('background','red');
 
以下同理
$('#ul1 li:even').css('background','red'); //偶数
$('#ul1 li:odd').css('background','green');//奇数

$('#ul1 li:first').css('background','red');
$('#ul1 li:last').css('background','green');

$('#ul1 li:gt(1)').css('background','red'); //大于1的会被选中
$('#ul1 li:lt(1)').css('background','green');

 <ul id="ul1">
        <li>001</li>
        <li>002</li>
        <li class="aaa">003</li>
        <li>004</li>
        <li>005</li>
 </ul>
 $('#ul1 li:not(.aaa)').css('background','green');
 
$('#ul1 li:contains(3)').css('background','red');//包含3

:target()举个例子

导航栏中有3项 点击其中某一项,显示对应的内容。

<style>
    #nav{
        margin-bottom:800px;
       
    }
    #nav li{
        width: 100px;
        height: 30px;
        background: #cccccc;
        list-style:none;
        float:left;
        margin-right:5px;
        cursor:pointer;
        text-align:center;
        line-height:30px;
    }
    div{
        height: 400px;
    }
    #menu1{
         background: #ff0000;
     }
    #menu2{
        background: #00ff00;
    }
    #menu3{
        background: #0000ff;
    }
  /* #menu3:target{      /*target是css的标签 用css执行会更快*/
        background: #ffff00;;
    } */
</style>

</head> <body>

    <ul id="nav">
        <li><a href="#menu1">菜单1</a></li>
        <li><a href="#menu2">菜单2</a></li>
        <li><a href="#menu3">菜单3</a></li>
    </ul>

    <div id="menu1"></div>
    <div id="menu2"></div>
    <div id="menu3"></div>

</body>

若想让导航栏浮在上方,要给ul加高度
 #nav{
        margin-bottom:800px;
        height:30px;
    }
jquery来实现
<script src="jquery-3.3.1.js"></script>
    <script>
             $(function(){
                 $('#nav li:last').on('click',function(){
                    alert(123);
                     setTimeout(function(){
                         $('#menu3:target').css('background','#ff0');
                         //一点击 函数就执行 target需要时间
                     },1000);
                  });
             });
    </script>

1000ms后,蓝色变成黄色

也可以用css来实现这样的效果
 #menu3:target{      /* target是css的标签 用css执行会更快 */
        background: #ffff00;;
    }

点击菜单3 蓝色变成黄色

:input

举个例子      输入什么  列表中对应的颜色改变
 <input type="text" id="search" value="123">
    <ul id="list">
        <li>iphone8</li>
        <li>iphoneX</li>
        <li>huawei</li>
        <li>xiaomi</li>
    </ul>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup当前值
             console.log(this.value);//原生方法  效率高
              
            });
        });
    </script>
打印输出值,keyup取当前值,keydown取前一个值

 console.log(this);    
 
这里的this指的是function之前的对象,当然会输出那句话。

<input type="text" id="search" value="123">
    <ul id="list">
        <li>iphone8</li>
        <li>iphoneX</li>
        <li>huawei</li>
        <li>xiaomi</li>
    </ul>
    
 $(function(){
       var $Lis = $('#list li');
       $('#search').on('keyup',function(){//keyup当前值
       $('#list li:contains( this.value ).css('background','red');
         });
   });
不会改变,因为this.value是js代码放在字符串里面识别不了。所以这里要用到字符串拼接。$('#list li:contains('+ this.value +')').css('background','red');

加上else判断 如果键入值为空 背景透明 巴特 这样不好使
 $(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup当前值
              //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }else{
                    $('#list li').css('background','transparent');
                }
            });
        });

把else放在前面
 $(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup当前值
             //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
                $('#list li').css('background','transparent');
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }
            });
        });
        
$(function(){     
            $('#search').on('keyup',function(){//keyup当前值
             //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
                $('#list li').css('background','transparent');
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }
            });
        });
        

现在功能上没有问题,但是性能上有问题,#list li取了2次,多找了一次,我们可以把#list li先存起来赋给一个变量.

$(function(){
            var $Lis = $('#list li');
            $('#search').on('keyup',function(){//keyup当前值 绑定事件用on
             //console.log(this.value);//原生方法  效率高
              //  console.log($(this).val());//jq方法'
              $Lis.css('background','transparent');
                if(this.value != ''){
                    //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接
                    $('#list li:contains('+ this.value +')').css('background','red');
                }
            });
        });
        
        console.log($Lis);
        
jquery对象 类似数组

:empty 选择内容为空的节点
:parent 选择有内容的节点
:has() 匹配含有选择器所匹配的元素的元素


:hidden

元素被认为是隐藏的几种情况:
1.他们的display:是none.
2.他们是type="hidden"的表单元素。
3.他们的宽高都显示设置为0.
4.一个祖先元素是隐藏的。
元素visibility:hidden opacity:0被认为是可见的,因为他们仍然占据布局空间。

input[type="text"][name="userid"]{
        background: red;
        }
 <input type="text" name="userid">
 <input type="text" name="userid1111">
 会选中第一个输入框
 用jquery写 $('input[type="text"][name="userid"]');   
 

nth-child

nth-child(1) 从1开始
nth-child(2n) 从1开始
nth-child(2n+1) 从0开始

<div class="test">
    <p>A元素</p>
    <div>B元素</div>
    <p>C元素</p>
    <p>D元素</p>
</div>

$('p:nth-of-type(2)');//C元素 从后往前看 第2次出现p标签的元素 $('p:nth-child(2)');//什么也没选中 从后往前看 第二个孩子不是p 是div 不选

   加上颜色看效果更明显
   <div class="test">
            <p>A元素</p>
            <div>B元素</div>
            <p>C元素</p>
            <p>D元素</p>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $('p:nth-of-type(2)').css('background','green');
        $('p:nth-child(2)').css('background','red');
    </script>
    

p:nth-of-type(2) 想找第2次出现p标签的孩子 选中第三行 C元素 第三行背景变成绿色 p:nth-child(2) 想要找第2个孩子 并且要是p标签下的 但是现在第二个孩子是div标签 所以并没有选中,没有内容变成红色

    <div class="test">
            <p>A元素</p>
            <div>B元素</div>
            <p>C元素</p>
            <p>D元素</p>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $('p:nth-of-type(2)').css('background','green');
        $('div:nth-child(2)').css('background','red');
    </script>
    
div:nth-child(2)要找第2个孩子 并且要是div标签下的孩子  选中 背景变成红色

var n = $("input:checked").length; 取选中的输入框

inputtype="text":focus{

        background: red;
        }

inputtype="text"{

        background: yellow;
        }

黄色输入框,获取焦点之后变成红色

<input type="file">自动会让你选择文件 :selected 选中下拉菜单

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

jquery选择器 (nth-of-type() nth-child()区别内容更新)

原文链接

https://segmentfault.com/a/1190000016388005

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【TS 演化史 -- 15】可选的 catch 语句变量 和 JSX 片段语法

    TypeScript 2.4 为标识符实现了拼写纠正机制。即使咱们稍微拼错了一个变量、属性或函数名,TypeScript 在很多情况下都可以提示正确的拼写。

    前端小智@大迁世界
  • 【DB笔试面试626】在Oracle中,如何查看和下载BLOB类型的数据?

    BLOB类型的数据存储的是二进制文件,例如pdf、jpg或mp4视频格式文件等。对于BLOB类型的数据,可以使用图形化界面软件(例如PLSQL Develope...

    小麦苗DBA宝典
  • 使用 Swoole Server task 处理大数据量异步任务时注意

    关于 Buffered Query 和 Unbuffered Query: http://www.php.net/manual/zh/mysqlinfo.con...

    猿哥
  • 如何使用Oozie API接口向非Kerberos环境的CDH集群提交Shell工作流

    前面Fayson介绍了《如何使用Oozie API接口向非Kerberos环境的CDH集群提交Spark作业》和《如何使用Oozie API接口向非Kerber...

    Fayson
  • 用jQuery模拟select下拉框

    很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来...

    菩提树下的杨过
  • ESLint报错解决方案(error: No ESLint configuration found)

    在项目部署中出现报错error: No ESLint configuration found,编辑器vscode。

    从入门到进错门
  • jquery-easyui icon图标集合

    梦_之_旅

扫码关注云+社区

领取腾讯云代金券