jQuery 能做什么？
jQuery是一款快速而簡潔的javascript的庫,核心是構(gòu)建與css選擇器上,用來操作DOM元素,通過鏈?zhǔn)秸{(diào)用,兼容性好,API 友好,功能強(qiáng)大，與時(shí)俱進(jìn)
- 選擇網(wǎng)頁元素
- 改變結(jié)果集
- 元素的操作：取值和賦值
- 元素的操作：移動
- 元素的操作：復(fù)制、刪除和創(chuàng)建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
jQuery 對象和 DOM 原生對象有什么區(qū)別？如何轉(zhuǎn)化？
- 對于jQuery對象只能使用jQuery對象的API
- 對于原生對象只能使用原生對象的 API
如何轉(zhuǎn)化?
- 對于原生轉(zhuǎn)化為jQuery,只需在外面加上一層
$符號
$(document.querySelector("#box"))
就可以變?yōu)閖Query對象,就可以使用jQuery對象的API了
- 對于jQuery對象轉(zhuǎn)換為原生對象,只需要加個(gè)
[下標(biāo)]
$("#box .box")[0]
,就可以使用j原生對象的API了
問題是:那我們又不想變成原生對象,又想取值怎么辦呢?
$("#box .box").eq(0) //.eq(index)
jQuery DOM操作,如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？
<div class="container">
<ul class="wrap">
<li>1</li>
<li class = "active">2</li>
<li>3</li>
</ul>
</div>
//創(chuàng)建元素
$("<div class="box"><h1>創(chuàng)建html元素</h1></div>")
//添加元素append
var $li = $("<li>4</li>")
$(".wrap").append($li) //添加到元素的后面
$li.appendTo($(".container .wrap")) //把對象插入到目標(biāo)元素尾部
var $li1 = $("<li>0</li>")
$(".wrap").prepend($li1) // 向?qū)ο箢^部追加內(nèi)容，用法和append類似，內(nèi)容添加到最開始
$li.before($li1) //翻譯就是:4的前面是0
$li.before($("<li>5</li>")) //翻譯:4的前面新建了5
$li.after($li1) //翻譯就是:4的后面是0
$li.after($("<li>5</li>")) //翻譯:4的后面新建了5
//刪除元素.remove()
$(".wrap li").eq(3).remove() //刪除第三個(gè)li
$(".wrap").empty() //清空ul下所有的li .empty()清空被選擇元素內(nèi)所有子元素
// $(selector).html()用于獲取/修改元素的innerHTML
當(dāng)沒有傳遞參數(shù)的時(shí)候，返回元素的innerHTML
當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候，修改元素的innerHTML為參數(shù)值
// $(selector).text()設(shè)置文本內(nèi)容
jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？
//html demo點(diǎn)擊在div里顯示增加
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text">
<button id="btn">添加</button>
<div class="wrap">
</div>
//jQuery
$(".box>ul>li").on("click",function(){
var str = $(this).text()
$(".wrap").text(str) //text() == innerText
})
$("#btn").on("click",function(){
var value = $("#ipt").val()
$(".box>ul").append('<li>'+value+'</li>') //添加value
})
事件效果
那使用事件代理呢?
//事件代理
$(".box>ul").on("click","li",function(){
var str = $(this).text()
$(".wrap").text(str)
})
$("#btn").on("click",function(){
var value = $("#ipt").val()
$(".box>ul").append('<li>'+value+'</li>')
})
事件代理
.trigger( eventType [, extraParameters ] )根據(jù)綁定到匹配元素的給定的事件類型執(zhí)行所有的處理程序和行為bind為一個(gè)元素綁定一個(gè)事件處理程序 ，適用于早期jQuery版本（1.7以前）unbind從元素上刪除一個(gè)以前附加事件處理程序。delegate為所有匹配選擇器（selector參數(shù)）的元素綁定一個(gè)或多個(gè)事件處理函數(shù)，基于一個(gè)指定的根元素的子集，匹配的元素包括那些目前已經(jīng)匹配到的元素，也包括那些今后可能匹配到的元素。live附加一個(gè)事件處理器到匹配目前選擇器的所有元素，現(xiàn)在和未來。on在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)。off移除一個(gè)事件處理函數(shù)
現(xiàn)在推薦使用on(),off()來綁定/解除事件。
如何設(shè)置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設(shè)置和獲取元素屬性？
// .val() 讀寫雙用的方法，用來處理input的value
<input id="ipt" type="text" value="hello">
$("#ipt").val() //"hello"
$("#ipt").val("hello World") //"hello World"
// .attr(attributeName) 獲取元素特定屬性的值
$("#ipt").attr("type") //查看屬性值 "text"
$("#ipt").attr("type","checkbox") //設(shè)置屬性 變?yōu)榱硕噙x框
// .removeAttr() 移除屬性
$('div').removeAttr('id') //移除id屬性
// .css() 類似于 style
<div class="box"></div>
$(".box").css({"width":"200px", //設(shè)置css樣式
"backgroundColor":"yellow",
"height":"30px"})
// .addClass()
// .removeClass()
// .hasClass()
// .toggleClass(className) toggle是切換的意思，方法用于切換
// .hasClass(className) 檢查元素是否包含某個(gè)class，返回true/false
$( "#mydiv" ).hasClass( "foo" )
jQuery屬性 如何展示/隱藏元素？ jQuery 動畫如何使用？
//展示
.show( [duration ] [, easing ] [, complete ] )
duration：動畫持續(xù)多久
easing：表示過渡使用哪種緩動函數(shù)，jQuery自身提供"linear" 和 "swing"
complete：在動畫完成時(shí)執(zhí)行的函數(shù)
//隱藏
.hide([duration ] [,easing ] [,complete ])
duration：動畫持續(xù)多久
easing：表示過渡使用哪種緩動函數(shù)，jQuery自身提供"linear" 和 "swing"
complete：在動畫完成時(shí)執(zhí)行的函數(shù)
//切換
.toggle( [duration ] [, easing ] [, complete ] ) 用法同上
// 漸變
.fadeIn( [duration ] [, easing ] [, complete ] )通過淡入的方式顯示匹配元素，參數(shù)含義和上面相同
.fadeOut( [duration ] [, easing ] [, complete ] )通過淡出的方式隱藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] )調(diào)整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果
.fadeToggle( [duration ] [, easing ] [, complete ] )
//滑動
.slideDown( [duration ] [, easing ] [, complete ] )用滑動動畫顯示一
個(gè)匹配元素，方法將給匹配元素的高度的動畫，這會導(dǎo)致頁面的下面部分滑下去，彌補(bǔ)了顯示的方式
.slideUp( [duration ] [, easing ] [, complete ] )用滑動動畫隱藏一個(gè)匹配
元素，方法將給匹配元素的高度的動畫，這會導(dǎo)致頁面的下面部分
滑上去，當(dāng)一個(gè)隱藏動畫后，高度值達(dá)到0的時(shí)候，display 樣式屬性
被設(shè)置為none，以確保該元素不再影響頁面布局。 display 樣式屬性將
被設(shè)置為none，以確保該元素不再影響頁面布局。
//自定義
.animate( properties [, duration ] [, easing ] [, complete ] )
//properties是一個(gè)CSS屬性和值的對象,動畫將根據(jù)這組對象移動。
.stop( [clearQueue ] [, jumpToEnd ] )
//停止匹配元素當(dāng)前正在運(yùn)行的動畫。
展示,隱藏
漸變
滑動
動畫
練習(xí)DEMO
預(yù)覽地址
