jQuery快速入门专题
jQuery入門專題
本人博客特點：最高重要等級為*****（五紅星），依次減少代表重要性相對較低！
一、jQuery簡介
jQuery 是一個 JavaScript的一個庫，也就是說jQuery是基于JavaScript框架開發出來的。其目的是為了最大化的簡化了JavaScript書寫方式。
jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種更為簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。 jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。———本段來自網絡?
二、jQuery內容
1.??查找標簽（選擇器）
2.??篩選器
3.??操作標簽
3.1.??樣式操作
3.2.??位置操作
3.3.? 文本操作
3.4.??屬性操作
3.5.??文檔操作
4.? 事件
5.? 動畫
6.? 插件
三、jQuery對象
?jQuery對象是通過jQuery包裝DOM對象后產生的對象。按平時的使用來說，只能是jQuery對象，才能使用jQuery里面的方法【因為，平時在寫一個js腳本的時候，里面可能有js原生的東西，也可能會有jQuery的一些語法一起使用（這里涉及的到JavaScript和jQuery之間的相互轉換，下面內容會提到）?】。jQuery的方法是用例子如：$( "#nav" ).html()。
“ $( "#nav" ).html() ; ”這一句的代碼分析：在這里的 $( "#nav" )就是jQuery對象（也就是點的左邊），而點的右邊html()就是jQuery對象的方法。這句話的意思是：獲取id值為nav的標簽（元素）的html代碼。
注意：如果html里面有內容，例如: $( "#nav" ).html("<p>555</p>")的意思就不是獲取nav標簽的html代碼了，而是變成了，將nav標簽里面的所有html全部被替換成<p>555</p>，這個是涉及到操作方法，下面會有細講，這里只是做個對比，抱磚引玉而且。
與原生JavaScript對比：?“$( "#nav" ).html() ;? ? 相當于原生js的? ? ?document.getElementById("nav").innerHTML;
雖然jQuery對象是通過包裝DOM對象后生成的，但是jQuery對象的是無法直接使用DOM對象的任何方法，同樣DOM對象也無法直接使用jQuery對象的任何方法。（這里也涉及的到JavaScript和jQuery之間的相互轉換，下面內容會提到）?
大家的約定：當我們要聲明一個jQuery對象的變量的時候要在變量的前面加入$符號：例如
var? $run = jQuery對象? ? ??
var run = DOM對象
JavaScript和jQuery之間的相互轉換：
拿上面的例子來說：
jQuery對象：$( "#nav" )
DOM對象：document.getElementById("nav")
1.? jQuery對象轉換成DOM對象：$( "#nav" )[0] ***********************************************************在jQuery對象添加一個索引，即可變成了DOM對象（因為jQuery對象獲取到的標簽是一個數組）
2.? DOM對象轉換成jQuery對象：$(document.getElementById("nav"))或者 $($( "#nav" )[0]??)? ******在DOM對象的外面添加? ?$()?就可以jQuery對象
四、jQuery基礎語法
?jQuery語法是通過選取（查找）HTML元素，并隨之對已選取到的元素執行某些操作。
基礎語法：$(selector).action()
?
- selector：選擇符。”查詢“和”查找”HTML文檔里面的元素。
?
- action：Query對元素的操作。
實例：
-
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隱藏所有 id="test" 的元素
五、jQuery查找標簽（選擇器）
5.1? 基本選擇器?
5.1.1? id選擇器：
$("#main_id")5.1.2? 標簽選擇器：
$("div")$("p")$("img")5.1.3? class（樣式類）選擇器：
$(".main_class")5.1.4? 配合使用：
$("div.main_class")或者 $("div#main_class")
?
5.1.5? 通用選擇器：
$("*")?
5.1.6? 組合選擇器：
$("#main_id,.nav_class,div.main_class")?
5.2? 層級選擇器
x, y可以為任意選擇器，x，可以調換。
$("x y") //x的所有后代y $("x>y") //x的所有兒子y $("x+y") //所有緊挨在x后臺的y $("x~y") //x的所有兄弟y?
5.3? 基本篩選器
5.3.1? 常用的篩選器：
//div表示選擇器，這里可以是任意選擇器。例如;div、#main ul li、x~y等等$("div:first") //第一個
$("div:last") //最后一個
$("div:eq(index)") //索引等于index的那個元素
$("div:even") //比配所有索引值為偶數的元素，從0開始計數
$("div:odd") //比配所有索引值為奇數的元素，從0開始計數
$("div:gt(index)") //比配所有大于給定索引值的元素
$("div:lt(index)") //比配所有小于給定索引值的元素
$("div:not(元素選擇器)") //移除所有滿足not條件的標簽
$("div:has(元素選擇器)") //選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)
?
例子：
$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽 $("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽 $("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽 $("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽練習：
未更新
??
5.4? 屬性選擇器
attribute：”屬性“的意思。[attribute] [attribute=value]// 屬性等于 [attribute!=value]// 屬性不等于
例子：
<input type="text">; <input type="password">; <input type="button">; //應用 $("input[type='text']");$("input[type='password']"); // 取到password類型的input標簽 $("input[type!='button']");// 取到類型不是button的input標簽?
?
5.5? 表單選擇器
?分為兩組來記，第一組（五個），第二組（三個，都是按鈕）
:text //例子：$(":text ") 找到表單中的所有text :password //例子：$(":password") 找到表單中的所有password :checkbox //例子：$(":checkbox") 找到表單中的所有checkbox :radio //例子：$(":radio") :file //例子：$(":file") :submit //例子：$(":submit") :reset //例子：$(":reset") :button // 例子：$(":button ")??
通過屬性找到對應的標簽(4個)：
:enabled //標簽可用屬性 :disabled //標簽可用屬性:checked
:selected
例子：
1.找到可用的input標簽
<form><input name="username" disabled="disabled"><input name="id" /> </form> $("input:enabled") // 找到可用的input標簽2.找到被選中的option：
<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">廣州市</option><option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被選中的option六? jQuery篩選器
6.1? 找下一個元素：
$("#nav").next(); $("#nav").nextAll(); $("#nav").nextUntil("#id");6.2??找上一個元素：
$ ("#nav").prev();$("#nav").prevAll(); $("#nav").prevUntil("#id");
?
6.3??找父親元素：
$("#nav").parent(); $("#nav").parents(); //查找當前元素的所有父輩 $("#nav").parentsUntil("#id"); //查找當前標簽的所有父輩，直到找到ID值為id的父輩元素?
6.4??找兒子和兄弟元素：
$("#nav").children(); //查找當前元素下面的所有兒子們 $("#nav").siblings(); //查找與當前元素是兄弟（同級）們?
6.5??查找方法（? ?.find()? ?）：
搜索當前元素的指定后代元素的方法。這個方法是找出正在處理的元素的后代的好方法。
$("div").find("p"); //這句話等價于 $("div p");?
6.6??篩選方法（? ?.filter()? ）：
篩選出與filter方法括號內表達式匹配的元素集合。這個方法可以很好的縮小匹配范圍，filter方法括號內的選擇器表達式可以是多個，逗號分隔即可。跟組合選擇器一樣。
$("div").filter(".c1") // 從div結果集中過濾出有c1樣式類 這句話等價于 $("div.c1")?
6.7??幾個篩選器和篩選方法的對比：
.first() // 獲取匹配的第一個元素 篩選器: :first .last() // 獲取匹配的最后一個元素 篩選器: :last .not() // 從匹配元素的集合中刪除與指定表達式匹配的元素 篩選器: :not(元素選擇器) .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 篩選器: :has(元素選擇器) .eq() // 索引值等于指定值的元素 篩選器: :eq(index)兩個不同點：
1.篩選方法前面是點“.“，篩選器是冒號”:”
2.篩選方法后面有小括號，篩選器則是沒有
?
例子：
待更新………………
七、jQuery操作標簽
7.1? 樣式類名操作
addClass(“類名”); // 添加括號里指定的類名 removeClass(“類名”); //移除括號里的css類名 hasClass("類名")； //判斷樣式是否存在 toggleClass("類名"); //切換css類名，如果有類名就移除，反子就添加示例：
正則更新中………………
?
7.2??位置操作
offset() //獲取匹配元素在當前窗口(window)的相對位置或設置元素的位置 position() //獲取匹配元素相對父元素的偏移 scrollTop() //獲取匹配元素相對滾動條頂部的偏移 scrollLeft() //獲取匹配元素相對滾動條左側的偏移.offset()方法允許我們檢索一個元素相對于文檔（document）的當前位置。
和?.position()的差別在于：?.position()是相對于相對于父級元素的位移。
?
示例：
正則更新中………………
?
7.3??文本操作
7.3.1? HTML代碼：
html() //取得第一個元素的html內容 html(val) 設置所有匹配的惠特米勒內容7.3.2??文本代碼：
text() // 設置所有匹配元素的內容 text(val) // 設置所有匹配元素的內容?
7.3.3??設置值：
$("[name = ''hobby]").val(['basketable','foontball'])$("#s1").val (["1", "2"])例子：
獲取被選中的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">使用示例：
$("input[name='gender']:checked").val()?
7.3.4??值：
val()// 取得第一個匹配元素的當前值 val(val)// 設置所有匹配元素的值 val([val1, val2])// 設置多選的checkbox、多選select的值?
示例：
正則更新中………………
7.3.5??屬性操作
用ID等標簽，自定義屬性：
attr(attrName) //返回第一個匹配元素的屬性 attr(attrName,attrValue) //為所有匹配元素設置一個屬性值 attr({k1:v1, k2:v2}) // 為所有匹配元素設置多個屬性值 removeAttr() // 從每一個匹配的元素中刪除一個屬性?
用于checkbox和radio
prop() // 獲取屬性 removeProp() // 移除屬性?
值得注意：
在1.X和2.X版本的jQuery中使用attr對checkbox進行賦值操作的時候會有bug出現，但是在3.X版本的jQuery中則沒有這個問題。為了解決這個問題，我們在除了checkbox和radio的時候最好使用prop()，不要使用attr("checked","checked").
<input type="checkbox" value="checkbox"> <input type="radio" value="radio"> <script> $(":checkbox").prop("checked",true); $(":radio").prop("checked",true); </script>prop()和attr()的區別：
attr的全稱為attribute：屬性。
prop的全稱為property：也是屬性。
雖然都是屬性，但他們所指的屬性并不相同，attr所指的屬性是HTML標簽屬性，而prop所指的是DOM對象屬性，可以認為attr是顯式的，而prop是隱式的。
舉個例子：
<input type="checkbox" id="i1" value="1">針對上面的代碼，
$("#i1").attr("checked") // undefined $("#i1").prop("checked") // false可以看到attr獲取一個標簽內沒有的東西會得到undefined，而prop獲取的是這個DOM對象的屬性，因此checked為false。
如果換成下面的代碼：
<input type="checkbox" checked id="i1" value="1">再執行：
$("#i1").attr("checked") // checked $("#i1").prop("checked") // true這已經可以證明attr的局限性，它的作用范圍只限于HTML標簽內的屬性，而prop獲取的是這個DOM對象的屬性，選中返回true，沒選中返回false。
接下來再看一下針對自定義屬性，attr和prop又有什么區別：
<input type="checkbox" checked id="i1" value="1" me="自定義屬性">執行以下代碼：
$("#i1").attr("me") // "自定義屬性" $("#i1").prop("me") // undefined可以看到prop不支持獲取標簽的自定義屬性。
總結一下：
?
7.3.6??文檔處理
添加到指定元素內部的后面
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B添加到指定元素內部的前面
$(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的前面移除和清空元素
$(A).remove()// 從DOM中刪除所有匹配的元素。 empty()// 刪除匹配的元素集合中所有的子節點。?
替換
replaceWith() replaceAll()克隆
clone()// 參數示例正在更新^………………
?
7.3.7??尺寸
height() width() innerHeight() innerWidth() outerHeight() outerWidth()?
?
八、jQuery事件
?常用事件
?
click(function(){………………}) //點擊事情 hover(function(){………………}) // focus(function(){…………………}) //獲得光標事件，當點擊搜索框時，改變搜索框背景色 blur(function(){………………}) //失去光標事件，在輸入域外面點擊，使其失去焦點 change(function(){………………}) //在某個標簽或者控件被使用或改變時，可以改變屬性keyup(function(){…………………}) //當按下按鍵時，改變文本域的顏色：
?
?
?
?
?
九、jQuery動畫
?
十、jQuery插件
?
轉載于:https://www.cnblogs.com/mashangsir/p/11277547.html
總結
以上是生活随笔為你收集整理的jQuery快速入门专题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 滚动条全局样式修改与局部修改
- 下一篇： 二维码的生成与扫描