?
jQuery是什么
- jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
- jQuery使用戶能夠更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，能夠極大地簡化JavaScript編程。它的宗旨就是：“Write less, do more.“
jQuery引入到HTML
在HTML的body內，底部引入文件jquery-3.2.1.min.js
<script src="jquery-3.2.1.min.js"></script>
<script>$("#b1").on("click", function () {$(".c1").offset({left: 200, top:200});});$(window).scroll(function () {if ($(window).scrollTop() > 100) {$("#b2").removeClass("hide");}else {$("#b2").addClass("hide");}});$("#b2").on("click", function () {$(window).scrollTop(0);})
</script>jQuery對象
jQuery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是 jQuery獨有的。如果一個對象是?jQuery對象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：獲取id值為?i1的元素的html代碼。其中?html()是jQuery里的方法。
相當于：?document.getElementById("i1").innerHTML;
?
一個約定，我們在聲明一個jQuery對象變量的時候在變量名前面加上$：
var $variable = jQuery對像
var variable = DOM對象
$variable[0]//jQuery對象轉成DOM對象拿上面那個例子舉例，jQuery對象和DOM對象的使用：
$("#i1").html();//jQuery對象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM對象使用DOM的方法?
jQuery基礎語法
$(selector).action()
?
查找標簽
基本選擇器
id選擇器：
$("#id")標簽選擇器：
$("tagName")class選擇器：
$(".className")配合使用：
$("div.c1") // 找到有c1 class類的div標簽所有元素選擇器：
$("*")組合選擇器：
$("#id, .className, tagName")層級選擇器：
x和y可以為任意選擇器
$("x y");// x的所有后代y（子子孫孫）
$("x > y");// x的所有兒子y（兒子）
$("x + y")// 找到所有緊挨在x后面的y
$("x ~ y")// x之后所有的兄弟y基本篩選器：
?
:first // 第一個
:last // 最后一個
:eq(index)// 索引等于index的那個元素
:even // 匹配所有索引值為偶數的元素，從 0 開始計數
:odd // 匹配所有索引值為奇數的元素，從 0 開始計數
:gt(index)// 匹配所有大于給定索引值的元素
:lt(index)// 匹配所有小于給定索引值的元素
:not(元素選擇器)// 移除所有滿足not條件的標簽
:has(元素選擇器)// 選取所有包含一個或多個標簽在其內的標簽(指的是從后代元素找)?
例子：
$("div:has(h1)")// 找到所有后代中有h1標簽的div標簽
$("div:has(.c1)")// 找到所有后代中有c1樣式類的div標簽
$("li:not(.c1)")// 找到所有不包含c1樣式類的li標簽
$("li:not(:has(a))")// 找到所有后代中不含a標簽的li標簽屬性選擇器：
[attribute]
[attribute=value]// 屬性等于
[attribute!=value]// 屬性不等于
例子：
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox類型的input標簽
$("input[type!='text']");// 取到類型不是text的input標簽表單篩選器：
:text
:password
:file
:radio
:checkbox:submit
:reset
:button?
例子：
$(":checkbox") // 找到所有的checkbox表單對象屬性:
:enabled
:disabled
:checked
:selected例子：
找到可用的input標簽
<form><input name="email" disabled="disabled" /><input name="id" />
</form>$("input:enabled") // 找到可用的input標簽?找到被選中的option：
?
<select id="s1"><option value="beijing">北京市</option><option value="shanghai">上海市</option><option selected value="guangzhou">廣州市</option><option value="shenzhen">深圳市</option>
</select>$(":selected") // 找到所有被選中的option?
篩選器方法
下一個元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")上一個元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")父親元素：
$("#id").parent()
$("#id").parents() // 查找當前元素的所有的父輩元素
$("#id").parentsUntil() // 查找當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。兒子和兄弟元素：
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們查找
搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。
$("div").find("p")等價于$("div p")
篩選
篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式。
$("div").filter(".c1") // 從結果集中過濾出有c1樣式類的等價于 $("div.c1")
補充：
.first() // 獲取匹配的第一個元素
.last() // 獲取匹配的最后一個元素
.not() // 從匹配元素的集合中刪除與指定表達式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素操作標簽
樣式操作
樣式類
addClass();// 添加指定的CSS類名。
removeClass();// 移除指定的CSS類名。
hasClass();// 判斷樣式存不存在
toggleClass();// 切換CSS類名，如果有就移除，如果沒有就添加。示例：開關燈和模態框
CSS
css("color","red")//DOM操作：tag.style.color="red"示例：
$("p").css("color", "red"); //將所有p標簽的字體設置為紅色位置操作
offset()// 獲取匹配元素在當前窗口的相對偏移或設置元素位置
position()// 獲取匹配元素相對父元素的偏移
scrollTop()// 獲取匹配元素相對滾動條頂部的偏移
scrollLeft()// 獲取匹配元素相對滾動條左側的偏移.offset()方法允許我們檢索一個元素相對于文檔（document）的當前位置。
和?.position()的差別在于：?.position()是相對于相對于父級元素的位移。
?
尺寸：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()文本操作
HTML代碼：
html()// 取得第一個匹配元素的html內容
html(val)// 設置所有匹配元素的html內容文本值：
text()// 取得所有匹配元素的內容
text(val)// 設置所有匹配元素的內容值：
val()// 取得第一個匹配元素的當前值
val(val)// 設置所有匹配元素的值
val([val1, val2])// 設置多選的checkbox、多選select的值例如：
<input type="checkbox" value="basketball" name="hobby">籃球
<input type="checkbox" value="football" name="hobby">足球<select multiple id="s1"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
</select>設置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#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()屬性操作
用于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="1">
<input type="radio" value="2">
<script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").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不支持獲取標簽的自定義屬性。
總結一下：
- 對于標簽上有的能看到的屬性和自定義屬性都用attr
- 對于返回布爾值的比如checkbox、radio和option的是否被選中都用prop。
?
文檔處理
添加到指定元素內部的后面
$(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的前面移除和清空元素
remove()// 從DOM中刪除所有匹配的元素。
empty()// 刪除匹配的元素集合中所有的子節點。例子：
點擊按鈕在表格添加一行數據。
點擊每一行的刪除按鈕刪除當前行數據。
替換
replaceWith()
replaceAll()克隆
clone()// 參數?
摘抄自:https://www.cnblogs.com/liwenzhou/p/8178806.html
?
?
?
?
?
?
?
?
?
?
)
