jquery選擇器（nth-of-type（） nth-child（）區(qū)別內(nèi)容更新）

fxp 發(fā)布于2019-08-23 11:57 / 2828人閱讀

摘要：它通過(guò)易于使用的在大量瀏覽器中運(yùn)行，使得文檔遍歷和操作，事件處理，動(dòng)畫(huà)和更加簡(jiǎn)單。如果想打印輸出對(duì)象的內(nèi)容。他們的寬高都顯示設(shè)置為一個(gè)祖先元素是隱藏的。元素被認(rèn)為是可見(jiàn)的，因?yàn)樗麄內(nèi)匀徽紦?jù)布局空間。

官網(wǎng)傳送門(mén)： http://jquery.com/
中文API文檔： http://jquery.cuishifeng.cn/
jQuery是一個(gè)快速，小巧，功能豐富的JavaScript庫(kù)。它通過(guò)易于使用的API在大量瀏覽器中運(yùn)行，使得HTML文檔遍歷和操作，事件處理，動(dòng)畫(huà)和Ajax更加簡(jiǎn)單。通過(guò)多功能性和可擴(kuò)展性的結(jié)合，jQuery改變了數(shù)百萬(wàn)人編寫(xiě)JavaScript的方式。

小例子

    
1.引入文件
div1
$("#div1").css("background","red"); //表示給前面這個(gè)對(duì)象加css樣式

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

對(duì)象

div1
原生js方法獲取對(duì)象：var oDiv1 = document.getElementById("div1");//原生對(duì)象
jquery獲取對(duì)象： var $div1 = $("#div1");//jq對(duì)象
將兩種方式得到的對(duì)象打印出來(lái)看一下區(qū)別
console.log(oDiv1);
console.log($div1);

這里jq對(duì)象是有長(zhǎng)度的，相當(dāng)于數(shù)組。

如果想打印輸出對(duì)象的內(nèi)容。
console.log(oDiv1.innerHTML);//obj.innerHTML是原生對(duì)象的方法
console.log($div1.get(0).innerHTML);

原生對(duì)象的方法和jq的方法是不一樣的，不能混用，但是兩者可以相互轉(zhuǎn)化。
//原生對(duì)象轉(zhuǎn)化成jq對(duì)象  $(obj)
//obj.css()是jq對(duì)象的方法 原生對(duì)象使用jq對(duì)象的。css()方法
$(oDiv1).css("background","red"); 

//jq對(duì)象轉(zhuǎn)化成原生對(duì)象   $obj.get(0)
//jq對(duì)象就想使用原生對(duì)象的.innerHTML方法
console.log($div1.get(0).innerHTML);

文檔就緒函數(shù)

在寫(xiě)jquery代碼的時(shí)候建議將代碼寫(xiě)在文檔就緒函數(shù)里面
//當(dāng)dom已經(jīng)加載 并且頁(yè)面已經(jīng)完全呈現(xiàn)時(shí) 會(huì)ready事件
//因?yàn)閞eady()最后執(zhí)行 所以將其他函數(shù)事件放在ready()中
$(document).ready(function(){
    var a = 5;
});

//是上面的簡(jiǎn)寫(xiě)形式
$(function(){

});

$和jquery是一個(gè)意思，源碼中有解釋。

![圖片上傳中...]

幾種選擇器

1 空格表示后代
2 >表示親子代
3 +表示緊挨著的兄弟
4 ~表示所有兄弟
5 ：eq()

 
     001
     002
     003
     004
     005    
 
$("#ul1 li").css("background","red");
5項(xiàng)全是紅色

 //選中第3個(gè)元素 003   正值從前往后找
 $("#ul1 li:eq(2)").css("background","red");
 第3項(xiàng)是紅色

//選中第6行，什么效果也沒(méi)有，但是也不會(huì)報(bào)錯(cuò)
$("#ul1 li:eq(5)").css("background","red");

 //倒數(shù)第一個(gè)   負(fù)值從后往前找
 $("#ul1 li:eq(-1)").css("background","red");

以下同理
$("#ul1 li:even").css("background","red"); //偶數(shù)
$("#ul1 li:odd").css("background","green");//奇數(shù)

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

$("#ul1 li:gt(1)").css("background","red"); //大于1的會(huì)被選中
$("#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

：target()舉個(gè)例子

導(dǎo)航欄中有3項(xiàng) 點(diǎn)擊其中某一項(xiàng)，顯示對(duì)應(yīng)的內(nèi)容。

若想讓導(dǎo)航欄浮在上方，要給ul加高度
 #nav{
        margin-bottom:800px;
        height:30px;
    }

jquery來(lái)實(shí)現(xiàn)

    

1000ms后，藍(lán)色變成黃色

也可以用css來(lái)實(shí)現(xiàn)這樣的效果
 #menu3:target{      /* target是css的標(biāo)簽 用css執(zhí)行會(huì)更快 */
        background: #ffff00;;
    }

點(diǎn)擊菜單3 藍(lán)色變成黃色

:input

舉個(gè)例子      輸入什么  列表中對(duì)應(yīng)的顏色改變
 
    
        iphone8
        iphoneX
        huawei
        xiaomi

打印輸出值，keyup取當(dāng)前值，keydown取前一個(gè)值

 console.log(this);

這里的this指的是function之前的對(duì)象，當(dāng)然會(huì)輸出那句話(huà)。


    
        iphone8
        iphoneX
        huawei
        xiaomi
    
    
 $(function(){
       var $Lis = $("#list li");
       $("#search").on("keyup",function(){//keyup當(dāng)前值
       $("#list li:contains( this.value ).css("background","red");
         });
   });
不會(huì)改變，因?yàn)閠his.value是js代碼放在字符串里面識(shí)別不了。所以這里要用到字符串拼接。$("#list li:contains("+ this.value +")").css("background","red");

加上else判斷 如果鍵入值為空 背景透明 巴特 這樣不好使
 $(function(){
            var $Lis = $("#list li");
            $("#search").on("keyup",function(){//keyup當(dāng)前值
              //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當(dāng)前值
             //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當(dāng)前值
             //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");
                }
            });
        });

現(xiàn)在功能上沒(méi)有問(wèn)題，但是性能上有問(wèn)題，#list li取了2次，多找了一次，我們可以把#list li先存起來(lái)賦給一個(gè)變量.

$(function(){
            var $Lis = $("#list li");
            $("#search").on("keyup",function(){//keyup當(dāng)前值 綁定事件用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對(duì)象 類(lèi)似數(shù)組

:empty 選擇內(nèi)容為空的節(jié)點(diǎn)
:parent 選擇有內(nèi)容的節(jié)點(diǎn)
:has() 匹配含有選擇器所匹配的元素的元素

:hidden

元素被認(rèn)為是隱藏的幾種情況：
1.他們的display:是none.
2.他們是type="hidden"的表單元素。
3.他們的寬高都顯示設(shè)置為0.
4.一個(gè)祖先元素是隱藏的。
元素visibility:hidden opacity:0被認(rèn)為是可見(jiàn)的，因?yàn)樗麄內(nèi)匀徽紦?jù)布局空間。

input[type="text"][name="userid"]{
        background: red;
        }
 
 
 會(huì)選中第一個(gè)輸入框
 用jquery寫(xiě) $（"input[type="text"][name="userid"]"）;

nth-child

nth-child(1) 從1開(kāi)始
nth-child(2n) 從1開(kāi)始
nth-child(2n+1) 從0開(kāi)始


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

$("p:nth-of-type(2)");//C元素從后往前看第2次出現(xiàn)p標(biāo)簽的元素
$("p:nth-child(2)");//什么也沒(méi)選中從后往前看第二個(gè)孩子不是p 是div 不選

   加上顏色看效果更明顯
   
            A元素
            B元素
            C元素
            D元素

p:nth-of-type(2) 想找第2次出現(xiàn)p標(biāo)簽的孩子選中第三行 C元素第三行背景變成綠色
p:nth-child(2) 想要找第2個(gè)孩子并且要是p標(biāo)簽下的但是現(xiàn)在第二個(gè)孩子是div標(biāo)簽所以并沒(méi)有選中，沒(méi)有內(nèi)容變成紅色

div:nth-child(2)要找第2個(gè)孩子 并且要是div標(biāo)簽下的孩子  選中 背景變成紅色

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

inputtype="text"：focus{

        background: red;
        }

inputtype="text"{

        background: yellow;
        }

黃色輸入框，獲取焦點(diǎn)之后變成紅色

自動(dòng)會(huì)讓你選擇文件
：selected 選中下拉菜單

GPU云服務(wù)器云服務(wù)器 jquery常用選擇器 jquery過(guò)濾選擇器 jquery雙向選擇器 jquery選擇器空格

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97737.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

fxp

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

《黑馬（三）》常用網(wǎng)頁(yè)開(kāi)發(fā)工具和骨架標(biāo)簽新增代碼

閱讀 3440·2021-11-22 09:34
SpringCloud升級(jí)之路2020.0.x版-37. 實(shí)現(xiàn)異步的客戶(hù)端封裝配置管理的意義與設(shè)計(jì)

閱讀 728·2021-11-19 11:29
Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載?。校瘏^(qū)數(shù)據(jù)

閱讀 1409·2019-08-30 15:43
關(guān)于CSS你應(yīng)該知道的基礎(chǔ)知識(shí) - 樣式應(yīng)用篇

閱讀 2291·2019-08-30 14:24
【每日一包0025】events

閱讀 1918·2019-08-29 17:31
【每日一包0009】group-array

閱讀 1287·2019-08-29 17:17
CSS中的一些小細(xì)節(jié)

閱讀 2675·2019-08-29 15:38
Vue+webpack+Element 兼容問(wèn)題總結(jié)

閱讀 2849·2019-08-26 12:10

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

jquery選擇器（nth-of-type（） nth-child（）區(qū)別內(nèi)容更新）

相關(guān)文章