jquery 遍历节点的方法

节点遍历操作

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);