jQuery前端的进阶，更加方便对元素的操作。

最新推荐文章于 2024-08-14 15:45:18 发布

ever_up973

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量320

点赞数

分类专栏： H5 文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/hariya/article/details/127759242

版权

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、jQuery概述

1.1 jQuery简介

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

jQuery的特点：

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

1.2 什么是jQuery

是一个JavaScript库
是一个轻量级的“写的少，作的多”的JavaScript库

jQuery库包含以下功能

jQuery库包含以下函数
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

1.3 为什么要用jQuery

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

Google
Microsoft
IBM
Netflix

二、jQuery安装

2.1 直接引用jQuery

可以通过多种方法在网页中添加jQuery。您可以使用以下方法:

从jquery.com下载jQuery库
从CDN中载入jQuery,如从Google 中加载jQuery有两个版本的jQuery可供下载
Production version -用于实际的网站中，已被精简和压缩
Development version -用于测试和开发(未压缩，是可读的代码)以上两个版本都可以从jquery.com中下载。
jQuery库是一个JavaScript文件，您可以使用HTML 的

<head>
<script src="jquery-1.12.2.min.js" ></script>
</head>

2.2 CDN引用

2.2.1 什么是CDN

CDN的全称是Content Delivery Network，即内容分发网络,使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

2.2.2 常见CDN

百度CDN

新浪CDN

Google CDN

Microsoft CDN

三、jQuery语法

3.1 基本使用

${匿名函数} ：表示页面DOM加载完成后，则执行，比onload时间执行早，并且可以写多个。$ 是jQuery函数的缩写
基础语法：${select}.action{}，jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

-$(this).hide() -隐藏当前元素
-$(“p” ) .hide()-隐藏所有
元素
-$(“p.test” ).hide()-隐藏所有class="test”的
元素
-$ ( “#test” ).hide()-隐藏所有id="test”的元素

3.2 jQuery选择器

元素选择器：jQuery元素选择器基于元素名选取元素。

/*在页面中选取所以的<p>元素*/
${document}.ready(function){
	${"button"}.click(function){
	${"p"}.hide;
	)};
)};

id 选择器：jQuery #id选择器通过HTML元素的id属性选取指定的元素。

/*页面中元素的id应该是唯一的，所以您要在页面中选取唯一的元素需要通过#id选择器。通过id选取元素语法如下:*/
$(document).ready(function(){
	$("button").click(function(){
	$("#test" ).hide();
	});
});

class 选择器：jQuery类选择器可以通过指定的class查找元素。

$(document).ready(function(){
	$("button").click(function(){
	$(".test").hide();
});
});

3.3 jQuery事件及常用事件方法

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

事件处理程序指的是当HTML中发生某些事件时所调用的方法。
实例:
在元素上移动鼠标
选取单选按钮

点击元素:在事件中经常使用术语"触发”(或"激发")例如:“当您按下按键时触发 keypress事件”。

常见DOM事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

页面中添加一个点击事件。

${"p"}.click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现。

${"p"}.click(function(){
	//动作触发后执行的代码
})

总结：也就是说，不传参数是点击，传递参数是设置事件。

常用的jQuery事件方法
$(document).ready()方法允许我们在文档完全加载完后执行函数。

click():当按钮点击事件被触发时会调用一个函数。

该函数在用户点击HTML元素时执行。

${"p"}.click(function(){
	$(this).hide();
});

dblclick():当双击元素时,会发生dblclick事件。
dblclick()方法触发dblclick事件,或规定当发生dblclick事件时运行的函数：

${"p"}.dblclick(function(){
	$(this).hide();
});

mouseenter():当鼠标指针穿过元素时,会发生mouseenter事件。
mouseenter()方法触发mouseenter事件，或规定当发生mouseenter事件时运行的函数：

${"#p1"}.mouseenter(function(){
	alert('您的鼠标在。。。上');
});

mouseleave():当鼠标指针离开元素时,会发生mouseleave事件。
mouseleave()方法触发mouseleave事件，或规定当发生mouseleave事件时运行的函数：

${"#p1"}.mouseleave(function(){
	alert('您的鼠标离开了。。。');
});

mousedown():当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

mousedown()方法触发mousedown事件，或规定当发生mousedown事件时运行的函数：

${"#p1"}.mousedown(function(){
	alert('鼠标在该段按下');
});

mouseup():当在元素上松开鼠标按钮时,会发生mouseup事件。
mouseup()方法触发mouseup事件，或规定当发生mouseup事件时运行的函数:

${"#p1"}.mouseup(function(){
	alert('鼠标在。。上松开');
});

hover(): hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

${"#p1"}.hover(
	function(){
		alert('鼠标在。。悬浮');
},
	function(){
		alert('鼠标离开了。。。。');
	}
);

focus():当元素获得焦点时,发生focus事件。
当通过鼠标点击选中元素或通过tab键定位到元素时，该元素就会获得焦点。focus()方法触发focus事件，或规定当发生focus事件时运行的函数：

${"input"}.focus(function(){
	$(this).css("background-color","#cccccc");
});

blur():当元素失去焦点时,发生blur事件。
blur()方法触发blur事件，或规定当发生blur事件时运行的函数：

${"input"}.blur(function(){
	$(this).css("background-color","#cccccc");
});

四、jQuery效果

4.1 隐藏显示

hide()：可以使用hide()将元素隐藏

${"#hide"}.click(function(){
	$("p").hide();
});

show()：可以将元素显示

${"#show"}.click(functuion(){
	${"p"}.show();
});

toggle():通过jQuery，您可以使用toggle()方法来切换hide()和show()方法。

显示被隐藏的元素，并隐藏已显示的元素。

${"#show"}.click(functuion(){
	${"p"}.toggle();
});

这三个方法都是有参数的：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

可选的speed参数规定隐藏 / 显示的速度，可以取以下值:“slow”、"fast"或毫秒。

可选的callback参数是隐藏或显示完成后所执行的函数名称。

4.2 淡入淡出

通过jQuery，可以实现元素的淡入淡出的效果

jQuery拥有以下的几种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

fadeIn()方法：用于淡入已经隐藏的元素。

${selector}.fadeIn(speed,callback);

fadeOut()方法：用于淡入可见元素。

${selector}.fadeOut(speed,callback);

fadeToggle()方法：可以在fadeIn()方法和fadeOut()方法之间切换

${selector}.fadeToggle(speed,callback);

fadeTo()方法：运行渐变为给定的不透明度（值介于0 与 1之间）

${selector}.fadeTo(speed,opacity,callback);

4.3 滑动

通过jQuery，可以实现元素上创建滑动的效果

jQuery拥有以下的几种滑动方法：

slideDown()
slideUp()
slideToggle()

slideDown()方法：用于向下滑动元素

${selector}.slideDown(speed,callback);

slideUp()方法：用于向上滑动元素

${selector}.slideUp(speed,callback);

slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。

如果元素向下滑动,则slideToggle()可向上滑动它们，如果元素向上滑动,则slideToggle()可向下滑动它们。

${selector}.slideToggle(speed,callback);

4.4 动画

animate()方法：用于创建自定义动画

${selector}.animate({params},speed,callback);

必需的params参数定义形成动画的CSS属性。
可选的speed参数规定效果的时长。它可以取以下值:“slow”、"fast"或毫秒。

可选的callback参数是动画完成后所执行的函数名称。

下面的例子演示animate()方法的简单应用。它把元素往右边移动了250像素：

${"button"}.click(function{
	${"div"}.animate({"left:'2'"});
});

操作多个属性
生成动画的过程可以同时使用多个属性

${"button"}.click(function(){
	${"div"}.animate({
		left:'250px',
		opacity:'0.5',
		heigth:'150px',
		width:'150px'
	});
});

可以用animate()方法来操作所有CSS属性吗?
是的，几乎可以!不过，需要记住一件重要的事情:当使用animatel)时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right,等等。
同时,色彩动画并不包含在核心jQuery库中。
如果需要生成颜色动画，您需要从jquery.com下载颜色动画插件。
也可以定义相对值（该值相对于元素的当前值)。需要在值的前面加上=或-=:

${"button"}.click(function(){
	${"div"}.animate({
		left:'250px',
		heigth:'+=150px',
		width:'+=150px'
	});
});

预定义的值：可以把属性动画值设置为：“show” “hide” “tollge”

${"button"}.click(function(){
	${"div"}.animate({
		heigth:'toggle'
	});
});

使用队列功能:默认地，jQuery提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个animate()调用，jQuery会创建包含这些方法调用的"内部“"队列。然后逐一运行这些animate调用。

$("button").click(function(){
	var div=$("div");
	div.animate({height:'300px',opacity:'0.4'},"slow");
	div.animate({width:'300px',opacity:'0.8'},"slow");
	div.animate({height:'100px',opacity:'0.4'},"slow");
	div.animate({width:'100px',opacity:0.8'},"slow");
});

下面是元素向右移动了100像素，然后增加文本的字号：

$("button").click(function(){
	var div=$("div");
	div.animate({left:'100px'},"slow");
	div.animate({fontSize:'300px'},"slow");
});

4.5 停止动画

stop()用于停止动画或效果，在他们完成前。----适用于所以jQuery效果函数，包括滑动，淡入淡出和自定义动画

${selector}.stop(stopAll,goToEnd);

可选的 stop All参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执

可选的goToEnd参数规定是否立即完成当前动画。默认是false。
因此,默认地,stop()会清除在被选元素上指定的当前动画。

下面的例子演示stop()方法，不带参数：

${"#stop"}.click(function(){
	${"p"}.stop();
});

4.6 Callback

许多jQuery函数涉及动画。这些函数也许会将 speed 或 duration作为可选参数。

例子:S(“p”).hide(“slow”)
speed* 或 duration 参数可以设置许多不同的值，比如 “slow” , “fast”, "normal"或毫秒。

$("button").click(function(){
	$("p").hide("slow",function(){
		alert(“段落现在被隐藏了");
	});
});

以下这个实例没有回调函数，警告框会在隐藏效果前弹出：

$("button").click(function(){
	$("p").hide("slow")
	alert(“段落现在被隐藏了");
});

4.7 链式编程

到现在我们写jQuery语句都是写一条的，有链式的技术允许我们在相同的元素上运行多条jQuery命令。

如需链接一个动作只需要将新的该动作链接到以前的动作上，如以下：

${"#p1"}.css("color","red").slideUp(2000).slideDown(2000);

进行链接时，代码的运行会变的很差。可以利用换行或缩进来书写

${"#p1"}.css("color","red")
	.slideUp(2000)
	.slideDown(2000);

五、jQuery DOM操作【重点】

5.1 捕获

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

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

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

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

text()-设置或返回所选元素的文本内容
html()-设置或返回所选元素的内容(包括HTML 标记)
val()-设置或返回表单字段的

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

$("#btn1").click(function(){
	alert("Text: "+$("#test" ).text());
});
$("#btn2").click(function(){
	alert("HTML: "+$("#test" ).htm1());
});
$("#btn1").click(function(){
	alert("值为: "+$("#test").val());
});

获取属性 -attr()

jQuery attt()方法用于获取属性值

下面的例子演示如何获得链接中 href 属性的值

$("button").click(function(){
	alert("#a1").alert("href"));
});

5.2 设置

我们将使用前一章中的三个相同的方法来设置内容：

text()-设置或返回所选元素的文本内容

html()-设置或返回所选元素的内容(包括HTML标记)

val()-设置或返回表单字段的值

下面的例子演示如何通过text()、html()以及val()方法来设置内容：

${"#btn1"}.click(function(){
	${"#test1"}.text("hello world!")
});
${"#btn2"}.click(function(){
	${"#test2"}.html("<b>hello world!</b>")
});
${"#btn3"}.click(function(){
	${"#test3"}.val("hello world!")
});

下面例子演示带有回调函数的text()和html()：

${"#btn1"}.click(function(){
	${"#test1"}.text(function(i,origText){
		return "旧文本 "+ origText + "新文本：hello world! (index: "+ i +");
	});
});
${"#btn2"}.click(function(){
	${"#test2"}.html(function(i,origText){
		return "旧文本 "+ origText + "新文本：hello <b>world!</b> (index: "+ i +");
	});
});

jQuery arrt() 方法也用于设置 / 改变属性值。

${"button"}.click(function(){
	${"#font1"}.attr("colo")
});

5.3 添加元素

用于添加心新内容的四个jQuery方法

append() 方法：在被选元素的结尾插入内容
prepend()-在被选元素的开头插入内容
after()-在被选元素之后插入内容
before()-在被选元素之前插入内容

jQuery append()方法在被选元素的结尾插入内容。

$("p").append("追加文本")

jQuery prepend()方法在被选元素的开头插入内容。

$("p").prepend("v文本")

在下面的例子中通过text / HTML，jQuery或者JavaScript / DOM来创建，再通过append() 方法追加到文本中。

function appendText(){
	var txt1 = "<p>文本。</p>";  //使用 HTML 标签创建文本
	var txt2 = ${"<p></p>"}.text("文本。");  //  使用jQuery 创建文本
	var txt3 = document.creatElement("p");  
	txt3.innerHTML = "文本。";  //  使用 DOM 创建文本 text with DOM
	${"body"}.append(txt1,txt2,txt3);  //追加新元素
}

jQuery after() 在被添加元素之后插入内容

jQuery before() 在被添加元素之前插入内容

${"img"}.after("在后面添加文本");
${"img"}.before("在前面添加文本");

after()和 before()方法能够通过参数接收无限数量的新元素。可以通过text/HTML、jQuery或者JavaScript/DOM来创建新元素。

元素可以通过text/HTML、 jQuery 或者JavaScript/DOM来创建。然后我们通过after()方法把这些新元素插到文本中(对before()同样有效)︰

function afterText(){
	var txt1="<b>I</b>";	//使用HTML创建元素
	var txt2=$("<i></i>").text("love");	//使用 jQuery 创建元素
	var txt3=document.createElement("big");	// 使用DOM 创建元素
	txt3.innerHTML="jQuery! ";
	$("img").after(txt1,txt2,txt3);	//在图片后添加文本
}

5.4 删除元素

删除元素一般有下面两种方法jQuery方法

remove()：删除被选元素及其子元素

empty()：从被选元素中删除子元素

$("div").remove();
$("div").empty();

jQuery remove()方法可以添加个参数来对删除的内容进行过滤，该参数可以是jQuery选择。

下列例子是删除class="italic"的所有元素：

${"p"}.raemove(".italic");

5.5 CSS类

jQuery拥有若干进行CSS操作的方法。我们将学习下面这些：

addClass()-向被选元素添加一个或多个类
removeClass()-从被选元素删除一个或多个类
toggleClass()-对被选元素进行添加/删除类的切换操作o css()-设置或返回样式属性
下面的样式表将用于本页的所有例子：

.import
{
	font-weigth:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}

下面的例子展示向不同的元素中添加 class 属性。

$("button").click(function(){
	$("h1,h2,p").addClass("blue");
	$("div").addClass("important");
});

也可以在 addClass()方法中规定多个类：

$("button").click(function(){
	$("body div:first").addClass("important blue") ;
});

下面的例子演示在不同的元素中删除指定的 class 属性

$("button").click(function(){
	$("h1,h2,p").addClass("blue");
});

下面展示如何使用 jQuery toggleClass()方法。该方法对被选元素进行添加 / 删除类的切换操作。

${"button"}.click(function(){
	$("h1,h2,p").toggleClass("blue");
});

5.6 CSS()方法

css()方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的CSS属性的值，请使用如下语法：

css.("propertyname");

下面例子将返回收个匹配元素的 background-color值

s("p").css("background-color");

如需设置指定的CSS属性,请使用如下语法:

css("propertyname" , "value");

下面的例子将为所有匹配元素设置background-color值:

$("p").css("background-color", "yellow" );

如需设置多个CSS属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",.. .});

下面的例子将为所有匹配元素设置background-color和font-size:

$("p").css({"background-color":"yellow","font-size":"200%"});

5.7 尺寸

jQuery 提供多个处理尺寸的重要方法

width() ：设置或返回元素的宽度（不包括内边距、边框或外边距）

height()：设置或返回元素的高度（不包括内边距、边框或外边距）

innerwodth()：返回元素的宽度（包括内边距）

innerheight()：返回元素的高度（包括内边距）

outerwidth()：返回元素的宽度（包括内边距和边框）

outerheight()：返回元素的高度（包括内边距和边框）

六、jQuery遍历

6.1 遍历

jQuery遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找”(或选取)HTML元素。以某项选择开始，并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过jQuery遍历，您能够从被选（当前的)元素开始，轻松地在家族树中向上移动〈祖先)，向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM进行遍历。

6.2 祖先jQuery parent()方法

parent() 方法返回被选中元素的直接父元素

该方法只会向上一级对DOM树进行遍历

下面返回每个span元素的直接父元素

$(document).ready(function(){
	$("span").parent();
)};

parents()方法返回所以被选中元素的所以祖先元素，它一路向上知道文档的根元素(html)

下面例子返回所有span元素的所有祖先

$(document).ready(function(){
	$("span").parents();
});

也可以使用可选参数来过滤对祖先元素的搜索

下面例子返回所有span元素的所有祖先，并且他是 url 元素

$(document).ready(function(){
	$("span").parents("url");
});

parentsUtil() 方法返回介于两个给定元素之间的所有祖先元素

下面例子返回所有介于span和div元素之间的所有祖先元素

$(document).ready(function(){
	$("span").parentsUtil("div");
});

6.3 后代jQuery children()方法

children()方法返回被选元素的所有直接子元素。

该方法只会向下一级对DOM树进行遍历。
下面的例子返回每个div元素的所有直接子元素：

$(document).ready(function(){
	$("div").children();
});

也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为"a"的所有p元素，并且它们是div的直接子元素：

$(document).ready(function(){
	$("div").children("p.a");
});

find()方法返回被选元素的后代元素,一路向下直到最后一个后代。

下面的例子返回属于div后代的所有span元素：

$(document).ready(function(){
	$("div").find("span");
});

下面的例子返回属于div的所有后代：

$(document).ready(function(){
	$("div").find("*");
});

6.4 同胞jQuery siblings()方法

siblings()方法返回被选元素的所有同胞元素。

下面的例子返回h2的所有同胞元素：

$(document).ready(function(){
	$("h2").siblings();
});

也可以使用可选参数来过滤同胞元素的搜索

下面的例子返回h2的所有同胞元素的所有p元素：

$(document).ready(function(){
	$("h2").siblings("p");
});

next()方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。
下面的例子返回h2的下一个同胞元素：

$(document).ready(function(){
	$("h2").next();
});

nextAll()方法返回被选元素的所有跟随的同胞元素。

下面的例子返回h2的所有跟随的同胞元素：

$(document).ready(function(){
	$("h2").nextAll();
});

nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。

下面的例子返回介于h2与h6元素之间的所有同胞元素：

$(document).ready(function(){
	$("h2").nextUntil("h6");
});

prev()方法取得一个包含匹配的元素集合中每一个元素。

紧邻的前一个同辈元素的元素集合下面的例子返回h2的下一个同胞元素

$(document).ready(function(){
	$("h2").prev();
});

prevAll()方法查找当前元素之前所有的同辈元素
prevUntil()方法查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

##6.5 过滤jQuery first()方法

first()方法返回被选元素的首个元素。
下面的例子选取首个div元素内部的第一个p元素：

$(document).ready(function(){
	$("div p").first();
});

last()方法返回被选元素的最后一个元素。
下面的例子选择最后一个div元素中的最后一个p元素：

$(document).ready(function(){
	$("div p").last();
});

eq()方法返回被选元素中带有指定索引号的元素。
索引号从0开始，因此首个元素的索引号是0而不是1。下面的例子选取第二个p元素(索引号1)∶

$(document).ready(function(){
	$("p").eq(1);
});

filter()方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

下面的例子返回带有类名"url"的所有p元素：

$(document).ready(function(){
	$("p").filter("url");
});

七、jQuery AJAX

7.1 jQuery方法

AJAX = 异步JavaScript和XML (Asynchronous JavaScript and XML)。
简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

7.1 get和post方法

$.get( )方法通过HTTP GET从服务器上请求数据

$.get(URL,callback);

必需的URL参数规定您希望请求的URL。
可选的callback参数是请求成功后所执行的函数名。
下面的例子使用$.get()方法从服务器上的一个文件中取回数据:

$("button").click(function(){
	$.get("demo_test_.php",function(){
		alert("数据:"+data)
	});
});

$.post()方法通过HTTP POST 请求从服务器上请求数据。

S.post( URL,data,callback );

必需的 URL参数规定您希望请求的URL。

可选的data参数规定连同请求发送的数据。

可选的callback参数是请求成功后所执行的函数名。

下面的例子使用$.post()连同请求一起发送数据：

$("button").click(function(){
	$.post("/try/ajax/demo_test_psot.jsp",
	{
		name:"百度",
		url:"http://www.baidu.com"
	},
		function(data){
		alert("数据：\n"+data);
	)};
});

7.3 ajax()方法

jQuery 底层AJAX实现。简单易用的高层实现见.get,post等。 $. aja x () 返回其创建的 XM L H ttpR e q u es t 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$ .ajax()可以不带任何参数直接使用。

八、其他

8.1 jQuery noConflict方法

正如您已经了解到的,jQuery使用 $符号作为 j Q u ery 的简写。如果其他 J a v a S cr i pt 框架也使用$ 符号作为简写怎么办?
其他一些JavaScript框架包括:MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman以及Ext JS。
其中某些框架也使用 $符号作为简写 (就像 j Q u ery) ，如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。 j Q u ery 的团队考虑到了这个问题, 并实现了 n o C o n f l i c t () 方法。 n o C o n f l i c t () 方法会释放对$ 标识符的控制,这样其他脚本就可以使用它了。

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

$.noConfilict();
juery(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 仍然在工作!");
	});
});

ever_up973

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery前端的进阶，更加方便对元素的操作。

是一个JavaScript库是一个轻量级的“写的少，作的多”的JavaScript库jQuery库包含以下功能jQuery库包含以下函数HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilitiesCDN的全称是Content Delivery Network，即内容分发网络,使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
复制链接

扫一扫

专栏目录