# jQuery浅析
## 一 jQuery概述
jQuery就是一个js库，里面封装了很多js的方法，相当于是一个外部的js文件。
### 1.快速入门
1） 导库
2）在scrpit中直接使用jquery即可。
```html
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(
function(){
$("#span1").html("hello jquery!");
}
);
</script>
```
### 2.jquery的页面加载函数（当页面加载完后执行的函数）
window.onload只能出现一个，并且后面的会覆盖前面的，但jquery的多个页面加载函数不会覆盖
jquery页面加载函数
```javascript
//方式一
jQuery(document).ready(function(){//....});
//方式二：
$().ready(function(){//....});
//方式三：常用
$(function(){
//内容
});
```
### 3.jquery对象和dom对象之间的转换
- dom对象转换成jquery对象，就可以使用jquery对象中的属性和方法
```javascript
$(function(){
var sp1 = document.getElementById("sp1");
// sp1.innerHTML = "hello!";
$(sp1).html("hello jquery!");
});
```
- jquery对象转换成dom对象,就可以使用dom对象中的属性和方法
```javascript
$(function(){
$("#sp1").get(0).innerHTML = "hello!";
});
```
## 二、jquery的选择器
通过查看jquery文档可知，jquery的选择器有多种，常用的选择器如下：
## 1.基本选择器
- id选择器：
```javascript
$("#btn1");
```
- 元素选择器
```javascript
$("div");
```
- 类选择器
```javascript
$(".mini");
```
- 所有元素
```javascript
$("*")
```
- 合并多个选择器
```javas
$("div,.mini");
```
## 2.层级选择器
- $("爷爷 后代")： 后代包括儿子和孙子
- $("爷爷 > 儿子")：只有儿子，没有孙子
- $("哥哥 + 弟弟")：弟弟必须是紧挨着哥哥的，其他的远房弟弟不算
- $("哥哥 ~ 弟弟")：弟弟可以不是紧挨着的，只有是同辈的。
## 3.基本过滤选择器
- first(): 选择第一个
- last():选择最后一个
- even: 选择索引是偶数的元素
- odd：选择索引是奇数的元素
## 4.属性选择器
- [属性]
- [属性=‘值‘]
## 三、案例之省市二级联动
要想完成二级联动，就必须搞清jquery中each函数的用法。
each函数的语法格式：
$.each(数据集,回调函数(i,n))，其中i指的是每次循环的循环变量，n指的是每次循环对应的数据集中的元素。
省市二级联动的代码如下：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
var cities = new Array();
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
$("#province").change(function(){
$("#city").empty();
//1.获得当前select选中的value
var val = this.value;
//2.遍历数组，找到该省对应的所有的市的数组
$.each(cities,function(i,n){
if(val==i){
//找到相应的省
$.each(cities[i],function(j,m){
var tn = document.createTextNode(cities[i][j]);
var op = document.createElement("option");
$(tn).appendTo($(op));
$(op).appendTo($("#city"));
});
}
})
});
});
</script>
</head>
<body>
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city">
</select>
</body>
</html>
```
原文地址：https://www.cnblogs.com/qfdsj/p/9003381.html