Jquery是JS开发框架的其中一种， jq把原生的js代码封装成为了一个函数库，按其语法进行调用就可以使用。
既然是函数库就需要导入相应的文件，要导入juery.min.js.
一、 jq的加载事件
三种：

1、$(document).ready(function(){
});
2、$(function(){
});
3、jQuery(documen).ready(function($){
});
Ex: $(function(){
console.log();
});

二、 选择器
1、 id选择器

html:
<div id=”d1”></div>
jq:
var div= $(“#d1”);

2、 类选择器

Html:
<div class=”d1”></div>
Jq:
var div= $(“#d1”);

3、 元素选择器

Html:
<div></div>
<div></div>
<div></div>
<div></div>
Jq:
$(“div”)表示选择页面中所有出现的div元素，
$(“div:eq(0)”)表示选择页面中所有出现的div元素中的第一个

4、 组选择器

Html
<div class=”d1”></div>
<h1></h1>
<span></span>
<p id=”p1”></p>
Jq:
var elements=$(“.d1 ,h1,span,#p1”);
console.log(elements[3])

5、 后代选择器

Html:
<form>
<input id=”i1”/>
<input  id=”i2”/>
</form>
Jp:
Var ins = $(“form  input”);

6、 子选择器

Html:
<form>
<input id=”i1”/>
<input  id=”i2”/>
</form>
Jq:
Var ins = $(“form > input”);

7、选择第一个元素

Html:
<ul><li></li>
<li></li>
<li></li>
<li></li></ul>
Jq:
var item =$(“ul li:first”);

8、选择最后一个元素

Html:
<ul><li></li>
<li></li>
<li></li>
<li></li></ul>
Jq:
var item =$(“ul li:last”);

9、not选择器

Html:
 <input type=”checkbox” checked name=”ints”>打球
<input type=”checkbox” name=”ints”>看书
<input type=”checkbox” checked name=”ints”>睡觉
<input type=”checkbox” checked name=”ints”>写代码
Jq:
Var boxs=$(“input:not(:checked)”);

10、偶数选择器

Html:
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
Jq:
Var trs=$(“table  tr:event”);

11、奇数选择器

Html:
<table>
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
Jq:
Var trs=$(“table  tr:odd”);

12、eq、gt、lt选择器

Html:
<div></div>
<div></div>
<div></div>
<div></div>
Jq:
$(“div”)表示选择页面中所有出现的div元素，
$(“div:eq(2)”)表示选择页面中所有出现的div元素中的第三个；

$(“div:gt(0)”)表示索引大于0的元素，$(“div:gt(i)”)表示索引大于i的所有元素；

$(“div:lt(0)”)表示索引小于0的元素，$(“div:lt(i)”)表示索引小于i的所有元素；

13、属性选择器

<div id=”d1”></div>
<div name=”d2”></div>
<div id=”v1”></div>
<div id=”d3”></div>
<div class=”.c”></div>

Jq:
选择出具有id的元素：
$(“div[id]”);

根据name选择元素：
$(“div[name=’d2’]”);

选择name不等于d2的元素：
$(“div[name!=’d2’]”);

选择id以d开头的元素：
$(“div[id ^=’d’]”);

选择id包含了d的元素：
$(“div[id *=’d’]”);

选择id以“1”结尾的元素：
$(“div[id $=’1’]”)

选择class为.c的元素
$(“div[class=’c’]”)

以上的（以什么开头，以什么结尾，包含，不等于…）通用于id,name,class等元素属性。
三、事件绑定

1、$(function(){
$(“a”).click(function(){

})
})

2、$(function(){
$(“a”).click(add);
})
function  add(){
}

3、$(function(){
$(“a”).on(“click”,function(){
});
})

4、$(function(){
$(“a”).bind(“click”,function(){
});
})

四、常用方法
1、取得指定元素下的 所有子元素

Html：
< div>
< input />
< span>hhh< /span>
< input/>
</ div>

Jq:
$(“div”).children();
取到的是：
[
< input />
< span>hhh</span>
< input/>
]

2、取得指定元素下的所有指定元素

Html：
< div>
< input />
< span id=”s1”>hhh</ span>
< input/>
< /div>
Jq:
$(“div”).children(“#s1”);```
取得是：
[ < span id=”s1” >hhh</ span> ]

3、从父类元素开始查找指定子元素

Html：

< div>
< input />
< span id=”s1”>hhh</span >
< input/>
< /div>

Jq:
$(“div”).find(“span[ id=’s1’]”);

4、取得父类元素

Html：
< div class=”d1”>
< input />
```< span id=”s1”>hhh</ span>```
< input/>
< /div>

Jq:
$(“span[ id=’s1’ ]”).parents();//找到它所有父类
$(“span[ id=’s1’ ]”).parents(“div[ class=’d1’ ]”);//找到它指定的父类

5、为指定的元素追加子元素

Html:
<div>
</div>
Jq:
```$(“div”).append(“< p>追加文本< /p>”);```

6、删除元素

Html:
< div class=”d1”>
< input />
< span id=”s1”>hhh</span>
< input/>
< /div>
Jq:
$(“span[id=’s1’]”).remove();