节点遍历操作
1、遍历父节点
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
console.log($('.box3').parent()); // 父级
console.log($('.box3').parents()); // 祖先级
console.log($('.box3').parents('div')); // 祖先级
</script>
2、兄弟节点
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li class="abc">44</li>
<li>55</li>
<li>66</li>
</ul>
<script>
// 这类方法都可以接收一个筛选条件
$('.abc').next().css('background', 'red'); // 下一个兄弟
$('.abc').nextAll().css('background', 'red'); // 下面所有的兄弟
$('.abc').prev().css('background', 'red'); // 上一个兄弟
$('.abc').prevAll().css('background', 'red'); // 上面所有的兄弟
$('.abc').siblings().css('background', 'pink'); // 所有的兄弟
$('.abc').siblings('.aa').css('background', 'pink'); // 兄弟里面的aa
$('li').filter('.abc').css('background', 'yellow'); // 过滤找到abc
$('li').not('.abc').css('background', 'green'); // 排除abc
</script>
3、遍历子节点
<ul>
<li>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
</li>
<li>吃饭</li>
<li class="abc">睡觉</li>
<li>打豆豆</li>
<li>小张</li>
</ul>
<script>
$('ul').find('li').css('border-bottom', '4px solid green'); // 找子孙节点,必须有参数
$('ul').children('.abc').css('border-bottom', '4px solid green'); // 找孩子,可以有过滤条件
</script>
其它操作
1、文本及值的操作
// innerHTML
// jQuery对象.html(); 获取
// jQuery对象.html(值); 设置
console.log($('#box1').html());
$('#box1').html('我是<strong>良哥</strong>,我最兴奋');
// innerText
// jQuery对象.text(); 获取
// jQuery对象.text(值); 设置
console.log($('#box2').text());
$('#box2').text('我是<strong>良哥</strong>,我最兴奋');
// value
// jQuery对象.val(); 获取
// jQuery对象.val(值); 设置
console.log($('input').val());
$('input').val('他是小王吧');
2、遍历
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
// jQuery对象.each(function (index, item) { });
// index为下标,item为循环的每一项,且是原生的,函数中的this即是item
$('li').each(function (index, item) {
// console.log(index, item);
// console.log(this === item); // true
// $(item).text(index + 1); // jq方法
item.innerText = index + 1; // 原生方法
});
</script>
3、属性操作
1、attr
// attribute
// jQuery对象.attr(属性名) // 获取
// jQuery对象.attr(属性名, 值) // 设置
// jQuery对象.removeAttr(属性名); // 删除
// jQuery对象.attr({属性名1: 值1, 属性名2: 值2, ...}) // 同时设置多个属性
var box = $('#box');
// 操作原生属性
box.attr('title', '我还会再回来的');
console.log(box.attr('title'));
// 操作自定义属性
console.log(box.attr('abc'));
box.attr('abc', '我是良哥,谁敢杀我');
// 删除
box.removeAttr('title')
box.removeAttr('abc')
// 同时设置多个
box.attr({
a: 1,
b: 2
})
2、prop
// 我们还有一个 prop()方法同 attr()方法很像,也是操作属性,但是它同 attr 有区别:
// 1、在操作固有属性时,应该使用 prop
// 2、只存在 true/false 属性,应该使用 prop
// 在开发过程中除 checked 属性建议是用 prop 操作以外,其他属性都使用 attr 操作。
// jq 元素.prop('属性名'); // 获取
// jq 元素.prop('属性名', '值'); // 设置
// jq 元素.removeProp('属性名'); // 删除
console.log($('input').prop('checked')); // true
$('input').prop('checked', false);
console.log($('button').prop('disabled'));
$('button').prop('disabled', false);