詳解jquery方法屬性
1.jquery簡(jiǎn)介
jquery是什么,作用是什么?
- jquery用來(lái)簡(jiǎn)化js操作DOM元素
- jquery不能用DOM的方法,DOM不能用jquery的方法
各種選擇器的使用特征:
基本選擇器5種:$("
.#*,空格
");
關(guān)系選擇器4種:$(“
空格>+~
”)
基本過(guò)濾選擇器8種:$("
:first/:last/:even/:odd/eq(index)/:gt(index)/:lt(index)/:not(selector)
")
內(nèi)容過(guò)濾選擇器4種:$("
:contains(text)/:empty/:has(selector)/:parent
")
可見(jiàn)性過(guò)濾選擇器2種:$("
:hidden/:visible
")
屬性選擇器8種: ( " = = [ a t t r i b u t e ]
、 [ a t t r i b u t e = v a l u e ]
、 [ a t t r i b u t e ! = v a l u e ]
、 [ a t t r i b u t e = v a l u e ]
、 [ a t t r i b u t e ("==[attribute]
、[attribute=value]
、[attribute!=value]
、[attribute^=value]、[attribute ("==[attribute]
、[attribute=value]
、[attribute!=value]
、[attribute=value]
、[attribute=value]
、[attribute*=value]
、[attributeFilter1][attrbuteFilter2]==")
子元素過(guò)濾選擇器(4種)$(
":nth-child(index/even/odd)
、:first-child
、:last-child
、:only-child"
)
表單屬性過(guò)濾選擇器(4種)${"
:enabled/:disabled/:checked/:selected
"}
表單選擇器(11種)$("
:input/:text/:password/:radio/:checkbox/:submit/:image/:reset/:button/:file/:hidden
")
2.jquery選擇器
2.1基本選擇器5種
// 基本選擇器5種 $(".div");//類(lèi)選擇器 $("div");//標(biāo)簽選擇器 $("#box");//id選擇器 $("*");//通配符選擇器 $("div,p,img");//合并選擇器
2.2 關(guān)系選擇器4種
//關(guān)系選擇器4種 $("div p");//后代選擇器 $("div>p");//子代選擇器 $("div+p");//直接兄弟選擇器 $("div~p");//簡(jiǎn)潔兄弟選擇器
2.3基本過(guò)濾選擇器8種
// 基本過(guò)濾選擇器8種 $(":first");//第一個(gè)元素 $(":last");//最后一個(gè)元素 $(":not(selector)");//把selector排除在外 $(":even");//挑選偶數(shù)行 $(":odd");//挑選奇數(shù)行 $(":eq(index)");//下標(biāo)等于index的元素 $(":gt(index)");//下標(biāo)大于index的元素 $(":lt(index)");//下標(biāo)小于index的元素
2.4內(nèi)容過(guò)濾選擇器4種
// 內(nèi)容過(guò)濾選擇器4種 $(":contains(text)");//匹配包含給定文本的元素 $(":empty");//匹配所有不包含子元素或文本的空元素 $(":has(selector)");//匹配含有選擇器所匹配的元素 $(":parent");//匹配含有子元素或者文本的元素
2.5可見(jiàn)性過(guò)濾選擇器2種
// 可見(jiàn)性過(guò)濾選擇器2種 $(":hidden");//匹配所有不可見(jiàn)元素,或type為hidden元素 $(":visible");//p匹配所有的可見(jiàn)元素
2.6屬性過(guò)濾選擇器8種
// 屬性過(guò)濾選擇器8種 $("[attribute]");//匹配具有attribute屬性的元素 $("[attribute=value]");//匹配屬性值等于value的元素 $("[attribute!=value]");//匹配屬性值不等于value的元素 $("[attribute^=value]");//匹配屬性值以某些值開(kāi)始的元素 $("[attribute$=value]");//匹配屬性值某些值結(jié)尾的元素 $("[attribute*=value]");//匹配屬性值以包含某些值的元素 $("[attributeFilter1][attrbuteFilter2]");//復(fù)合屬性過(guò)濾選擇器,需要同時(shí)滿(mǎn)足多個(gè)條件時(shí)使用
2.7子元素過(guò)濾選擇器(4種)
//子元素過(guò)濾選擇器(4種) $(":nth-child(index/even/odd)")//選取每個(gè)父元素下的第index個(gè)子元素 $(":first-child");//選取每個(gè)父元素的第一個(gè)子元素 $(":last-child");//選取每個(gè)父元素的最后一個(gè)子元素 $(":only-child");//如果某個(gè)元素是它父元素中唯一的子元素子元素,那么將會(huì)被匹配
2.8表單屬性過(guò)濾選擇器(4種)
//表單屬性過(guò)濾選擇器(4種) $(":enabled");//選取所有可用元素 $(":disabled");//選取所有不可用元素 $(":checked");//選取所有被選中的元素 $(":selected");//選取所有被選中的元素
2.9表單選擇器(11種)
// 表單選擇器(11種) $(":input");//選擇所有input/textarrea/select/button元素 $(":text");//選取所有的單行文本框 $(":password");//選取所有的密碼框 $(":radio");//選取所有的單選框 $(":checkbox");//選取所有的復(fù)選框 $(":submit");//選取所有的提交按鈕 $(":image");//選取所有的圖像按鈕 $(":reset");//選取所有的重置按鈕 $(":button");//選取所有的按鈕 $(":file");//選取所有的上傳域 $(":hidden");//選取所有不可見(jiàn)的元素
3.jQuery中的DOM操作
3.1文本操作
// 文本操作 $("p").html();//相當(dāng)于DOM中p.innerHtml; $("p").text();//相當(dāng)于DOM中p.innerText;
3.2值操作
// 值操作 $("input:eq(5)").val();//相當(dāng)于DOM中input.value; $("input:eq(6)").val("aaa");//設(shè)置屬性值
3.3屬性操作
// 屬性操作 $("#box").attr('name');//獲取name屬性 $("#box").attr('name',"aaa");//添加name屬性和值 $("#box").removeAttr('name');//刪除name屬性 $("#box").prop('checked');//獲取單屬性時(shí),用prop獲取的是false和true
3.4類(lèi)操作
// 類(lèi)操作 $("#box").attr("class","");//獲取和設(shè)置 $("#box").addClass("class","");//追加類(lèi)名 $("#box").removeClass("class","");//移除類(lèi)名 $("#box").removeClass();//移除所有類(lèi)名 $("#box").toggleClass("main");//切換main類(lèi)名 $("#box").hasClass("main");//是否有某個(gè)類(lèi)名
3.5樣式操作
//樣式操作 $("#box").css("color");//讀取css樣式值 $("#box").css({"propertyname":"value","propertyname":"value"});//同時(shí)設(shè)置多個(gè)樣式
4.節(jié)點(diǎn)操作
4.1遍歷節(jié)點(diǎn)
//遍歷節(jié)點(diǎn) $("#box").children();//獲取子節(jié)點(diǎn) $("#box").children("div");//獲取div子節(jié)點(diǎn) $("#box").prev();//找到上面緊鄰的一個(gè)兄弟 $("#box").prevAll();//找到上面緊鄰的所有兄弟 $("#box").prevAll("div");//找到上面緊鄰的所有div兄弟 $("#box").next();//找到下面緊鄰的一個(gè)兄弟 $("#box").nextAll();//找到下面緊鄰的所有兄弟 $("#box").nextAll("div");//找到下面緊鄰的所有div兄弟 $("#box").parent();//找到父節(jié)點(diǎn)
4.2過(guò)濾節(jié)點(diǎn)
//過(guò)濾節(jié)點(diǎn) $("ul").find(".a");//查找 $("ul li").filter(".a");//過(guò)濾
4.3創(chuàng)建、插入、刪除
// 創(chuàng)建、插入、刪除 var lis=$("<li title='aaa'>aaa</li>");//創(chuàng)建 //內(nèi)部添加 parent.append(lis);//在父盒子尾部添加 parent.prepend(lis);//在父盒子頭部添加 // 外部添加 box.after(lis);//在box后面加 box.before(lis);//在box前面加 //刪除DOM元素 $("ul").remove();//完全刪除,ul,li都刪除 $("ul").empty();//只是清空ul的內(nèi)容,ul還存在 $("li").remove(".one");//刪除li中class="one"的
5.jquery事件
// jquery事件 // 與js的區(qū)別 // window.onload與$(document).ready() //區(qū)別一:前者頁(yè)面完全加載后執(zhí)行,后者在DOM完成加載后就執(zhí)行,后者優(yōu)先前者執(zhí)行 //區(qū)別二:前者多次出現(xiàn)時(shí),最后的會(huì)覆蓋前面的,后者多次出現(xiàn)時(shí),他們會(huì)合并 //區(qū)別三:有無(wú)簡(jiǎn)寫(xiě):window沒(méi)有簡(jiǎn)寫(xiě),document有簡(jiǎn)寫(xiě) //簡(jiǎn)寫(xiě):$().ready(function(){...}) // $(function(){....}) //事件綁定:$(selector).on(事件類(lèi)型,回調(diào)函數(shù)) $("ul li").on("click",function(){alert(1);}); // jquery 和 ajax // get方法 $.get(url,data,success(response,status,xhr),dataType); // post方法 $.post(url,data,success(data, textStatus, jqXHR),dataType);
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
jQuery Checkbox 全選 反選的簡(jiǎn)單實(shí)例
本文主要介紹了Checkbox的全選、反選的簡(jiǎn)單實(shí)例,需要的朋友可以參考下2016-11-11layui選項(xiàng)卡效果實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了layui彈出層效果的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05jQuery滑動(dòng)到底部加載下一頁(yè)數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了jQuery滑動(dòng)到底部加載下一頁(yè)數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下2017-05-05jquery限定文本框只能輸入數(shù)字即整數(shù)和小數(shù)
限定文本框只能輸入數(shù)字即整數(shù)和小數(shù),在某些特殊情況下還是比較實(shí)用的,下面有個(gè)不錯(cuò)的示例,通過(guò)jquery來(lái)簡(jiǎn)單實(shí)現(xiàn)下2013-11-11jQuery旋轉(zhuǎn)插件jqueryrotate用法詳解
這篇文章主要介紹了jQuery旋轉(zhuǎn)插件jqueryrotate用法,結(jié)合實(shí)例形式詳細(xì)分析了jqueryrotate插件的功能、定義及相關(guān)參數(shù)的使用方法,需要的朋友可以參考下2016-10-10基于jquery的兼容各種瀏覽器的iframe自適應(yīng)高度的腳本
在網(wǎng)上找了很多的iframe自適應(yīng)高度的腳本,對(duì)瀏覽的的兼容性都不好。所以就想利用jquery強(qiáng)大的兼容性,寫(xiě)一個(gè)iframe自適應(yīng)高度的腳本。2010-08-08