jQuery=JavaScript+Query 是JavaScript的开发库，对其的一个功能封装
一、引入方式
描述：jQuery相当于是一个补丁，外部引入js的方式使用
1. 在线引入
说明：在js中”https://code.jquery.com/jquery-3.1.1.js”
2. 离线引入
说明：下载后导入本地”jquery-3.1.1.min.js”
二、语法
$(选择器).action()
说明：选择器中除了this、document不加引号，其他的都要加引号。
三、选择器
基本选择器
说明：和CSS的选择器基本相同（1）元素选择器：标签名
（2）id选择器：#id名
（3）class选择器：.class名
（4）群组选择器：A选择器,B选择器
（5）*选择器：全选（通常用它来去除所有的外边距）层次选择器
（1）后代选择器：M N
说明：选中M后代中所有的N（2）子代选择器：M>N
说明：选中M子一代中所有的N（3）兄弟选择器：M~N
说明：选中M之后所有的同级N（4）相邻选择器：M+N
说明：选中M之后相邻的一个N
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<script src="https://code.jquery.com/jquery-3.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#first p").css("background-color", "green");
$("#second>p").css("background-color", "gray");
$("#third_h~p").css("background-color", "yellow");
$("#fourth_h+p").css("background-color", "red");
});
</script>
</head>
<body>
<div id="first">
<h5>后代选择器</h5>
<p>子一代p</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
</div>
<hr/>
<div id="second">
<h5>子一代选择器</h5>
<p>子一代p</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
</div>
<hr/>
<div id="third">
<h5 id="third_h">兄弟选择器</h5>
<p>子一代p1</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
<p>子一代p2</p>
</div>
<hr/>
<div id="fourth">
<h5 id="fourth_h">相邻选择器</h5>
<p>子一代p1</p>
<p>子一代p2</p>
<a>子一代a</a>
<div>
<p>子二代p</p>
</div>
<p>子一代p3</p>
</div>
</body>
</html>3.属性选择器
（1）属性：$(“a[name]”)
说明：选中含有name属性的所有a元素
（2）属性值：$(“a[name=’night_light’]”)
说明：选中name为指定的值的所有a元素（“！=”表示不等于）
四、文档就绪
window.onload = function(){}
等价于
$(“document”).ready(function(){})
等价于
$(function(){})
五、获取内容
- html内容：$(选择器).html
- 纯文本内容：$(选择器).text
- 表单内容：$(选择器).val
六、动作
修改内容：$(选择器).html(“content”)
说明：将选中的元素的内容改为content修改样式：
说明：当CSS也设定了样式的时候，CSS优先（1）$(选择器).css(“color”,”red”);
说明：当只有一个的时候，中间用逗号隔开（2）$(选择器).css({“color”:”red”,”font-size”:”50px”});
说明：当有多个样式时，每一个属性与属性值用冒号隔开，属性之间用逗号隔开，并且要加上大括号3.修改属性： $(选择器).attr()
七、常用事件
click（点击）、dblclick（双击）、mouseenter（鼠标移入）、mouseleave（鼠标移出）、keyup（放开按键）、submit（提交）、change（改变）、focus（获取焦点）、blur（失去焦点）
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动作</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#first p").click(function(){/*点击改变内容*/
$(this).html("<h3>新的内容</h3>");
});
$("#second_p1").click(function(){/*点击改变颜色*/
$(this).css("color","red");
});
$("#second_p2").click(function(){/*点击改变样式*/
$(this).css({"color":"gray","font-size":"50px"});
});
$("#third input").dblclick(function(){/*双击改变属性*/
$(this).attr({"type":"password","readOnly":"true"});
});
});
</script>
</head>
<body>
<div id="first">
<p>点我改变内容</p>
</div>
<hr/>
<div>
<p id="second_p1">点我改变颜色</p>
<p id="second_p2">点我改变样式</p>
</div>
<hr/>
<div id="third">
<input type="text" value="双击改变属性"></input>
</div>
</body>
</html>
