引入jQuery可以通過下載之后引入或者網(wǎng)絡(luò)引入：
<script src=“存放的位置”></script>jQuery框架提供了一個全局對象：jQuery，它還有另外一個別名：$
所有的Dom操作都可以通過jQuery來完成矢赁。
*在文檔就緒之前，無法安全的操縱頁面贬丛。(window).on(‘load’, function(){…})一旦整個頁面（圖像或iframe豺憔，而不僅僅是DOM）準備就緒额获，其中包含的代碼就會運行够庙。
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js”></script>
<script>
$( document ).ready(function() {
console.log( “document loaded” );
});
$( window ).on( “l(fā)oad”, function() {
console.log( “window loaded” );
});
</script>
</head>
<body>
<iframe src="http://techcrunch.com"></iframe>
</body>
</html>
- $( document ).ready()也可以簡寫為：
$(function() {
console.log( "ready!" );
})
jQuery選擇器
$(選擇器) 進行元素選擇，返回的是jQuery的文檔對象抄邀。選擇器包括元素名選擇器首启、id選擇器、class選擇器撤摸、屬性選擇器毅桃、偽類選擇器等。
$(‘div’) // 元素名選擇器
$(‘#img1’) // id選擇器
$(‘.nav’) // class選擇器
$(‘[name=link1]’) // 屬性選擇器
$(‘div:first’) // 偽類選擇器
獲取與設(shè)置元素
- html()准夷，獲得節(jié)點的html字符串钥飞，參數(shù)可以填寫html節(jié)點的字符串，會返回html節(jié)點衫嵌。
$(‘ul’).html() // 返回ul標簽下的所有節(jié)點
$(‘ul’).html(‘<li>haha</li>') // ul標簽的子標簽設(shè)置成了列表項haha
- text()读宙，獲得節(jié)點的文本內(nèi)容，參數(shù)可以填寫字符串楔绞，返回的就是參數(shù)的字符串结闸。
$(‘li’).text() // 獲取li標簽里的內(nèi)容
$(‘li’).text(‘haha’) // 設(shè)置li標簽里的內(nèi)容為haha
- val()，獲得節(jié)點的value屬性值酒朵，填寫參數(shù)也可以設(shè)置value值桦锄。
<input value="haha" />
<script type="text/javascript">
$('input').val() // 獲取value值haha
$('input').val('enen') // 設(shè)置value值為enen
</script>
- attr()，獲取或者修改屬性值蔫耽。填寫一個參數(shù)為要獲得的屬性值结耀；兩個參數(shù)為修改屬性值，第一個參數(shù)為要修改的屬性匙铡，第二個參數(shù)為修改的值图甜；設(shè)置多個屬性可以使用列表作為參數(shù)。
$(‘div’).attr(‘class’) // 獲取div的class值
$(‘div’).attr(‘id’, ‘haha') // 設(shè)置div的id為haha
$(‘div’).attr({‘class’: 'haha', 'id': 'enen'}) // 設(shè)置div的class為haha鳖眼，id為enen
元素dom操作
創(chuàng)建元素
把要創(chuàng)建的對象直接寫入$()就可以創(chuàng)建相應(yīng)的對象節(jié)點黑毅。
new_element = $(‘<div>') // 創(chuàng)建了一個div對象
new_element[0] // 0號位為它的節(jié)點
new_element = $('<p>新的節(jié)點</p>') // 可以直接寫入內(nèi)容
new_element = $('<div><ul><li>haha</li><li>enen</li></ul></div>') // 可以創(chuàng)建一系列的節(jié)點
插入元素
- 父元素.append(要添加的子元素)。append方法會把要添加的元素添加到子元素的最后钦讳】笫荩可一次添加多個項目，用逗號分隔蜂厅。
$('ul').append('<li>haha</li>') // 直接為ul添加內(nèi)容為haha的列表項
new_element = $('<p>enen</p>') // 也可以先創(chuàng)建再添加
$('#container').append(new_element)
- 要添加的子元素.appendTo(父元素)匪凡。appendTo方法與append方法正好相反膊畴，要添加的子元素在前掘猿，父元素為參數(shù)。都是添加到自元素的末尾唇跨。
$('<li>haha</li>').appendTo('ul') // 直接添加內(nèi)容為haha的列表項到ul
new_element = $('<li>enen</li>') // 也可以先創(chuàng)建再添加
new_element.appendTo('ul')
- 父元素.prepend(要添加的子元素)稠通。prepend方法會把要添加的子元素添加到子元素的最前面衬衬。可一次添加多個項目改橘，用逗號分隔滋尉。
$('ul').prepend('<li>haha</li>') // 直接為ul添加內(nèi)容為haha的列表項
new_element = $('<p>enen</p>') // 也可以先創(chuàng)建再添加
$('#container’).prepend(new_element)
- 選擇器.before(要插入的節(jié)點)。before方法會把要插入的節(jié)點插入到指定的節(jié)點之前飞主。它們是同級之間插入狮惜。
$('ul>li:nth-child(3)').before('<li>ouou</li>') // 在ul的第三個li標簽之前插入內(nèi)容為ouou的列表項
- 選擇器.after(要插入的節(jié)點)。after方法會把要插入的節(jié)點插入到指定的節(jié)點之后碌识。它們是同級之間插入碾篡。
$('ul>li:nth-child(3)’).after('<li>ouou</li>') // 在ul的第三個li標簽之后插入內(nèi)容為ouou的列表項
克隆元素
- 要克隆的元素.clone()。clone方法會克隆指定的元素筏餐，可以把它賦給一個變量另作他用开泽。
ol = $(‘#item’).clone()
$(‘div’).append(ol)
刪除元素
- 要刪除的元素.remove()。remove方法會刪除指定的元素魁瞪。元素刪除后穆律，如果重新添加回頁面，會丟失事件與關(guān)聯(lián)數(shù)據(jù)导俘。
$(‘ul’).remove()
- 要刪除的元素.detach()峦耘。detach方法會刪除指定的元素。元素刪除后會保留事件與關(guān)聯(lián)數(shù)據(jù)旅薄，這點與remove不同贡歧。
$(‘ul’).detach()
元素的遍歷
父級元素與所有祖先元素的遍歷
- 選擇器.parent()。parent方法會返回某個元素的父元素的對象赋秀。parent()[0]會返回父元素的節(jié)點利朵。包含它的子孫元素。
li = $('ul>li:eq(0)')
li.parent() // 返回li的父元素對象
li.parent()[0] // 返回li的父元素節(jié)點猎莲，包括它的子孫元素
- 選擇器.parents()绍弟。parents方法會返回某個元素的所有祖先元素的數(shù)組對象。通過索引可以訪問某個祖先元素的節(jié)點著洼，包括它的子孫元素樟遣。
li = $('ul>li:eq(0)')
li.parents() // 返回li的祖先元素的數(shù)組對象
li.parent()[1] // 返回li的某個祖先元素節(jié)點，包括它的子孫元素
- 選擇器.closest(選擇器)身笤。closest方法會根據(jù)它參數(shù)里的選擇器找到某個節(jié)點的祖先元素里離它最近的符合條件的節(jié)點對象豹悬。
li = $('.li')
li.closest('.news') // 返回li的祖先元素里class為news的最近的節(jié)點數(shù)組對象
li.closest('.news')[0] // 返回li的祖先元素里class為news的最近的節(jié)點
子元素與所有后代元素的遍歷
- 選擇器.children()。children方法可以填參數(shù)也可以不填參數(shù)液荸。不填參數(shù)會返回某個節(jié)點的所有子元素（不含其他后代元素）瞻佛。參數(shù)可以填寫選擇器，返回符合條件的子元素。
$('.news').children() // 查找class為news的所有子元素
$('.news').children($('#haha')) // 查找class為news的元素的id為haha的子元素
- 選擇器.find(選擇器)伤柄。find方法會返回某個元素符合條件的所有后代元素绊困。
$(‘.news’).find(‘li’) // 查找class為news元素的所有l(wèi)i
兄弟節(jié)點的遍歷
- 選擇器.prev()。prev方法會返回某個節(jié)點的前一個兄弟節(jié)點對象适刀。
$(‘.news>li:eq(4)’).prev() // 返回選定節(jié)點的前一個兄弟節(jié)點的數(shù)組對象
$(‘.news>li:eq(4)’).prev()[0] // 返回選定節(jié)點的前一個兄弟節(jié)點
- 選擇器.prevAll()秤朗。prevAll方法會返回某個節(jié)點之前的所有兄弟節(jié)點的數(shù)組對象。
$(‘.news>li:eq(4)’).prevAll() // 返回選定節(jié)點前的所有兄弟節(jié)點的數(shù)組對象
$(‘.news>li:eq(4)’).prevAll()[3] // 返回選定節(jié)點前的所有兄弟節(jié)點的某個節(jié)點
- 選擇器.next()笔喉。next方法會返回某個節(jié)點的下一個兄弟節(jié)點對象取视。
$(‘.news>li:eq(0)’).next() // 返回選定節(jié)點的下一個節(jié)點的數(shù)組對象
$(‘.news>li:eq(0)’).next()[0] // 返回選定節(jié)點的下一個節(jié)點
- 選擇器.nextAll()。nextAll方法會返回某個節(jié)點之后的所有兄弟節(jié)點數(shù)組對象常挚。
$(‘.news>li:eq(0)’).nextAll() // 返回選定節(jié)點之后的所有兄弟節(jié)點數(shù)組對象贫途。
$(‘.news>li:eq(0)’).nextAll()[2] // 返回選定節(jié)點之后的所有兄弟節(jié)點數(shù)組對象中的某個節(jié)點。
- 選擇器.siblings()待侵。siblings方法會返回選定節(jié)點的所有兄弟節(jié)點的數(shù)組對象丢早。
$(‘.news>li:eq(3)’).siblings() // 返回選定節(jié)點的所有兄弟節(jié)點數(shù)組對象。
$(‘.news>li:eq(3)’).siblings()[2] // 返回選定節(jié)點的所有兄弟節(jié)點數(shù)組對象中的某個節(jié)點秧倾。
each方法
each方法可以把選擇器選擇出來的數(shù)組對象進行遍歷怨酝，它的參數(shù)為方法函數(shù)。
$(‘.news’).children().each(function(){
console.log(this)
})
元素樣式
通過css獲取或者設(shè)置樣式
css方法可以可以獲得或者設(shè)置元素的樣式那先。
獲得：選擇器.css(屬性名)
設(shè)置：選擇器.css(屬性名农猬，值)，選擇器.css({多個屬性鍵值對})
$(‘#div1’).css(‘width’) // 獲取width屬性值
$(‘#div1’).css(‘border’, ’10px solid red') // 設(shè)置border的屬性值
$(’#div1’).css({
‘border’: ‘1px solid red’,
‘background’: ‘#fff’,
‘padding’: ’20px’
})
classList的操作
- 選擇器.addClass(值)售淡。addClass方法會給指定的元素添加指定的class值斤葱。
$(‘#div1’).addClass(‘haha’) // 給id為div1的元素添加class值haha
- 選擇器.removeClass(值)。removeClass方法會刪除指定元素的指定class值揖闸。
$(‘#div1’).removeClass(‘enen’) // 給id為div1的元素刪除class值enen
- 選擇器.toggleClass(值)揍堕。toggleClass方法在指定元素沒有指定的值時會添加上指定的值，指定元素有指定的值時會刪除指定的元素汤纸。
$(‘#div1’).toggleClass(‘haha’) // id為div1的元素class值中有haha就會把haha刪除衩茸，沒有haha就會添加上haha
- 選擇器.hasClass(值)。hasClass方法用于判定指定的元素有沒有指定的class值贮泞，返回值為布爾值true或者false。
$(‘#div’).hasClass(‘haha’) // 判斷id為div1的元素class里有沒有haha
元素大小的獲取與設(shè)置
- 獲取啃擦、設(shè)置元素width和height的大小：
選擇器.width()
選擇器.height()
設(shè)置大小直接填入?yún)?shù)令蛉。
$(‘#div1’).width() // 獲取元素的width
$(‘#div1’).height() // 獲取元素的height
$(‘#div1’).width(‘100px’) // 設(shè)置元素的width
$(‘#div1’).height(‘100px’) // 設(shè)置元素的height
- 獲取元素包含padding的寬高：
選擇器.innerWidth()
選擇器.innerHeight()
$(‘#div1’).innerWidth() // 獲得元素包含padding的寬度
$(‘#div1’).innerHeight() // 獲得元素包含padding的高度
- 獲取元素包含margin、padding、邊框線的寬高（默認不包含margin俯萎，要包含margin要在參數(shù)里填true）：
選擇器.outerWidth()
選擇器.outerHeight()
$(‘#div1’).outerWidth() // 獲得元素包含padding、邊框的寬度
$(‘#div1’).outerHeight() // 獲得元素包含padding运杭、邊框的高度
$(‘#div1’).outerWidth(true) // 獲得元素包含margin、padding辆憔、邊框的寬度
$(‘#div1’).outerHeight(true) // 獲得元素包含margin、padding虱咧、邊框的高度
- 獲取元素的位置：
選擇器.position()
$(‘#div’).position() // 獲取元素的位置
事件處理
- 選擇器.on(“事件類型”, “子選擇器”, data, function(e){})
$('#container').on('click', {'myname': 'haha'}, function(e){
console.log('click')
console.log(e.data) // 獲得第二個參數(shù)傳入的數(shù)據(jù)
console.log(e.pageX, e.pageY) // 獲得點擊的位置
- 選擇器.bind(“事件類型”, data, function(e){})
$('#container').bind(‘click', {'myname': 'haha'}, function(e){
console.log('click')
console.log(e.data) // 獲得第二個參數(shù)傳入的數(shù)據(jù)
console.log(e.pageX, e.pageY) // 獲得點擊的位置
- on和bind方法的區(qū)別在于on方法可以填入?yún)?shù)‘子選擇器’熊榛，通過子選擇器可以實現(xiàn)事件代理。
$('.news').on('click', 'li', function(e){
e.stopPropagation()
console.log(arguments)
console.log($(this).text())
})
- jQuery中事件機制為冒泡機制腕巡。
