一、jQuery的概述
jQurey是一款快速的、简介的JS框架（JS代码库），封装了JS的常用功能，是继Prototype之后的一款优秀的JS框架。jQurey的设计宗旨是，写的更少，做的更多。jQuery只是提高程序员的工作效率，但是不能提高代码的运行效率。
jQuery可以更好的完成如下的操作：
- 简化优化了对dom的操作
- 简化优化了ajax的实现
- 提供了丰富的事件处理
- 提供了简单的动画效果
- 提供了非常丰富的插件机制，市场上有非常多的jQuery的插件。
jQuery的下载和使用
可以从jQuery的官网下载，这里提供1.8.3的版本下载，链接: https://pan.baidu.com/s/155hplbTjhIl6wxtGWs6NBw 密码: b851
使用jQuery之前，必须先将jQuery文件放入项目中，演示案例中都放在项目的js目录下，读者应该根据自己的文件路径修改script中的引用路径。
补充：框架和库的区别
（1）库的英文是Library（lib），框架英文 Framework
（2）库是将代码集合成一个产品，供程序员去调用
面向对象的代码组成形成的库是类库，面向过程代码组成的库叫做函数库，在函数库中可以直接使用函数叫做库函数
特点：灵活，需要就调用，不需要的地方自己实现
框架是为解决一类问题而开发的产品
框架的用户一般只需要使用框架提供的类和函数，就可以实现全部功能
特点：一条龙服务，使用框架的时候，必须使用框架的全部代码，即使用不到也必须使用，不需按照规则来，不灵活
语法特点：
- 快速获取文档的元素
- 提供漂亮的页面动态效果
- 创建AJAX异步加载网页
- 提供js语法的增强——元素遍历，数组处理等
- 增强了事件处理——消除了浏览器的兼容问题
- 更改网页的内容——文本，插入或者翻转网页的图像
二、jQuery的入门案例
onload事件：是在页面的加载完成之后执行指定的事件
添加onload事件的方法有三种：
- 第一种：直接在body标签中使用，复用性太低
<body onload="alert('页面加载完成了!');">
</body>
- 第二种：使用JavaScript
onload相当于window的一个属性，使用JavaScript相当于给属性赋值，重复使用后面的值就回把前面的值覆盖掉。
<script type="text/javascript">
Window.onload = function(){
alert("页面加载完成了")
}
</script>
- 第三种：使用jQuery的核心方法
$()：jQuery的核心方法，方法名是jQuery，$是jQuery的别名，方法可以传很多类型的参数
1、$(function{}())：页面加载完成之后执行匿名函数中的代码
2、$("#div01")：使用选择器直接获得jQuery对象
3、$(dom对象)：将dom对象转化成jQuery对象
4、讲一个html对象转化成jQuery对象
与使用JavaScript不同的是，jQuery的核心方法能够将多个语句合并执行，不会出现覆盖之前值的状况。
<script type="text/javascript">
$(function(){
alert("页面加载完成了！");
});
</script>
三、jQuery对象与dom对象的转换
jQuery和dom对象都只能调用自己的方法，都只能访问自己的属性。如果我们需要用dom对象使用jQuery的方法，就需要将dom对象转换成jQuery对象。
转换方法
dom对象-->jQuery对象：$(dom对象)
//获取div标签的dom对象
var dimDiv01 = documen.getElementById("div01");
alert(domDiv01.innerHTML);
//将dom对象转换成jQuery对象
alert($(domDiv01).html());
jQuery对象-->dom对象：jQuery对象[0]或者jQuery对象.get(0)
//获取div标签的jQuery对象
var jQueryDiv01 = $("#div01");
alert(jQueryDiv01.html());
//将jQuery对象转换成dom对象
alert(jQueryDiv01.get(0));
四、jQuery的选择器
这里介绍一些常用的选择器，还有一些选择器和选择器中的一些使用方法大家可以通过资源中的帮助文档进行学习。
1、jQuery的id选择器
格式：$("#标签的id");
返回值：jQuery对象
var div01 = $("#div01");
alert(div01.html());
2、jQuery的类选择器
格式：$(".标签的类名");
返回值：dom对象的集合，如果直接使用集合名称调用方法，使用的是集合中第一个元素调用方法
var classList = $(".div02");
alert(classList[0].innerHTML);
alert(classList.get(0).html());
3、jQuery的元素选择器
格式：$("标签名");
返回值：dom对象的集合
var divList = $("div");
alert(divList[0].innerHTML);
alert(divList.get(0).html());
4、组合选择器
格式：$("标签名1,标签名2,...");
返回值：包含标签名1和标签名2的所有标签的dom对象的集合
var elementList = $("div,a");
alert(elementList [0].innerHTML);
alert(elementList .get(0).html());
5、属性选择器
格式：$("[属性名='属性名对应的值']");
返回值：根据标签的name属性返回dom类型的集合
var nameList = $("[name='div01']");
alert(nameList[0].innerHTML);
alert(nameList.get(0).html());
6、标签属性选择器
格式：$("标签名[name='标签的name属性']");
返回值：在特定的一类标签中，根据签的name属性返回jQuery对象
var aName = $("div[name='div01']");
alert(aName.html());
jQuery选择器的使用案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//找出所有name以‘big’开头的元素
var list1 = $("[name^='big']");
alert(list1.get(0).innerHTML);
//找出所有name以‘big’开头的h1元素
var list2 = $("h1[name^='big']");
alert(list2.html());
//找出所有name以01结尾的元素
var list3 = $("[name$='01']");
alert(list3.get(0).innerHTML);
//找出所有name包含Title的元素
var list4 = $("[name*='Title']");
alert(list4.get(2).innerHTML);
});
</script>
</head>
<body>
<h1 name="bigTitle01">标题1</h1>
<h1 name="bigTitle02">标题2</h1>
<p name="bigTitle01">段落1</p>
</body>
</html>
7、获取不可见标签
格式：$(":hidden")，可以配合标签选择器使用
返回值：dom对象的集合
var hiddenList =$("div:hidden");
//查看集合长度
alert(hiddenList.size());
8、获取可见标签
格式：$("visible")，可以配合标签选择器使用
返回值：dom对象的集合
var visibleList =$("div:hidden");
//查看集合长度
alert(visibleList.size());
alert($(visibleList[0]).html());
9、获取选中的复选框和单选按钮
格式：$(":checked")，经常配合input标签选择器使用
返回值：dom对象的集合
var checkedList = $("input:checked");
//可以通过dom对象查看value值
alert(checkedList[0].value);
jQuery选择器的使用案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//获取隐藏域标签
var hiddenList = $("input:hidden");
alert(hiddenList.size());
//获取单选按钮选中标签
var checkedList = $("input[type=radio]:checked");
alert(checkedList[0].value);
//获取选中的下拉选择框
var optionChecked = $("select option:selected");
alert(optionChecked[0].value);
});
</script>
</head>
<body>
<input type="checkbox" name="hobbies" value="java" checked="checked" />
<input type="checkbox" name="hobbies" value="android" checked="checked" />
<input type="checkbox" name="hobbies" value="php" />
<input type="checkbox" name="hobbies" value="python" />
<br />
<input type="hidden" name="option" value="add" />
<input type="radio" class="radio" name="sex" value="男" checked="checked" />男
<input type="radio" class="radio" name="sex" value="女" />女
<br />
<select id="province">
<option>--选择省--</option>
<option value="henan" selected="selected">河南省</option>
<option value="niaoling">辽宁省</option>
<option value="shangdong">山东省</option>
</select>
<br />
</body>
</html>
网友评论