1.CSS的常用选择器
| 选择器 | 语法 | 介绍 | 示例 |
| 标签选择器 | E1 | 以文档语言类型作为选择器 | div{color:blue}所有div中的文字设置为蓝色 |
| 通配选择器 | * | 选定文档目录树（DOM）中的所有类型的单一对象 | *{font-size:12px}所有文档中的文字设置为12px |
| ID选择器 | #sID | 以文档目录树（DOM）中的唯一标识符的ID作为选择 | #username{border:1px solid black}id为username的输入框，设置为黑色单线边框 |
| 类选择器 | .className | 在HTML中可以使用此种选择器 | .button{background-color.gray}所有带有class="gray"的元素背景都设置成灰色 |
| 群组选择器 | E1,E2，E3 | 将同样的定义应用多个选择器，可以将选择器以逗号分割的方式合并为组 | .a#b,div{font-size:9pt}3个选择器能选中的元素字体都设置9pt |
| 包含选择器 | E1,E2 | 选择所有被E1包含的E2。即E1.contains(E2)==true | .intro li{list-<style type=none}带有class="intro"的元素下面的所有的li元素项目符号去掉 |
2.JQuery选择器
- 类型名：$("div")会取得文档中所有的div元素。
- ID名：$("loginForm")会取得文档中ID为loginForm的元素。
- 类：$(".hover")会取得文档中class属性包含hover的所有元素。
返回的元素集合称为包装集。
2.1基础选择器
基础选择器如表所示：
| 名称 | 说明 | 举例 |
| #id | 根据元素ID选择 | $("divId")选择ID为div Id的元素 |
| element | 根据元素的名称选择 | $("a")选择所有 |
| .class | 根据元素的CSS类选择 | $(".bgRed")选择所有CSS类为bgRed的元素 |
| * | 选择所有元素 | $("*")选择页面所有元素 |
| selector1, selector2, selectorN | 可以几个选择器用“，”分隔开，然后再拼成一个选择器字符串。会同时选中这几个选择器匹配的内容 | $("#divId,a,bgRed") |
示例：
<title>JS的基本用法</title>
<script type="text/javascript">
//窗体加载事件
window.onload=function(){
//书写js代码
var d1=document.getElementById("d1");//根据id获取元素
console.log(d1.innerText)
var p=document.getElementsByTagName("p");//根据标签获取元素
for(var i=0;i<p.length;i++){
var temp=p[i];
console.log(temp.innerText);
}
}
</script>
</head>
<body>
<h2>JS的基本用法</h2>
<div id="d1">
id为d1的div1
</div>
<p>这是一个p标签1</p>
<p>这是一个p标签2</p>
</body>2.2层级选择器
层级选择器最常用的两个分别为：后代表选择器和子代选择器。
| 名称 | 用法 | 描述 |
| 子代选择器 | $("ul>li"); | 使用>号，获取亲儿子层级的元素；注意，并不会取孙子层级的元素 |
| 后代选择器 | $("ul li"); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
基础选择器和层级选择器案例代码：
<body>
<div id="main">我是带id的div</div>
<div class="nav">我是带class的div</div>
<div>我是div标签</div>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script type="text/javascript">
$(function() {
console.log($("#main"));
console.log($(".nav"));
console.log($("div"));
console.log($("ul li"));
})
</script>
</body>2.3过滤选择器
| 语法 | 用法 | 描述 |
| ：first | $("li:first") | 获取第一个li元素 |
| ：last | $("li:last") | 获取最后一个li元素 |
| ：eq(index) | $("li:eq(2)") | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| ：odd | $("li:odd") | 获取到的li元素中，选择索引号为奇数的元素 |
| ：even | $("li:even") | 获取到的li元素中，选择索引号为偶数的元素 |
示例：
<title>过滤选择器</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//过滤选择器
var li=$("ul>li:even")
li.css("color","red")
})
</script>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
<li>西瓜</li>
</ul>
</body>2.4表单选择器
| 名称 | 说明 | 解释 |
| ：input | 匹配所有input，textarea,select和button元素 | 查找所有的input元素，包括textarea和select：$(":input") |
| ：text | 匹配所有的文本框 | 查找所有文本框：$(":text") |
| ：password | 匹配所有密码框 | 查找所有密码$(":") |
| ：radio | 匹配所有单选按钮 | 查找所有单选按钮$(":") |
| ：checkbox | 匹配所有复选框 | 查找所有复选框$(":") |
| ：submit | 匹配所有提交按钮 | 查找所有提交按钮$(":") |
| ：image | 匹配所有图像域 | 查找所有图像域$(":") |
| ：reset | 匹配所有重置按钮 | 查找所有重置按钮$(":") |
| ：button | 匹配所有按钮 | 查找所有按钮$(":") |
| ：file | 匹配所有文件域 | 查找所有文件域$(":") |
2.5表单过滤器
| 名称 | 说明 | 解释 |
| ：enabled | 匹配所有可用元素 | 查找所有可用的input元素：$("input:enabled") |
| ：disabled | 匹配所有不可用元素 | 查找所有不可用的input元素$("input:disabled") |
| ：checked | 匹配所有选中的被选中元素（复选框、单选框等、不包括select中的option） | 查找所有选中的复选框元素$("input:checked") |
| ：selected | 匹配所有选中的option元素 | 查找所有选中的选项元素$("input:option:selected") |
表单选择器和表单过滤器的代码案例：
<title>表单过滤器</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//按钮的点击事件
$("#btn").click(function() {
var jq1 = $("input:enabled")
var jq2 = $("input:checked")
for (var i = 0; i < jq2.length; i++) {
var dom = jq2[i];
alert(dom.value);
}
})
})
</script>
</head>
<body>
<p id="d1">选择器</p>
<form action="#" method="post">
可用表单:<input type="text" name="name" value="" /><br />
不可用表单:<input type="text" name="id" value="编号20056" disabled="true" /><br />
单选框:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女<br />
复选框:<input type="checkbox" name="hobby" value="唱歌" />唱歌
<input type="checkbox" name="hobby" value="rap" />rap
<input type="checkbox" name="hobby" value="篮球" />篮球<br />
下拉框:<select name="addr">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="山西">山西</option>
</select><br />
<button type="button" id="btn" />按钮</button>
</form>
</body>2.6知识铺垫
- jQuery设置样式
$('div').css('属性'，'值')- jQuery里面的排他思想
//想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清楚样式。
$(this).css("color","red");
$(this).siblings().css("color","red");- 隐士迭代
//遍历内部DOM元素(伪数组形式存储)的过程就叫做隐士迭代。
//简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();//页面中所有的div全部隐藏，不用循环操作- 链式编程
//链式编程是为了节省代码量，看起来更优雅。
$(this).css('color','red').sibling().css('color','');2.7案例：淘宝服饰精品案例
示意图
思路分析：
1.核心原理：鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示，其余的图片隐藏。
2.需要得到当前小li的索引号，就可以显示对应索引号的图片。
3.JQuery得到当前元素索引号$(this).index()。
4.中间对应的图片，可以通过eq(index)方法去选择。
5.显示元素show()隐藏元素hide()
代码实现案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;/* 清除外边距 */
padding: 0px;/* 清除内边距 */
}
/* list-style: none;去除列表文字前的样式 */
ul li {
list-style: none;
}
/* text-decoration: none;去除超链接中文字的下划线 */
a {
text-decoration: none;
}
#context {
width: 280px;
height: 250px;
/* border: 1px pink solid; */
margin: 10px auto;
overflow: hidden;
}
#left {
width: 80px;
float: left;
}
#right {
/* margin-top: 10px; */
width: 200px;
float: right;
}
/* display: inline-block：内联转为块级 */
#left ul li a {
display: inline-block;
width: 80px;
height: 28px;
font-family: "行楷";/* 设置文本字体样式 */
font-size: 12px;/* 设置字体大小 */
font-weight: bold;/* 设置粗细 */
text-align: center;/* 文本对齐方式 */
line-height: 30px;/* 字体垂直居中使高度与盒子的高度一致 */
background-color: #FFC0CB;
/* border: 1px lightpink solid; */
}
/* hover：鼠标放上去的效果 */
#left ul li a:hover {
background-color: aqua;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#left>ul>li").mouseover(function(){
//1.拿到当前鼠标放入列表项的索引
var index=$(this).index();
//2.根据索引找到右侧匹配的项进行显示，其他兄弟元素隐藏
// $("#right>ul>li:eq("+index+")").fadeIn().siblings().hide();
$("#right>ul>li:not("+index+")").hide()
$("#right>ul>li:eq("+index+")").show()
})
})
</script>
</head>
<body>
<div id="context">
<div id="left">
<ul>
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
</div>
<div id="right">
<ul >
<li><img src="img/女靴.jpg"></li>
<li><img src="img/雪地靴.jpg"></li>
<li><img src="img/冬裙.jpg"></li>
<li><img src="img/呢大衣.jpg"></li>
<li><img src="img/毛衣.jpg"></li>
<li><img src="img/棉服.jpg"></li>
<li><img src="img/女裤.jpg"></li>
<li><img src="img/羽绒服.jpg"></li>
<li><img src="img/牛仔裤.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
3.jQuery样式操作
jQuery中常用的样式操作有两种：css()和设置样式方法
3.1方法1：操作css方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。
常用以下三种形式：
//1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
//2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，之如果是数字可以不用跟单位和引导
$(this).css("color","red");
//3.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css("color":"white","font-size":"20px");注意：css()多用于样式少时操作，多了则 不太方便。
3.2方法2：设置类型样式方法
作用等同于以前class List，可以操作类样式，注意操作类里面的参数不要加点。
常用的三种设置类样式方法：
//1.添加类
$("div").addClass("current");
//2.删除类
$("div").removeClass("current");
//3.切换类
$("div").toggleClass("current");注意：
1.设置类样式方法比较适合多是操作，可以弥补css()的不足。
2.原生js中className会覆盖元素原先生里面的类名，jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
