实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1,基本选择器</title>
<style type="text/css">
table,td{
border:1px solid #333;
}
table{
border-collapse:collapse;
margin:30px auto;
width:80%;
text-align:center;
}
table caption{
font-size:1.5em;
margin-bottom:15px;
}
.bg-orange{
font-weight:bolder;
color:white;
background-color:orange;
}
</style>
</head>
<body>
<table>
<caption>用户信息表</caption>
<tr id="title">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr class="mark">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr class="mark">
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>10</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//1.标签 CLASS类选择器,ID选择器
//2.这四个叫基本选择器,基础选择器,简单选择器,入口选择器.
//1.标签选择器:tag
// $('td').css('background-color','red')
//2.ID选择器
$('#title').css('background-color','red')
//3.class 类选择器
$('.mark').addClass('bg-orange')
//4.通配选择器
$('tr:nth-child(3)~*').css('background-color','pink')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>2,层级选择器</title>
<style type="text/css">
.red{color:red;}
.green{color:green;}
.black{color:black}
</style>
</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>
<li>最新电影10<a href="">立即播放</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//1.后代:空格
// $('li a').addClass('green')
//2.子元素选择器
//$('ul>*').addClass('red')
//3.相邻兄弟选择器+
//$('li:nth-child(5)+li+li+li').addClass('green')
//4.全部兄弟选择器
$('li:nth-child(5)~*').addClass('red')
//5.直接选择第一个或最后一个
//:叫过滤器
$('li:first-child').css('color','yellow')
$('li:last-child').css('color','yellow')
$('li:first').css('color','brown')
$('li:last').css('color','pink')
//6.直接命中元素
// $('li:nth-child(8)').css('color','pink')
$('li:eq(8)').css('color','green')
//清除所有元素上STYLEL属性
$('*').removeAttr('style')
//清除所有元素上的CLASS属性
$('*').removeClass()
//将序号大于3的元素变成红色
//$('li:gt(2)').addClass('green')
//将序号小于8的元素变成绿色
//$('li:lt(8)').addClass('red')
$('li:even').addClass('red')
$('li:odd').addClass('red')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.内容过滤器</title>
<style type="text/css">
.bg-wheat{background-color:wheat;}
.bg-green{background-color:green;}
.bg-pink{background-color:pink;}
</style>
</head>
<body>
<h2>春晓</h2> <span></span>>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少? </p>
<p>我的女神<img src="../image/001.jpg" width="150"></p>
<p>我想对园园说:<input type="text" name=""><button>提交</button></p>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//1.选择有指定内容的元素
//$('p:contains("春")').addClass('bg-wheat')
//$('p:contains(\'春\')').addClass('bg-wheat')
//$('p:contains("风")').addClass('bg-green')
//2.选择内容为空的元素
$(':empty').text('作者:孟浩然')
//3.选择有指定标签的元素
$('p:has("img")').addClass('bg-wheat')
//4.选择所有以P为父元素的节点,添加一个绿背景
//为什么视频图中图背景颜色不变???
$('p:parent').addClass('bg-green')
//取反过滤器
$(':not(:empty)').css('color','pink')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.表单过滤器</title>
</head>
<body>
<form action="" method="post"></form>
<fieldset>
<legend>用户注册</legend>
<p>用户名:<input type="text" name="name" required=""></p>
<p>邮箱:<input type="email" name="email" required=""></p>
<p>密码: <input type="password" name="psw1" required=""></p>
<p> 确认密码:<input type="password" name="psw2" required=""></p>
<p>性别:<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</p>
<p>上传头像:<input type="file" name=""></p>
<p>
WEB语言:
<input type="checkbox" name="lang[]" value="java">java
<input type="checkbox" name="lang[]" value="php">php
<input type="checkbox" name="lang[]" value="javascript">javascript
<input type="checkbox" name="lang[]" value="python">python</p>
<p>级别:
<select name="level">
<option value="0"> 小白</option>
<option value="1">入门</option>
<option value="2">中级</option>
<option value="3">高级</option>
<option selected="" value="4">去火星吧</option>
</select></p>
<p><textarea cols="40" row="5"></textarea>></p>
<p><button type="submit" name="submit">提交</button>
<button type="reset" name="reset">重置</button></p>
</fieldset>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//1 根据类型来选择表单控件元素
//CSS 的选择方法 仅选择INPUT标签
//$('input').css('background-color','pink')
//JQUERY的写法 <INPUT><TEXTAREA><BUTTON><SELECT>
// $(':input').css('background-color','pink')
//$('input:input').css('background-color','green')
//CSS:INPUT===JQUERY:INPUT:INPUT
// $(':input[type="password"]').css('background-color','green')
//jquery进行改写
$(':input:password').css('background-color','brown')
//2.根据表单控件的特征来选择元素:file,imge,
$(':file').css('background-color','green')
//3 直接用控制类型来选择元素
$(':text').css('background-color','lightgreen')
// 只处理提交按纽
$(':button:submit').css({'background-color':'red','color':'white',
'font-size':'1.5em','border':'none','width':'90px','height':'40px'})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>5.常用的过滤方法</title>
<style type="text/css">
</style>
</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 type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.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 last()无参数
$('li').last().css('color','red')
//5 toArray()返回的是DOM数组
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','red')
//7.children() 返回所有的直接子元素
$('ul').children('p').css('color','red')
//8.each(function()
$('*').removeAttr('style')
$('li').each(function(){$(this).css('background-color','red')})
//元素的遍利方法
$('*').removeAttr('style')
$('li').eq(2).next().css('color','blue')
$('li').eq(2).nextAll().css('color','blue')
$('li').eq(2).siblings().css('color','blue')
//prev().prevAll()
//10 add()
$('*').removeAttr('style')
$('li').add('p').css('color','red')
//li.slice():从集合中获取一组连续的函数 不选择最后一个
$('*').removeAttr('style')
$('li').slice(2,5).css('color','red')
$('li').slice(2).css('color','red')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
