3.jQuery常用方法

#3.1 dom屬性相關(guān)方法

• addClass() 為每個(gè)匹配的元素添加指定的樣式名

$('div').addClass('box'); //為頁面中所有的div添加一個(gè)box樣式

• removeClass() 移除集合中每個(gè)匹配元素上一個(gè)、多個(gè)或全部樣式

$('p').removeClass('myClass yourClass')

• toggleClass() 樣式切換，如果有就刪除，如果沒有就添加

$("p").click(function () {
      $(this).toggleClass("highlight");
});

• css() 設(shè)置或者獲取css樣式

$('div').css('color','red'); //設(shè)置所有div字體顏色為紅色
$('div').css('color')  //獲取顏色
$('div').css('color',function(index,item){
      if(index<=4){
           return  'blue'; 
      }
}) //下標(biāo)小于4的都設(shè)置成藍(lán)色

• html() 設(shè)置或者獲取元素的 html內(nèi)容

$('p').html() //獲取p標(biāo)簽里面的內(nèi)容
$('p').html('床前明月光')；//設(shè)置html里面的內(nèi)容

• text() 設(shè)置或者獲取元素的文本內(nèi)容

$('p').text();
$('p').text('床前明月光')；

總結(jié)：html方法功能和原生方法innerHTML一樣 ，text方法功能和原生方法innerText一樣，因此，區(qū)別就在于前者既可以獲取標(biāo)簽，后者只可以獲取文本 val() 獲取或者設(shè)置表單元素的值，這里要注意的是 獲取的是表單元素的值 不要和html 以及 text方法搞混

 $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

• each 循環(huán)方法

$("li").each(function(index, item){
   //index 為li的下標(biāo)  item表示每個(gè)li
   console.log(index, item)   
]})

• attr() 設(shè)置或者獲取元素的屬性

var title = $("em").attr("title");
$("div").text(title);

• prop()設(shè)置或者獲取元素的屬性

$("input").prop("checked", true);

• removeAttr() 刪除屬性

$("input").removeAttr("data");

• removeProp()

$("input").removeProp("checked");

總結(jié)：具有 true 和 false 兩個(gè)屬性的屬性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()，具體見下表：

image

#3.2 dom操作相關(guān)方法

• append

$("#ul").append(li); //在ul中添加一個(gè)li元素 ，這個(gè)元素被添加到ul中原有元素的后面

• appendTo

$(li).appendTo($("#ul")); //把li元素添加到ul中 ，這個(gè)元素被添加到ul中原有元素的后面

• prepend

$("#ul").prepend(li); //在ul中添加一個(gè)li元素 ，這個(gè)元素被添加到ul中原有元素的前面

• prependTo

$(li).appendTo($("#ul")); //把li添加到ul中 ，這個(gè)元素被添加到ul中原有元素的前面

總結(jié)：以上幾個(gè)方法 元素屬于父子關(guān)系

• after

$("#li1").after($("#li2")); // 在li1 后面添加一個(gè) li2 元素

• insertAfter

$("#li2").insertAfter($("#li1")); // 把li2 添加到li1 后面

• before

$("#li1").before($("#li2")); // 在li1 前面添加一個(gè) li2 元素

• insertBefore

$("#li2").insertBefore($("#li1")); // 把li2 添加到li1 前面

#3.3 其他方法

• index()

$("box").on("clicki",function(){
      $(this).index();//得到當(dāng)前被點(diǎn)擊的對(duì)象的 下標(biāo)
})

• prev()

$(".box").prev() //獲取前面一個(gè)兄弟節(jié)點(diǎn)

• prevAll()

$(".box").prev() //獲取前面所有的兄弟節(jié)點(diǎn)

• next()

$(".box").next() //獲取后面一個(gè)兄弟節(jié)點(diǎn)

• nextAll()

$(".box").nextAll() //獲取后面所有的兄弟節(jié)點(diǎn)

• siblings()

$(".box").siblings() //獲取所有的兄弟節(jié)點(diǎn)

• find()

$(".box").find("p"); //找到box類下面所有的p標(biāo)簽

• closest()

$("input").closest('li');//找到input上面最近的li父級(jí)

• get()

$(".box").get(0);  //獲取所有box類中第一個(gè)原生對(duì)象