jQuery--DOM操作(一)
通过jQuery的选择器可以方便的获取页面上的元素，通过选择器获取到的，不管是多个元素、零个元素还是一个元素，都会被封装到类数组的jQuery对象中，也称为jQuery对象集合或jQuery元素集合等。
jQuery对象集合.jpg
一、创建HTML
1.DOM对象和jQuery对象
区别：
• 检测DOM Object：
if ( obj.nodeType )
• 检测jQuery Object：
if ( obj.jquery )
• 转换：
var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);
代码示例：
<head>
<meta charset="UTF-8">
<title>DOM Object vs jQuery Object</title>
</head>
<body>
<div id="div">div</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function() {
var DOMObject = document.getElementById('div');
var jQueryObject = $('#div');
console.log(DOMObject);
console.log(jQueryObject);
//console.log('DOMObject.nodeType: %s', DOMObject.nodeType);
//console.log('DOMObject.jquery: %s', DOMObject.jquery);
// console.log('jQueryObject.nodeType: %s', jQueryObject.nodeType);
// console.log('jQueryObject.jquery: %s', jQueryObject.jquery);
// console.log('jQueryObject.get(0): %o', jQueryObject.get(0));
// console.log('$(DOMObject): %o', $(DOMObject));
// console.log('jQueryObject.get(0).nodeType: %s', jQueryObject.get(0).nodeType);
//console.log('$(DOMObject).jquery: %s', $(DOMObject).jquery);
});
</script>
</body>
DOM对象和jQuery对象.jpg
2.创建元素
$('<div>Hello</div>');
设置属性:
<head>
<meta charset="UTF-8">
<title>create HTML</title>
</head>
<body>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function() {
var div = $('<div>Hello</div>'); //此时div为jQuery对象
console.log(div);
console.log($('div')); //在没有放到页面上之前，通过选择器是选择不到的
div.appendTo('body'); //放到页面上 appendTo() 追加
console.log($('div')); //此时可以选择出来
//追加属性
var link = $('<a>', {
text: '百度',
href: 'https://www.baidu.com',
target: '_blank',
title: '去往百度首页'
});
link.appendTo('body');
var link2 = $('<a>百度</a>').attr({
href: 'https://www.baidu.com',
target: '_blank',
title: '去往百度首页'
});
link2.appendTo('body');
});
</script>
</body>
3.检查和提取元素
检查和提取元素.jpg
(1)检查元素：
①检查元素数量
$('xxx').length
(2)提取元素
①[index] 返回DOM元素
②get([index]) 返回DOM元素或元素集合
③eq(index) 返回jQuery对象
④first()
⑤last()
⑥toArray()
<body>
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
<li>item-5</li>
<li id="item6">item-6</li>
<li>item-7</li>
<li>item-8</li>
<li>item-9</li>
</ul>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function () {
var elements = $('li');
console.log(elements.length);//9 检查元素数量
var elements2 = $('div');
//console.log(elements2[0].style.color = 'blue'); // error
//console.log(elements2.eq(0).addClass('blue')); // no error
//console.log(elements2.addClass('blue')); // no error
console.log(elements[0]);
console.log(elements[1]);
console.log(elements.get()); //获取所有 (数组)
console.log(elements.get(0));
console.log(elements.get(1));
console.log(elements.get(-1));//<li>item-9</li> 从最后往前计算 -1为第一个元素，以此类推。
console.log(elements[-1]);
console.log(elements.get(100)); //undefined
console.log(elements[100]);//undefined
console.log(elements.eq(0));//eq方法，性能比筛选器高
console.log($('li').eq(0)); //eq筛选器
console.log($('li:eq(0)'));
console.log(elements.eq(0));
console.log(elements.first()); //不需要参数 性能比筛选器高
console.log(elements.eq(-1));
console.log(elements.last());
console.log(elements.toArray());
console.log(elements.get());
console.log(elements.index($('#item6')));
});
</script>
二、通过关系查找jQuery对象
<body>
<div id="box">
<div>
<div>
<p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
</div>
</div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function () {
var count1 = $('#info').parents().length;
var count2 = $('#info').parents('div').length;
console.log(count1);
console.log(count2);
var count3 = $('#box > *').length;
var count4 = $('#box').children().length;
console.log(count3);
console.log(count4);
var count5 = $('#info').children().length;
var count6 = $('#info').contents().length;
console.log(count5);
console.log(count6);
});
</script>
通过关系查找jQuery对象的方法：
• children([selector])：直接子元素
• contents()：直接子元素
• find(selector)：包含子元素和孙子元素
• parent([selector])：返回直接父元素
• parents([selector])：返回所有父元素
• parentsUntil([selector])：获取到具体层级的父元素（不包含最后一个）
• closest(selector)：从元素本身开始，逐级向上进行元素的匹配，并返回最先匹配的元素。会首先检查当前元素是否匹配，如果匹配则返回元素本身，不匹配时向上逐级寻找，都没找到则返回一个空的jQuery对象。
• next([selector])：获取当前元素之后紧邻的同辈元素
• nextAll([selector])：当前元素之后的所有同辈元素
• nextUntil([selector])：查找当前元素之后的所有同辈元素，直到遇到匹配的元素为止。
• prev([selector])：往前查找同辈元素。
• prevAll([selector])
• prevUntil([selector])
• siblings([selector])：取得元素的所有同辈元素的元素集合，即把该元素的兄弟姐妹全部取出来。
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($('#box3').children());
console.log($('#box3').children('p'));
console.log($('#box3').contents());
console.log($('#box3').find('.item1'));
console.log($('ul, #box3').parent());
console.log($('ul, #box3').parent('#box2'));
console.log($('ul, #box3').parents());
console.log($('ul, #box3').parents('#box2'));
console.log($('.item1').parentsUntil('#box1'));
console.log($('.item1').closest('div'));
console.log($('.item1').closest('#box1'));
console.log($('.item1').parents('#box1'));
console.log($('.item4').next('li')); //item5
console.log($('.item4').nextAll('li'));
console.log($('.item4').nextUntil('.item7'));//item5 item6
console.log($('.item4').prev('li'));
console.log($('.item4').prevAll('li'));
console.log($('.item4').prevUntil('.item1'));
console.log($('.item4').nextUntil('.item1'));
console.log($('.item4').prevUntil('.item7'));
console.log($('.item4').siblings());//不包含本身
console.log($('.item4').siblings('.item2'));
});
</script>
三、筛选和遍历jQuery对象
(1)添加元素
• add(selector)
(2)过滤元素
• not(selector):删除掉该元素。
• filter(selector)：筛选出和指定表达式匹配的元素集合，把选择器匹配到的返回。
• has(selector)：保留包含特定后代的元素
(3)获取子集
• slice(start[, end])
(4)转换元素
• map(callback)：将一个jQuery对象转换成另一个jQuery对象
(5)遍历元素
• each(iterator)
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8
<ul></ul>
</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($('.item1, .item2'));
console.log($('.item1').add('.item2'));
console.log($('li').not('.item2, .item3'));
console.log($('li').filter('.item2, .item3'));
console.log($('li').not(function (index) {
return $(this).hasClass('item1');
}));
console.log($('li').filter(function (index) {
return $(this).hasClass('item1');
}));
console.log($('li').has('ul'));
console.log($('li').slice(0));//所有元素
console.log($('li').slice(3));
console.log($('li').slice(3, 5));
console.log($('li').slice(-2));//从集合尾部开始 8、9
console.log($('div').map(function (index, domElement) {
return this.id;
}));
console.log($('li').each(function (index, domElement) {
this.title = this.innerText;
}));
console.log($('div').each(function (index, domElement) {
if(this.id === 'box2'){
return false //return true:相当于continue false：相当于break
}
this.title = this.id
}));
});
</script>
四、jQuery对象的其他操作
• is(selector)
• end():回到最近的一个破坏性操作之前，将匹配的元素集合变为前一次状态
• addBack([selector])：
破坏性操作.png
注意：如果不是破坏性操作，调用end会返回空
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8
<ul></ul>
</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function() {
console.log($('#box3').children().is('p')); //true
console.log($('#box3').children().is('img'));//false
console.log($('#box3').children().end());//
console.log($('#box3').end());
// console.log(
// $('#box3').find('.item3').css('color', 'red') //破坏性操作 find之后返回的是item3
// .end().find('.item5').css('color', 'blue') //返回上一次状态
// .end().find('.item7').css('color', 'green')
// .end().find('.item9').css('color', 'orange')
// );
// console.log(
// $('.item3').nextUntil('.item6').css('color', 'red')
// );
console.log(
$('.item3').nextUntil('.item6').addBack().css('color', 'red')
);
});
</script>
</body>
网友评论