3.jQuery常用方法
#3.1 dom屬性相關(guān)方法
- addClass() 為每個(gè)匹配的元素添加指定的樣式名
$('div').addClass('box'); //為頁(yè)面中所有的div添加一個(gè)box樣式
- removeClass() 移除集合中每個(gè)匹配元素上一個(gè)畴蹭、多個(gè)或全部樣式
$('p').removeClass('myClass yourClass')
- toggleClass() 樣式切換雷袋，如果有就刪除盾碗，如果沒(méi)有就添加
$("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()，具體見(jiàn)下表：
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類(lèi)下面所有的p標(biāo)簽
- closest()
$("input").closest('li');//找到input上面最近的li父級(jí)
- get()
$(".box").get(0); //獲取所有box類(lèi)中第一個(gè)原生對(duì)象
