前言
其實(shí)并沒有什么好說的，就是當(dāng)作wiki方便查閱。用得多就會(huì)了。
$()
$(function(){
```
})
這是我們常用的方式。其意義為讓頁面加載完成后執(zhí)行里面的 jq 代碼。類同的還有：
-
$(document).ready的作用是等頁面的文檔（document）中的節(jié)點(diǎn)都加載完畢后，再執(zhí)行后續(xù)的代碼。
jQuery對象與DOM對象
jQuery對象與DOM對象是不一樣的
例如對于標(biāo)簽<p>
<p id=”imooc”></p>
- 使用javascript的DOM事件
var p = document.getElementById('imooc');
p.innerHTML = '您好！通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑';
p.style.color = 'red';
- 使用jq處理
var $p = $('#imooc');
$p.html('您好！通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑').css('color','red');
通過$('#imooc')方法會(huì)得到一個(gè)$p的jQuery對象，$p是一個(gè)類數(shù)組對象。這個(gè)對象里面包含了DOM對象的信息，然后封裝了很多操作方法，調(diào)用自己的方法html與css，得到的效果與標(biāo)準(zhǔn)的JavaScript處理結(jié)果是一致的。
DOM對象轉(zhuǎn)化為JQuery對象
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個(gè)DOM對象，jQuery方法會(huì)把這個(gè)DOM對象給包裝成一個(gè)新的jQuery對象
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<!--<script type="text/javascript">
var $div = $('div'); //jQuery對象
var div = $div[0];
div.style.color = 'red'; //操作dom對象的屬性
var div2 = $div.get(2);
div2.style.color='blue';
</script>
-->
<script type="text/javascript">
var div = document.getElementsByTagName('div'); //dom對象
//將dom節(jié)點(diǎn)div轉(zhuǎn)化為$div的jquery對象
var $div = $(div);
var $first = $div.first(); //找到第一個(gè)div元素
$first.css('color', 'red'); //給第一個(gè)元素設(shè)置顏色
</script>
jquery的選擇器
- id選擇器。
對于原生的js就是用getElementByID。不過對于jq只要一句：
$( "
#id" )
- 類選擇器
同樣的對于原生js，可以用getElementByClassName同樣jq是
$(".class")
注意前面有個(gè).是作為類選擇器的標(biāo)志。
相對于原生js。有個(gè)很明顯的好處就是循環(huán)的隱式調(diào)用。原本js獲取了一組元素。你要for循環(huán)一下遍歷
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
而對于jq，使用類選擇器之后，比如$(".divbox")將會(huì)把應(yīng)用這個(gè)類的所有元素獲取過來，要賦值的話只需要$(".divbox").css(xxxx)即可。
- 元素選擇器
$("某元素（p）")
和前面不同的是，沒有#，也沒.。應(yīng)用倒是一樣。就像$("div")就是獲取整個(gè)html頁面的div元素集。可以用get(position)來找到。
4.全選擇器
$("*")
5.層選擇器
基本篩選選擇器
<script type="text/javascript">
//找到第一個(gè)div
$('.div:first').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//找到最后一個(gè)div
$('.div:last').css("color", "#CD00CD");
</script>
<script type="text/javascript">
//:even 選擇所引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)
$('.div:even').css("border", "3px groove red");
</script>
<script type="text/javascript">
//:odd 選擇所引值為奇數(shù)的元素，從 0 開始計(jì)數(shù)
$('.div:odd').css("border", "3px groove blue");
</script>
---
<script type="text/javascript">
//:eq
//選擇單個(gè)
$('.aaron:eq(2)').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:gt 選擇匹配集合中所有索引值大于給定index參數(shù)的元素
$('.aaron:gt(2)').css("border", "3px groove blue");
</script>
<script type="text/javascript">
//:lt 選擇匹配集合中所有索引值小于給定index參數(shù)的元素
//與:gt相反
$('.aaron:lt(2)').css("color", "#CD00CD");
</script>
---
<script type="text/javascript">
//:not 選擇所有元素去除不匹配給定的選擇器的元素
//選中所有緊接著沒有checked屬性的input元素后的p元素，賦予顏色
$('input:not(:checked)+p').css("background-color", "#CD00CD");
</script>
內(nèi)容選擇器
這里比較抽象的是parent和empty。舉個(gè)例子：
<script type="text/javascript">
//選擇所有包含子元素或者文本的a元素
//增加一個(gè)藍(lán)色的邊框
$("a:parent").css("border", "3px groove blue");
</script>
<script type="text/javascript">
//找到a元素下面的所有空節(jié)點(diǎn)(沒有子元素)
//增加一段文本與邊框
$("a:empty").text(":empty").css("border", "3px groove red");
</script>
a:parent就是a標(biāo)簽不為空，a:parent就可以選中它。反之a:empty就是a標(biāo)簽為空的時(shí)候選中
可見性篩選選擇器
屬性選擇器
子元素篩選選擇器
表單元素選擇器
<script type="text/javascript">
//匹配所有input元素中的單選按鈕,并選中
$('input:checkbox').attr('checked','true');
</script>
屬性與樣式
.attr()與.removeAttr()
attribute:屬性
- attr(傳入屬性名)：獲取屬性的值
- attr(屬性名, 屬性值)：設(shè)置屬性的值
- attr(屬性名,函數(shù)值)：設(shè)置屬性的函數(shù)值
- attr(attributes)：給指定元素設(shè)置多個(gè)屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }
removeAttr()：移除所有的屬性
html()及.text()
html()在括號里面添加內(nèi)容。而不是文本。本質(zhì)上就是調(diào)用innerHTML的方法來實(shí)現(xiàn)的。封裝起來了。
**html() 不傳入值，就是獲取集合中第一個(gè)匹配元素的HTML內(nèi)容 **
text()：處理的是文本內(nèi)容。
.val()
讀取的是表單元素中的value的值。如果選中多個(gè)元素，只能讀取第一個(gè)元素。和html()一樣
.html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容。
增加樣式addClass()
動(dòng)態(tài)添加樣式，貌似沒什么說的。相對應(yīng)的就是removeClass()
切換樣式.toggleClass()
元素的數(shù)據(jù)存儲(chǔ)
jquery提供的存儲(chǔ)接口
jQuery.data( element, key, value ) //靜態(tài)接口,存數(shù)據(jù)
jQuery.data( element, key ) //靜態(tài)接口,取數(shù)據(jù)
.data( key, value ) //實(shí)例接口,存數(shù)據(jù)
.data( key ) //實(shí)例接口,存數(shù)據(jù)
同樣的也提供2個(gè)對應(yīng)的刪除接口，使用上與data方法其實(shí)是一致的，只不過是一個(gè)是增加一個(gè)是刪除罷了
jQuery.removeData( element [, name ] )
.removeData( [name ] )
