（一）jQuery
需要掌握：1. 查询jQuery API 2. 使用Chrome自带的报错以及JS断点调试功能
（1）基础用法
（1）定义
- 在已经掌握了Javascript动态网页技术之后为什么要使用jQuery？
- 因为在jQuery中封装了很多预定义的对象和实用函数，使用起来很方便，并且jQuery兼容各大浏览器
- jQuery定义
- jQuery是Javascript的一个轻量级类库，兼容CSS3
- 版本
- 开发版本和上线版本
- 导入jQuery库
<script src="../js/jquery-1.11.0.min.js"></script>//使用单独的一行script标签
- 获取一个jQuery对象
- 使用$（”选择器”），有两种方式：
var $user = $("#username");var $user = jQuery("#username");
（2）jQuery和DOM对象转换
- DOM对象转jQuery对象
<script>
var obj = document.getElementById("username");
var $user = $(obj);
alert($user.val());
</script>
- jQuery对象转DOM对象
//1.获取jQuery对象
var $u = $("#username");
//2.转换为DOM对象
var obj = $u.get(0);
（3）页面加载
如何在页面启动时就立即执行script区域内的代码？有JavaScript原生方式和jQuery方式
- JS加载页面
onload=function(){
//code
}
- jQuery加载页面
- JS只能onload一次，jQuery能够多次加载页面
//方式一
$(function(){
//code
})
//方式二
window.onload = function(){
alert("something");
}
//方式三
$(document).ready(function(){
alert("something~");
})
（4）派发事件
- $(“选择器”).click(function(){code})
- 点击Button触发alert
$(function(){
$("#bId").click(function(){
alert("you click the button");
});
});
（5）图片隐藏和展示
- 这种方法在网页弹窗中比较有用
- 网页中图片隐藏和展示的三种实例方法：
- .toggle()
- .slidetoggle() 滑入/滑出
- .fadeOut() 淡入/淡出
$(function(){
$("#b1").click(function(){
//$("#b1Div").hide(1000);
$("#b1Div").toggle();
});
});
（2）Demo练习
（1）弹出广告
- 模拟网站中弹出广告，一段时间后消失的行为
- 实现分析
- 计时器setTimeout(x ms);
- slideDown()和slideUp()方法
<script>
$(function(){
//开始一个定时器 2s之后展示
setTimeout(showAd,2000);
});
function showAd(){
//获取div
$("#ad").slideDown(); //slide能产生广告滑入和滑出的效果
//开启另一个定时器：作用是隐藏元素
setTimeout(hideAd,3000);
}
function hideAd(){
$("#ad").slideUp();
}
</script>
（2）jQuery下的id选择器
- 作用:鼠标单击btn1导致id=”one”的背景色发生改变
$(function(){
$("#btn1").click(function(){
$("#one").css("background-color","aqua");
});
});
（3）jQuery下的层次选择器
- 层次选择器是按照一定的层次进行选择（
废话），比如先定位在body标签内，然后再定位所有的div标签 - jQuery下的层次选择器的用法就很有意思，多出了几个需要注意的符号
- a b ：a的所有b后代
- a>b ：a的所有b孩子
- a+b ：a的下一个a类型节点
- a~b ：a以后的所有a类型节点（不包括a）
- 实践：对于body标签下的所有div标签，鼠标单击按钮之后改变其颜色
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","#BCD68D");
});
})
</script>
（4）jQuery下的过滤选择器
- 过滤选择器是什么
- Javascript根据某一规则对进行元素的匹配
- 比如获取body标签内的第一个div元素
- 实践：选择第一个div元素
<script>
$(function(){
$("#btn1").click(function(){
$("div:first").css("background-color","brown");
});
});
</script>
- 其他典型过滤选择器：
- div:first
- div:last
- div:odd 所有奇数div
- div:even 所有偶数div
- div:eq(n) 第n个div元素
- div:gt(n) 所有索引大于n的div元素
- div:lt(n) 所有索引小于n的div元素
（5）jQuery下的属性选择器
- 实践：选中所有含有title属性的div标签，然后改变其背景色
<script>
$(function(){
$("#btn1").click(function(){
$("div[title]").css("background-color","#BCD68D");
});
});
</script>
- 实践：选中所有含有title属性并且值为test的标签，然后改变其背景色
<script>
$(function(){
$("#btn2").click(function(){
$("div[title='test']").css("background-color","aquamarine");
});
});
</script>
（6）jQuery实现表单隔行换色
- 对比发现：jQuery很多时候能够使用更少的代码实现更多的功能
$(function(){
$("tr:odd").css("background-color","aqua");
$("tr:even").css("background-color","burlywood");
});
（7）复选框全选
- prop和attr功能一样，表示设置对应的属性（attr无法获取checked属性）
- itemSelect是class属性，使用class选择器
- this传递的是参数的dom对象
$(".itemSelect").prop("checked",$(this).prop("checked"));
（8）省市联动
- 在复选框中选中省之后后面的选项中是对应的市区集合选择（比如注册或者购买火车票的时候）
- 遍历数组使用each关键词
- append()方法向元素追加内容
<script type="text/javascript">
$(function(){
$("[name='pro']").change(function(){
//获取市下拉选
var $city=$("[name='city']");
//初始化
$city.html($("<option>").html("-请选择-"));
var pro=$(this).val();
//获取所有的市数组
var cities=$(arr[pro]);
//遍历数组,拼装成option 追加到市下拉选中
cities.each(function(){
$city.append("<option>"+this+"</option>");
});
});
});
</script>
（3）jQuery下的属性和CSS
- 可以通过jQuery改变元素的属性或者给元素添加CSS样式
（1）属性
- $变量.attr(“属性名”, “值”) // 设置对应值
//1. 给username赋予title属性
var $username = $("[name='username']");
$username.attr("title","mio");
//2.给username添加value和class属性
$username.attr({
"value":"mio",
"class":"textClass"
});
//3.删除username的class属性
$username.removeAttr("class");
（2）CSS
- $变量.css(“属性名”,”设置的值”)；
//给div添加边框样式
var $div1 = $("div");
$div1.css("border","1px solid red");
//给div添加多个样式
$div1.css({
"width":"100%",
"background-color":"#ff0"
});
- html操作
java $("p").html("Hello <b>world</b>!");设置所有p标签内的内容- .html()无参数时表示返回值，有参数时表示设置对应的值
- text操作
- 和html操作不同的是text以纯文本的形式来解释参数，而html中以解释html代码的形式改变样式
（4）jQuery事件
- ready()方法：表示文档加载后激活的函数：
$(document).ready(function(){
//code
});