jQuery的基本语法,选择器,DOM操作
生活随笔
收集整理的這篇文章主要介紹了
jQuery的基本语法,选择器,DOM操作
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
什么是JS框架
JS框架也是使用JavaScript語言編寫的，框架本身提供了大量的新的方法，可以簡(jiǎn)化JS代碼，提高開發(fā)效率。
說白了就是定義好的一個(gè) JS 文件，內(nèi)部封裝了很多功能，可以大大簡(jiǎn)化我們的 JS 操作步驟。
jQuery 官網(wǎng)：https://www.jquery.com。
要想使用，必須要引入該文件。
jQuery 的核心語法
$();
基本語法(詳細(xì)解釋在代碼注釋中查看)
基本語法
JS 對(duì)象和 jQuery 對(duì)象相互轉(zhuǎn)換
$(JS 的 DOM 對(duì)象)：將 JS 對(duì)象轉(zhuǎn)為 jQuery 對(duì)象。
jQuery 對(duì)象[索引]
jQuery 對(duì)象.get(索引)：將 jQuery 對(duì)象轉(zhuǎn)為 JS 對(duì)象。
事件
在 jQuery 中將事件封裝成了對(duì)應(yīng)的方法。去掉了 JS 中的 .on 語法。
on(事件名稱,執(zhí)行的功能)：綁定事件。
off(事件名稱)：解綁事件。
遍歷
傳統(tǒng)方式。
對(duì)象.each() 方法。
$.each() 方法。
for of 語句。
一 對(duì)象的轉(zhuǎn)換
就是將js對(duì)象轉(zhuǎn)成jQuery對(duì)象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>對(duì)象轉(zhuǎn)換</title> </head> <body><div id="div">我是div</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>// JS方式，通過id屬性值獲取div元素let jsDiv = document.getElementById("div");alert(jsDiv.innerHTML);//alert(jsDiv.html()); JS對(duì)象無法使用jQuery里面的功能// 將 JS 對(duì)象轉(zhuǎn)換為jQuery對(duì)象let jq = $(jsDiv);alert(jq.html());// jQuery方式，通過id屬性值獲取div元素let jqDiv = $("#div");alert(jqDiv.html());// alert(jqDiv.innerHTML); jQuery對(duì)象無法使用JS里面的功能// 將 jQuery對(duì)象轉(zhuǎn)換為JS對(duì)象,jQuery本質(zhì)是一個(gè)數(shù)組,有索引和值,可以在瀏覽器控制臺(tái)看出來//因?yàn)槭峭ㄟ^id來獲取的,所以只有一個(gè),所以選擇0let js = jqDiv[0];//在控制臺(tái)打印出這個(gè)jQuery對(duì)象 下面是打印結(jié)果/*w.fn.init(1)0: div#divlength: 1__proto__: Object(0)*/console.log(jqDiv);alert(js.innerHTML+"轉(zhuǎn)換的"); </script> </html>二 事件的使用
常用的事件
在 jQuery 中將事件封裝成了對(duì)應(yīng)的方法。去掉了 JS 中的 .on 語法。
事件名 說明
load() 某個(gè)頁面或圖像被完成加載
submit() 當(dāng)表單提交時(shí)觸發(fā)該事件
click() 鼠標(biāo)單擊事件
dblclick() 鼠標(biāo)雙擊事件
blur() 元素失去焦點(diǎn)
focus() 元素獲得焦點(diǎn)
change() 用戶改變域的內(nèi)容
三 事件的綁定與解綁
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的綁定和解綁</title> </head> <body><input type="button" id="btn1" value="點(diǎn)我"><input type="button" id="btn2" value="解綁"><input type="button" id="btn3" value="綁定"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>//點(diǎn)擊事件方法function btn (){alert("快一點(diǎn)點(diǎn),點(diǎn)我嘛!")}//給btn1按鈕綁定單擊事件$("#btn1").on("click",btn);//通過btn2解綁btn1的單擊事件$("#btn2").on("click",function(){$("#btn1").off("click");alert("您不能點(diǎn)擊我了,55555");});//綁定按鈕事件$("#btn3").click(function(){$("#btn1").click(btn);alert("您可以歡快的點(diǎn)擊我了");}); </script> </html>四 事件的切換
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的切換</title><style>#div{border: 1px solid black;}</style> </head> <body><div id="div">鼠標(biāo)放上來,我可以變色喲</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>//方式一 單獨(dú)定義//鼠標(biāo)移上事件// $("#div").mouseover(function(){// //添加背景色// // $("#div").css("background","red")// //代表當(dāng)前獲取的元素對(duì)象// $(this).css("background","red")// });// //鼠標(biāo)移除事件// $("#div").mouseout(function(){// //添加背景藍(lán)色// // $("#div").css("background","blue")// $(this).css("background","blue")// });//方式二 鏈?zhǔn)蕉x,綁定多個(gè)事件$("#div").mouseover(function(){$(this).css("background","red")}).mouseout(function(){$(this).css("background","blue")}).click(function(){//綁定點(diǎn)擊事件//鼠標(biāo)點(diǎn)擊就變成綠色的$(this).css("background","green")}).dblclick(function(){//雙擊事件,解綁上面的所有事件并且將北京色變成白色$(this).off("mouseover").off("mouseout").off("click").css("background","white");}) </script> </html>五 遍歷
選擇器
選擇器
選擇器：類似于 CSS 的選擇器，可以幫助我們獲取元素。
jQuery 中選擇器的語法：$();
基本選擇器
$(“元素的名稱”);
$("#id的屬性值");
$(".class的屬性值");
層級(jí)選擇器
$(“A B”);
$(“A > B”);
屬性選擇器
$(“A[屬性名]”);
$(“A[屬性名=屬性值]”);
過濾器選擇器
$(“A:even”);
$(“A:odd”);
表單屬性選擇器
$(“A:disabled”);
$(“A:checked”);
$(“A:selected”);
一 基本選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本選擇器</title> </head> <body><div id="div1">div1</div><div class="cls">div2</div><div class="cls">div3</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>//1.元素選擇器 $("元素的名稱")let div = $("div");console.log(div)//2.id選擇器 $("#id的屬性值")let div1 = $("#div1");alert(div1[0].innerText)//3.類選擇器 $(".class的屬性值")let cls = $(".cls");console.log(cls) </script> </html>二 層級(jí)選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>層級(jí)選擇器</title> </head> <body><div><span>s1<span>s1-1</span><span>s1-2</span></span><span>s2</span></div><p>p3</p><div></div><p>p1</p><p>p2</p> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>// 1. 后代選擇器 $("A B"); A下的所有B(包括B的子級(jí))let spans1 = $("div span");console.log(spans1);// 2. 子選擇器 $("A > B"); A下的所有B(不包括B的子級(jí))let spans2 = $("div > span");console.log(spans2)// 3. 兄弟選擇器 $("A + B"); A相鄰的B(A的上下B)let ps1 = $("div + p");console.log(ps1)alert(ps1[0].innerText+ps1[1].innerText);// 4. 兄弟選擇器 $("A ~ B"); A相鄰的所有B,包括B的鄰居B也會(huì)獲取let ps2 = $("div ~ p");console.log(ps2) </script> </html>三 屬性選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>屬性選擇器</title> </head> <body><input type="text" value="你好"><input type="password"><input type="password"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>//1.屬性名選擇器 $("元素[屬性名]")let in1 = $("input[type]");//alert(in1.length);console.log(in1)//2.屬性值選擇器 $("元素[屬性名=屬性值]")let in2 = $("input[type='password']");console.log(in2)let text1 = $("input[type='text']");console.log(text1)console.log(text1[0].value) </script> </html>四 過濾選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>過濾器選擇器</title> </head> <body><div>div1</div><div id="div2">div2</div><div>div3</div><div>div4</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>// 1.首元素選擇器 $("A:first");let div1 = $("div:first");console.log(div1);//2.尾元素選擇器 $("A:last");let div4 = $("div:last");console.log(div4);// 3.非元素選擇器 $("A:not(B)");let divs1 = $("div:not(#div2)");console.log(divs1);// 4.偶數(shù)選擇器 $("A:even");let divs2 = $("div:even");console.log(divs2);// 5.奇數(shù)選擇器 $("A:odd");let divs3 = $("div:odd");console.log(divs3);// 6.等于索引選擇器 $("A:eq(index)");let div3 = $("div:eq(2)");console.log(div3);// 7.大于索引選擇器 $("A:gt(index)");let divs4 = $("div:gt(1)");console.log(divs4);// 8.小于索引選擇器 $("A:lt(index)");let divs5 = $("div:lt(2)");console.log(divs5);</script> </html>五 表單屬性選擇器
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表單屬性選擇器</title> </head> <body><input type="text" disabled><input type="text" ><input type="radio" name="gender" value="men" checked>男<input type="radio" name="gender" value="women">女<input type="checkbox" name="hobby" value="study" checked>學(xué)習(xí)<input type="checkbox" name="hobby" value="sleep" checked>睡覺<select><option>---請(qǐng)選擇---</option><option selected>本科</option><option>專科</option></select> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>// 1.可用元素選擇器 $("A:enabled");let ins1 = $("input:enabled");/*這樣中括號(hào)的屬性選擇器是選擇不到的,因?yàn)橹欣ㄌ?hào)的屬性選擇默認(rèn)只能選擇寫在標(biāo)簽中的屬性因?yàn)閑nabled是默認(rèn)隱藏的不會(huì)顯示在標(biāo)簽屬性中,而checked為什么就能拿到呢?是因?yàn)檫@個(gè)屬性是顯示在標(biāo)簽屬性中的*/// console.log($("input[enabled]"))console.log($("input[checked]"))//這里就是寫在標(biāo)簽中的屬性,就能拿到//alert(ins1.length);console.log(ins1);// 2.不可用元素選擇器 $("A:disabled");let ins2 = $("input:disabled");//alert(ins2.length);// 3.單選/復(fù)選框被選中的元素 $("A:checked");let ins3 = $("input:checked");//alert(ins3.length);//alert(ins3[0].value);//alert(ins3[1].value);//alert(ins3[2].value);// 4.下拉框被選中的元素 $("A:selected");let select = $("select option:selected");//select標(biāo)簽下的包含了selected屬性的optionlet select = $("select option[selected]");console.log(select); </script> </html>DOM操作
DOM 操作
操作文本
html() html(…)：獲取或設(shè)置標(biāo)簽的文本，解析標(biāo)簽。
text() text(…)：獲取或設(shè)置標(biāo)簽的文本，不解析標(biāo)簽。
操作對(duì)象
$(“元素”)：創(chuàng)建指定元素。
append(element)：添加成最后一個(gè)子元素，由添加者對(duì)象調(diào)用。
prepend(element)：添加成第一個(gè)子元素，由添加者對(duì)象調(diào)用。
before(element)：添加到當(dāng)前元素的前面，兩者之間是兄弟關(guān)系，由添加者對(duì)象調(diào)用。
after(element)：添加到當(dāng)前元素的后面，兩者之間是兄弟關(guān)系，由添加者對(duì)象調(diào)用。
remove()：刪除指定元素(自己移除自己)。
操作樣式
addClass(value)：給指定的對(duì)象添加樣式類名。
removeClass(value)：給指定的對(duì)象刪除樣式類名。
操作屬性
attr(name,[value])：獲得/設(shè)置屬性的值。
prop(name,[value])：獲得/設(shè)置屬性的值(checked，selected)。
一 操作文本
常用方法
方法 作用
html() 獲取標(biāo)簽的文本
html(value) 設(shè)置標(biāo)簽的文本內(nèi)容，解析標(biāo)簽
text() 獲取標(biāo)簽的純文本
text(value) 設(shè)置標(biāo)簽的純文本內(nèi)容,不解析標(biāo)簽
二 操作對(duì)象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作對(duì)象</title> </head> <body><div id="div"></div><input type="button" id="btn1" value="添加一個(gè)span到div"> <br><br><br><input type="button" id="btn2" value="將加油添加到城市列表最下方"> <input type="button" id="btn3" value="將加油添加到城市列表最上方"> <input type="button" id="btn4" value="將雄起添加到上海下方"> <input type="button" id="btn5" value="將雄起添加到上海上方"> <ul id="city"><li id="bj">北京</li><li id="sh">上海</li><li id="gz">廣州</li><li id="sz">深圳</li></ul><ul id="desc"><li id="jy">加油</li><li id="xq">雄起</li></ul> <br><br><br><input type="button" id="btn6" value="將雄起刪除"> <input type="button" id="btn7" value="將描述列表全部刪除"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>/*1. $("元素") 創(chuàng)建指定元素2. append(element) 添加成最后一個(gè)子元素，由添加者對(duì)象調(diào)用3. appendTo(element) 添加成最后一個(gè)子元素，由被添加者對(duì)象調(diào)用4. prepend(element) 添加成第一個(gè)子元素，由添加者對(duì)象調(diào)用5. prependTo(element) 添加成第一個(gè)子元素，由被添加者對(duì)象調(diào)用6. before(element) 添加到當(dāng)前元素的前面，兩者之間是兄弟關(guān)系，由添加者對(duì)象調(diào)用7. after(element) 添加到當(dāng)前元素的后面，兩者之間是兄弟關(guān)系，由添加者對(duì)象調(diào)用8. remove() 刪除指定元素(自己移除自己)9. empty() 清空指定元素的所有子元素*/// 按鈕一：添加一個(gè)span到div$("#btn1").click(function(){let span = $("<span>span</span>");//document.createElement("標(biāo)簽名")$("#div").append(span);});//按鈕二：將加油添加到城市列表最下方$("#btn2").click(function(){//$("#city").append($("#jy"));$("#jy").appendTo($("#city"));});//按鈕三：將加油添加到城市列表最上方$("#btn3").click(function(){//$("#city").prepend($("#jy"));$("#jy").prependTo($("#city"));});//按鈕四：將雄起添加到上海下方$("#btn4").click(function(){$("#sh").after($("#xq"));});//按鈕五：將雄起添加到上海上方$("#btn5").click(function(){$("#sh").before($("#xq"));});//按鈕六：將雄起刪除$("#btn6").click(function(){$("#xq").remove();});//按鈕七：將描述列表全部刪除$("#btn7").click(function(){//清空所有子元素$("#desc").empty();});</script> </html>三 操作樣式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作樣式</title><style>.cls1{background: pink;height: 30px;}</style> </head> <body><div style="border: 1px solid red;" id="div">我是div</div><input type="button" id="btn1" value="獲取div的樣式"> <input type="button" id="btn2" value="設(shè)置div的背景色為藍(lán)色"> <br><br><br><input type="button" id="btn3" value="給div設(shè)置cls1樣式"> <input type="button" id="btn4" value="給div刪除cls1樣式"> <input type="button" id="btn5" value="給div設(shè)置或刪除cls1樣式"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>// 1.css(name) 獲取css樣式$("#btn1").click(function(){console.log($("#div").css("border"));})// 2.css(name,value) 設(shè)置CSS樣式$("#btn2").click(function(){$("#div").css("background","blue");});// 3.addClass(value) 給指定的對(duì)象添加樣式類名$("#btn3").click(function(){$("#div").addClass("cls1");});// 4.removeClass(value) 給指定的對(duì)象刪除樣式類名$("#btn4").click(function(){$("#div").removeClass("cls1");});// 5.toggleClass(value) 如果沒有樣式類名，則添加。如果有，則刪除$("#btn5").click(function(){$("#div").toggleClass("cls1");});</script> </html>四 操作屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>操作屬性</title> </head> <body><input type="text" id="username"> <br><input type="button" id="btn1" value="獲取輸入框的id屬性"> <input type="button" id="btn2" value="給輸入框設(shè)置value屬性"><br><br><input type="radio" id="gender1" name="gender">男<input type="radio" id="gender2" name="gender">女<br><input type="button" id="btn3" value="選中女"><br><br><select><option>---請(qǐng)選擇---</option><option id="bk">本科</option><option id="zk">專科</option></select><br><input type="button" id="btn4" value="選中本科"> </body> <script src="js/jquery-3.3.1.min.js"></script> <script>// 1.attr(name,[value]) 獲得/設(shè)置屬性的值//按鈕一：獲取輸入框的id屬性$("#btn1").click(function(){//attr 就是 attribute 屬性的意思alert($("#username").attr("id"));});//按鈕二：給輸入框設(shè)置value屬性$("#btn2").click(function(){$("#username").attr("value","給value屬性賦值");});// 2.prop(name,[value]) 獲得/設(shè)置屬性的值(checked，selected)//按鈕三：選中女$("#btn3").click(function(){// prop 就是 properties 的意思,操作復(fù)選框,選擇類$("#gender2").prop("checked",true);});//按鈕四：選中本科$("#btn4").click(function(){$("#bk").prop("selected",true);}); </script> </html>總結(jié)
以上是生活随笔為你收集整理的jQuery的基本语法,选择器,DOM操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅谈Mybatis的一级缓存和二级缓存
- 下一篇： 浅谈:稀疏数组与二维数组之间的转换