jQuery入门学习
jQuery介紹
jQuery優(yōu)勢(shì)
? ?jQuery內(nèi)容
?
? ?jQuery對(duì)象
jQuery對(duì)象就是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是 jQuery獨(dú)有的。如果一個(gè)對(duì)象是?jQuery對(duì)象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：獲取id值為?i1的元素的html代碼。其中?html()是jQuery里的方法。
相當(dāng)于：?document.getElementById("i1").innerHTML;
雖然?jQuery對(duì)象是包裝?DOM對(duì)象后產(chǎn)生的，但是?jQuery對(duì)象無(wú)法使用?DOM對(duì)象的任何方法，同理?DOM對(duì)象也沒(méi)不能使用?jQuery里的方法。
一個(gè)約定，我們?cè)诼暶饕粋€(gè)jQuery對(duì)象變量的時(shí)候在變量名前面加上$
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? jQuery基礎(chǔ)語(yǔ)法
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? $(selector).action()
var $variable = jQuery對(duì)像 var variable = DOM對(duì)象 $variable[0]//jQuery對(duì)象轉(zhuǎn)成DOM對(duì)象$("#i1").html();//jQuery對(duì)象可以使用j jQuery對(duì)象和DOM對(duì)象的使用： Query的方法 $("#i1")[0].innerHTML;// DOM對(duì)象使用DOM的方法
一.尋找元素(選擇器和篩選器)?
a.選擇器：
1.基本選擇器：
1 $("*") $("#id") $(".class") $("element") $(".class,p,div")2.層級(jí)選擇器 ：
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")?
3..基本篩選器：
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")?
4.屬性選擇器 ：
$('[id="div1"]') $('["alex="sb"][id]')
5.表單選擇器
$("[type='text']")----->$(":text") #注意只適用于input標(biāo)簽 : $("input:checked")使用方法：
script>$("li").css("color","red"); #數(shù)組 $("li:first").css("color","red"); #第一個(gè)$("li:last").css("color","red"); #第二個(gè) $("li:eq(2)").css("color","red"); #查找索引 $("li:even").css("color","red"); #基數(shù)行 $("li:odd").css("color","red"); #偶數(shù)行 $("li:gt(1)").css("color","red"); #大于某個(gè)數(shù) $("li:lt(2)").css("color","red"); #小于某個(gè)數(shù)</script> </body> </html> 基本選擇器 演示?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><p alex="sb">1111</p> <p alex="sb">1111</p> <p alex="sb" id="p4">1111</p><script src="jquery-3.2.1.js"></script><script>$("[alex]").css("color","red") #都變紅 $("[alex='sb']").css("color","red") #都變紅 $("[alex='sb'][id='p4']").css("color","red") #最后一個(gè)變紅</script> </body> </html> 屬性選擇器 演示 !DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><input type="text"> <input type="checkbox"> <input type="submit"><script src="jquery-3.2.1.js"></script><script>$("[type='text']").css("width","300px");$(":text").css("width","300px"); #簡(jiǎn)寫(xiě)</script> </body> </html> 表單選擇器 演示?b.篩選器：
1.過(guò)濾篩選器 :
$("li").eq(2) $("li").first() $("ul li").hasclass("test")2.查找篩選器：
$("div").find(".test")下一個(gè)元素：
$(".test").next() ? $(".test").nextAll()?? $(".test").nextUntil()
上一個(gè)元素：
$("div").prev()????????? $("div").prevAll()?????????? $("div").prevUntil()?? ?
? 父親元素：
$(".test").parent()? ? ? $(".test").parents()? ? ? ? $(".test").parentUntil() ? 兒子和兄弟元素：? ? ? ? ? ? ? ? ? ? ? $("div").siblings()? ??$("#id").children();// 兒子們? ? ? $("#id").find()// 搜索所有與指定表達(dá)式匹配的元素。這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。
?
示例：左側(cè)菜單：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>左側(cè)菜單示例</title><style>.left {position: fixed;left: 0;top: 0;width: 20%;height: 100%;background-color: rgb(47, 53, 61);}.right {width: 80%;height: 100%;}.menu {color: white;}.title {text-align: center;padding: 10px 15px;border-bottom: 1px solid #23282e; }.items {background-color: #181c20; }.item {padding: 5px 10px;border-bottom: 1px solid #23282e; }.hide {display: none;}</style> </head> <body><div class="left"><div class="menu"><div class="title">菜單一</div><div class="items"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div><div class="title">菜單二</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div><div class="title">菜單三</div><div class="items hide"><div class="item">111</div><div class="item">222</div><div class="item">333</div></div></div> </div> <div class="right"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script>$(".title").click(function (){ // jQuery綁定事件// 隱藏所有class里有.items的標(biāo)簽$(".items").addClass("hide"); //批量操作$(this).next().removeClass("hide");}); </script> View
empty remove 演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><div class="c1"><p>ppp</p></div><button>button</button><script src="jquery-3.2.1.js"></script><script>$("button").click(function () {$("p").empty()})</script></body> </html> View Code
?
clone input標(biāo)簽 演示
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><div class="outer"><div class="iterm"><button οnclick="add(this)">+</button><input type="text"></div></div> <script src="jquery-3.2.1.js"></script><script>function add(self) {var $clone_obj=$(self).parent().clone();$clone_obj.children("button").text("-");$clone_obj.children("button").attr("onclick","remove_obj(this)");$(".outer").append($clone_obj);}function remove_obj(self) {$(self).parent().remove()}</script></body> </html> View Code?
樣式操作? ? ?
樣式類(lèi)
addClass();// 添加指定的CSS類(lèi)名。 removeClass();// 移除指定的CSS類(lèi)名。 hasClass();// 判斷樣式存不存在 toggleClass();// 切換CSS類(lèi)名，如果有就移除，如果沒(méi)有就添加。 CSS：css("color","red")//DOM操作：tag.style.color="red"
示例：
$("p").css("color", "red"); //將所有p標(biāo)簽的字體設(shè)置為紅色位置：
offset()//獲取匹配元素在當(dāng)前窗口的相對(duì)偏移或設(shè)置元素位置 position()//獲取匹配元素相對(duì)父元素的偏移 scrollTop()//獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移 scrollLeft()//獲取匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移.offset()方法允許我們檢索一個(gè)元素相對(duì)于文檔（document）的當(dāng)前位置。
和?.position()的差別在于：?.position()是相對(duì)于相對(duì)于父級(jí)元素的位移。
?文本操作? ? ? ? ? ? ?
HTML代碼:
html()// 取得第一個(gè)匹配元素的html內(nèi)容 html(val)// 設(shè)置所有匹配元素的html內(nèi)容文本值：
text()//取得所有匹配元素的內(nèi)容 text(val)//設(shè)置所有匹配元素的內(nèi)容值：
val()// 取得第一個(gè)匹配元素的當(dāng)前值 val(val)// 設(shè)置所有匹配元素的值 val([val1, val2])// 設(shè)置checkbox、select的值示例：
獲取被選中的checkbox或radio的值：
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1">創(chuàng)建一個(gè)使用例子：
?
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery val示例</title> </head> <body><label for="s1">城市</label> <select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">廣州市</option><option value="shenzhen">深圳市</option> </select> <hr> <label for="s2">愛(ài)好</label> <select id="s2" multiple="multiple"><option value="basketball" selected>籃球</option><option value="football">足球</option><option value="doublecolorball" selected>雙色球</option> </select><script src="jquery-3.2.1.min.js"></script> <script>// 單選下拉框$("#s1").val("shanghai");// 多選下拉框$("#s2").val(["basketball", "football"]); </script> </body> </html> jQuery val()值使用?
二.操作元素(屬性，css，文檔處理)
?
? ? ? 屬性操作? ?
用于ID等或自定義屬性：
?
1 #--------------------------屬性 2 $("").attr(); #新建屬性 查看屬性 修改屬性 自己定義的屬性 3 $("").removeAttr(); #刪除這個(gè)Attr屬性 4 $("").prop(); #固有的屬性 5 $("").removeProp(); 6 #--------------------------CSS類(lèi) 7 $("").addClass(class|fn) 8 $("").removeClass([class|fn]) 9 #--------------------------HTML代碼/文本/值 10 $("").html([val|fn]) 11 $("").text([val|fn]) 12 $("").val([val|fn|arr]) #取固有屬性，input標(biāo)簽 13 #--------------------------- 14 $("").css("color","red")?
attr的演示：
主代碼：
<div class="div1" con="c1"></div><script src="jquery-3.2.1.js"></script> <script>console.log($("div").attr("con")) #查看屬性的值$("div").attr("con","c2") #修改屬性$("div").attr("alex","c2") #新建屬性
?
prot演示示例：
?
prop() // 獲取屬性 removeProp() // 移除屬性 <input type="checkbox" checked="checked">是否可見(jiàn) <input type="checkbox" >是否可見(jiàn)<script src="jquery-3.2.1.js"></script> <script>console.log($(":checkbox:first").prop("checked")) //打印當(dāng)前上面的內(nèi)容console.log($(":checkbox:last").prop("checked"))
?
示例：全選、反選、取消
<input type="checkbox" value="1"> <input type="radio" value="2"> <script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true); </script>?
?
?
?
?
?
?
?
?
?
?
? /
?
注意：
在1.x及2.x版本的jQuery中使用attr對(duì)checkbox進(jìn)行賦值操作時(shí)會(huì)出bug，在3.x版本的jQuery中則沒(méi)有這個(gè)問(wèn)題。為了兼容性，我們?cè)谔幚韈heckbox和radio的時(shí)候盡量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1"> <input type="radio" value="2"> <script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true); </script>示例：全選、反選、取消
文檔處理
添加到指定元素內(nèi)部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B添加到指定元素內(nèi)部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面移除和清空元素
remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節(jié)點(diǎn)。例子：
點(diǎn)擊按鈕在表格添加一行數(shù)據(jù)。
點(diǎn)擊每一行的刪除按鈕刪除當(dāng)前行數(shù)據(jù)。
替換
replaceWith() replaceAll()克隆
clone()// 參數(shù)克隆示例：
?點(diǎn)擊復(fù)制按鈕事件
常用事件
click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...})keydown和keyup事件組合示例：
?按住shift鍵批量操作hover事件示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>hover示例</title><style>* {margin: 0;padding: 0;}.nav {height: 40px;width: 100%;background-color: #3d3d3d;position: fixed;top: 0;}.nav ul {list-style-type: none;line-height: 40px;}.nav li {float: left;padding: 0 10px;color: #999999;position: relative;}.nav li:hover {background-color: #0f0f0f;color: white;}.clearfix:after {content: "";display: block;clear: both;}.son {position: absolute;top: 40px;right: 0;height: 50px;width: 100px;background-color: #00a9ff;display: none;}.hover .son {display: block;}</style> </head> <body> <div class="nav"><ul class="clearfix"><li>登錄</li><li>注冊(cè)</li><li>購(gòu)物車(chē)<p class="son hide">空空如也...</p></li></ul> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(".nav li").hover(function () {$(this).addClass("hover");},function () {$(this).removeClass("hover");} ); </script> </body> </html>實(shí)時(shí)監(jiān)聽(tīng)input輸入值變化示例：
?input值變化事件事件綁定
- events： 事件
- selector: 選擇器（可選的）
- function: 事件處理函數(shù)
移除事件
off()?方法移除用?.on()綁定的事件處理程序。
- events： 事件
- selector: 選擇器（可選的）
- function: 事件處理函數(shù)
阻止后續(xù)事件執(zhí)行
注意：
像click、keydown等DOM中定義的事件，我們都可以使用`.on()`方法來(lái)綁定事件，但是`hover`這種jQuery中定義的事件就不能用`.on()`方法來(lái)綁定了。
想使用事件委托的方式綁定hover事件處理函數(shù)，可以參照如下代碼分兩步綁定事件：
$('ul').on('mouseenter', 'li', function() {//綁定鼠標(biāo)進(jìn)入事件$(this).addClass('hover'); }); $('ul').on('mouseleave', 'li', function() {//綁定鼠標(biāo)劃出事件$(this).removeClass('hover'); });頁(yè)面載入
當(dāng)DOM載入就緒可以查詢(xún)及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)。這是事件模塊中最重要的一個(gè)函數(shù)，因?yàn)樗梢詷O大地提高web應(yīng)用程序的響應(yīng)速度。
兩種的代碼：
$(document).ready(function(){ // 在這里寫(xiě)你的JS代碼... })簡(jiǎn)寫(xiě)：
$(function(){ // 你在這里寫(xiě)你的代碼 })文檔加載完綁定事件，并且阻止默認(rèn)事件發(fā)生：
?登錄校驗(yàn)示例事件委托
事件委托是通過(guò)事件冒泡的原理，利用父標(biāo)簽去捕獲子標(biāo)簽的事件。
示例：
表格中每一行的編輯和刪除按鈕都能觸發(fā)相應(yīng)的事件。
?
##這是一個(gè)委托事件找到table大表格中的input 中帶有delete樣式類(lèi)的進(jìn)行綁定點(diǎn)擊事件 $("table").on("click", "input.delete", function () {##把body標(biāo)簽中的tr變量追加到tr新建的標(biāo)簽中
$("tbody").append(trEle);
#找到當(dāng)前點(diǎn)擊事件的上級(jí)的上級(jí)后進(jìn)行刪除事件 $(this).parent().parent().remove();
?
?
?
$("table").on("click", ".delete", function () {// 刪除按鈕綁定的事件 })動(dòng)畫(huà)效果
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑動(dòng) slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定義（了解即可） animate(p,[s],[e],[fn])自定義動(dòng)畫(huà)示例：
?點(diǎn)贊特效簡(jiǎn)單示例補(bǔ)充
each
jQuery.each(collection, callback(indexInArray, valueOfElement))：
?
循環(huán):
?
描述：一個(gè)通用的迭代函數(shù)，它可以用來(lái)無(wú)縫迭代對(duì)象和數(shù)組。數(shù)組和類(lèi)似數(shù)組的對(duì)象通過(guò)一個(gè)長(zhǎng)度屬性（如一個(gè)函數(shù)的參數(shù)對(duì)象）來(lái)迭代數(shù)字索引，從0到length - 1。其他對(duì)象通過(guò)其屬性名進(jìn)行迭代。
方法一》
<script>arrs=[11,22,33];arrs={"name":"egon","age":18}$.each(arrs,function (i,j) {console.log(i);console.log(j);})</script>?
li =[10,20,30,40] $.each(li,function(i, v){console.log(i, v);//index是索引，ele是每次循環(huán)的具體元素。 })輸出：
010 120 230 340.each(function(index, Element))：
描述：遍歷一個(gè)jQuery對(duì)象，為每個(gè)匹配元素執(zhí)行一個(gè)函數(shù)。
.each()?方法用來(lái)迭代jQuery對(duì)象中的每一個(gè)DOM元素。每次回調(diào)函數(shù)執(zhí)行時(shí)，會(huì)傳遞當(dāng)前循環(huán)次數(shù)作為參數(shù)(從0開(kāi)始計(jì)數(shù))。由于回調(diào)函數(shù)是在當(dāng)前DOM元素為上下文的語(yǔ)境中觸發(fā)的，所以關(guān)鍵字?this?總是指向這個(gè)元素。
// 為每一個(gè)li標(biāo)簽添加foo $("li").each(function(){$(this).addClass("c1"); });注意: jQuery的方法返回一個(gè)jQuery對(duì)象，遍歷jQuery集合中的元素 - 被稱(chēng)為隱式迭代的過(guò)程。當(dāng)這種情況發(fā)生時(shí)，它通常不需要顯式地循環(huán)的?.each()方法：
也就是說(shuō)，上面的例子沒(méi)有必要使用each()方法，直接像下面這樣寫(xiě)就可以了：
$("li").addClass("c1"); // 對(duì)所有標(biāo)簽做統(tǒng)一操作注意：
在遍歷過(guò)程中可以使用?return?false提前結(jié)束each循環(huán)。
終止each循環(huán)
return false；伏筆...
.data()
在匹配的元素集合中的所有元素上存儲(chǔ)任意相關(guān)數(shù)據(jù)或返回匹配的元素集合中的第一個(gè)元素的給定名稱(chēng)的數(shù)據(jù)存儲(chǔ)的值。
.data(key, value):
描述：在匹配的元素上存儲(chǔ)任意相關(guān)數(shù)據(jù)。
$("div").data("k",100);//給所有div標(biāo)簽都保存一個(gè)名為k，值為100.data(key):
描述: 返回匹配的元素集合中的第一個(gè)元素的給定名稱(chēng)的數(shù)據(jù)存儲(chǔ)的值—通過(guò)?.data(name,?value)或?HTML5 data-*屬性設(shè)置。
$("div").data("k");//返回第一個(gè)div標(biāo)簽中保存的"k"的值.removeData(key):
描述：移除存放在元素上的數(shù)據(jù)，不加key參數(shù)表示移除所有保存的數(shù)據(jù)。
$("div").removeData("k"); //移除元素上存放k對(duì)應(yīng)的數(shù)據(jù)示例：
模態(tài)框編輯的數(shù)據(jù)回填表格
插件(了解即可)
jQuery.extend(object)
jQuery的命名空間下添加新的功能。多用于插件開(kāi)發(fā)者向 jQuery 中添加新函數(shù)時(shí)使用。
示例：
<script> jQuery.extend({min:function(a, b){return a < b ? a : b;},max:function(a, b){return a > b ? a : b;} }); jQuery.min(2,3);// => 2 jQuery.max(4,5);// => 5 </script>jQuery.fn.extend(object)
一個(gè)對(duì)象的內(nèi)容合并到j(luò)Query的原型，以提供新的jQuery實(shí)例方法。
<script>jQuery.fn.extend({check:function(){return this.each(function(){this.checked =true;});},uncheck:function(){return this.each(function(){this.checked =false;});}}); // jQuery對(duì)象可以使用新添加的check()方法了。 $("input[type='checkbox']").check(); </script>單獨(dú)寫(xiě)在文件中的擴(kuò)展：
(function(jq){jq.extend({funcName:function(){...},}); })(jQuery);例子：
自定義的jQuery登錄驗(yàn)證插件
?HTML文件 ?JS文件?傳參版插件：
?HTML文件 ?JS文件課后習(xí)題：
關(guān)注 - 25
粉絲 - 131 我在關(guān)注他?取消關(guān)注 2 0 ??上一篇：Python連接MySQL數(shù)據(jù)庫(kù)之pymysql模塊使用
??下一篇：Bootstrap框架 posted @?2018-01-02 21:00?Q1mi?閱讀(1419) 評(píng)論(0)?編輯?收藏
?
轉(zhuǎn)載于:https://www.cnblogs.com/jsp0/p/8891339.html
總結(jié)
以上是生活随笔為你收集整理的jQuery入门学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： lLinux 下 Stress 压力测试
- 下一篇： bzoj 4945: [Noi2017]