jQuery
1、几种获取子元素的方法及区别
children方法获得的仅仅是元素一下级的子元素,即:immediate children。
find方法获得所有下级元素,即:descendants of these elements in the DOM tree
children方法的参数selector 是可选的(optionally),用来过滤子元素,但find方法的参数selector方法是必选的。
$("#list p") 是查找id为list的元素的所有是P标签的后代,即:子元素,孙子元素,孙孙子元素……都可以。
$("#list>p") 是查找id为list的元素的所有是P标签的一级后代,超过一代就获取不到了。
2、超链接添加onclick事件后,阻止超链接跳转:
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">其他品牌相机</a><i>(30440)</i></li>
</ul>
<div class="showmore">
<a href="more.html" id="button-1" data-role="button"
data-icon="arrow-d" data-iconpos="left">
显示全部品牌
</a>
</div>
</div>
</body>
<script type="text/javascript">
var $category=$("ul li:gt(5):not(:last)");
$category.hide();
var $toggleBtn=$("div.showmore>a");
$toggleBtn.click(function(){
$category.show();
return false;//超链接不跳转
});
</script>
3、jQuery查找属性节点
var $para=$("p");
var p_txt=$para.attr("title");
4、jQuery创建节点
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");
$("ul").append($li_1).append($li_2);
5、jQuery删除节点
$("ul li").remove();
$("ul li").remove("li[title!=菠萝]");
detach();
empty();
6、复制节点
$(this).clone().appendTo("ul");
7、替换节点
replaceWith();
replaceAll();