摘要：它通過易于使用的在大量瀏覽器中運行，使得文檔遍歷和操作，事件處理，動畫和更加簡單。如果想打印輸出對象的內容。他們的寬高都顯示設置為一個祖先元素是隱藏的。元素被認為是可見的，因為他們仍然占據布局空間。

官網傳送門： 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 選中下拉菜單