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();