jquery入門(2)

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ì)象
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識(shí)jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,443評(píng)論 0 44
  • jQuery選擇器 屬性篩選選擇器 子元素篩選選擇器 表單元素選擇器 表單對(duì)象屬性篩選選擇器 特殊選擇器this ...
    hsj_gg閱讀 221評(píng)論 0 2
  • jQuery基礎(chǔ)(一)——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗(yàn) $(docume...
    croyance0601閱讀 1,104評(píng)論 0 8
  • 第一章 jQuery簡(jiǎn)介 1-1 jQuery簡(jiǎn)介 1.簡(jiǎn)介 2.優(yōu)勢(shì) 3.特性與工具方法 1-2 環(huán)境搭建 進(jìn)入...
    mo默22閱讀 1,608評(píng)論 0 11
  • DOM操作可分為3個(gè)方面:DOM Core(核心)、HTML DOM和CSS DOM(1)DOM Core不屬于J...
    寒橋閱讀 515評(píng)論 0 1