1：find筛选
例题为筛选加样式
<body>
<div>111</div>
<span>222</span>
<p>333</p>
<div id="test">
<div class="green">4444</div>
<div class="green">6666</div>
<span>5555</span>
<span class="green">9999</span>
</div>
<div class="green">7777</div>
<script type="text/javascript">
$(function(){
/*$("body").find("div").each(function(){
alert($(this).html());
});*/
//$("p,div,.green").css("background","green");
//$(".green","#test") ==$("#test").find(".green");
//$("#test .tm")
var spanHtml = $("#test").find(".tm").html();
var length = $("#test .green span").length;
$("#test .green").css("background","red");
});
</script>
</body>
2：first last eq筛选
<body>
<div>11</div>
<div>22</div>
<div>33</div>
<span>44</span>
<script type="text/javascript">
$(function(){
//:first :last
alert("方式:first："+$("div:first").html());
alert("方式:last："+$("div:last").html());
//first() last()
alert("方式:first()："+$("div").first().html());
alert("方式:last()："+$("div").last().html());
//eq
alert("方式:eq()："+$("div").eq(0).html());
alert("方式:eq()："+$("div").eq(2).html());
//:eq
alert("方式:eq："+$("div:eq(0)").html());
alert("方式:eq："+$("div:eq(2)").html());
});
</script>
</body>
3：删除 及parents() closest()的比较
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<title>Document</title>
<style>
.gfather{width:640px;height:100px;border:1px solid red;margin-top:5px;}
</style>
</head>
<body>
<div class="gggather">
<div class="gfather">
<div id="father" class="father">22父亲
<span id="span">1111</span>
<span>222</span>
<p>333</p>
<a href="javascript:void(0)" onclick="tm_delete(this)">删除</a>
</div>
</div>
<div class="gfather">
<div id="father" class="father">22父亲
<span id="span">1111</span>
<span>222</span>
<p>333</p>
<a href="javascript:void(0)" onclick="tm_delete(this)">删除</a>
</div>
</div>
<div class="gfather">
<div id="father" class="father">22父亲
<span id="span">1111</span>
<span>222</span>
<p>333</p>
<a href="javascript:void(0)" onclick="tm_delete(this)">删除</a>
</div>
</div>
</div>
<script type="text/javascript">
function tm_delete(obj){
var $this = $(obj);
$this.parents(".gfather").fadeOut("slow",function(){
$(this).remove();
});
}
$(function(){
//parent() children()
/* var f = $("#span").parent().attr("class");
var cs = $("#father").children();
alert("在当前元素下有:"+cs.length+"子元素");
cs.each(function(i){
alert("第"+(++i)+"个元素的【"+$(this).context.tagName+"】的值是："+$(this).text());
});
*/
//parents() closest();
//如果parents()没有指明范围，那么它就等同于parent();
//parents();从当前元素往上查找，找到最近的一个就返回
//closest(obj)
var f = $("#span").parents(".father");
alert(f.html());
var cf = $("#span").closest(".father");
alert(cf.html());*/
});
</script>
</body>
4：选项卡
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
*{margin:0px;padding:0px;}
#box{list-style:none;border:1px solid #ccc;width:100%;}
li{list-style:none;list-style-image:none;}
#box li{border-bottom:1px solid #ccc;width:75px;height:35px;padding:3px;float:left;cursor:pointer;}
.active{background:red;}
</style>
</head>
<body>
<div style="border:1px solid red;width:486px;padding:5px;margin:10px auto;">
<ul id="box">
<li tab="#div1" class="active"><div>111111</div></li>
<li tab="#div2"><div>222</div></li>
<li tab="#div3"><div>3333</div></li>
<li tab="#div4"><div>444</div></li>
<li tab="#div5"><div>555</div></li>
<li tab="#div6"><div>666</div></li>
</ul>
<div id="tabboxs">
<div id="div1">1111111</div>
<div id="div2" style="display:none;">2222222</div>
<div id="div3" style="display:none;">3333311111</div>
<div id="div4" style="display:none;">4444444444</div>
<div id="div5" style="display:none;">5555555555</div>
<div id="div6" style="display:none;">6666666666</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//siblings() = prevAll() + nextAll()
//$("#text").siblings().css("background","red");
//第一种方式
/*$("#box li").on("click",function(){
var index = $(this).index();
$(this).addClass("active")
$(this).siblings().removeClass("active");
$("#tabboxs").find("div").eq(index).show();
$("#tabboxs").find("div").eq(index).show().siblings().hide();
});*/
//第二种方式
$("#box li").on("click",function(){
var tab = $(this).attr("tab");
$(this).addClass("active").siblings().removeClass("active");
$(tab).show().siblings().hide();
});
});
</script>
</body>
5：filter筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>//jquery-1.11.1.min.js可在jquery.com上下载
<body>
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
<script type="text/javascript">
// attr prop html val text
//find parent next is hasClass
//hasClass("selected")
//filter/is(className)
$("p").filter(".selected").css("background","red");
$("p").filter(".selected , :first").css("background","red");
</script>
</body>
6:is筛选 是根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回'false'。
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div id="target">3</div>
<div class="tmclass tm11">4</div>
<div class="tmclass tm22">5</div>
<div class="tmclass tm33">5</div>
<div>6</div>
<input type="text">
<label><input type="radio" id="male" name="male" value="1">男</label>
<label><input type="radio" name="male" checked="checked" value="2">女</label>
<label><input type="radio" name="male" value="3">保密</label>
<div id="divbox">
<span class="span"></span>
<span id="span" class="span"></span>
<span class="span"></span>
</div>
<ul>
<li><strong>list</strong> item 1 - one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
<li>list item 3</li>
</ul>
<script type="text/javascript">
//hasClass():判断一个元素是否包含class
//is(expression|object|function|elements) :选择器
//filter()
//contents()
//not()
//筛选
$(function(){
//$(".tm22").css("background","red");
$(".tmclass").each(function(){
/*if($(this).hasClass("tm22")){
$(this).css("background","red");
}else{
$(this).css("background","green");
}*/
});
/*
$("input").each(function(){
if($(this).is(":text")){
$(this).val("1111111111111111");
}
})
$("input[type='radio'][name='male']").each(function(){
//if($(this).is(":checked")){
if($(this).prop("checked")){//prop判断是否选中
alert("您当前选中的值是:"+$(this).val());
}
});*/
//var flag = $("#male").is("input");
//alert(flag);
//var flag = $("#divbox").children().is("span");
//alert(flag);
$("li").on("click",function(){
var flag = $(this).is(function(){
//return $(this).index()==1;
return $("strong",this).length===2;
});
if(flag){
$(this).css("background","green");
}else{
$(this).css("background","red");
}
})
});
</script>
</body>
7：content 查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
///在content.html中
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="parent">我是一个父亲窗口!</div>
<iframe id="frame1" name="framename" src="children.html" width="690" height="420" scrolling="auto" style="border:1px solid #bbb;"></iframe><!--主要作用将主业务与副业务区分-->
<input type="button" onclick="tm_click()" value="我想要调用iframe里面的事件"/>
<script type="text/javascript">
$(function(){
//contents();
});
function getIframeObj(id){
return document.getElementById(id).contentWindow;//一切对象都要在document下面
}
function tm_click(){
var iframeDom = getIframeObj("frame1");
/*
//var iframeDom = document.frames["framename"].contentWindow;
//事件能够调用
iframeDom.tm_children();
//javascript获取iframe元素内容
var html = iframeDom.document.getElementById("box").innerHTML;//一切对象都要在document下面
alert(html);
//javascript转换成jquery对象的写法
var $html = $(iframeDom.document).find("#box").html();
alert($html);
*/
//contents();
var $iframe = $("#frame1").contents();//==$(iframeDom.document)
var boxHtml = $iframe.find("#box").html();
alert(boxHtml);
}
function tm_parent(){
alert("您调用了父窗口的方法哦!");
}
</script>
</body>
/////在children.html中
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="box">我是一个子类的页面哦!同学们好好听课!</div>
<input type="button" onclick="tm_click()" value="我想要调用父窗体的事件"/>
<script type="text/javascript">
function tm_children(){
alert("我是一个子类的页面哦!好好学习!");
}
function tm_click(){
parent.tm_parent();
//javascript写法
//var phtml = parent.document.getElementById("parent").innerHTML;
//alert(phtml);
//jquery写法
var phtml = $(parent.document).find("#parent").html();
alert(phtml);
}
</script>
</body>
浙公网安备 33010602011771号