您的位置：首页 > Web前端 > JQuery

jQuery-第2节-jQuery创建元素、包装集的处理

2016-06-27 21:26 316 查看

1.jquery创建元素（三种方法）

多个css样式：$('获取元素').css({'属性名':'属性值','属性名':'属性值'});

例子：

<body>
<button id="btn1">添加一</button>
<button id="btn2">添加二</button>
<button id="btn3">添加三</button>
<div id="content"></div>
<script>
$(function(){
//方法一
$("#btn1").click(function(){
$("<p>添加标签方法一</p>").appendTo($("#content"));
});
//方法二appendTo:向所有匹配的元素追加到指定元素的集合中
$("#btn2").click(function(){
$("<p>").html("添加标签方法二").appendTo($("#content"));
});
//before在content之前创建p标签
$("#btn3").click(function(){
$("#content").before($("<p>")).html("添加标签方法三");
});
});
</script>

2.管理jquery包装集元素
过滤

（1）.eq();获取第N个元素；例：$('li').eq(5).css('color',"#eee");

（2）.filter();筛选与指定表达式匹配的元素集合；例：$('li').filter('.active').css('font-size','50px');

（3）.not();删除与指定表达式匹配的元素；例：$("p").not("#selected")[0]

（4）.map();将取出对象全部执行map后面的函数；例：

$('li').map(function(){
return $(this).html('H5EDU');
});

（5）slice(start,end);选中匹配的子集从第几个开始，到第几个结束；例：$('li').slice(2,5).remove();
查找

（1）.find();搜索所有与指定表达式匹配的元素；例：$("p").find("span")或者$('li').find('p').html('hahahahah');

（2）.children();获取一个元素当中的直接子节点,然后再从所有子集当中进行筛选；例：$("div").children()

（3）.contents();查找匹配元素内部所有的子元素；例：$("p").contents();

（4）.closest();获取一个元素符合条件的最近的父元素；例：$('#u2').closest('li').css('color','blue');

（10）.next();选中当前元素中所有同级元素的下一个同级节点；例：$('li').next().css('border','2px solid #ff0');

（11）.prev();选中当前元素中所有同级元素的上一个同级节点；例：$('li').prev().css('border','2px solid #ff0');

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航