##jQuery基础

1.概念：一个JavaScript框架。简化JS开发

*jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。 jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

*JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

2.快速入门

1.步骤：

2.导入jQuery的js文件：导入min.js文件

3.使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery快速入门</title><script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1.....</div>
<div id="div2">div3.....</div><script>alert($("#div1").html());alert($("#div2").html());
</script>
</body>
</html>

3.jQuery对象和JS对象区别与转换

1.JQuery对象在操作时，更加方便

2.JQuery对象和js对象方法不通用的

3.两者互相转换

*jq --> js：jq对[索引] 或者 jq对象.get(索引)

*js --> jq ：$(js对象)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div><script>//1.通过js来获取名称叫div的所有html对象var divs = document.getElementsByTagName("div");alert(divs);//可以将其当做数组for (let i = 0; i < divs.length; i++) {// divs[i].innerHTML = "aaaa";$(divs[i]).html("qqqq");}//2.通过jq方式来获取名称叫div的所有html对象var $div = $("div");alert($div);//也可以将其当做为数组// $div.html("bbb");$div[0].innerHTML = "cccccc";
</script>
</body>
</html>

4.选择器：筛选具有相似特征的元素（标签）

1.基本语法学习：

1.事件绑定：$（“id”）

2.入口函数：$(function( ) { } );

3.样式控制：$(function( ){ $("id").css( 属性 , 属性值 ) })

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定</title><script src="js/jquery-3.3.1.min.js"></script><script>/** window.onload 和 $(function)的区别*   *window.onload 只能定义一次，如果定义多次，后边的会将前边的覆盖掉*   *$(function)可以定义多次* */$(function () {$("#div1").css("backgroundColor","red")});</script>
</head>
<body>
<div id="div1">div1......</div>
<div id="div2">div2......</div>
<input type="button" id="bb" value="点我"><script>$("#bb").click(function () {alert("aaa")});
</script>
</body>
</html>

2.分类

1.基本选择器

1.标签选择器（元素选择器）

*语法：$("html标签名") 获得所有匹配标签名名称的元素

2.id选择器

*语法：$("#id的属性值") 获得与指定id属性值匹配的元素

3.类选择器

*语法：$(".class的属性值") 获得与指定的class属性值匹配的元素

4.并集选择器

*语法：$("选择器1，选择器2.....") 获取多个选择器选中的所有元素

	<script type="text/javascript">// <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>$(function () {$("#b1").click(function () {$("#one").css("backgroundColor","red");});});// <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>$(function () {$("#b2").click(function () {$("div").css("backgroundColor","pink");});});// <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>$(function () {$("#b3").click(function () {$(".mini").css("backgroundColor","blue");});});// <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>$(function () {$("#b4").click(function () {// $("span").css("backgroundColor","yellow");// $("#two").css("backgroundColor","yellow");$("#two,span").css("backgroundColor","yellow");});});</script>

2.层级选择器

1.后代选择器

*语法：$("A B") 选择A元素内部的所有B元素

2.子选择器

*语法：$("A > B") 选择A元素内部的所有B子元素

3.属性选择器

1.属性名称选择器

*语法：$( " A [ 属性名 ] " ) 包含指定属性的选择器

2.属性选择器

*语法：$(" A [ 属性名 =‘ 值 ’] ") 包含指定属性等于指定值得选择器

*不等于为：!= ，以te开始为： ^=' te ' ，以est结束：$='est' ，包含te：*=‘te’

3.复合属性选择器

*语法：$ ( '' A [ 属性名 = ‘ 值 ’ ] [ ] ....'') 包含多个属性条件的选择器

 <script type="text/javascript">// <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>$(function () {$("#b1").click(function () {$("div[title]").css("backgroundColor","pink");});});// <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>$(function () {$("#b2").click(function () {$("div[title='test']").css("backgroundColor","yellow");});});// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>$(function () {$("#b3").click(function () {$("div[title != 'test']").css("backgroundColor","blue");});});// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>$(function () {$("#b4").click(function () {$("div[title ^= 'te']").css("backgroundColor","blue");});});// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>$(function () {$("#b5").click(function () {$("div[title $= 'est']").css("backgroundColor","blue");});});// <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>$(function () {$("#b6").click(function () {$("div[title *= 'es']").css("backgroundColor","blue");});});// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>$(function () {$("#b7").click(function () {$("div[id][title *= 'es']").css("backgroundColor","blue");});});</script>

4.过滤选择器

1.首元素选择器

*语法：：first 获得选择的元素中的第一个元素

2.尾元素选择器

*语法：：last 获得选择的元素中的最后一个元素

3.非元素选择器

*语法：：not（selecter）不包括指定内容的元素

4.奇数选择器

*语法：：odd 奇数，从0开始计数

5.偶数选择器

*语法：：even 偶数，从0开始计数

6.等于索引选择器

*语法：：eq(index) 指定索引元素

7.大于索引选择器

*语法：：gt(index) 大于指定索引元素

8.小于索引选择器

*语法：：lt(index) 小于指定索引元素

9.标题选择器

*语法：：header 获得标题元素，固定写法

	<script type="text/javascript">// <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>$(function () {$("#b1").click(function () {$("div :first").css("backgroundColor","yellow");});});// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>$(function () {$("#b2").click(function () {$("div :last").css("backgroundColor","pink");});});// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>$(function () {$("#b3").click(function () {$("div :not(.one)").css("backgroundColor","red");});});// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>$(function () {$("#b4").click(function () {$("div :even").css("backgroundColor","red");});});// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>$(function () {$("#b5").click(function () {$("div :odd").css("backgroundColor","red");});});// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>$(function () {$("#b6").click(function () {$("div :gt(3)").css("backgroundColor","red");});});// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>$(function () {$("#b7").click(function () {$("div :eq(3)").css("backgroundColor","red");});});// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>$(function () {$("#b8").click(function () {$("div :lt(3)").css("backgroundColor","red");});});// <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>$(function () {$("#b9").click(function () {$(" :header").css("backgroundColor","green");});});</script>

5.表单过滤选择器

1.可用元素选择器

*语法：：enabled 获得可用元素

2.不可用元素选择器

*语法：：disabled 获得不可用元素

3.选中选择器

*语法：：checked 获得单选/复选框选中的元素

4.选中选择器

*语法：：selected 获得下拉框选中的元素

    <script type="text/javascript">// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>$(function () {$("#b1").click(function () {$("input[type='text']:enabled").val('aaa');});});// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>$(function () {$("#b2").click(function () {$("input[type='text']:disabled").val('aaa');});});// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>$(function () {$("#b3").click(function () {alert($("input[type='checkbox']:checked").length);});});// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>$(function () {$("#b4").click(function () {alert($("select > option:selected").length);});});</script>

5.DOM操作

1.内容操作

1.html（）：获取/设置元素的标签体内容 <a>内容</a> --> 内容

2.text（）：获取/设置元素的标签体纯文本内容 <a>内容</a> --> 内容

3.val（）：获取/设置元素的value属性值

	<script>// 获取myinput 的value值$(function () {alert($("#myinput").val());});// 获取mydiv的标签体内容$(function () {alert($("#mydiv").html());});// 获取mydiv文本内容$(function () {alert($("#mydiv").text());});</script>

2.属性操作

1.通用属性操作

1.attr（）：获取/设置元素的属性

2.removeAttr（）：删除元素

3.prop（）：获取/设置元素属性

4.removeProp（）：删除属性

*attr和prop的区别？

1.如果操作的是元素的固有属性，则建议使用prop

2.如果操作的是元素的自定义属性，则建议使用attr

	<script type="text/javascript">//获取北京节点的name属性值$(function () {alert($("#bj").attr("name"));});//设置北京节点的name属性的值为dabeijing$(function () {$("#bj").attr("name","dabejing");});//新增北京节点的discription属性 属性值是didu$(function () {$("#bj").attr("discription","didu");});//删除北京节点的name属性并检验name属性是否存在$(function () {$("#bj").removeAttr("name");});//获得hobby的的选中状态$(function () {$("#hobby").prop("checked");});</script>

2.对class属性操作

1.addClass（）：添加class属性值

2.removeClass（）：删除class属性值

3.toggleClass（）：切换class属性

*toggleClass("one"）:判断元素对象上存在class="one"，则将属性值one删除掉

    <script type="text/javascript">$(function () {//<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>$("#b1").click(function () {$("#one").prop("class","second");});//<input type="button" value=" addClass"  id="b2"/>$("#b2").click(function () {$("#one").addClass("second");});//<input type="button" value="removeClass"  id="b3"/>$("#b3").click(function () {$("#one").removeClass("second");});//<input type="button" value=" 切换样式"  id="b4"/>$("#b4").click(function () {$("#one").toggleClass("second");});//<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>$("#b5").click(function () {var css = $("#one").css("backgroundColor");alert(css);});//<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>$("#b6").click(function () {$("#one").css("backgroundColor","green");});});</script>

3.CRUD操作

	 <script type="text/javascript">$(function () {// <input type="button" value="将反恐放置到city的后面"  id="b1"/>$("#b1").click(function () {$("#fk").appendTo($("#city"));$("#city").append($("#fk"));});// <input type="button" value="将反恐放置到city的最前面"  id="b2"/>$("#b2").click(function () {$("#fk").prependTo($("#city"));$("#city").prepend($("#fk"));});// <input type="button" value="将反恐插入到天津后面"  id="b3"/>$("#b3").click(function () {$("#tj").after($("#fk"));});// <input type="button" value="将反恐插入到天津前面"  id="b4"/>$("#b4").click(function () {$("#fk").before($("#tj"));});});</script>

// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>$(function () {$("#b1").click(function () {$("#bj").remove();});})// <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>$(function () {$("#b2").click(function () {$("#city").empty();});})

##jQuery高级

1.动画：

1.三种方式显示和隐藏元素

1.默认显示和隐藏方式

1.show([speed，[easing]，[fn] ] )

2.hide([speed，[easing]，[fn] ] )

3.toggle( [ speed，[easing]，[fn] ] )

1.参数：

1.speed：动画的速度。三个预定义的值（"slow"，"normal"，"fast"）或表示动画时长的毫秒数值（1000）

2.easing：用来指定切换效果，默认是"swing"，可用参数"linear"

*swing：动画执行是效果是先慢，中间快，最后又慢

*linear：动画执行时速度是匀速的

3.fn：在动画完成时执行的函数，每个元素执行一次

   <script>function hideFn() {$("#showDiv").hide("slow","swing");}function showFn() {$("#showDiv").show("slow","swing");}function toggleFn() {$("#showDiv").toggle("slow","swing")}</script>

2.滑动显示和隐藏方式

1.slideDown（[speed]，[easing]，[fn]）

2.slideUp（[speed]，[easing]，[fn]）

3.slideToggle（[speed]，[easing]，[fn]）

3.淡入淡出显示和隐藏方式

1.fadeIn（[speed]，[easing]，[fn]）

2.fadeOut（[speed]，[easing]，[fn]）

3.fadeToggle（[speed]，[easing]，[fn]）

2.遍历

1.js的遍历

*for（初始化值；循环结束条件；步长）

    <script type="text/javascript">$(function () {var $city = $("#city li");for (let i = 0; i < $city.length; i++) {alert(i+":"+$city[i].innerHTML);}});</script>

2.jq的遍历方式

1.jq对象.each（callback）

*回调函数返回值：

*true：如果当前function返回为false，则结束循环(break)

*false：如果当前function返回为true,则结束本次循环，继续下次循环(continue)

2.$.each（object，[callback]）

3.for....of：

    <script type="text/javascript">/* $(function () {var $city = $("#city li");for (let i = 0; i < $city.length; i++) {alert(i+":"+$city[i].innerHTML);}});*/$(function () {var citys = $("#city");/*citys.each(function (index,element) {//获取li对象，第一种方式this// alert(this.innerHTML);//获取li对象，第二种方式，在回调函数中定义参数 index(索引)  element(元素对象)alert(index+":"+element.innerHTML);});*///$.each(object,[callback])$.each(citys,function () {alert(this.innerHTML)});//for...offor (li of citys){alert($(li).html())}});</script>

3.事件绑定

1.jquery标准的绑定方式

jq对象.事件方法（回调函数）；

*注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为

*表单对象.submit（）；//让表单提交

    <script type="text/javascript">$(function () {$("#name").click(function () {alert("我被点击了.....")});$("#name").mouseover(function () {alert("鼠标来喽");});$("#name").mouseout(function () {alert("鼠标走漏");});$("#name").focus();});</script>

2.on绑定事件/off接触绑定

jq对象.on（"事件名称"，回调函数）

jq对象.off（"事件名称"）

 <script type="text/javascript">$(function () {$("#btn").on("click",function () {alert("我被绑定了....")});$("#btn2").click(function () {$("#btn").off("click");//如果括号里没有属性，则会将组件上所有的事件全部解绑});});</script>

3.事件切换:toggle（fn1,fn2.....）

*注意：1.9版本 .toggle（）方法删除，jQuery Migrate（迁移）插件可以恢复此功能

    <script src="../js/jquery-migrate-1.0.0.js"></script><script type="text/javascript">$(function () {$("#btn").toggle(function () {$("#myDiv").css("backgroundColor","red");},function () {$("#myDiv").css("backgroundColor","yellow");});});</script>

## 案例之广告的显示与隐藏

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>广告的自动显示与隐藏</title><style>#content{width:100%;height:500px;background:#999}</style><!--引入jquery--><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script>$(function () {setTimeout(showAd,3000);setTimeout(hideAd,8000);});function showAd() {$("#ad").show("slow");}function hideAd() {$("#ad").hide("slow");}</script>
</head>
<body>
<!-- 整体的DIV -->
<div><!-- 广告DIV --><div id="ad" style="display: none;"><img style="width:100%" src="../img/adv.jpg" /></div><!-- 下方正文部分 --><div id="content">正文部分</div>
</div>
</body>
</html>

## 案例之抽奖

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jquery案例之抽奖</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script>$(function () {var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg"];var startId;var index;//绑定开始单机事件$("#startID").click(function () {$("#startID").prop("disabled",true);$("#stopID").prop("disabled",false);//定义循环定时器startId=setInterval(function () {//生产成随机交表index = Math.floor(Math.random() *7);$("#img1ID").prop("src",imgs[index]);},20);});//绑定结束单机事件$("#stopID").click(function () {$("#startID").prop("disabled",false);$("#stopID").prop("disabled",true);//停止循环定时器clearInterval(startId);$("#img2ID").prop("src",imgs[index]).hide();$("#img2ID").show(1000);});});</script>
</head>
<body><!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div><!-- 大像框 -->
<divstyle="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div><!-- 开始按钮 -->
<inputid="startID"type="button"value="点击开始"style="width:150px;height:150px;font-size:22px"onclick="imgStart()"><!-- 停止按钮 -->
<inputid="stopID"type="button"value="点击停止"style="width:150px;height:150px;font-size:22px"onclick="imgStop()"><script language='javascript' type='text/javascript'>//准备一个一维数组，装用户的像片路径var imgs = ["../img/man00.jpg","../img/man01.jpg","../img/man02.jpg","../img/man03.jpg","../img/man04.jpg","../img/man05.jpg","../img/man06.jpg"];</script>
</body>
</html>

5.插件：增强Jquery的功能

1.实现方式：

1.$.fn.extend（object）

*增强通过Jquery获取的对象的功能 $( " #id " )

2.$.extend（object）

*增强JQuery对象自身功能 $/jQuery

 <script type="text/javascript">$.fn.extend({check:function () {this.prop("checked",true);},uncheck:function () {this.prop("checked",false);}});$(function () {$("#btn-check").click(function () {$("input[type='checkbox']").check();});$("#btn-uncheck").click(function () {$("input[type='checkbox']").uncheck();});});</script>

    <script type="text/javascript">//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值$.extend({max: function (a,b) {return a>=b ? a:b;},min: function (a,b) {return  a<=b ? a:b;}});$(function () {var max = $.max(3,4);alert(max)});</script>