百度 CDN	<head><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
新浪 CDN	<head><script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>
Google CDN	<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head>
Microsoft CDN	<head><script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>

jQuery语法

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

$美元符号定义 jQuery
Selector 查询HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪事件

$(document).ready(function(){ // 开始写 jQuery 代码... });

简写：

$(function(){ // 开始写 jQuery 代码... });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

区别

JavaScript的入口函数

Window.onload

jQuery 的入口函数

$(function()

执行次数

仅执行一次，多次执行会覆盖掉之前的效果

支持多次执行，效果会累加

执行时机

必须等待网页全部加载完毕，才能执行包裹代码

只需要等待网页中的DOM加载完毕，就能执行包裹代码

如果在文档没有完全加载之前就运行函数，操作可能失败。

jQuery选择器

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

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

元素选择器

在页面中选取所有 <p> 元素:$("p")

#id 选择器

在页面中选取d="test" 属性的元素$("#test")

.class 选择器

在页面中选取所有带有 class="test" 属性的元素$(".test")

jQuery事件

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

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

二. jQuery 效果

隐藏和显示hide() show() toggle()

语法:

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

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

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

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

$(document).ready(function(){

$(".hidebtn").click(function(){ $("div").hide(1000,"linear",function(){ alert("Hide() 方法已完成!"); }); }); });

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）

toggle()

$("button").click(function(){ $("p").toggle(); });

淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()

fadeIn() fadeOut() fadeToggle() 语法:

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

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

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

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

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

fadeTo()

语法:

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

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

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

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

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7); });

滑动 slideDown() slideUp() slideToggle()

语法:

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

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

$("#flip").click(function(){ $("#panel").slideDown(); });

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

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

动画 animate()

语法：

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

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

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

$("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()

语法:

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

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

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

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown(5000);

$("#panel").slideUp(5000);

});

$("#stop").click(function(){

$("#panel").stop(true);

});});

链式调用(Chaining)

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

三．jQuery HTML

获得内容 - text()、html() 以及 val()

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

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

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

获取属性 - attr()

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

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

prop()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

1.如果有相应的属性，返回指定属性值。

2.如果没有相应的属性，返回值是 undefined。

设置内容 - text()、html() 以及 val()

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

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

});

$("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() prepend() after() before()

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

删除元素remove() empty()

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

过滤被删除的元素

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

$("p").remove(".italic");

获取并设置 CSS 类addClass() removeClass() toggleClass() css()

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

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

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

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

或

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

css() 方法

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

返回CSS属性

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

设置 CSS 属性

语法：

设置一个 CSS 属性的语法

css("propertyname","value");

设置多个 CSS 属性的语法

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

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

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

尺寸width() height() innerWidth() innerHeight() outerWidth() outerHeight()

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

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

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

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

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

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

var txt="";

txt+="div 的宽度是: " + $("#div1").width() + "</br>";

txt+="div 的高度是: " + $("#div1").height();

$("#div1").html(txt);

});

四. jQuery遍历

祖先parent() parents() parentsUntil()

parent() 返回被选元素的直接父元素。
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 返回介于两个给定元素之间的所有祖先元素。

后代 children() find()

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

同胞(siblings)

siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。
prev() 返回被选元素的上一个同胞元素。
prevAll() 返回被选元素的所有前面的同胞元素。
prevUntil() 返回介于两个给定参数之间的所有前面的同胞元素。

过滤

first() 方法返回被选元素的首个元素。

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

last() 方法返回被选元素的最后一个元素。

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

eq() 方法返回被选元素中带有指定索引号的元素。

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

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

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

not() 方法返回不匹配标准的所有元素。

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

五. jQuery - AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

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

$("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() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：$.get(URL,callback);

$("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 参数是请求成功后所执行的函数名。

$("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 API 手册

https://www.runoob.com/manual/jquery/

码农公寓

jQuery API 手册

一. jQuery教程

jQuery特性

jQuery安装

下载 jQuery

引用CDN

jQuery语法

文档就绪事件

jQuery选择器

元素选择器

#id 选择器

.class 选择器

jQuery事件

二. jQuery 效果

隐藏和显示hide() show() toggle()

toggle()

淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()

fadeTo()

滑动 slideDown() slideUp() slideToggle()

动画 animate()

停止动画stop()

链式调用(Chaining)

三．jQuery HTML

获得内容 - text()、html() 以及 val()

获取属性 - attr()

设置内容 - text()、html() 以及 val()

text()、html() 以及 val() 的回调函数

设置属性 - attr()

attr() 的回调函数

添加元素append() prepend() after() before()

删除元素remove() empty()

过滤被删除的元素

获取并设置 CSS 类addClass() removeClass() toggleClass() css()

css() 方法

返回CSS属性

设置 CSS 属性

尺寸width() height() innerWidth() innerHeight() outerWidth() outerHeight()

四. jQuery遍历

祖先parent() parents() parentsUntil()

后代 children() find()

同胞(siblings)

过滤

五. jQuery - AJAX

语法：$.get(URL,callback);

语法:$.post(URL,data,callback);

jQuery API 手册

相关文章