JQ之选择器作业效果图如下：
JQ之选择器作业源代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQ选择器练习</title>
<style tylie="text/css">
.bg1 {background-color: #008000;}
.bg2 {background-color: #ffd700;}
.bg3 {background-color: blue;}
.bg4 {background-color: #E9967A;}
.bg5 {background-color: #DCDCDC;}
.bg6 {background-color: #E6E6FA;}
</style>
</head>
<body>
<div>
<h2>长相思二首</h2><span></span>
<ul>
<li>长相思，在长安。</li>
<li>络纬秋啼金井栏，微霜凄凄簟色寒。</li>
<p>孤灯不明思欲绝，</p>
<li>卷帷望月空长叹，美人如花隔云端。</li>
<li>上有青冥之长天，下有渌水之波澜。</li>
<li id="suo">天长路远魂飞苦，梦魂不到关山难。</li>
</ul>
<dl>
<li>长相思，摧心肝。</li>
<li>日色欲尽花含烟，月明欲素愁不眠。</li>
<li>赵瑟初停凤凰柱，蜀琴欲奏鸳鸯弦。</li>
<li>此曲有意无人传，愿随春风寄燕然。</li>
<p>忆君迢迢隔青天，</p>
<li>昔时横波目，今作流泪泉。</li>
<li class="suo">不信妾肠断，归来看取明镜前。</li>
</dl>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 写整体样式加背景图
$('div').css({
"width":"500",
"height":"700",
"background-image":"url(http://y.photo.qq.com/img?s=ImWrdXC2q&l=y.jpg)",
"text-align":"center",
"margin":"auto"
})
// 写UL的样式
$('ul').css({
"padding":"0",
"margin":"0",
"padding-top":"10px",
"margin":"auto",
"width":"80%"
})
// 写DL的样式
$('dl').css({
"margin":"auto",
"width":"80%",
"padding-top":"20px"
})
// 写标题样式
$("h2").css({
"color":"red",
"padding-top":"120px",
})
// 在空标签处填写作者并添加字体颜色
$(':empty').text('【唐】 李白').css('color','#b22222')
// 写所有LI的整体样式
$('li,p').css({
"width":"300px",
"margin":"auto",
"list-style-type":"none",
"line-height":"1.9",
"font-size":"1.1em",
})
// 分别为UL和DL添加不同背景和圆角
$('ul').addClass('bg5').css('border-radius','10%')
$('dl').addClass('bg6').css('border-radius','10%')
$('#suo').css('padding-bottom','10px')
$('.suo').css('padding-bottom','10px')
// 第一行 UL下第1个li 整体第1个li
$('ul').find('li:first-child').css('color','blue')
$('li:eq(0)').addClass('bg1')
// 第二行 第2个li 所有LI下含有文字“井”的那个li
$('li').get(1).style.color = 'fuchsia'
$('li:contains("井")').addClass('bg2')
// 第三行 ul下带P的子元素 包含第十行
$('ul').children('p').css('color','lime')
// 第四行 所有LI中2和3之间 第3个li 因为第三行是个P 所以第3个LI是第四行
$('li').slice(2,3).css('background-color','lightgreen')
$('li').eq(2).css('color','#FF4500')
// 第五行 第4个li
$('li:eq(3)').addClass('bg1')
$('li').get(3).style.color = '#ffa500'
// 第六行 id为suo的为第六行
$('#suo').css('color','#000080')
// 第七行 就返回第6个li元素 因为eq从0开始算 中间还有个P标签 dl下面第一个li元素
$('li').filter(':eq(5)').css('color','red')
$('dl').find('li:first').addClass('bg4')
// 第八行 dl下面第1个li的相邻兄弟
$('dl').find('li:nth-child(1) + li').css('background-color','red')
$('dl').find('li:nth-child(1) ~ li').css('color','#fff')
// 第九行 第7个li 中间有两个P标签
$('li:gt(6)').css('background-color','#AFEEEE')
$('li:gt(6)').css('color','#A52A2A')
// 第十行 第7个li的下一个 就是第8个li 中间有两个P标签
$('li').eq(7).next().css('color','blue')
$('li').eq(7).next().css('background-color','#ff7f50')
// 第十一行 dl下的子元素P标签
$('dl').find('p').css('background-color','#98fb98')
$('p').css('color','#00008B')
// 第十二行 第11个li前一个li元素 dl下面最后一个元素的前一个li元素
$('li').eq(10).prev().css('background-color','red')
$('dl').find('li:last').prev().css('color','gold')
// 第十三行 dl下面最后一个li元素
$('dl').find('li:last').css('color','#FF4500')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
JQ的选择器
一，基本选择器
1. tag标签选择器
$('td'/'ul'/'h'/'li').css()
2.id选择器
$('#title').css()
3.class类选择器
$('.main').addClass(加载已写好的css样式名)
4.*通配选择符
$('tr:nth-child(3) ~ *').css()
二，层级选择器
1. 后代: 空格
$('li a').addClass('green')
2. 所有子元素 >/ 空格
//仅ul的子元素li前景色变成红色,孙元素<a>文本不会变化
$('ul > *').addClass('red')
//如果用空格分隔,<li><a>的前景色全部会发生变化
$('ul *').css('color','red')
3. 相邻兄弟元素 +
//将第5个li的下一个兄弟:第6个li前景色变更为绿色
$('li:nth-child(5) + li').addClass('green')
4. 全部兄弟元素 ~
$('li:nth-child(5) ~ li').addClass('green')
5.第一个与最后一个元素
$('li:first-child').addClass('green')
第一个 简写
$('li:first').addClass('green')
$('li:last-child').css('color','red')
最后一个简写
$('li:last').css('color','red')
6.直接选中某一个元素
$('li:nth-child(6)').addClass('red')
//jquery使用eq(i),i从0开始,注意与css中的不一样
$('li:eq(5)').addClass('red')
7.选中大于或小于某个序号的元素
//选中序号大于4的所有元素,注意从0开始计算
$('li:gt(3)').addClass('red')
//选中序号小于8的所有元素
$('li:lt(7)').addClass('red')
8. 根据序号特征来选择元素
//选中所有序号为偶数的元素even
//因为是从0开始,0,2,,4,所以看上去像是选择了奇数,要注意
$('li:even').addClass('red')
//你可能猜到了,选择奇数用是odd,当然,你是对的
$('li:odd').addClass('red')
三，内容过滤器
1.选择包含指定文本内容的元素
// $('p:contains(\'春\')').addClass('bg-wheat')
$('p:contains("春")').addClass('bg-wheat')
$('p:contains("风")').addClass('bg-green')
2.选择内容为空的标签,空是指没有子标签,甚至连文本内容都不能有
$(':empty').text('作者:孟浩然')
3.选择有img标签(图片)的p元素,给它加个背景
$('p:has("img")').addClass('bg-pink')
4.选择所有以p为父元素的节点,添加绿背景
$('p:parent').addClass('bg-green')
5.取反/反选过滤器not,选择页面中所有内容不为空的元素,前景色变更为红色
$(':not(:empty)').css('color','red')
四，表单过滤器
1.根据类型选择表单控件元素
//css写法,仅选到到所有的input,其它的控件选不上
$('input').css('background-color', 'lightgreen')
//jquery写法,前面加上冒号即可,除了input,select,button,textarea全部可以选上
$(':input').css('background-color', 'lightgreen')
//如果只想选input标签,在:input之前加上标签限定:input即可,此时与css语法效果完全一致
$('input:input').css('background-color', 'lightgreen')
//:input:本意就是选择全部的表单控件的意思,后面可以用css属性进行限制,例如获取密码框
$(':input[type="password"]').css('background-color', 'lightgreen')
//后面除了可以用css属性进行限制外,更推荐使用jquery的过滤器,例如密码框过滤器就是:password
$(':input:password').css('background-color', 'lightgreen')
//换个颜色以示区别,从这里可以看出,过滤器之间也支持链式操作
$(':input:password').css('background-color', 'skyblue')
2.根据表单控件的特征来选择元素
//:input,只选择表单元素,不包括:file,:image,:input这个我们已做过
//只选择file类型
$(':file').css('background-color', 'lightgreen')
//只选择文本框:type="text"
$(':text').css('color',"red")
//只选择提交按钮
$('button:submit').css({
'background-color':'orange',
'color':'white',
'font-size':'1.2em',
'border': 'none',
'width':'90px',
'height':'40px'
})
五，常用的过滤方法
//过滤方法,也就是函数,大多与前面介绍过的过滤器功能是一致的
1:get()将jquery对象转为DOM对象:将第二个文本的前景色设置为红色
$('li').get(1).style.color = 'red'
2.eq():获取指定序号的元素,注意,返回的是jQuery对象
$('li').eq(4).css('color','red')
3.first():返回第一个元素,不需要参数
$('li').first().css('color','red')
4.last():返回最后一个元素,不需要参数
$('li').last().css('color','red')
5.toArray(),返回DOM数组,注意不是jquery对象
var li = $('li').toArray()
for(var i=0; i<li.length; i++){
li[i].style.color = 'green'
}
6.find():返回所有的后代元素,包括子,孙...
$('ul').find('li').css('color','coral')
$('ul').find('a').css('color','cyan')
7.children()返回所有的直接子元素
$('ul').children().css('color','deeppink')
$('ul').children('p').css('color','deeppink')
8.对每个元素执行回调函数
$('li').each(function(){
$(this).css('background-color','wheat')
$(this).css('color','black')
$(this).css('font-size','1.3em')
})
9.元素遍历方法
//next()下一个同级元素
$('li').eq(2).next().css('color','blue')
//nextAll()后面全部的同级元素
$('li').eq(2).nextAll().css('color','blue')
//siblings():返回所选元素的所有同级元素,除它自己
$('li').eq(2).siblings().css('color','blue')
//向前遍历
//prev():前一个同级元素
$('li').eq(6).prev().css('color','coral')
//prevAll():您一定猜到了,对,是前面的所有同级元素
$('li').eq(6).prevAll().css('color','coral')
10. add(selector),将元素添加到所选的集合中
//先去掉所有元素上面的自定义样式,将元素打回原型,素颜模样
$('*').removeAttr('style')
//将所有li文本设置为红色,你会发现有一个p没有选上,这也正常
$('li').css('color','red')
//那么如何才能选上p元素呢,只有加大选区,把p元素放进这个选区中就可以了
//使用add()方法就可以做到
$('li').add('p').css('color','red')
11. filter()从结果中返回符合条件的元素
//仅仅返回第6个元素
// $('li').filter(':eq(5)').css('background-color','lightgreen')
12. not()与filter()功能正好相反,去掉满足条件的元素
$('li').not(':eq(5)').css('background-color','lightgreen')
13. slice(start, end),返回指定范围的元素
//包括起始位置,不包括结束位置,返回的结果数量是5-2=3
// $('li').slice(2,5).css('background-color','lightgreen')
//获取前4个元素
// $('li').slice(0,4).css('background-color','lightgreen')
//省略第二个参数,默认从当前开始直到结尾
$('li').slice(4).css('background-color','lightgreen')
//去掉所有元素上的class/清除所有已加样式
$('*').removeClass()
//仅去掉li,不包括li下面的a,链接仍为绿色
$('li').removeClass()
