1. jquery 能做什么掀抹?
jquery是一個js工具類庫,封裝了常用的DOM操作方法,有更好的兼容性盖奈,利用jquery提供的api,可以完成以下工作:
- 完成DOM的增刪改查等操作
- 事件綁定操作
- 樣式修改
- 方便的動畫設置
- ajax操作
- 多種第三方插件可以使用
2. Jquery對象和DOM原生對象的區(qū)別宪塔,轉(zhuǎn)換
區(qū)別:
jquery對象是使用jquer方法獲取的對象磁奖,可以調(diào)用jquery方法,jquery對象是一個類數(shù)組對象
DOM原生對象是使用原生js方法獲取的對象某筐,是文檔對象模型比搭,只能調(diào)用原生的js方法
轉(zhuǎn)換方式:
jquery對象轉(zhuǎn)DOM原生對象:通過下標方式選擇jquery對象,如:$('div')[0]
DOM原生對象轉(zhuǎn)jQuery對象:調(diào)用jquery方法,如:$(document.querySelector('div'))
3.jquery中如何綁定事件南誊?bind身诺、unbind蜜托、delegate、live霉赡、on橄务、off都有什么作用?推薦使用哪種穴亏?使用on綁定事件使用事件代理的寫法蜂挪?
jquery提供了四種事件監(jiān)聽的方式,分別為bind嗓化、delegate棠涮、live和on
-
bind
bind(type,[data],function(eventObject))
在選擇的元素上綁定特定事件類型的監(jiān)聽函數(shù),其中data為可選參數(shù)
//定位找出所有的div元素給其添加click事件的函數(shù)
$('div').bind('click',function(){
console.log(this)
})
-
unbind
unbind(type,[data|fn]])
bind()的反向操作蟆湖,從每一個匹配的元素中刪除綁定的事件故爵。
如果沒有參數(shù),則刪除所有綁定的事件隅津。
你可以將你用bind()注冊的自定義事件取消綁定诬垂。
如果提供了事件類型作為參數(shù),則只刪除該類型的綁定事件伦仍。除指定類型的事件
//把所有段落的所有事件取消綁定
$("p").unbind()
//將段落的click事件取消綁定
$("p").unbind( "click" )
-
delegate
delegate(selector,type,[data],fn)
指定的元素(屬于被選元素的子元素)添加一個或多個事件處理程序结窘,并規(guī)定當這些事件發(fā)生時運行的函數(shù)。
使用 delegate() 方法的事件處理程序適用于當前或未來的元素(比如由腳本創(chuàng)建的新元素)充蓝。
<div style="background-color:red">
<p>這是一個段落隧枫。</p>
<button>請點擊這里</button>
</div>
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
-
live
live(type, [data], fn)
jQuery 給所有匹配的元素附加一個事件處理函數(shù),即使這個元素是以后再添加進來的也有效谓苟。
這個方法是基本是的 .bind() 方法的一個變體官脓。使用 .bind() 時,選擇器匹配的元素會附加一個事件處理函數(shù)涝焙,而以后再添加的元素則不會有卑笨。為此需要再使用一次 .bind() 才行。比如說:
<body>
<div class="clickme">Click here</div>
</body>
//可以給這個元素綁定一個簡單的click事件:
$('.clickme').bind('click', function() {
alert("Bound handler called.");
});
//有另一個元素添加進來了
$('body').append('<div class="clickme">Another target</div>');
//盡管這個新的元素也能夠匹配選擇器 ".clickme" 仑撞,但是由于這個元素是在調(diào)用 .bind() 之后添加的赤兴,所以點擊這個元素不會有任何效果。
//.live() 就提供了對應這種情況的方法隧哮。如果我們是這樣綁定click事件的:
$('.clickme').live('click', function() {
alert("Live handler called.");
});
//然后再點擊新增的元素桶良,他依然能夠觸發(fā)事件處理函數(shù)。
事件委托
.live() 方法能對一個還沒有添加進DOM的元素有效沮翔,是由于使用了事件委托:綁定在祖先元素上的事件處理函數(shù)可以對在后代上觸發(fā)的事件作出回應陨帆。傳遞給 .live() 的事件處理函數(shù)不會綁定在元素上,而是把他作為一個特殊的事件處理函數(shù),綁定在 DOM 樹的根節(jié)點上歧譬。
-
on
on(type,[selector],[data],fn)
在選擇元素上綁定一個或多個事件的事件處理函數(shù)岸浑。
on()方法綁定事件處理程序到當前選定的jQuery對象中的元素。在jQuery 1.7中瑰步,.on()方法 提供綁定事件處理程序所需的所有功能矢洲。幫助從舊的jQuery事件方法轉(zhuǎn)換,see .bind(), .delegate(), 和 .live().
//給p綁定click事件處理方法
$("p").on("click", function(){
alert( $(this).text() );
});
-
off
off(events,[selector],[fn])
在選擇元素上移除一個或多個事件的事件處理函數(shù)缩焦。
//刪除所有p的綁定事件
$("p").off()
//刪除所有p的代理事件
$("p").off( "click", "**" )
var foo = function () {
// code to handle some kind of event
};
// body代理所有p的點擊事件读虏,p點擊時,會執(zhí)行foo方法
$("body").on("click", "p", foo);
// 解除body代理的p點擊事件
$("body").off("click", "p", foo);
推薦使用
推薦使用on方法
在jQuery 1.7中袁滥,.on()方法 提供綁定事件處理程序所需的所有功能盖桥。幫助從舊的jQuery事件方法轉(zhuǎn)換,see .bind(), .delegate(), 和 .live().
on綁定事件使用事件代理寫法:
//只需為tbody綁定點擊事件處理方法题翻,
//在tr發(fā)生點擊事件后揩徊,會通過冒泡傳遞給tbody,然后調(diào)用處理方法
$( "#dataTable tbody" ).on( "click", "tr", function() {
console.log( $( this ).text() );
});
4. jquery 如何展示/隱藏元素嵌赠?
.show([speed],[callback]) //顯示元素
.hide([speed],[callback]) //隱藏元素
.fadeIn([speed], [callback] //淡入顯示隱藏元素
.fadeOut([speed], [callback]): //淡出隱藏顯示元素
.slideUp([speed],[callback]) //以滑動的方式隱藏顯示元素
.slideDown([speed],[callback]) //以滑動的方式隱藏顯示元素
.toggle([speed], [callback]) //顯示隱藏元素塑荒,隱藏顯示元素
fade.toggle([speed], [callback]) //淡入淡出顯示隱藏元素,隱藏顯示元素
- speed: 規(guī)定速度姜挺,取值:'slow', 'normal', 'fast'或毫秒
- callback:顯示或隱藏后執(zhí)行的函數(shù)
5. jquery 動畫如何使用齿税?
$(selector).animate(styles,speed,easing,callback)
//例子:
<body>
<p style="border:1px solid red";>nihao</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
var $p=$("p")
$p.on('click',function(){
$p.animate({
height:'100px'
},1000)
})
</script>
</body>
6.如何設置和獲取元素內(nèi)部 HTML 內(nèi)容?如何設置和獲取元素內(nèi)部文本炊豪?
$().html()獲取html內(nèi)容
-
$().text()獲取文本內(nèi)容
$('div').html() //無參數(shù)凌箕,用于返回元素的innerHTML $('div').html(string) //有參數(shù),設置元素為內(nèi)部HTML內(nèi)容 $('div').text() //無參數(shù)词渤,用于返回元素的innerText $('div').text(string) //有參數(shù)牵舱,設置元素的內(nèi)部文本
7.如何設置和獲取表單用戶輸入或者選擇的內(nèi)容?如何設置和獲取元素屬性缺虐?
.val([string])
無參數(shù)時芜壁,獲取表單用戶的輸入值
有參數(shù)時,設置表單的輸入值
.attr('attrName')
獲取元素特定屬性的值
.attr('attrName','attrVal') //傳遞兩個參數(shù)志笼,即屬性名稱和對應的值
設置單個的屬性值
8. 邊欄菜單
http://js.jirengu.com/rayoj/3/edit
9. tab頁切換
http://js.jirengu.com/kimoj/3/edit
10. 添加元素
http://js.jirengu.com/lobih/10/edit