JQuery基础之选择器
2011-03-28 11:36
302 查看
<html>
<head runat="server">
<title></title>
<style type="text/css">
div, span, p
{
width: 140px;
height: 140px;
margin: ==5px;
background: #aaaa;
border: #0001pxsolid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini
{
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide
{
display: none;
}
div.test
{
display: none;
}
</style>
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<div class="test">
<h1>
在枥蝈蝈枷</h1>
<h2>
你个大痒痒</h2>
<div class="one" id="one">
id为one，class为one的div
<div class="mini">
class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">
class为mini,title为other</div>
<div class="mini" title="test">
class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini" title="tesst">
class为mini,title为tesst</div>
</div>
<div style="display: none;" class="none">
style的display为"None"的div
</div>
<div class="hide">
class为hide的div</div>
<div>
包含input的type为“hidden”的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素</span>
</div>
<form id="form1" action="#">
可用元素：<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 />
<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
<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>
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北凉</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<div>
</div>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
//一、基本选择器
//$('#one').css("background", "#bbffaa");
//$('.mini').css("background", "#bbffaa");
//$('div').css("background", "#bbffaa");
//$('*').css("background", "#bbffaa");
//二、层次选择器
//$('span,#two').css("background", "#bbffaa");
//$('body div').css("background", "#bbffaa"); //〈body>内所有<div>的背景色
//$('body > div').css("background", "#bbffaa"); //改变body内<div>的子元素背景色
//$('.one+div').css("background", "#bbffaa"); //改变class为one的下一个<div>元素背景色(等价)==$('.one').next('div');
//$('#two~div').css("background", "#bbffaa");//改变id为two之后的所有兄弟为div的背景色(等价)==$('#two').nextAll('div');
//$('#two').siblings('div').css("background", "#bbffaa");//改变id为two的所有兄弟为div的背景色(所有同辈元素)
//三、过滤选择器
//1.基本过滤选择器
//$('div:first').css("background", "#bbffaa"); //改变第一个<div>元素的背景色
//$('div:last').css("background", "#bbffaa"); //改变最后一个<div>元素的背景色
//$('div:not(.one)').css("background", "#bbffaa");//改变class不为one的<div>元素背景色
//$('div:even').css("background", "#bbffaa"); //改变索引值为偶数的<div>元素背景色
//$('div:odd').css("background", "#bbffaa"); //改变索引值为奇数的<div>元素背景色
//$('div:eq(3)').css("background", "#bbffaa"); //改变索引值为3的<div>元素背景色
//$('div:gt(3)').css("background", "#bbffaa"); //改变索引值为大于3的<div>元素背景色
//$('div:lt(3)').css("background", "#bbffaa"); //改变索引值为小于3的<div>元素背景色
//$(':header').css("background", "#bbffaa"); //改变所有标题如<h1><h2><h3>等元素背景色
//????????????$(':animated').css("background", "#bbffaa"); //改变正在执行动画元素的背景色
//2.内容过滤选择器
//$('div:contains(di)').css("background", "#bbffaa"); //改变含有文本"di"的<div>元素的背景色
//$('div:empty').css("background", "#bbffaa"); //改变不包括子元素（文本）的<div>为空元素的背景色
//????????????$('div:has(mini)').css("background", "#bbffaa");//改变含有class为mini的<div>元素的背景色
//$('div:parent').css("background", "#bbffaa")//改变含有子元素(文本元素)的背景色
//3.可见性过滤选择器
//$('div:visible').css("background", "#ff6500");//改变所有可见的<div>元素背景色
//$('div:hidden').show(30000);//显示隐藏的<div>元素show()JQuery方法
//4.属性过滤选择器
// $('div[title]').css("background", "#bbffaa"); //含有属性title的<div>元素背景色
// $('div[title=test]').css("background", "#bbffaa"); //含有属性title为test值的<div>元素背景色
//$('div[title^=te]').css("background", "#bbffaa"); //含有属性title为te开头的<div>元素背景色
//$('div[title$=est]').css("background", "#bbffaa"); //含有属性title为est结尾的<div>元素背景色
//$('div[title*=es]').css("background", "#bbffaa"); //含有属性title为含有es值的<div>元素背景色
//$('div[id][title*=es]').css("background", "#bbffaa);//结合使用
//5.子元素过滤选择器
// $('div.one :nth-child(2)').css("background", "#bbffaa"); //class为one的所有div元素(必须空格)
// $('div.one :frist-child').css("background", "#bbffaa"); //注意空格的区别.第一个
// $('div.one :last-child').css("background", "#bbffaa"); //注意空格的区别，最后一个
// $('div.one :only-child').css("background", "#bbffaa"); //注意空格的区别,惟一一个
//6.表单对象属性过滤器
// $("#form1 input:enabled").val("这里变化");//改变可用的input元素值
// $("#form1 input:disabled").val("这里变化"); ; //改变不可用的input元素值
// alert($("input:checked").length); //;//获取多选框选中的个数
//alert( $("select :selected").text());//获取下拉框选中的内容
//四、表单选择器
</script>
<head runat="server">
<title></title>
<style type="text/css">
div, span, p
{
width: 140px;
height: 140px;
margin: ==5px;
background: #aaaa;
border: #0001pxsolid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini
{
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide
{
display: none;
}
div.test
{
display: none;
}
</style>
<script src="scripts/jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<div class="test">
<h1>
在枥蝈蝈枷</h1>
<h2>
你个大痒痒</h2>
<div class="one" id="one">
id为one，class为one的div
<div class="mini">
class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">
class为mini,title为other</div>
<div class="mini" title="test">
class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini">
</div>
</div>
<div class="one">
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini">
class为mini</div>
<div class="mini" title="tesst">
class为mini,title为tesst</div>
</div>
<div style="display: none;" class="none">
style的display为"None"的div
</div>
<div class="hide">
class为hide的div</div>
<div>
包含input的type为“hidden”的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素</span>
</div>
<form id="form1" action="#">
可用元素：<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 />
<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
<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>
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北凉</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<div>
</div>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
//一、基本选择器
//$('#one').css("background", "#bbffaa");
//$('.mini').css("background", "#bbffaa");
//$('div').css("background", "#bbffaa");
//$('*').css("background", "#bbffaa");
//二、层次选择器
//$('span,#two').css("background", "#bbffaa");
//$('body div').css("background", "#bbffaa"); //〈body>内所有<div>的背景色
//$('body > div').css("background", "#bbffaa"); //改变body内<div>的子元素背景色
//$('.one+div').css("background", "#bbffaa"); //改变class为one的下一个<div>元素背景色(等价)==$('.one').next('div');
//$('#two~div').css("background", "#bbffaa");//改变id为two之后的所有兄弟为div的背景色(等价)==$('#two').nextAll('div');
//$('#two').siblings('div').css("background", "#bbffaa");//改变id为two的所有兄弟为div的背景色(所有同辈元素)
//三、过滤选择器
//1.基本过滤选择器
//$('div:first').css("background", "#bbffaa"); //改变第一个<div>元素的背景色
//$('div:last').css("background", "#bbffaa"); //改变最后一个<div>元素的背景色
//$('div:not(.one)').css("background", "#bbffaa");//改变class不为one的<div>元素背景色
//$('div:even').css("background", "#bbffaa"); //改变索引值为偶数的<div>元素背景色
//$('div:odd').css("background", "#bbffaa"); //改变索引值为奇数的<div>元素背景色
//$('div:eq(3)').css("background", "#bbffaa"); //改变索引值为3的<div>元素背景色
//$('div:gt(3)').css("background", "#bbffaa"); //改变索引值为大于3的<div>元素背景色
//$('div:lt(3)').css("background", "#bbffaa"); //改变索引值为小于3的<div>元素背景色
//$(':header').css("background", "#bbffaa"); //改变所有标题如<h1><h2><h3>等元素背景色
//????????????$(':animated').css("background", "#bbffaa"); //改变正在执行动画元素的背景色
//2.内容过滤选择器
//$('div:contains(di)').css("background", "#bbffaa"); //改变含有文本"di"的<div>元素的背景色
//$('div:empty').css("background", "#bbffaa"); //改变不包括子元素（文本）的<div>为空元素的背景色
//????????????$('div:has(mini)').css("background", "#bbffaa");//改变含有class为mini的<div>元素的背景色
//$('div:parent').css("background", "#bbffaa")//改变含有子元素(文本元素)的背景色
//3.可见性过滤选择器
//$('div:visible').css("background", "#ff6500");//改变所有可见的<div>元素背景色
//$('div:hidden').show(30000);//显示隐藏的<div>元素show()JQuery方法
//4.属性过滤选择器
// $('div[title]').css("background", "#bbffaa"); //含有属性title的<div>元素背景色
// $('div[title=test]').css("background", "#bbffaa"); //含有属性title为test值的<div>元素背景色
//$('div[title^=te]').css("background", "#bbffaa"); //含有属性title为te开头的<div>元素背景色
//$('div[title$=est]').css("background", "#bbffaa"); //含有属性title为est结尾的<div>元素背景色
//$('div[title*=es]').css("background", "#bbffaa"); //含有属性title为含有es值的<div>元素背景色
//$('div[id][title*=es]').css("background", "#bbffaa);//结合使用
//5.子元素过滤选择器
// $('div.one :nth-child(2)').css("background", "#bbffaa"); //class为one的所有div元素(必须空格)
// $('div.one :frist-child').css("background", "#bbffaa"); //注意空格的区别.第一个
// $('div.one :last-child').css("background", "#bbffaa"); //注意空格的区别，最后一个
// $('div.one :only-child').css("background", "#bbffaa"); //注意空格的区别,惟一一个
//6.表单对象属性过滤器
// $("#form1 input:enabled").val("这里变化");//改变可用的input元素值
// $("#form1 input:disabled").val("这里变化"); ; //改变不可用的input元素值
// alert($("input:checked").length); //;//获取多选框选中的个数
//alert( $("select :selected").text());//获取下拉框选中的内容
//四、表单选择器
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery基础之(三)JQuery选择器
- jQuery基础之选择器
- JQuery 基础：3.选择器
- [导入]Jquery从入门到精通：二、选择器 1、准备篇 1）基础的基础：DOM模型
- javascript之jquery基础 选择器
- jQuery基础学习8——层次选择器next()和prev()方法
- JQuery基础 -- 选择器
- JQuery中基础过滤选择器用法实例分析
- jQuery基础教程之强大的选择器（过滤选择器-属性过滤选择器）
- JQuery 基础过滤选择器
- jQuery基础选择器
- 前端学习-jQuery学习小笔记（1）——jQ基础以及各种选择器
- jQuery基础教程之强大的选择器（层次选择器）
- jQuery基础归纳总结【1】（jQuery(),文档结构,选择器）
- jQuery基础-选择器
- jQuery基础学习(1)(标签选择器，事件)
- Jquery基础选择器
- jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
- 前端基础-jQuery的内容之选择器
- 九、jQuery选择器基础