【jQuery】之DOM操做
jQuerycss
DOM操做
查找節點
查找元素節點
以選擇器來查找元素節點html
查找文本節點
以text()方法來查找文本節點jquery
查找屬性節點
以attr()方法來查找屬性節點數組
<body>
<script src="js/jquery.js"></script>
<script></script>
</body>
<script is="qyc"> name="button"</script>
<script>
var $qyc = $('#qyc');
console.log('$qyc');
console.log($qyc.text);
console.log($qyc.attr('neme'));
$qyc.text('新按鈕')
$qyc.attr('class','cls');
/*
* jQuery查找元素-
* text()方法-等於DOM的textContent屬性
* 獲取-text()
* text(textContent)
* textContent新的的文本內容
*
* attr()方法
* 獲取- attr（name,value）-等於DOM的setAttribute(mnm，valus)*/
</script>
獲取父節點
selector:即是jQurery中的選擇器 另外parent()：獲取父級元素 parents()：獲取祖先級元素 closest():匹配上級元素，並返回相同的元素app
<body>
<div class="qh">
<ul>
<li id="dy">端遊</li>
<li>單機</li>
<li>手遊</li>
</ul>
</div>
<script>
var $dy = $('#dy');
console.log($dy.psrent('div'));
/*獲取端遊節點全部祖先節點
* parent(expr)方法
* 獲取元素全部父元素
* expr-表示選擇器，並有過濾的做用
*/
console.log($dy.psrent('div'));
/*獲取端遊節點全部祖先節點
* parents(expr)方法
* 獲取元素全部祖先元素
* expr-表示選擇器，並有過濾的做用
*/
console.log($dy.chosect('div'));
/*closest()方法
* 獲取元素指定祖先元素；返回第一個匹配元素
* expr-表示爲選擇器，並有過濾的做用
* 注意- jQuery用不報錯，不會提供結果
*/
</script>
</body>
獲取子節點
children()只獲取子級元素（不獲取後代元素）函數
<script src="js/jquery.js"></script>
</head>
<body>
<div class="qh">
<ul id="dy">端遊
<li>聯盟</li>
<li>地下城</li>
<li>火線</li>
</ul>
<ul>手遊</ul>
<ul>頁遊</ul>
</div>
<script>
var $ul = $('ul:first');
console.log($ul.children());
// 獲取元素全部的子元素
console.log($ul.find('li'));
// 獲取元素的後代元素
</script>
</body>
獲取兄弟節點
next()：獲取元素的下一個相鄰兄弟元素 prev()：獲取元素的上一個相鄰兄弟元素 siblings：獲取元素全部兄弟元素code
<body>
<div class="qh">
<ul>
<li id="dy">端遊</li>
<li>單機</li>
<li>手遊</li>
</ul>
</div>
<script>
var dy = document.getElementById('dy');
var ul = dy.parentElement;
var div = ul.parentElement;
var body = div.parentElement;
var html = body.parentElement;
var root = html.parentElement;//null
console.log(root);
var arr = [];//用於存儲元素的全部祖先元素
function parents(element) {
var parent = element.parentElement;
// 獲取元素的父元素
if(parent === null){ return; }
arr.push(parent);
// 獲取父元素，並增長到數組中
parents(parent);
// 定義個遞歸函數
}
parents(dy);
console.log(arr);
</script>
</body>
查找後代元素
以find：獲取全部匹配其元素的選擇器htm
<body>
<div class="qh">
<ul id="qh">
<li>端遊</li>
<li>單機</li>
<li id="sy">手遊</li>
<li>掌機</li>
</ul>
</div>
<script>
var $sy = $('#sy');
console.log($sy.next());//獲取下個相鄰兄弟元素
console.log($sy.prev());//獲取上個相鄰兄弟元素
</script>
</body>
3.建立節點
工廠函數：以attr()該屬性來創建屬性節點遞歸
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
<li>端遊</li>
<li>單機</li>
<li id="sy">手遊</li>
<li>掌機</li>
</ul>
<script>
// var $newli = $('<li></li>');
// $newli.text('掌機');
// $newLi.attr('id','zj');
var $newli = $('<li id="q1">頁遊</li>');
// jQuery的工廠函數接收字符串類型HTML代碼
$('#qh').append($newli);
</script>
</body>
4.插入節點
插入內部節點
append()方法
表示插入到指定節點列表中的最後面
appendTo()方法
表示插入到指定節點列表中的最後面
prepend()方法
表示插入到指定節點列表中的最前面
prependTo()方法
表示插入到指定節點列表中的最前面
<body>事件
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="qh">
<li>端遊</li>
<li>單機</li>
<li id="sy">手遊</li>
<li>掌機</li>
</ul>
<script>
// var $newli = $('<li></li>');
// $newli.text('掌機');
// $newLi.attr('id','zj');
var $newli = $('<li id="q1">頁遊</li>');
// jQuery的工廠函數接收字符串類型HTML代碼
$('#qh').append($newli);
</script>
</body>
插入外部節點
before()方法
表示插入到指定元素節點前一個位置
insertBefore()方法
表示插入到指定元素節點前一個位置
after()方法
表示插入到指定元素節點後一個位置
insertAfter()方法
表示插入到指定元素節點後一個位置
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>端遊</li>
<li>單機</li>
<li>手遊</li>
</ul>
<script>
var $li = $('<li id="q1">頁遊</li>');
// 建立新li元素
// $('ul').before($li);
// 插入li元素的上方
$('ul').after($li);
// 插入li元素下方
</script>
</body>
5.刪除節點
remove():用來刪掉DOM全部的元素 empty():用來刪除DOM的全部子節點
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">聯盟</li>
<li>火線</li>
<li>地下城</li>
</ul>
<script>
//元素調用remove()該元素被刪除
// $('#lm').remove();
// empty()表示刪除後代節點；保留自身節點-清空
</script>
</body>
6.替換節點`
replaceWith()方法將全部匹配元素替換成HTML和DOM元素
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">聯盟</li>
<li>火線</li>
<li>地下城</li>
</ul>
<script>
// 替換的元素調用replaceWith()，該方法接收參數是替換元素
// $('#lm').replaceWith($('<li id="zj">戰甲</li>'));
// replaceAll()就是顛倒replaceWith()
$('<li id="zj">戰甲</li>').replaceAll(('#lm'));
</script>
</body>
7.複製節點
jQuery的clone方法 - 參數表示是否複製事件
DOM的cloneNode方法 - 參數表示是否複製後代節點
<script src="js/jquery.js"></script>
</head>
<body>
<button id="qyc">按鈕</button>
<script>
$('#qyc').click(function () {
console.log('you my button');
});
var $copy = $('#qyc').clone(true);
$('body').append($copy);
/*jQuery的clone方法 - 參數表示是否複製事件
DOM的cloneNode方法 - 參數表示是否複製後代節點
*/
</script>
</body>
8.屬性節點
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">聯盟</li>
<li>火線</li>
<li>地下城</li>
</ul>
<script>
$('#bj').removeAttr('id');
// removeAttr()-至關於DOM中的removeAttribute()
</script>
</body>
9.樣式操做
<style>
.qh {
width: 200px;
height: 200px;
border: 1px solid blue;
}
.cq {
width: 100px;
height: 100px;
border: 1px solid blue;
background-color: red;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="qyc"></div>
<script>
// $('#qyc').attr('style','width:100px;height:100px;background-color:red;');
// attr設置style屬性的樣式
$('#qyc').attr('class','qh');
// 經過設置class屬性爲<div>元素添加外聯樣式
$('#qyc').addClass('cq');
// $('#qyc').attr('class','cq');// 替換樣式
// addClass(className)方法 - 表示添加樣式(並不影響指定元素本來的樣式)
console.log($('#qyc').hasClass('qh'));
// hasClass(className)方法 - 判斷指定元素中是否包含指定樣式名稱
console.log($('#qyc').css('width'));
/* removeClass()方法 - 刪除樣式
* removeClass()方法 - 刪除全部樣式
* removeClass(className) - 刪除指定樣式
*/
// $('#qh').removeClass('cq');
// toggleClass()方法 - 在刪除指定樣式與添加指定樣式之間切換
// $('#qh').toggleClass('cq');
// hasClass(className)方法 - 判斷指定元素中是否包含指定樣式名稱
$('#qyc').css({
width: '600px',
height: '600px'
});
</script>
</body>
10.HTML操做
<script src="js/jquery.js"></script>
</head>
<body>
<ul id="yx">
<li id="lm">聯盟</li>
<li>火線</li>
<li>地下城</li>
</ul>
<script>
console.log($('#yx').html());
var $html = $('#yx').html();
$html += '<li>戰甲</li>';
$('#yx').html($html);
console.log($('input').val());
$('input').val('密碼');
</script>
</body>
相關文章
- 1. jQuery之DOM操做
- 2. jQuery之操做DOM
- 3. jQuery 之 [ DOM操做 ]
- 4. jQuery操做dom
- 5. jquery操做DOM
- 6. Jquery基礎之DOM操做
- 7. jQuery操做DOM之修改DOM結構
- 8. jquery DOM操做（一）
- 9. jQuery的DOM操做、
- 10. jquery的DOM操做
- 更多相關文章...
- • SQL IN 操作符 - SQL 教程
- • SVN 檢出操作 - SVN 教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • RxJava操作符（十）自定義操作符
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery之DOM操做
- 2. jQuery之操做DOM
- 3. jQuery 之 [ DOM操做 ]
- 4. jQuery操做dom
- 5. jquery操做DOM
- 6. Jquery基礎之DOM操做
- 7. jQuery操做DOM之修改DOM結構
- 8. jquery DOM操做（一）
- 9. jQuery的DOM操做、
- 10. jquery的DOM操做