1.布局和书写一个简单的样式
<ul>
<li>1</li>
<li>2</li>
<li class="li3">3</li>
<p>31</p>
<p>32</p>
<p>33</p>
<li class="li4">4</li>
<li><span class="sps">5</span></li>
<li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
<li>7</li>
</ul>
<script src="js/jquery-1.9.1.
<style>
body {
position: fixed;
}
</style>
2.筛选 过滤属性
console.log($("ul>li").eq(0));
console.log($("ul>li").eq(-1));//注意 倒着找 从-1
console.log($("ul>li").first());
console.log($("ul>li").last());
//直接写名称
console.log($("ul>li").hasClass("li4"));
console.log($("ul>li").is(".li4"));
$("ul>li").each(function (index) {
if ($(this).hasClass("li4")) {
console.log($(this));
}
});
console.log($("ul>li").filter(".li4"));
console.log($("ul>li").filter(function (index) {
if ($(this).is(".li4")) {
return $(this);
}
}));
console.log($("ul>li").is(function (index) {
if ($(this).hasClass("li4")) {
return true;
}
}));
console.log($("ul>li"));
console.log($("ul>li").map(function (index, obj) {
//obj 是原生的js对象
;
return $(obj).text();
}));
console.log($("ul>li").has(".sp"));
console.log($("ul>li").not(".li4"));
console.log($("ul>li").not($("ul>li").has(".sp")));
console.log($("ul>li").not(function (index, obj) {
if ($(obj).is(".li4")) {
return obj;
}
}));
console.log($("ul>li").slice(0, 2));
3.查找属性
//children() 不带参 获取元素的所有子集
console.log($("ul>li").children());
console.log($("ul>li").children(".sps"));
console.log($("li:first").parent());
console.log($("li:first").parents("body"));
console.log($("ul").find(".li4"));
console.log($(".li4").next());
console.log($(".li4").nextAll(".li6"));
console.log($(".li4").prev());
console.log($(".li4").prevAll());
console.log($("ul>li:nth-child(3)").nextUntil(".li4", "p"));
console.log($("ul>li:nth-child(3)").nextAll());
console.log($(".li4").offsetParent());
console.log($(".li4").siblings());
console.log($(".li4").siblings(".li6"));
console.log($(".li6").add($(".li3")));
console.log($(".li6").add("<span>123</span>"));
console.log($(".li6").nextAll().addBack("li"));
console.log($(".li6").contents('.sp1'));
console.log($(".li6").find(".sp1").end());