2-44 JQuery-优快云博客

本文链接：https://blog.youkuaiyun.com/WilsonDone/article/details/127559945

JQuery

1.1 jQuery概述

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.2 jQuery特点

具有独特的链式语法。
支持高效灵活的CSS选择器。
拥有丰富的插件。
兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 为什么要用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery，例如：Google、Microsoft、IBM、Netflix

如何用JQuery

JQuery的下载可以从官网【JQuery.com】或从【GitHub】，现阶段兼容较好的版本是1.12.4版本，最新版本3.x

JQuery下载之后又两个版本，一个带min【精简版本】，一个不带【完全版本】，效果是一样

在工程导入JQuery文件之后，在需要使用JQuery文件的页面中添加一句话，可以导入JQuery文件

  //写在head标签下
    <script src="jQuery/jquery-1.12.4.min.js"></script>

可以使用网络资源中JQuery文件，使用JQuery【必须有网】，这种方式叫做CDN引入

ps：需要和使用CDN引入，那么需要写在src路径后

常见的CDN
"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"  --> 百度
"http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js" -->新浪
"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" -->Google
"http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js" --> 微软

JQuery语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery/jquery-1.12.4.min.js"></script>
      <!--    js 和JQuery的区别 -->
    <script type="text/javascript">
        // window.onload = function () {
        //      var btnObj = document.getElementById("btnId");
        //      btnObj.onclick = function () {
        //             alert("JS原生单击事件")
        //      }
        //  }
        $(function () {
                $("#btnId").click(function () {
                    alert("JQuery的单击事件")
                })
        })

    </script>
</head>
<body>
      <button id = "btnId">SayHello</button>
</body>
</html>

$(function) :页面加载完毕之后执行并且可以写多个

$(）页面加载之前就执行

$是JQuery函数的简写
$(document).ready(function(){
// 在这里写你的代码...
});

ps：$(function) 执行函数的入口相当于是 java 中的main()简写形式

$(document).ready(function(){}); 执行函数如果，相当于是 java中的 public static void mian() 全写形式

$(selector).action 通过选取HTML元素，并对选取的元素执行某些操作

selector 表示 “查找” HTML元素 action 执行对元素操作

selector可以传递什么?

$(“#id属性值”) ：id选择器，根据id查询标签对象

$(“标签名”): 标签选择器，根据执行的标签名查询标签对象

$(“.class属性值”): 类型选择器，可以根据class属性查询标签对象

JQuery对象和Dom对象的区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和Dom对象的对比</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var btnObj = document.getElementById("btn01");
            alert(btnObj);//object HTMLButtonElement //DOM对象
            alert($(btnObj));//object Object // JQuery对象
        })
    </script>
</head>
<body>
        <button id="btn01">按钮</button>

</body>
</html>

DOM对象：

DOM对象是通过 getElementById() ElementsByName ByTagName 查询出来。

所以DOM对象打印结果是【object HTML标签名Element】

JQuery对象：

JQuery对象是通过JQuery的 API创建 API查询 JQuery包装Dom对象

所以JQuery对象打印出来结果是【object object】

JQuery对象的本质

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和Dom对象的对比</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $button = $("button");
            for(var i = 0; i<$button.length;i++){
                //JQuery 本质
                //本质：JQuery对象是dom对象的数组+Jquery提供了功能函数可以操作对象
                alert($button[i]);
            }
        })
    </script>
</head>
<body>
        <button id="btn01">按钮</button>
        <button id="btn02">按钮</button>
        <button id="btn03">按钮</button>
        <button id="btn04">按钮</button>

</body>
</html>

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

3.2 jQuery选择器

基础选择器BasicsSelector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}
		</style>
		<script type="text/javascript" src="../JQuery/jquery-1.12.4.js"></script>
		<script type="text/javascript">

				$(function () { //页面加载之后执行
					//1.选择 id 为 one 的元素 "background-color","#bbffaa"
					//单一修改
					$("#btn1").click(function () {
						// css() 方法 可以设置和获取样式
						$("#one").css("background-color","#bbffaa");
					});


					//2.选择 class 为 mini 的所有元素
					//包含mini的全部包含修改
					$("#btn2").click(function () {
						$(".mini").css("background-color","#bbffaa");
					});

					//3.选择 元素名是 div 的所有元素
					//选择html标签名,页面中所有元素,多个修改
					$("#btn3").click(function () {
						$("div").css("background-color","#bbffaa");
					});

					//4.选择所有的元素
					$("#btn4").click(function () {
						$("*").css("background-color","#bbffaa");
					});

					//5.选择所有的 span 元素和id为two的元素
					$("#btn5").click(function () {
						$("span,#one").css("background-color","#bbffaa");
					});

				});

		</script>
	</head>
	<body>
<!-- 	<div>
		<h1>基本选择器</h1>
	</div>	 -->	
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span class="one" id="span">^^span元素^^</span>
	</body>
</html>

层级选择器TierSelector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../JQuery/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1.选择 body 内的所有 div 元素
				//后代选择器
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 内, 选择div子元素
				//子元素选择器,给定父元素的情况下匹配所有的直接子元素
				$("#btn2").click(function(){
					$("body>div").css("background", "#bbffaa");
				});

				//3.选择 id 为 one 的下一个 div 元素
				//相邻下一个元素选择
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	
	
<!-- 	<div>
		<h1>层级选择器:根据元素的层级关系选择元素</h1>
		ancestor descendant  ：
		parent > child 		   ：
		prev + next 		   ：
		prev ~ siblings 	   ：
	</div>	 -->
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>

过滤选择器

基本过滤选择器FieldSelector.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../JQuery/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			/**
			 * 语法 有 [:]
			 * :first 获取第一个
			 * :last获取最后一个
			 * :not(elector)去除说有与给定选择器匹配的元素
			 * :even匹配所有索引值为偶数的元素
			 * :odd匹配所有索引为奇数的元素
			 * :eq(index)匹配一个给定索引值的元素
			 *
			 */

			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.选择第一个 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.选择最后一个 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.选择class不为 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

				//4.选择索引值为偶数的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.选择索引值为奇数的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.选择索引值为大于 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.选择索引值为等于 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.选择索引值为小于 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.选择所有的标题元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.选择当前正在执行动画的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//11.选择没有执行动画的最后一个div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="选择第一个 div 元素" id="btn1" />
		<input type="button" value="选择最后一个 div 元素" id="btn2" />
		<input type="button" value="选择class不为 one 的所有 div 元素" id="btn3" />
		<input type="button" value="选择索引值为偶数的 div 元素" id="btn4" />
		<input type="button" value="选择索引值为奇数的 div 元素" id="btn5" />
		<input type="button" value="选择索引值为大于 3 的 div 元素" id="btn6" />
		<input type="button" value="选择索引值为等于 3 的 div 元素" id="btn7" />
		<input type="button" value="选择索引值为小于 3 的 div 元素" id="btn8" />
		<input type="button" value="选择所有的标题元素" id="btn9" />
		<input type="button" value="选择当前正在执行动画的所有元素" id="btn10" />		
		<input type="button" value="选择没有执行动画的最后一个div" id="btn11" />


		<h3>基本选择器.</h3>
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

内容过滤器ContentFilterSelector.html

属性过滤器FieldSelector.html

表单和表单对象属性过滤器FormSelector.html

**jquery元素筛选【方法版本】**ElementSelector.html

3.3 jQuery事件及常用事件方法

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
选取单选按钮

点击元素：在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 click

事件"。
常见 DOM 事件：

jQuery 事件方法语法：

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

JQueryEvent.html

ps：除了这些之外，form表单中可以用的常用时间 submit提交时间 blur输入框失去焦点 change 输入改变等等可以查看jQuery文档

JQuery中事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

那么如何阻止事件冒泡呢？

在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

BubbleEvent.html

$( function(){} );和window.onload = function(){} 的区别？

他们触发的顺序？

先执行jQuery 页面加载完成之后在执行原生 js 的页面加载完成之后

原因：

jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行，而原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。

ps：DOM即document对象，而document对象表示的整个页面中所有的标签，用来维护管理这些标签对象的，浏览器读取标签，创建标签之后DOM就创建好了

还要等标签显示时需要的内容加载完成只有等待页面中所有要显示的内容都执行完毕js才会加载、

他们执行的次数？

原生 js 的页面加载完成之后，只会执行最后一次的赋值函数,而jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

javaScript 事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。

如何获取呢 javascript 事件对象呢？

在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

JavaScriptEvent.html

四、jQuery动画

基本动画 JQanimation.html

五、 jQuery DOM操作【`重点`】

5.1 捕获

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

三个简单实用的用于 DOM 操作的 jQuery 方法：

html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。

text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。

val() 它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

Dom1.html

val方法同时设置多个表单项的选中状态：

Dom2.html

attr() 可以设置和获取属性的值

prop() 可以设置和获取属性的值

Dom3.html

添加元素

Dom4.html

删除元素

如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

CSS类

JQcss.html

案例：从左向右，从右向左

Exercise1.html

案例：图片跟随放大

Exercise2.html

七、jQuery AJAX

7.1 jQuery AJAX简介

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

ajax()方法

ps:此方法默认就是异步

方法中的参数

url：(默认: 当前页地址) 发送请求的地址。

type：(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

success：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串

data:发送到服务器的数据

dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。

contentType:(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数情况。

json: 返回 JSON 数据。

text: 返回纯文本字符串

xml: 返回 XML 文档，可用 jQuery 处理。

html: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

script: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。‘’‘注意：’''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载

ajax.html

$. g e t () 方法和$ .post() 方法

这是一个简单的 GET 请求和post请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

Ps:这里的错误指的是如果出现错误，要跳转到那个页面，因为只有$.ajax有error参数

get方法参数

url:待载入页面的URL地址【必须】

callback:载入成功时回调函数。【可选】

data:待发送 Key/value 参数。【可选】

type:返回内容格式，xml, html, script, json, text, _default。【可选，这个参数设置要在回调函数之后】

post方法参数

url:发送请求地址。【必须】

data:待发送 Key/value 参数。【可选】

callback:发送成功时回调函数。【可选】

type:返回内容格式，xml, html, script, json, text, _default。可选，这个参数设置要在回调函数之后】

GetAndPost.html

扩展： jQuery noConflict方法

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});