Jquery事件操作 對文檔的操作 屬性選擇器使用

① dom1級事件設置
<input type=”text” ”過程性代碼” value=’tom’ />
<input type=”text” ”函數()” />
itnode.onclick = function(){}
itnode.onclick = 函數;
② dom2級事件設置
itnode.addEventListener(類型,處理,事件流);
itnode.removeEventListener(類型,處理,事件流);
node.attachEvent();
node.detachEvent();
③ jquery事件設置(無需考慮瀏覽器兼容問題)
$().事件類型(事件處理函數fn); //設置事件
$().事件類型(); //觸發事件執行
事件類型:click、keyup、keydown、mouseover、mouseout、blur、focus等等
例如:
$(form).submit()可以使得表單進行提交。 //觸發事件
$(‘div’).click(function(){事件觸發過程}); //設置事件
具體可以操作的各種事件:
在這裏插入圖片描述
jquery簡單事件的設置(可以爲同一個對象設置多個同類型事件):
在這裏插入圖片描述
間接觸發指定對象的事件執行:
在這裏插入圖片描述
九. jquery對文檔的操作
通過jquery方式實現頁面各種節點的追加、刪除、複製、替換等操作
1.節點追加
1.1 父子關係追加
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
1.2 兄弟關係追加
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述
2.節點替換
$().replaceWith(); 被動替換
$().replaceAll(); 主動替換
在這裏插入圖片描述
在這裏插入圖片描述
3.節點刪除
$(父節點).empty(); //父節點清空子節點
$(匹配節點).remove(); //刪除指定的節點
在這裏插入圖片描述
4.複製節點
$().clone(true) //節點 和 其身上的事件都給複製
$().clone(false) //只給複製 節點 本身(包括節點內部信息)

dom的節點複製操作:
cloneNode(true/false)
true: 深層複製(本身節點和內部節點),現在變成結構和內容,事件都拷貝
false: 淺層複製(本身節點),現在變成只拷貝結構和內容,不拷貝事件
<div>123</div>
在這裏插入圖片描述
在這裏插入圖片描述
5. 文檔操作案例(節點增加和刪除):
在這裏插入圖片描述
十.屬性選擇器使用
<input type=”text” name=”username” id=”username” class=”pear” addr=’beijing’ />
$([name]) 節點內部必須有”name名稱”屬性存在
$([name=value]) name屬性值等於value
$([name^=value]) name屬性值以value開始
$([name$=value]) name屬性值以value結尾
$([name*=value]) name屬性值必須包括value字樣(位置不要求)
$([name!=value]) name屬性值不等於value(沒有name屬性也可以)
$([][][][][]) 多個屬性選擇器構成“並且”關係
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章