1-jquery屬性操作

?

1、html() 取出或設置html內容

? // 取出html內容

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

// 設置html內容

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

?

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

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

? // 取出圖片的地址

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

// 設置圖片的地址和alt屬性

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

?

02-jquery事件

?

事件函數列表：

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

?

綁定事件的其他方式

?$(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-事件冒泡

父級對象所有同類事件

?

事件冒泡的作用

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

?

阻止事件冒泡

• 事件冒泡機制有時候是不需要的，需要阻止掉，通過 event.stopPropagation() 來阻止

?

阻止默認行為

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

?

?

4-事件委托

?

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

?

事件委托的寫法

?$(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元素節點操作

?

創建節點

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

插入節點

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

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

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

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

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

刪除節點

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。