基于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'));
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。