<style>
img,#one span{
width: 150px;
height: 150px;
border-radius: 75px;
float: left;
margin: 20px 10px;
}
#one{
height: 190px;
background: #CCFFFF;
}
#one span{
background: #FFCCCC;
display: inline-block;
font-size: 40px;
line-height: 150px;
text-align: center;
}
#two{
clear: left;
height: 30px;
line-height: 30px;
background: #FFCCCC;
}
.hide{
font-size: 14px;
display:none;
}
</style>
<body>
<div class="baseBtn">
<h2>基本选择器</h2>
<button class="baseOne">取id为one的元素</button>
<button class="baseMini">取class为mini的元素</button>
<button class="baseDiv">取所有的div元素</button>
<button class="baseSt">取所有span和id为two的元素</button>
<h2>层次选择器</h2>
<button class="levelSt">取div中的所有span元素</button>
<button class="levelSpan">取div下元素名为span的子元素</button>
<button class="levelOne">取id为one的下一个div元素</button>
<button class="levelDiv">取id为one后面的所有div兄弟元素</button>
<button class="levelSib">取id为two所有的同辈div元素</button>
<h2>过滤选择器</h2>
<button class="filterFirst">取第一个span元素</button>
<button class="filterLast">取最后一个span元素</button>
<button class="filterMini">取class不是mini的img元素</button>
<button class="filterEven">取索引是奇数的span元素</button>
<button class="filterOdd">取索引是偶数的span元素</button>
<button class="filteEq">取索引值等于1的span元素</button>
<button class="filteGt">取索引值大于1的span元素</button>
<button class="filteLt">取索引值小于1的span元素</button>
<button class="filteTitle">取网页中所有的h1h2等标题元素</button>
<button class="filteAnimate">取网页中正在执行动画的元素</button>
<h2>内容过滤选择器</h2>
<button class="filteContains">选取含有文本like的div元素</button>
<button class="filteEmpty">选取没有子元素的空的div元素</button>
<button class="filteImg">选取含有img的div元素</button>
<button class="filteParent">选取含有子元素的div元素</button>
<h2>可见性过滤选择器</h2>
<button class="filteHiden">选取所有不可见元素</button>
<button class="filteVisible">选取所有可见元素</button>
<h2>属性过滤选择器</h2>
<button class="filteTit">选取含有属性title的img元素</button>
<button class="filteTest">选取含有属性title值为test的img元素</button>
<button class="filteImg">选取含有属性title值不为test的img元素</button>
<button class="filteTe">选取含有属性title值以te开头的img元素</button>
<button class="filteSt">选取含有属性title值以st结束的img元素</button>
<button class="filteEs">选取含有属性title值含有的img元素</button>
<button class="filteEsMinitwo">选取含有属性id并且title中含有es的img元素</button>
</div>
<div class="allBox">
<div id="one">
<img class="mini" src="images/niuniu.jpg" alt="我的脸萌" title="脸萌做的"/>
<span>?</span>
<span>?</span>
<span>?</span>
<img class="miniTwo hide" id="miniTwo" src="images/haozi.jpg" alt="逗比的脸萌" title="test">
</div>
<div id="two">I dont't have a type,if i like you ,i like you</div>
<div id="three"></div>
<div class="hide">Keep learning every day</div>
</div>
</body>
$(function(){
// 基本选择器
//改变id为one的元素
$(".baseOne").on("click",function(){
$("#one").css("background","#6699CC");
});
//改变class为mini的元素
$(".baseMini").on("click",function(){
$(".mini").attr({src:"images/haozi.jpg",alt:"逗比的脸萌"});
});
//改变所有的div元素
$(".baseDiv").on("click",function(){
$("div").css("background","#9999CC");
});
//改变所有span和id为two的元素
$(".baseSt").on("click",function(){
$("div").css("fontWeight","bold");
});
// 层次选择器
// 改变div中的所有span元素
$(".levelSt").on("click",function(){
$("div span").css("color","red");
});
//改变div下元素名为span的子元素
$(".levelSpan").on("click",function(){
$("div > span").css({"color":"red","fontWeight":"bold"});
});
//改变id为one的下一个div元素.$("#one + div")等同于$("#one").next("div")
$(".levelOne").on("click",function(){
$("#one + div").css({"color":"red","fontWeight":"bold","background":"#99CC99"});
});
//改变id为one后面的所有div兄弟元素.$("#one ~ div")等同于$("#one").nextAll("div")
$(".levelDiv").on("click",function(){
$("#one ~ div").css({"color":"red","display":"block","background":"#99CC99"});
});
//改变id为two所有的同辈div元素
$(".levelSib").on("click",function(){
$("#two").siblings("div").css({"color":"green","display":"block"});
});
//过滤选择器
//改变第一个span元素
$(".filterFirst").on("click",function(){
$("span:first").css("color","red");
});
//改变最后一个span元素
$(".filterLast").on("click",function(){
$("span:last").css("color","red");
});
//改变class不是mini的img元素
$(".filterMini").on("click",function(){
$("img:not(mini)").show();
});
//改变索引是奇数的span元素
$(".filterEven").on("click",function(){
$("span:even").css("color","green");
});
//改变索引是偶数的span元素
$(".filterOdd").on("click",function(){
$("span:odd").css("color","red");
});
//改变索引值等于1的span元素
$(".filteEq").on("click",function(){
$("span:eq(1)").css({"color":"green","fontWeight":"bold"});
});
//改变索引值大于1的span元素
$(".filteGt").on("click",function(){
$("span:gt(1)").css({"color":"green","fontWeight":"bold"});
});
//改变索引值小于1的span元素
$(".filteLt").on("click",function(){
$("span:lt(1)").css({"color":"green","fontWeight":"bold"});
});
//改变网页中所有的h1h2等标题元素
$(".filteTitle").on("click",function(){
$(":header").css({"color":"green","fontWeight":"bold"});
});
//取网页中正在执行动画的元素
$(".filteAnimate").on("click",function(){
$(":animate").css({"width":"200px","height":"50px"});
});
//内容过滤选择器
//选取含有文本like的div元素
$(".filteContains").on("click",function(){
$("div:contains('like')").css({"color":"red","fontStyle":"italic"});
});
//选取没有子元素的空的div元素
$(".filteEmpty").on("click",function(){
$("div:empty").css({"width":"100%","height":"40px","background":"green"});
});
//选取含有img的div元素
$(".filteImg").on("click",function(){
$("div:has(img)").css("background","green");
});
//选取含有子元素的div元素
$(".filteParent").on("click",function(){
$("div:parent").css("background","#FF6666");
});
//选取所有不可见元素
$(".filteHiden").on("click",function(){
$(":hidden").show().css("background","#FF6666");
});
//选取所有可见元素
$(".filteVisible").on("click",function(){
$(":visible").css("background","#FF6666");
});
//属性过滤选择器
//选取含有属性title的img元素
$(".filteTit").on("click",function(){
$("img[title]").attr({src:"images/haozi.jpg",alt:"逗比的脸萌"});
});
//选取含有属性title值为test的img元素
$(".filteTest").on("click",function(){
$("img[title=test]").show();
});
//选取含有属性title值不为test的img元素
$(".filteImg").on("click",function(){
$("img[title!=test]").hide();
});
//选取含有属性title值以te开头的img元素
$(".filteTe").on("click",function(){
$("img[title^=te]").show();
});
//选取含有属性title值以st结束的img元素
$(".filteSt").on("click",function(){
$("img[title$=st]").show();
});
//选取含有属性title值含有es的img元素
$(".filteEs").on("click",function(){
$("img[title*=es]").show();
});
//选取含有属性id并且title中含有es的img元素
$(".filteEsMinitwo").on("click",function(){
$("img[id][title*=es]").show();
});
});
<h2>表单对象属性选择器</h2>
<form id="form1" action="#">
<button type="reset">重置所有表单元素</button>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<input type="text" class="getChecked"/>
<div></div>
<br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</form>
<h2>表单选择器</h2>
<form id="form2" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><div style="display:none">test</div><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
<div></div>
</form>
$(function(){
//表单对象属性选择器
//表单重置
$(":reset").click(function(){
setTimeout(function(){
countChecked();
$("select").change();
},0);
});
//改变可用文本框的值
$("#form1 input:enabled").val("这里变化了！");
//改变不可用文本框的值
$("#form1 input:disabled").val("这里变化了！");
//使用:checked选择器来操作多选框
$(":checked").click(countChecked);
function countChecked(){
var len = $("input:checked").length
$("#form1 div:first").html("<strong>有"+len+" 个被选中!</strong>");
}
countChecked();//进入页面就调用.
//使用:selected选择器，来操作下拉列表.
$("select").change(function(){
var str = "";
$("select :selected").each(function(){
str += $(this).text() + ",";
});
$("#form1 div").eq(1).html("<strong>你选中了："+str+"</strong>");
}).trigger("change");
// trigger("change") 在这里的意思是：
// select加载后，马上执行onchange.
// 也可以用.change()代替.
//表单选择器
var $allInput = $("#form2 :input");//注意:input和input的区别
var $allInputs = $("#form2 input");
var $allTest = $("#form2 :text");
var $allPsd = $("#form2 :password");
var $allRadio = $("#form2 :radio");
var $allCheckbox = $("#form2 :checkbox");
var $allSubmit = $("#form2 :submit");
var $allImg = $("#form2 :image");
var $allReset = $("#form2 :reset");
var $allBut = $("#form2 :button");// <input type=button /> 和 <button ></button>都可以匹配
var $allFile = $("#form2 :file");
var $allHidden = $("#form2 :hidden");// <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allSelect = $("#form2 select");
var $allTextarea = $("#form2 textarea");
$("#form2 div").append("有"+ $allInput.length +"个表单元素<br/>");
$("#form2 div").append("有"+ $allTest.length +"个单行文本框<br/>");
$("#form2 div").append("有"+ $allPsd.length +"个密码框<br/>");
$("form").submit(function () { return false; }); // return false;不能提交.
})
900
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
