您的位置：首页 > Web前端 > JQuery
Jquery初始--遍历

2015-10-22 17:29 621 查看
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<title>遍历方法</title>
<style type="text/css">
.p *
{ display: block;
background:#FFCCFF;
border: 2px solid #000;
color:#000;
padding: 5px;
margin: 15px;
}
/* .a
{
background:lightgrey;
border: 2px solid #666;
color:#006;
}*/
.ea{border: 2px solid #FFCCFF;}
.newClass { background:#9F0 }
</style>
<script type="text/javascript">
$(document).ready(function(){
//$("div").css("color","green")

//add 方法
//一： $("p").add("span").css("color","green")
//二： $("p").add("strong","ul").css("color","green")
//三： $("p").add(document.getElementById("myspan")).css("color","green")
//四：$("p").add($("#myspan")).css("color","green")
//下面的方法是jquery里的，以上jquery和zepto都可以。
/*$("button").click(function(){
$("p").add("<br><span>A new span element.</span>").appendTo("p");
});*/
//addclass 方法
// $( "div" ).addClass( "newClass");
//$( "div" ).addClass( "p newClass");
//$( "div" ).removeClass( "p newClass").css( "background","#FFCC00" );
//find() 方法
返回被选元素的后代元素。find里面填“*”，表示全部
//$("body").find("div,li,.pid").css({"color":"red","border":"2px solid red"});
//$("div").find("strong").css({"color":"red","border":"2px solid red"});
//children 方法
//$("div").children().css("color","red");
//$("div").children("strong").css("color","red");
//children是直接子元素，若P，则不行，不是直属
//$(".a").children("strong").css("color","red");
//contents直接子元素，包括被选元素的文本和注释节点,如果在相同的域中，contents() 方法也能访问 iframe 的 HTML。
// $("div").contents().css("color","red");
//closest返回被选元素的第一个祖先元素
//$("p").closest("div").css({"color":"red"});
//offsetParent() 方法返回最近被定位的父元素。所谓“已定位元素”就是指给元素设置了 position 属性的样式，并且 position 样式属性的值等于 absolute、relative、fixed 之一的元素。如果元素本身已经定位，那么 offsetParent 属性返回此元素已定位父级元素，如没有已定位的父级元素，则返回 BODY 对象;如果元素没有定位， offsetParent 不但会找已经定位的父级元素而且还会查找类型为 TD 和 TABLE 的父级元素，只要找到这三种父级元素的其中任何一种元素将返回此元素，否则返回 BODY 对象
//$("p").offsetParent().css("background-color","red");
//$("strong").offsetParent().css("background-color","red");
//parents()返回被选元素的父元素
//$("p").parents("div").css({"color":"red","border":"2px solid red"});
//$("p").parents().css({"color":"red"});
//parent()返回被选元素的直接父元素
//$("ul").parent("div").css({"color":"red","border":"2px solid red"});
//parentsUntil()方法返回介于selector与 stop 之间的所有祖先元素。如下例中表示body标签下的li,div标签
//$("p").parentsUntil("body","li,div").css({"color":"red","border":"2px solid red"});
//下例表示p标签与ul标签之间的使用css
//$("p").parentsUntil("ul").css({"color":"red","border":"2px solid red"});

//first() 方法返回被选元素的第一个元素。
//last() 方法返回被选元素的最后一个元素
//$("strong").first().css("background-color","yellow");
//$("strong").last().css("background-color","red");
//next() 返回被选元素的后一个同级元素 相邻的，旁边隔着其他原色都不行
//nextAll() 返回被选元素之后的所有同级元素
//nextUntil() 返回介于两个给定参数之间的每个元素之后的所有同级元素
//prev() 返回被选元素的前一个同级元素
//prevAll() 返回被选元素之前的所有同级元素
//prevUntil() 返回介于两个给定参数之间的每个元素之前的所有同级元素
//$("li").next().css("background-color","yellow");
//$("li").prev("strong").css("background-color","red");
//$("li").nextAll().css("background-color","yellow");
//$("li").prevAll("strong").css("background-color","red");
// $("li").nextUntil("strong").css("background-color","yellow");
//$("li").prevUntil().css("background-color","red");
//siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。
//$("li").siblings("strong").css("background-color","yellow");

//slice() 筛选开始点和结束点的索引之间的元素：start 参数是创建子集的开始索引（从 0 开始），stop 参数是一个可选的结束点$(selector).slice(start,stop) 负数表示倒过来数
//$("strong").slice(1,4).css("background-color","yellow");
//$("strong").slice(-2).css("background-color","yellow");
//jQuery eq()：定义及获取匹配元素集上的相应位置索引元素，0是第一个
//$("div").eq(1).css("background-color","yellow");
//$('strong:eq(1)').addClass('newClass'); //选择器都能这么写
//filter() 方法返回符合一定条件的元素。注意选择器前后保持一致
//$("strong").filter(":even").css("background-color","yellow");//偶数strong（第一个是0）
/*$("strong").filter(function(){ return $("span",this).length==2;}).css("background-color","yellow");*/
//$("strong").filter($(".a strong#t")).css("background-color","yellow");
//not() 方法返回不符合一定条件的元素。
//$("strong").not(":odd").css("background-color","yellow");//奇数strong（第一个是0）
//has() 返回拥有一个或多个元素在其内的所有元素
//$("p").has("strong").css("background-color","yellow");
//is() 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true
/*if ($("strong").parent().is("ul")) {
alert("p 的父元素是 div");
}*/
//addBack() 把之前的元素集添加到当前集合中,以前是andSelf
//$('p').nextAll().addBack().css('background-color', 'red');
//end() 结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态
//$("p").find("span").end().css("border", "2px red solid");
//map() 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象
//each() 为每个匹配元素执行函数
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
});
</script>

</head>
<body class="a">body (great-great-grandparent)
<div class="p">div (great-grandparent)
<button id="button">点击</button>
<strong style="position:relative">我是div外strong</strong>
<div class="b" >div(增)
<ul>ul (grandparent)
<strong class="s" >我是strong</strong>
<li style="position:relative">li (direct parent)
<p style="position:relative">我是p</p>
<p class="pid">我是pid</p>
<p>我是<strong>p</strong></p>
</li>
<strong>我是li外strong</strong>
<span id="myspan">我是li外span</span>
</ul>
<strong id="t">我是ul外strong</strong>
<strong >我是ul外strong</strong>

</div>
</div>
<div class="ea">
<table>
<tr>
<th>序号</th>
<th>编号</th>
</tr>
<tr>
<td id="xu">序号</td>
<td id="bian">编号</td>
</tr>
</table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航