前端基础-Jquery

最新推荐文章于 2023-12-28 09:51:45 发布

MarvellousL

最新推荐文章于 2023-12-28 09:51:45 发布

阅读量144

点赞数

分类专栏： Java 前端

本文链接：https://blog.csdn.net/weixin_42577116/article/details/90814866

版权

Java 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

Jquery:

jquery是一个Javascript库，对js进行了封装，借助js可以极大地简化JavaScript的编程。实际上，jquery是基于 DOM 并且优化了 DOM 的操作

Jquery的基本使用：

需要在页面中使用外联式来导入js库，方式与引用外部js相同，因为Jquery库就是一个js文件

在HTML5中，可以忽略type="text/javascript"，这是因为js是所有现代浏览器及HTML5的默认语言

如果不想下载jquery库，也可以通过服务器来访问jquery库，如 Staticfile CDN、百度、新浪、谷歌、微软引用 jQuery

使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

Jquery库的基本功能：

HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities

Jquery的基础语法：

基本语法：$(selector).action()

其中$符号表示使用Jquery，选择符selector表示”查询和查找HTML元素“，action()表示对元素执行的操作

举例如下：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

Jquery的入口函数：

入口函数指的是页面加载完成后的函数入口，可以在页面加载完成后自动执行的函数，如在js中，一般通过window.onload来作为js的函数入口。

但是在jquery中，需要使用如下方式来作为入口函数：

$(document).ready(function(){

// 执行代码});

或者

$(function(){//简写格式

// 执行代码});

而上面所说的window.onload入口函数编写方式通常为：

window.onload = function () {

// 执行代码}

jquery入口函数和javascript入口函数的区别：

window.onload:必须等待页面全部加载完成后才会执行（包括图片，外部资源等等），然后再执行包裹的代码，且只能执行一次，如果执行第二次，那么第一次的执行会被覆盖

#document.ready():只需要等待页面中的DOM结构加载完毕，就可以执行包裹的代码，这是因为jquery实际上是对DOM对象的简化操作，且可以执行多次，第N次都不会被上一次覆盖

Jquery的选择器

它的选择器是基于CSS的选择器，除此之外，他还有一些自定义的选择器，在Jquery中，所有的选择器都以美元符号开头：$()

元素选择器：$("p")//选取所有<p/>的元素

#id选择器：$(#test)//选取id为test的元素

.class选择器：${.test}//选取class为test的元素

其他选择器

$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

Jquery的事件：

首先回顾常见的DOM事件

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

在jquery中，大多数的DOM事件都有一个等效的jquery时间

页面中指定一个点击事件： $("p").click();

定义触发事件： $("p").click(function(){ // 动作触发后执行的代码!! });

常用的Jquery事件：

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

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

dblclick() 方法当当双击元素时，会发生 dblclick 事件。

mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件

mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。

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

mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover() 用于模拟光标悬停事件

focus() 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

blur() 当元素失去焦点时，发生 blur 事件。

键盘事件keypress,keydown,keyup的区别:

1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;

2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

Jquery的常用效果：

显示和隐藏

hide()和show(): 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

语法：

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

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

其中，speed参数规定了隐藏/显示的速度，可以取值：slow，fast或者毫秒

callback可选，是隐藏或者显示后所执行的函数名称

toggle(): 可以使用 toggle() 方法来切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素

语法： $(selector).toggle(speed,callback);

淡入和淡出

fadeIn() 用于淡入已隐藏的元素，即该元素已经被隐藏，淡入来进行显示

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

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

fadeOut() 方法用于淡出可见元素，与fadeIn对应

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

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间），即将元素淡化成不同的透明度

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

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

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

滑动效果

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

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

例如： $("#flip").click(function(){ $("#panel").slideDown(); });//会在点击后滑动显示id问panel的标签内容

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

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

例如： $("#flip").click(function(){ $("#panel").slideUp(); });

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

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

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

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

例如： $("#flip").click(function(){ $("#panel").slideToggle(); });

动画效果

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

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

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

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

例如： $("button").click(function(){ $("div").animate({left:'250px'}); });//它将div元素向右边移动了250像素

***

默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

使用animate()方法来操作多个属性，如：

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

***

animate几乎可以操作任何css的属性，但是需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jquery.com 下载颜色动画插件。

animate使用相对值：

需要在值的前面加上 += 或 -=，如：

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

animate使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

例如： $("button").click(function(){ $("div").animate({ height:'toggle' }); });

animate使用队列功能

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"); });

停止动画

stop() 方法用于在动画或效果完成前对它们进行停止。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。如果设置为true，那么会停止所有动画

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

callback

许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子：$("p").hide("slow")speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

以下实例在隐藏效果完全实现后回调函数（使用callback）: $("button").click(function(){ $("p").hide("slow",function(){ alert("段落现在被隐藏了"); }); });

以下实例没有回调函数，警告框会在隐藏效果完成前弹出（不使用callback）： $("button").click(function(){ $("p").hide(1000); alert("段落现在被隐藏了"); });

链

通过 jQuery，可以把动作/方法链接在一起。Chaining （链）允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：

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

Jquery对属性的操作：

获取内容和属性

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

获取内容：

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

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

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

如：

$("#btn1").click(function(){ alert("Text: " + $("#test").text()); });

$("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });

$("#btn1").click(function(){ alert("值为: " + $("#test").val()); });

获取属性：

attr() 方法用于获取属性值。如 $("button").click(function(){ alert($("#runoob").attr("href")); });//显示class为runoob的标签的href属性的值

设置内容和属性

设置内容：

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

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

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

这三个方法不加参数时，为获取值，加参数时，为赋值

如：

$("#btn1").click(function(){ $("#test1").text("Hello world!"); });

$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); });

$("#btn3").click(function(){ $("#test3").val("RUNOOB"); });

上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

如：

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

设置属性：

attr() 方法也用于设置/改变属性值。带参数即为设置属性值

如： $("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });

attr() 方法也允许您同时设置多个属性

$("button").click(function(){ $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); });

attr()也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

添加元素

append() - 在被选元素的结尾插入内容// 在被选元素的结尾插入内容（仍然该元素的内部）。如 $("p").append("追加文本");

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

after() - 在被选元素之后插入内容//不在标签内

before() - 在被选元素之前插入内容//不在标签内

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。ru :

function appendText() { var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本

var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本

var txt3=document.createElement("p");

txt3.innerHTML="文本。"; // 使用 DOM 创建文本

text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }

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

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); // 在图片后添加文本 }

删除元素

remove() - 删除被选元素（及其子元素），如 $("#div1").remove();

empty() - 从被选元素中删除子元素，如 $("#div1").empty();

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。下面的例子删除 class="italic" 的所有 <p> 元素： $("p").remove(".italic");

设置并且获取CSS类

.important { font-weight:bold; font-size:xx-large; }

.blue { color:blue; }

addClass() - 向被选元素添加一个或多个类

如：下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

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

$("div").addClass("important"); });

也可以在 addClass() 方法中规定多个类： $("button").click(function(){ $("body div:first").addClass("important blue"); });

removeClass() - 从被选元素删除一个或多个类

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

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

toggleClass() - 对被选元素进行添加/删除类的切换操作、该方法对被选元素进行添加/删除类的切换操作

$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });//效果，分别对有blue的元素和对没有blue的元素进行添加

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

返回样式属性语法： css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值： $("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%"});

通过jquery处理元素和浏览器窗口的尺寸

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

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

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

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

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

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

Jquery的遍历操作：

获取祖先元素（向上遍历）

parent()// 返回被选元素的直接父元素。下面的例子返回每个 <span> 元素的的直接父元素： $(document).ready(function(){ $("span").parent(); });

parents()// 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。下面的例子返回所有 <span> 元素的所有祖先： $(document).ready(function(){ $("span").parents(); }); 可以使用可选参数来过滤对祖先元素的搜索。下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素： $(document).ready(function(){ $("span").parents("ul"); });

parentsUntil()// 返回介于两个给定元素之间的所有祖先元素，下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素： $(document).ready(function(){ $("span").parentsUntil("div"); });

获取后代元素（向下遍历）

children()// 返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历，下面的例子返回每个 <div> 元素的所有直接子元素： $(document).ready(function(){ $("div").children(); }); 可以使用可选参数来过滤对子元素的搜索，下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素： $(document).ready(function(){ $("div").children("p.1"); });

find()// 返回被选元素的后代元素，一路向下直到最后一个后代。下面的例子返回属于 <div> 后代的所有 <span> 元素： $(document).ready(function(){ $("div").find("span"); }); 下面的例子返回 <div> 的所有后代： $(document).ready(function(){ $("div").find("*"); });

获取同胞元素（水平遍历）

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()//

prevAll()//

prevUntil()//prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

过滤（缩小元素的范围）

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"); });

not() 方法返回不匹配标准的所有元素。下面的例子返回不带有类名 "url" 的所有 <p> 元素： $(document).ready(function(){ $("p").not(".url"); });

Jquery的Ajax操作：

load() 方法是简单但强大的 AJAX 方法。从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件（"demo_test.txt"）的内容： <h2>jQuery AJAX 是个非常棒的功能！</h2> <p id="p1">这是段落的一些文本。</p>

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中： $("#div1").load("demo_test.txt");

可以把 jQuery 选择器添加到 URL 参数。下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中： $("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

$("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功!");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText); });

});

get()和post()方法

get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

GET - 从指定的资源请求数据， GET 方法可能返回缓存数据。POST - 向指定的资源提交要处理的数据， POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

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

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

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

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法:

$.post(URL,data,callback);

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

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

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

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

$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });

Jquery的其他方法：

为了避免其他框架也使用$符号从而产生冲突，js提供了一个函数noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了

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 仍然在工作!"); }); });

MarvellousL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础-Jquery

Jquery:jquery是一个Javascript库，对js进行了封装，借助js可以极大地简化JavaScript的编程。实际上，jquery是基于 DOM 并且优化了 DOM 的操作Jquery的基本使用：需要在页面中使用外联式来导入js库，方式与引用外部js相同，因为Jquery库就是一个js文件<head> <script type="text/j...
复制链接

扫一扫