jQuery是一个JS函数库，100+函数，用于简化DOM操作 (1)DOM操作简化函数
(2)事件处理函数
(3)动画函数
(4)AJAX操作
使用JQuery提供的函数
JQuery的版本：
JQuery1.x:体积较打，兼容IE，有缺失
JQuery2.x:体积少小，放弃IE，功能多
JQuery3.x:放弃IE，功能更加丰富
注意：推荐将jQuery.js的引入和自定义的JS代码编写在BODY最后。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>在HTML中使用jQuery</h1>
<button>为P添加样式</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat minus beatae corporis possimus quam numquam qui pariatur ex omnis corrupti nesciunt quo natus tenetur accusantium doloribus obcaecati dignissimos adipisci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestiae a et ab aperiam. Tempore a amet perferendis ea culpa ex blanditiis error sit. Eligendi aliquam error possimus tempora ullam.</p>
<script src="js/jquery-1.11.3.js"></script>
<script>
//DOM实现：给所有的p元素添加边框和文字颜色
var list = document.querySelectorAll('p');
for(var i=0; i<list.length; i++){
var p = list[i];
p.style.border = "1px solid #080";
p.style.color = "#080";
p.style.backgroundColor = "#dfd";
}
//jQuery实现：给所有的p元素添加边框和文字颜色
//$('p').css('border', '1px solid #800');
//$('p').css('color', '#800');
//$('p').css('background-color', '#fdd');
</script>
</body>
</html>
jQuery函数的特性：
(1)几乎所有的函数都自带循环功能，可以对选中的元素进行遍历
(2) 几乎所有的函数都返回jQuery对象
练习：点击按钮后，修改所有P的样式 11:02~11:15
$( "button" ).on( "click", function( ) {
//按钮的单击事件处理过程....
});
|
ES6新特性：新的字符串声明方式—— ``字符串 (1)可以包含${}形式的变量占位符，如： var str= `用户名：${uname} 年龄：${age+2}` (2)支持字符串的换行 var str = `<tr> <td></td> </tr>`; |
区分：DOM对象和jQuery对象
(1)DOM对象：浏览器把每个HTML标签都对应创建一个DOM对象
(2)jQuery对象：通过jQuery选择器函数($())返回的类数组对象，其中封装着DOM对象
(3) jQuery对象不能使用DOM对象的成员；反之也不行！
(4)jQuery对象转换为DOM对象：
$('div')[0].style.color = '#f00';
(5)DOM对象转换为jQuery对象：
$(domObj).css('color', '#f00'); //注意$()里边不能使用引号
使用jQuery查找元素 —— 重点
jQuery中查找元素，使用函数：
jQuery('选择器') 或其别名 $('选择器')
其中的参数选择器支持CSS中所有的选择器，并进行了扩展。
(1)Basic（基本选择器）
#id .class div * s1,s2,s3
<h1>基本选择器</h1>
<div class="dropdown">
<a href="#3">产品大全</a>
<ul class="menu">
<li>冰箱</li>
<li>洗衣机</li>
<li>奶粉</li>
<li>尿不湿</li>
</ul>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//var r1 = $('div');
//console.log(r1);
//var r2 = r1.css('margin','0');
//console.log(r2);
//console.log(r1===r2); //true
//$('*').css('padding','0');
$('*').css('margin','0').css('padding','0');
$('a').css('color','#000').css('text-decoration', 'none');
$('.menu').css('border','1px solid #aaa').css('position','absolute').css('width','120px').hide();
var isShown = false; //下拉菜单当前是否显示
//点击超链接，则隐藏/显示下方的菜单
$('.dropdown > a').click(function(e){
e.preventDefault(); //阻止超链接被点击的默认行为
if(isShown){
$('.menu').hide();
isShown = false;
}else {
$('.menu').show();
isShown = true;
}
});
(2)Hierarchy（层级选择器）
parent > child parent child
prev + nextSibling prev ~ nextAllSibling
<h1>层级选择器</h1>
<div>
<p>P1</p>
<p>P2</p>
<div class="box">BOX</div>
<p>P3</p>
<p>P4</p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$('.box + p').css('text-decoration','underline');
$('.box ~ p').css('color','#0a0');
</script>
--------------------------------
<h1>层级选择器</h1>
<ul class="tabs">
<li><a href="#">十元套餐</a></li>
<li><a href="#">二十元套餐</a></li>
<li><a href="#">三十元套餐</a></li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
$('*').css('margin','0').css('padding','0');
$('ul.tabs').css('list-style','none');
$('ul.tabs > li').css('float','left').css('margin','16px 0');
$('ul.tabs > li > a').css('text-decoration','none').css('color','#000').css('padding', '8px 16px').css('border-bottom','1px solid #aaa');
//为标签页头中的a绑定监听函数
var jQObject = $('ul.tabs > li > a');
jQObject.click(function(e){
e.preventDefault();
//重置所有a的边框为下边框
jQObject.css('border','none').css('border-bottom', '1px solid #aaa');
//当前被点击的a，修改为上左右边框
$(this).css('border','1px solid #aaa').css('border-bottom', 'none');
});
</script>
(3)Attribute（属性选择器）
[属性名] [属性名="值"]
[属性名^="值") [属性名$="值"]
[属性名*="值"] [属性名!="值"]
<h1>属性选择器</h1>
<a href="#" title="空链接">链接1</a>
<a href="http://tmooc.cn" title="绝对地址">链接2</a>
<a href="#chapter1" >链接3</a>
<a href="1.jpg">链接4</a>
<a href="2.png">链接5</a>
<a href="3.gif">链接6</a>
<script src="js/jquery-1.11.3.js"></script>
<script>
$('a').css('color','#000');
//(1)选定所有具备title属性的链接元素，添加边框
$('a[title]').css('border','1px solid #aaa');
//(2)选定所有指向空锚点(#)的链接元素，颜色淡灰
$('a[href="#"]').css('color','#666');
//(3)选定所有指向绝对URL(http开头)的链接元素，背景颜色淡蓝
$('a[href^="http"]').css('background','#aaf');
//(4)选定所有指向的图片URL(以.jpg/png/gif结尾)的链接元素，字体加粗
$('a[href$=".jpg"],a[href$=".png"],a[href$=".gif"]').css('font-weight','bold');
</script>
(4)Form（表单元素选择器）
:text :password :radio :checkbox
:submit :reset :button :image
:hidden :file
$(':text') 选定 <input type="text">的元素
:disabled :enabled :checked :selected
选定具有特定属性的表单元素
<h1>表单元素选择器</h1>
<form action="9.php">
<input type="text" placeholder="请输入用户名"><br>
<input type="password" placeholder="请输入密码"><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
<input type="image" src="btn.jpg">
<img src="btn.jpg">
</form>
<script src="js/jquery-1.11.3.js"></script>
<script>
$(':text, :password').css('border-radius','3px');
$(':image, img').css('vertical-align','middle');
</script>
(5)Basic Filter（基本过滤选择器）
:first :last :even :odd
:eq(i) :lt(i) LessThan :gt(i) GreaterThan
:not(selector)
注意：基本过滤选择器把选定的所有元素放在一个大的集合中！下标从0开始分配。
<h1>基本过滤选择器</h1>
<ol>
<li>OL-LI-0</li>
<li>OL-LI-1</li>
<li>OL-LI-2</li>
<li>OL-LI-3</li>
<li>OL-LI-4</li>
</ol>
<hr>
<ul>
<li>UL-LI-0</li>
<li>UL-LI-1</li>
<li>UL-LI-2</li>
<li>UL-LI-3</li>
<li>UL-LI-4</li>
<li>UL-LI-5</li>
</ul>
<table border="1" width="100%">
<tbody>
<tr>
<td>00</td>
<td>01</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.11.3.js"></script>
<script>
//(1)选定第一个li，字体加粗
$('li:first').css('font-weight','bold');
//(2)选定最后一个li，字体变斜
$('li:last').css('font-style','italic');
//(3)选定下标为1的li，背景红色
$('li:eq(1)').css('color', '#f00');
//(3)选定奇数个li，背景淡蓝色
$('li:odd').css('background', '#ddf');
//(4)选定偶数个li，背景淡黄色
$('li:even').css('background', '#ffd');
//(5)选定第3个li，添加删除线
$('li:eq(3)').css('text-decoration', 'line-through');
//(4)选定大于3个li，添加border-left
$('li:gt(3)').css('border-left', '1px solid #000');
$('tr td:first').css('background', '#dfd');
</script>
(6)Child Filter（子元素过滤选择器）
:first-child :last-child
:nth-child(2 / odd / even / 3n+1) :only-child
注意：子元素过滤选择器把选定的元素按照所在父元素进行分组！下标从1开始分配。
<h1>子元素过滤选择器</h1>
<ol>
<li>OL-LI-0</li>
<li>OL-LI-1</li>
<li>OL-LI-2</li>
<li>OL-LI-3</li>
<li>OL-LI-4</li>
</ol>
<hr>
<ul>
<li>UL-LI-0</li>
<li>UL-LI-1</li>
<li>UL-LI-2</li>
<li>UL-LI-3</li>
<li>UL-LI-4</li>
<li>UL-LI-5</li>
</ul>
<table border="1" width="100%">
<tbody>
<tr>
<td>00</td>
<td>01</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>30</td>
<td>31</td>
</tr>
</tbody>
</table>
<script src="js/jquery-1.11.3.js"></script>
<script>
//(1)选定第一个li，字体加粗
$('li:first-child').css('font-weight','bold');
//(2)选定最后一个li，字体变斜
$('li:last-child').css('font-style','italic');
//(3)选定奇数个li，背景淡蓝色
$('li:nth-child(2n+1)').css('background','#eef');
//(4)选定偶数个li，背景淡黄色
//(5)选定第3个li，添加删除线
$('li:nth-child(3)').css('text-decoration','line-through');
//(4)选定大于3个li，添加border-left
$('tr td:first-child').css('background', '#dfd');
</script>