jquery选择器 （nth-of-type（） nth-child（）区别内容更新）

摘要：它通过易于使用的在大量浏览器中运行，使得文档遍历和操作，事件处理，动画和更加简单。如果想打印输出对象的内容。他们的宽高都显示设置为一个祖先元素是隐藏的。元素被认为是可见的，因为他们仍然占据布局空间。

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

    
1.引入文件
div1
$("#div1").css("background","red"); //表示给前面这个对象加css样式

2.
div2
div3
 
$(".aa").css("background","green");

div1
原生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()

 

     
001
     
002
     
003
     
004
     
005
    
 
$("#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");

 

        
001
        
002
        
003
        
004
        
005
 
 $("#ul1 li:not(.aaa)").css("background","green");
 

$("#ul1 li:contains(3)").css("background","red");//包含3

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

    

        
菜单1
        
菜单2
        
菜单3
    

    

    

    

若想让导航栏浮在上方，要给ul加高度
 #nav{
        margin-bottom:800px;
        height:30px;
    }

jquery来实现

    

1000ms后，蓝色变成黄色

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

点击菜单3 蓝色变成黄色

举个例子      输入什么  列表中对应的颜色改变
 
    

        
iphone8
        
iphoneX
        
huawei
        
xiaomi
    
    
    

打印输出值，keyup取当前值，keydown取前一个值

 console.log(this);    
 

这里的this指的是function之前的对象，当然会输出那句话。


    

        
iphone8
        
iphoneX
        
huawei
        
xiaomi
    
    
 $(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() 匹配含有选择器所匹配的元素的元素

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

input[type="text"][name="userid"]{
        background: red;
        }
 
 
 会选中第一个输入框
 用jquery写 $（"input[type="text"][name="userid"]"）;   
 

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


    
A元素
    
B元素
    
C元素
    
D元素

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

   加上颜色看效果更明显
   

            
A元素
            
B元素
            
C元素
            
D元素
    
    
    
    

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

    

            
A元素
            
B元素
            
C元素
            
D元素
    
    
    
    

div:nth-child(2)要找第2个孩子 并且要是div标签下的孩子  选中 背景变成红色

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

inputtype="text"：focus{

        background: red;
        }

inputtype="text"{

        background: yellow;
        }

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

自动会让你选择文件
：selected 选中下拉菜单