jquery init函数 jquery中的函数

转载

mob6454cc7966b9 2023-05-23 14:06:23

文章标签 jQuery基础知识总结 jQuery基础知识 jQuery ide HTML 文章分类 jQuery 前端开发

什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，Jquery还提供了大量的插件。

细节学习：

（1）使用 可以导包也可以用cnd

百度cnd

< script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”>

不推荐谷歌cnd，中国不稳定

等等

（2）jquery中的加载函数

$(document).ready(function(){ });

$(function(){ });

（3）基础语法： $(selector).action()

（4）选择器

jquery init函数 jquery中的函数_HTML

（5）常见事件，重要

click()
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(‘您的鼠标移到了 id=“p1” 的元素上!’); });

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(“你进入了 p1!”); }, function(){ alert(“拜拜! 现在你离开了 p1!”); } );

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”,"#ffffff"); });

（6）jQuery hide() 和 show() 方法
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
实例
$("#hide").click(function(){ $(“p”).hide(); }); $("#show").click(function(){ $(“p”).show(); });

语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
实例
$(“button”).click(function(){ $(“p”).hide(1000); });
下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：
实例
$(document).ready(function(){ $(".hidebtn").click(function(){ $(“div”).hide(1000,“linear”,function(){ alert(“Hide() 方法已完成!”); }); }); });
第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 “swing”，其他可以使用相关的插件）。

jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例
$(“button”).click(function(){ $(“p”).toggle(); });
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jquery效果
（7）jquery 淡入淡出效果
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：
实例
$(“button”).click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn(“slow”); $("#div3").fadeIn(3000); });

jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：
实例
$(“button”).click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut(“slow”); $("#div3").fadeOut(3000); });

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：
实例
$(“button”).click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle(“slow”); $("#div3").fadeToggle(3000); });

jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：
实例
$(“button”).click(function(){ $("#div1").fadeTo(“slow”,0.15); $("#div2").fadeTo(“slow”,0.4); $("#div3").fadeTo(“slow”,0.7); });

（8）滑动效果
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
实例
$("#flip").click(function(){ $("#panel").slideDown(); });

jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
实例
$("#flip").click(function(){ $("#panel").slideUp(); });

jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
实例
$("#flip").click(function(){ $("#panel").slideToggle(); });

(9)jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把

元素往右边移动了 250 像素：
实例
$(“button”).click(function(){ $(“div”).animate({left:‘250px’}); });

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

jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：
实例
$(“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 下载颜色动画插件。

jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
实例
$(“button”).click(function(){ $(“div”).animate({ left:‘250px’, height:’+=150px’, width:’+=150px’ }); });

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：
实例
$(“button”).click(function(){ $(“div”).animate({ height:‘toggle’ }); });

jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
实例 1
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ 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 像素，然后增加文本的字号：
实例 2
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ var div=(“div”); div.animate({left:‘100px’},“slow”); div.animate({fontSize:‘3em’},“slow”); });

(10)jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面的例子演示 stop() 方法，不带参数：
实例
$("#stop").click(function(){ $("#panel").stop(); });

动画队列停止动画测试，只停止当前正在进行的动画，停止当前动画后，队列中的下一个动画开始进行：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});

可以在 stop() 中设置 stopAll 的参数为 true，这样就可以停止所有动画效果而不是只停止当前动画：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
$("#panel").slideUp(5000);
});
$("#stop").click(function(){
$("#panel").stop(true);
});
});

Callback 函数在当前动画 100% 完成之后执行。

jQuery 动画的问题
许多 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(“段落现在被隐藏了”); });

(11)jQuery 方法链接
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。
不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示：这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：
实例
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

尝试一下 »
如果需要，我们也可以添加多个方法调用。
提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。
如下书写也可以很好地运行：
实例
$("#p1").css(“color”,“red”) .slideUp(2000) .slideDown(2000);

尝试一下 »
jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

DOM操作
（12）jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
DOM = Document Object Model（文档对象模型）DOM 定义访问 HTML 和 XML 文档的标准：“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：
实例
$("#btn1").click(function(){ alert(“Text: " + $(”#test").text()); }); $("#btn2").click(function(){ alert(“HTML: " + $(”#test").html()); });

尝试一下 »
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：
实例
$("#btn1").click(function(){ alert(“值为: " + $(”#test").val()); });

尝试一下 »

获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
实例
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ alert(("#runoob").attr(“href”)); });

prop（）与attr（）
对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
实例 1：
< a href=“https://www.runoob.com” target="_self" class=“btn”>菜鸟教程</ a>
这个例子里 < a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 < a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。
< a href="#" id=“link1” action=“delete” rel=“nofollow”>删除< /a>
这个例子里 < a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，< a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。
prop()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是 undefined。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

（13）设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
实例
$("#btn1").click(function(){ $("#test1").text(“Hello world!”); }); $("#btn2").click(function(){ $("#test2").html(“Hello world!”); }); $("#btn3").click(function(){ $("#test3").val(“RUNOOB”); });

text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 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 "旧 html: " + origText + " 新 html: Hello < b>world!</ b> (index: " + i + “)”; }); });

设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
可以通过改变class，来实现样式改变的效果
下面的例子演示如何改变（设置）链接中 href 属性的值：
实例
$(“button”).click(function(){ $("#runoob").attr(“href”,“http://www.runoob.com/jquery”); });

尝试一下 »
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例
$(“button”).click(function(){ $("#runoob").attr({ “href” : “http://www.runoob.com/jquery”, “title” : “jQuery 教程” }); });

attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
实例
$(“button”).click(function(){ $("#runoob").attr(“href”, function(i,origValue){ return origValue + “/jquery”; }); });

（14）添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容（仍然该元素的内部）。
实例
$(“p”).append(“追加文本”);

jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
实例
$(“p”).prepend(“在开头追加文本”);

通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
实例
function appendText() { var txt1=“

文本。

”; // 使用 HTML 标签创建文本 var txt2=$("

").text(“文本。”); // 使用 jQuery 创建文本 var txt3=document.createElement(“p”); txt3.innerHTML=“文本。”; // 使用 DOM 创建文本 text with DOM $(“body”).append(txt1,txt2,txt3); // 追加新元素 }

jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$(“img”).after(“在后面添加文本”); $(“img”).before(“在前面添加文本”);

通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
实例
function afterText() { var txt1=“I “; // 使用 HTML 创建元素 var txt2=$(””).text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement(“big”); // 使用 DOM 创建元素 txt3.innerHTML=“jQuery!”; $(“img”).after(txt1,txt2,txt3); // 在图片后添加文本 }

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

jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例
$("#div1").remove();

jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例
$("#div1").empty();

过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class=“italic” 的所有

元素：
实例
$(“p”).remove(".italic");

(16)jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

实例样式表
下面的样式表将用于本页的所有例子：
.important { font-weight:bold; font-size:xx-large; } .blue { color:blue; }

jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
实例
$(“button”).click(function(){ $(“h1,h2,p”).addClass(“blue”); $(“div”).addClass(“important”); });

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

jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性：
实例
$(“button”).click(function(){ $(“h1,h2,p”).removeClass(“blue”); });

jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例
$(“button”).click(function(){ $(“h1,h2,p”).toggleClass(“blue”); });

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

返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css(“propertyname”);
下面的例子将返回首个匹配元素的 background-color 值：
实例
$(“p”).css(“background-color”);

设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css(“propertyname”,“value”);
下面的例子将为所有匹配元素设置 background-color 值：
实例
$(“p”).css(“background-color”,“yellow”);

设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({“propertyname”:“value”,“propertyname”:“value”,…});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});

(18)向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()

jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个元素的的直接父元素：
实例
$(document).ready(function(){ $(“span”).parent(); });

jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (< html >)。
下面的例子返回所有元素的所有祖先：
实例
$(document).ready(function(){ $(“span”).parents(); });

您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有元素的所有祖先，并且它是

元素：
实例
$(document).ready(function(){ $(“span”).parents(“ul”); });//遍历+选择器

jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于与

元素之间的所有祖先元素：
实例
$(document).ready(function(){ $(“span”).parentsUntil(“div”); });

(19)向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()
find()

jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个

元素的所有直接子元素：
实例
$(document).ready(function(){ $(“div”).children(); });

您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有

元素，并且它们是

的直接子元素：
实例
$(document).ready(function(){ $(“div”).children(“p.1”); });

jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于

后代的所有元素：
实例
$(document).ready(function(){ $(“div”).find(“span”); });

下面的例子返回

的所有后代：
实例
$(document).ready(function(){ $(“div”).find("*"); });

(20)在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 < h2> 的所有同胞元素：
实例
$(document).ready(function(){ $(“h2”).siblings(); });

您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于 < h2> 的同胞元素的所有 < p> 元素：
实例
$(document).ready(function(){ $(“h2”).siblings(“p”); });

jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 < h2> 的下一个同胞元素：
实例
$(document).ready(function(){ $(“h2”).next(); });

jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 < h2> 的所有跟随的同胞元素：
实例
$(document).ready(function(){ $(“h2”).nextAll(); });

jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 < h2> 与 < h6> 元素之间的所有同胞元素：
实例
$(document).ready(function(){ $(“h2”).nextUntil(“h6”); });

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

(21)缩小搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

jQuery first() 方法
first() 方法返回被选元素的首个元素。
下面的例子选取首个 < div> 元素内部的第一个 < p> 元素：
实例
$(document).ready(function(){ $(“div p”).first(); });

jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 < div> 元素中的最后一个 < p> 元素：
实例
$(document).ready(function(){ $(“div p”).last(); });

jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 < p> 元素（索引号 1）：
实例
$(document).ready(function(){ $(“p”).eq(1); });

jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 “url” 的所有 < p> 元素：
实例
$(document).ready(function(){ $(“p”).filter(".url"); });

jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 “url” 的所有 < p> 元素：
实例
$(document).ready(function(){ $(“p”).not(".url"); });

AJAX
(22)jQuery load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
这是示例文件（“demo_test.txt”）的内容：
< h2>jQuery AJAX 是个非常棒的功能！</h 2> < 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); }); });

(23)HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法：
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$(“button”).click(function(){ $.get(“demo_test.php”,function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });

$.get() 的第一个参数是我们希望请求的 URL（“demo_test.php”）。
第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
提示：这个 PHP 文件 (“demo_test.php”) 类似这样：
demo_test.php 文件代码:

<?php echo '这是个从PHP文件中读取的数据。'; ?>

jQuery $.post() 方法
$.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); }); });

$.post() 的第一个参数是我们希望请求的 URL (“demo_test_post.php”)。
然后我们连同请求（name 和 url）一起发送数据。
“demo_test_post.php” 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果。
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。
提示：这个 PHP 文件 (“demo_test_post.php”) 类似这样：
demo_test_post.php 文件代码:

<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '网站名: ' . $name; echo " \ n"; echo 'URL 地址: ' .$url; ?>

(24)jQuery 和其他 JavaScript 框架
正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。
jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

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”：
实例

jquery init函数 jquery中的函数_HTML_02