1-jquery屬性操作

?

1、html() 取出或設(shè)置html內(nèi)容

? // 取出html內(nèi)容

var $htm =$('#div1').html();

// 設(shè)置html內(nèi)容

$('#div1').html('<span>添加文字</span>');

?

2、prop() 取出或設(shè)置某個(gè)屬性的值

注：attr可以讀取自定義屬性

? // 取出圖片的地址

var $src =$('#img1').prop('src');

// 設(shè)置圖片的地址和alt屬性

$('#img1').prop({src:"test.jpg", alt: "Test Image" });

?

02-jquery事件

?

事件函數(shù)列表：

blur() 元素失去焦點(diǎn)
focus() 元素獲得焦點(diǎn)
click() 鼠標(biāo)單擊
mouseover() 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)）
mouseout() 鼠標(biāo)離開(kāi)（離開(kāi)子元素也觸發(fā)）
mouseenter() 鼠標(biāo)進(jìn)入（進(jìn)入子元素不觸發(fā)）
mouseleave() 鼠標(biāo)離開(kāi)（離開(kāi)子元素不觸發(fā)）
hover() 同時(shí)為mouseenter和mouseleave事件指定處理函數(shù)
ready() DOM加載完成
resize() 瀏覽器窗口的大小發(fā)生改變
scroll() 滾動(dòng)條的位置發(fā)生變化
submit() 用戶(hù)遞交表單

?

綁定事件的其他方式

?$(function(){
??? $('#div1').bind('mouseover click', function(event){
??????? alert($(this).html());
??? });
});

取消綁定事件

? $(function(){
??? $('#div1').bind('mouseover click',function(event) {
??????? alert($(this).html());

//$(this).unbind();
??????? $(this).unbind('mouseover');

});
});

?

?

3-事件冒泡

父級(jí)對(duì)象所有同類(lèi)事件

?

事件冒泡的作用

• 事件冒泡允許多個(gè)操作被集中處理（把事件處理器添加到一個(gè)父級(jí)元素上，避免把事件處理器添加到多個(gè)子級(jí)元素上），它還可以讓你在對(duì)象層的不同級(jí)別捕獲事件。

?

阻止事件冒泡

• 事件冒泡機(jī)制有時(shí)候是不需要的，需要阻止掉，通過(guò) event.stopPropagation() 來(lái)阻止

?

阻止默認(rèn)行為

• 阻止表單提交
  $('#form1').submit(function(event){
  ??event.preventDefault();
  })

?

?

4-事件委托

?

• 事件委托就是利用冒泡的原理，把事件加到父級(jí)上，通過(guò)判斷事件來(lái)源的子集，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)，提高性能；其次可以讓新加入的子元素也可以擁有相同的操作。

?

事件委托的寫(xiě)法

?$(function(){
??? $list = $('#list');
???$list.delegate('li', 'click', function() {
???????$(this).css({background:'red'});
??? });
})
...
<ul id="list">
??? <li>1</li>
??? <li>2</li>
??? <li>3</li>
??? <li>4</li>
???<li>5</li>
</ul>

?

?

5-jquery元素節(jié)點(diǎn)操作

?

創(chuàng)建節(jié)點(diǎn)

var $div =$('<div>');
var $div2 = $('<div>這是一個(gè)div元素</div>');

插入節(jié)點(diǎn)

1、append()和appendTo()：在現(xiàn)存元素的內(nèi)部，從后面插入元素

? var $span = $('<span>這是一個(gè)span元素</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2、prepend()和prependTo()：在現(xiàn)存元素的內(nèi)部，從前面插入元素

3、after()和insertAfter()：在現(xiàn)存元素的外部，從后面插入元素

4、before()和insertBefore()：在現(xiàn)存元素的外部，從前面插入元素

刪除節(jié)點(diǎn)

$('#div1').remove();

?

總結(jié)

以上是生活随笔為你收集整理的Jquery事件、冒泡、委托与节点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。