jQuery常用的基本选择器：
标签选择器，类选择器，id选择器，通配符选择器 *
实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery常用选择器</title>
<script type="text/javascript" src="../0402/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p').css('color','red')
$('#demo').css('color','green')
$('.lei').css('color','blue')
$('li').css('list-style-type','none')
})
</script>
<style type="text/css">p {list-style-type: ;}</style>
</head>
<body>
<p>标签选择器，类选择器，id选择器，通配符选择器 *</p>
<ul>
<li id="demo">我我我我</li>
<li class="lei">你你你你</li>
<li>他他他他</li>
<li class="lei">呵呵呵呵</li>
<li>哈哈哈哈</li>
<li>嘿嘿嘿嘿</li>
<li>呼呼呼呼</li>
<li>丫丫丫丫</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
层级选择器与特定选择器:
1.后代选择器用空格
$('li a').css('green')
2.子元素选择器用大于号> /*只选择子元素，不包括孙子级以下的元素
$('ul > *').addClass('red')
3.相邻兄弟选择器用加号 +
$('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')
简写$('li:eq(5)').addClass('red')
注意：!!!jquery使用eq(i),i从0开始,注意与css中的不一样!!!
7去掉当前所有元素的样式
$('*').removeAttr('style') 去掉当前页面所有元素的style属性
$('li').removeAttr('style') 去掉当前页面所有li元素的style属性
8去掉当前所有元素的class类样式
$('*').removeClass() 去掉当前所有元素的class类样式
$('li').removeClass() 去掉当前所有li元素的class类样式
9.选中序号大于4的所有元素,注意从0开始计算
$('li:gt(3)').addClass('red')
选中序号小于8的所有元素
$('li:lt(7)').addClass('red')
10.根据序号特征来选择元素
10-1选中所有序号为偶数的元素even
$('li:even').addClass('red') 看上去选择的是奇数，但实际是偶数结构，因为jquery是从0开始编号
10-2选择奇数用是odd
$('li:odd').addClass('red') 看上去选择的是偶数，但实际是奇数结构，因为jquery是从0开始编号
小结：你选择的是偶数，但实际上看到的是奇数，你选择的是奇数，但实际是偶数， 奇偶相反
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.层级选择器</title>
<style type="text/css">
.red {color:red;}
.green {color:green;}
</style>
</head>
<body>
<!-- ul>li{最新电影$$}*10>a{立即播放} -->
<ul>
<li>最新电影01<a href="">立即播放</a></li>
<li>最新电影02<a href="">立即播放</a></li>
<li>最新电影03<a href="">立即播放</a></li>
<li>最新电影04<a href="">立即播放</a></li>
<li>最新电影05<a href="">立即播放</a></li>
<li>最新电影06<a href="">立即播放</a></li>
<li>最新电影07<a href="">立即播放</a></li>
<li>最新电影08<a href="">立即播放</a></li>
<li>最新电影09<a href="">立即播放</a></li>
<li>最新电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script src="jquery-3.3.1.js"></script>
<script>
//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选中大于或小于某个序号的元素
//先去掉所有元素上的class
$('*').removeClass()
//仅去掉li,不包括li下面的a,链接仍为绿色
$('li').removeClass()
//选中序号大于4的所有元素,注意从0开始计算
// $('li:gt(3)').addClass('red')
//选中序号小于8的所有元素
// $('li:lt(7)').addClass('red')
//根据序号特征来选择元素
//选中所有序号为偶数的元素even
//因为是从0开始,0,2,,4,所以看上去像是选择了奇数,要注意
// $('li:even').addClass('red')
//你可能猜到了,选择奇数用是odd,当然,你是对的
$('li:odd').addClass('red')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
表单过滤器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.表单过滤器</title>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>用户注册</legend>
<p>用户名:<input type="text" name="name" required></p>
<p>邮箱:<input type="email" name="email" required></p>
<p>密码:<input type="password" name="password1" required></p>
<p>确认密码:<input type="password" name="password2" required></p>
<p>性别:
<input type="radio" name="gender" value='male' checked>男
<input type="radio" name="gender" value='female'>女
</p>
<p>上传头像: <input type="file" name=""></p>
<p>Web语言:
<input type="checkbox" name="lang[]" value="javascript">JavaScript
<input type="checkbox" name="lang[]" value="php" checked>PHP
<input type="checkbox" name="lang[]" value="java">Java
<input type="checkbox" name="lang[]" value="python">Python
</p>
<p>级别:
<select>
<option value="0">小白</option>
<option value="1" selected>入门</option>
<option value="2">中级</option>
<option value="3">高级</option>
<option value="4">去火星吧</option>
</select>
</p>
<p>简介:<textarea cols="40" rows="5"></textarea></p>
<p><input type="hidden" name="userId" value="1010" disabled=""></p>
<p>
<!-- <input type="submit" name="submit" value="提交"> -->
<!-- <input type="reset" name="reset" value="重填"> -->
<button type="submit" name="submit">提交</button>
<button type="reset" name="reset">重填</button>
</p>
</fieldset>
</form>
</body>
</html>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//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'
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
常见常用的过滤方法
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.常用的过滤方法</title>
</head>
<body>
<ul>
<li>最新电影01<a href="">立即播放</a></li>
<li>最新电影02<a href="">立即播放</a></li>
<li>最新电影03<a href="">立即播放</a></li>
<li>最新电影04<a href="">立即播放</a></li>
<li>最新电影05<a href="">立即播放</a></li>
<li>最新电影06<a href="">立即播放</a></li>
<li>最新电影07<a href="">立即播放</a></li>
<li>最新电影08<a href="">立即播放</a></li>
<li>最新电影09<a href="">立即播放</a></li>
<p>我是一个另类呀</p>
<li>最新电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//过滤方法,也就是函数,大多与前面介绍过的过滤器功能是一致的
//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.first():返回最后一个元素,不需要参数
$('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').removeAttr('style')
$('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),返回指定范围的元素
$('*').removeAttr('style')
//包括起始位置,不包括结束位置,返回的结果数量是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')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
