jQuery实例方法 — DOM操作二

基于jQuery对象增删改查相关方法：
next()、prev()
下一个兄弟节点的jq对象、上一个兄弟节点的jq对象

<button>change</button>
<div class=".demo">yiersan</div>
<p class=".demo">yiersan</p>

$('button').click(function () {
	$(this).next().css('color', 'red');   // 点击按钮div里文字变色
	$(this).next('p').css('color', 'red');   // 无变色
})

nextAll()、prevAll()
下一堆兄弟节点的jq对象、上一堆兄弟节点的jq对象

<div class="wrapper">
    <button>全选</button>
    <button>取消全选</button>
    banana:<input type="checkBox">
    apple:<input type="checkBox">
    orange:<input type="checkBox">
    <input type="submit" value="login">
</div>

// 实现全选
$('button').eq(0).click(function () {
    $(this).nextAll('input[type="checkBox"]').prop('checked',true);  // nextAll里面添加限定条件以免sublime受干扰
})
$('button').eq(1).click(function () {
    $(this).nextAll('input[type="checkBox"]').prop('checked',false);
})

nextUntil()、prevUntil()
直到什么为止

<div class="wrapper">
    <button>全选</button>
    <button>取消全选</button>
    banana:<input type="checkBox">
    apple:<input type="checkBox">
    orange:<input type="checkBox">
    <br>
    <button>全选</button>
    <button>取消全选</button>
    库里:<input type="checkBox">
    汤姆森:<input type="checkBox">
    杜兰特:<input type="checkBox">
</div>

// 实现两个全选
$('button').eq(0).click(function () {
    $(this).nextUntil('br','input[type="checkBox"]').prop('checked',true);
})
$('button').eq(1).click(function () {
    $(this).nextUntil('br','input[type="checkBox"]').prop('checked',false);
})
$('button').eq(2).click(function () {
    $(this).nextUntil('','input[type="checkBox"]').prop('checked',true);
})
$('button').eq(3).click(function () {
    $(this).nextUntil('','input[type="checkBox"]').prop('checked',false);
})

siblings()
获取同级的所有兄弟节点的jq对象

<ul>
    <li>1</li>
    <span>span-1</span>
    <li>2</li>
    <span>span-2</span>
    <li>3</li>
</ul>

$('li').eq(1).css('color','red').siblings('span').css('color','yellow');  // 将第二个li字体变为红色，找到所有span兄弟节点变为黄色

parent() ：可以添加限定条件，获取你的第一个父级节点jq对象

<div class = 'wrapper'></div>

showArrs = [
    {
        name : 'nike',
        id : 101
    },{
        name : 'adidas',
        id : 102
    }
];
var str = '';
showArrs.forEach(function (ele, index) {
    str += '<div class = "show" data-id = "' + ele.id +'"><p>' + ele.name + '</p><button>add</button>';
});
$('.wrapper').html(str);
var cararr = [];
$('button').click(function () {
    cararr.push($(this).parent().attr('data-id'));
});

parents() ：可以添加限定条件，获取你的所有父级节点jq对象
closest() ：必须添加限定条件，从自己开始找，获取最近的父级节点jq对象，如果自身符合条件按也可以获取自己
offsetParent() ：获取最近的有定位的父级节点jq对象

slice() ：截取一段为jq对象

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

$('ul li').slice(1, 4).css('backgroundColor','red'); // 2 3 4的li变色

inserBefore() 、before()
它俩的区别在于前面调用的值不同，后续可以继续添加样式，jQuery的链式调用

<div class="wrapper">
    <div class="Box1">Box1</div>
    <div class="Box2">Box2</div>
</div>
<div class="content">content</div>

$('.content').insertBefore('.Box1');  // 将.centent的div插入到.Box1前面
$('.content').insertBefore($('.Box1')).css('color', 'red');  // 给.content添加样式
$('.Box1').after('<div class = "demo"></div>');  // 可以直接写结构
$('.Box1').before($('.content'));   
$('.Box1').before($('.content')).css('color','red');   // 给Box1添加样式

inserAfter() 、after()
与上面的大同小异

append()、appendTo()

$('.wrapper').append('<div class = "demo"></div>');  // 可以直接写结构
$('<div class = "demo"></div>').appendTo($('.wrapper'));

remove()、detach()
区别：remove删了再加回去事件没了，detach删了加回来事件还在

$()：可以直接在里面写结构
$(’< div class = ‘“demo”>1< /div>’).appendTo( $(‘body’));

wrap()、wrapInner()、wrapAll()、unWrap()：包裹层

<div class = "demo">
	<span></span>
	<span></span>
</div>
<div class = "demo">
	<b></b>
	<b></b>
</div>

// wrap
$('.demo').wrap(function (index, elem) {
	return '<div class= warpper' + index + '></div>';
});   // 给两个.demo的div分别添加一个包裹层

// wrapInner
$('.demo').wrapInner(function (index, elem) {
	return '<div class= warpper' + index + '></div>';
});   // 给.demo中的span和b标签添加一个包裹层

// wrapAll
$('.demo').wrapAll('<div class = "wrapper"></div>');  // 根据第一个.demo元素节点把.demo的元素包裹再一起（同级，即使当初有.demo元素在另一个.demo元素节点里面）

// unWrap取消包裹层，删除直接父级，到body为止

clone()
对选择的DOM对象克隆一个一模一样的DOM对象，返回的是克隆的对象，如果要将选择对象的事件也克隆过来，在方法体里面添加一个true

// 写一个模板，克隆过来直接添加
<style>
.tpl{
    display: none;
}
</style>
<table class="stb">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>班级</th>
    </tr>
    <tr class="tpl">
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

var showArr = [
    {
        name : 'yq',
        age : 18,
        oClass : '一班'
    },
    {
        name : 'ymy',
        age : 19,
        oClass : '二班'
    },
    {
        name : 'xxx',
        age : 50,
        oClass : '三班'
    }
];
showArr.forEach(function (elem, index) {
    var oCloneDom = $('.tpl').clone().removeClass('tpl');
    oCloneDom.find('td').eq(0).text(elem.name)
                                .next().text(elem.age)
                                    .next().text(elem.oClass);
    $('.stb').append(oCloneDom);
});

*data()：这个在jQuery中很重要
在jQuery的dom中存信息存状态，不会写进行间，但是可以取出，存什么值取出就是什么值，attr和prop取出都是字符串类型。不用attr和prop用data的好处之一就是不用操作dom，节省效率

<style>
    .tpl{
        display:none;
    }
</style>

<div class="wrapper">
    <div class="tpl">
        <p></p>
        <span></span>
        <button>add</button>
    </div>
    <p class="show">
        <span>sum</span>
        <span class="sum">0</span>
    </p>
</div>

var shopArray = [
    {
        name : 'air max',
        shopName : 'nike',
        price : 1500,
        id : '1001'
    },
    {
        name : 'sanyecao',
        shopName : 'adidas',
        price : 900,
        id : '1001'
    },
    {
        name : 'jingdian',
        shopName : 'biaoma',
        price : 200,
        id : '1001'
    }
];
shopArray.forEach(function (elem, index) {
    var oCloneDom = $('.tpl').clone().removeClass('tpl');
    oCloneDom.data({
        id : elem.id,
        shopName : elem.shopName,
        price : elem.price
    }).find('p')
            .text(elem.name)
                .next()
                    .text(elem.price);
    oCloneDom.insertBefore($('.show'));
});

$('.wrapper button').click(function () {
    $('.sum').text( +$('.sum').text() + $(this).parent().data('price'));
    console.log($(this).parent().data('shopName'));
})