jQuery內(nèi)容選擇器

• :empty
  找到既沒(méi)有文本內(nèi)容也沒(méi)有子元素的指定元素，返回集合元素

<script>
    $(function () {
      // 找到既沒(méi)有文本內(nèi)容也沒(méi)有子元素的div
      var $div = $("div:empty");
      console.log($div);
     });
</script>

• :parent
  找到有文本內(nèi)容或有子元素的指定元素，返回集合元素

<script>
    $(function () {
      // 找到既有文本內(nèi)容或有子元素的div
      var $div = $("div:parent");
      console.log($div);
     });
</script>

• :contains(text)
  找到包含指定文本內(nèi)容的指定元素，返回集合元素

<script>
    $(function () {
      // 找到包含我是div的div
      var $div = $("div:contains('我是div')");
      console.log($div);
     });
</script>

• :has(selector)
  找到包含指定子元素的指定元素，返回集合元素

<script>
    $(function () {
      // 找到包含p標(biāo)簽的div
      var $div = $("div:has('p')");
      console.log($div);
     });
</script>

jQuery選擇器

• id選擇器
  根據(jù)給定的id匹配一個(gè)元素，返回單個(gè)元素

<script>
    $(function () {
      // 找到id為box的元素
      var $box = $("#box");
      console.log($box);
     });
</script>

• 類選擇器
  根據(jù)給定的類名匹配元素，返回找到的元素集合

<script>
    $(function () {
      // 找到所有類名box的元素
      var $box = $(".box");
      console.log($box);
     });
</script>

• 元素選擇器
  根據(jù)給定的元素名稱匹配元素，返回找到的元素集合

<script>
    $(function () {
      // 找到所有<p>元素
      var $ps = $("p");
      console.log($ps);
     });
</script>

• 通配符選擇器
  匹配所有元素，返回找到的元素集合

<script>
    $(function () {
      var $eles = $("*");
      console.log($eles);
     });
</script>

• 并集選擇器
  將所有選擇器匹配到的元素合并后一起返回，返回找到的元素集合

<script>
    $(function () {
      // 選取所有<div>元素,所有<span>元素和所有類名為box元素
      var $eles = $("div,span,.box");
      console.log($eles);
     });
</script>

• 后代選擇器
  選取指定元素的所有后代元素(包括孫子/重孫子等)，返回找到的元素集合

<script>
    $(function () {
      // 選取<div>元素里所有的<span>元素
      var $eles = $("div span");
      console.log($eles);
     });
</script>

• 子元素選擇器
  找到指定元素的所有直接子元素，返回找到的元素集合

<script>
    $(function () {
      // 選取<div>元素下元素名稱是<span>的直接子元素
      var $eles = $("div>span");
      console.log($eles);
     });
</script>

• 相鄰兄弟選擇器
  選取某個(gè)元素后面所有緊跟的那個(gè)元素，沒(méi)有級(jí)別之分，返回找到的元素集合

<script>
    $(function () {
      // 選取類名為box后面所有<div>元素
      var $eles = $(".box+div");
      console.log($eles);
     });
</script>

• 通用兄弟選擇器
  匹配某個(gè)元素之后的所有指定的同級(jí)元素，返回找到的元素集合

<script>
    $(function () {
      // 選取類名為box元素后面與其同級(jí)的div元素
      var $eles = $(".box~div");
      console.log($eles);
     });
</script>

• 更多選擇器請(qǐng)查看jQuery文檔 http://jquery.cuishifeng.cn/

屬性和屬性節(jié)點(diǎn)

• 屬性
  • 屬性就是對(duì)象身上的變量
  • 只要對(duì)象身上都可以添加屬性(無(wú)論是自定義對(duì)象,還是DOM對(duì)象)
• 屬性節(jié)點(diǎn)
  • 在編寫(xiě)HTML代碼時(shí),在HTML標(biāo)簽中添加的屬性就是屬性節(jié)點(diǎn)
• 操作屬性與屬性節(jié)點(diǎn)

// 添加或修改屬
對(duì)象.屬性名稱 = 值;
對(duì)象["屬性名稱"] = 值;
// 獲取屬性
對(duì)象.屬性名稱
對(duì)象["屬性名稱"]
// 獲取屬性節(jié)
DOM對(duì)象.getAttribute("屬性節(jié)點(diǎn)名稱")
// 設(shè)置屬性節(jié)點(diǎn)
DOM對(duì)象.setAttribute("屬性節(jié)點(diǎn)名稱", "值");

• 屬性和屬性節(jié)點(diǎn)有什么區(qū)別
  任何對(duì)象都有屬性, 但是只有DOM對(duì)象才有屬性節(jié)點(diǎn)

jQuery中的attr和prop方法

• attr(name|pro|key,val|fn)
  • 獲取或者設(shè)置屬性節(jié)點(diǎn)的值
  • 可以傳遞一個(gè)參數(shù), 也可以傳遞兩個(gè)參數(shù)
  • 如果傳遞一個(gè)參數(shù), 代表獲取屬性節(jié)點(diǎn)的值
  • 如果傳遞兩個(gè)參數(shù), 代表設(shè)置屬性節(jié)點(diǎn)的值
  • 如果是獲取:無(wú)論找到多少個(gè)元素, 都只會(huì)返回第一個(gè)元素指定的屬性節(jié)點(diǎn)的值
  • 如果是設(shè)置:找到多少個(gè)元素就會(huì)設(shè)置多少個(gè)元素
  • 如果是設(shè)置:如果設(shè)置的屬性節(jié)點(diǎn)不存在, 那么系統(tǒng)會(huì)自動(dòng)新增

<script>
    $(function () {
        // 獲取標(biāo)簽為span的class屬性節(jié)點(diǎn)的值 
        console.log($("span").attr("class"));
        // 設(shè)置標(biāo)簽為span的class屬性節(jié)點(diǎn)的值為box
        $("span").attr("class", "box");
        // 增加一個(gè)屬性節(jié)點(diǎn)abc，取值為123
        $("span").attr("abc", "123");
     });
</script>

• removeAttr(name)
  • 用于刪除指定屬性節(jié)點(diǎn)
  • 會(huì)刪除所有找到元素指定的屬性節(jié)點(diǎn)

<script>
    $(function () {
        // 刪除所有span標(biāo)簽的class和name屬性節(jié)點(diǎn)
        $("span").removeAttr("class name");
     });
</script>

• prop(n|p|k,v|f)
  • 用于設(shè)置或者獲取元素的屬性值
  • 設(shè)置屬性時(shí),會(huì)設(shè)置所有找到元素的屬性
  • 獲取屬性時(shí),只會(huì)獲取找到第一個(gè)元素的屬性

<script>
    $(function () {
        // 設(shè)置找到的第一個(gè)span標(biāo)簽的demo屬性節(jié)點(diǎn)
        $("span").eq(0).prop("demo", "it666");
        // 獲取找到的第一個(gè)span標(biāo)簽的demo屬性節(jié)點(diǎn)
        $("span").eq(0).prop("demo");
     });
</script>

• removeProp(name)
  • 用于刪除指定屬性節(jié)點(diǎn)
  • 會(huì)刪除所有的找到的元素屬性

<script>
    $(function () {
        // 刪除所有span標(biāo)簽的demo屬性節(jié)點(diǎn)
        $("span").removeProp("demo");
     });
</script>

• attr方法和prop方法區(qū)別
  • attr和prop即可以操作屬性也可以操作屬性節(jié)點(diǎn)
  • 官方推薦在操作屬性節(jié)點(diǎn)時(shí),具有true和false兩個(gè)屬性的屬性節(jié)點(diǎn)，如checked, selected 或者disabled 使用prop()，其他的使用attr()
  • 因?yàn)槿绻哂?code>true和false兩個(gè)屬性的屬性節(jié)點(diǎn),如果沒(méi)有編寫(xiě)默認(rèn)attr返回undefined,而prop返回false

jQuery類操作相關(guān)方法

• addClass(class|fn)
  • 給元素添加一個(gè)或多個(gè)類
  • 如果要添加多個(gè), 多個(gè)類名之間用空格隔開(kāi)即可

<script>
    $(function () {
         // 給div添加class1 和 class2兩個(gè)類
         $("div").addClass("class1 class2");
     });
</script>

• removeClass([class|fn])
  • 刪除一個(gè)類
  • 如果想刪除多個(gè), 多個(gè)類名之間用空格隔開(kāi)即可

<script>
    $(function () {
         // 刪除div的class1
         $("div").removeClass("class1");
     });
</script>

• toggleClass(class|fn[,sw])
  • 切換類
  • 存在就刪除不存在就添加

<script>
    $(function () {
         // 如果有class3就刪除，不存在就天添加
         $("div").removeClass("class3");
     });
</script>

jQuery文本值相關(guān)的方法

• html([val|fn])
  • 添加或獲取元素中的HTML，相當(dāng)于JS中的innerHTML
• text([val|fn])
  • 添加或獲取元素中的文本，相當(dāng)于JS中的innerText
  • text方法能做的html方法都能做,所以一般使用html方法
• val([val|fn|arr])
  • 添加或獲取元素value屬性的值

<script>
    $(function () {
        $(".box1").html("<p>我是段落<span>我是span</span></p>");
        $(".box2").text("<p>我是段落<span>我是span</span></p>");
        console.log($("input").val());;
     });
</script>