han_jQuery
作者:互联网
jQuery
- 什么是jQuery
1. 是一个JavaScript函数库
2. 是一个轻量级的“写得少,做的多的”JavaScript
3. 其功能包括有:
- HTML 元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- AJAX
- Utilities
- 还有部分插件 - jQuery使用方式
1. 从 jquery.com 下载 jQuery 库
2. 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery Production version - 用于实际的网站中,已被精简和压缩。 Development version - 用于测试和开发(未压缩,是可读的代码)<head><script src="jquery-1.10.2.min.js"></script></head>
从 CDN 中载入1.Staticfile CDN:<head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script></head>2.百度 CDN:<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script></head>3.又拍云 CDN:<head> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script></head>4.新浪 CDN:<head> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script></head>5.Google CDN:<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script></head>6.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() 执行对元素的操作
$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有 <p> 元素$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素$("#test").hide() - 隐藏 id="test" 的元素
入口函数
1.原始方式$(document).ready(function(){ // 开始写 jQuery 代码... });2.简略方式$(document).ready(function(){ // 开始写 jQuery 代码... });
- jQuery 入口函数与 JavaScript 入口函数的区别:
1. jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
2. JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
jQuery选择器
- jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 - jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。
- 元素选择器
- jQuery 元素选择器基于元素名选取元素。
-$("p")
:在页面中选取所有< p>元素
实例<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script></head><body><h2>这是一个标题</h2><p>这是一个段落。</p><p>这是另一个段落。</p><button>点我</button></body></html>
- .class 选择器
- jQuery 类选择器可以通过指定的 class 查找元素
- 语法:$(".test")
实例<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); });});</script></head><body><h2 class="test">这是一个标题</h2><p class="test">这是一个段落。</p><p>这是另外一个段落。</p><button>点我</button></body></html>
- #id 选择器
- jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
- 语法:$("#test")
实例<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});</script></head><body><h2>这是一个标题</h2><p>这是一个段落</p><p id="test">这是另外一个段落</p><button>点我</button></body></html>
语法 | 描述 |
---|---|
$("*") | 选取所有元素 |
$(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> 元素 |
事件
- 鼠标事件
- click:单击事件,指单击元素时发生click事件,click()方法触发单击事件
- 语法:$(selector).click()
或$(selector).click(function)
(参数:function,描述: 可选。规定当 click 事件发生时运行的函数。)
- 实例:单击 < p> 元素时警报文本:$("p").click(function(){ alert("段落被点击了。"); });
- dblclick:双击事件,指双击元素时触发 dblclick 事件,dblclick() 方法触发 dblclick 事件
- 语法:$(selector).dblclick()
或$(selector).dblclick(function)
(参数:function,描述: 可选。规定当 dblclick 事件发生时运行的函数。)
- 实例:双击 < p> 元素时警报文本:$("p").dblclick(function(){ alert("这个段落被双击。"); });
- mouseenter:鼠标指针悬浮事件,指当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件,mouseenter() 方法触发 mouseenter 事件
- 语法:$(selector).mouseenter()
或$(selector).mouseenter(function)
(参数:function,描述: 可选。规定 mouseenter 事件触发时运行的函数)
- 实例:当鼠标指针进入 < p> 元素时,设置背景色为黄色:$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });
- mouseleave:鼠标指针离开事件,指当鼠标指针离开被选元素时,会发生 mouseleave 事件,mouseleave() 方法触发 mouseleave 事件
- 语法:$(selector).mouseleave()
或$(selector).mouseleave(function)
(参数:function,描述: 可选。规定 mouseleave 事件触发时运行的函数)
- 实例:当鼠标指针离开 < p> 元素时,设置背景色为灰色:$("p").mouseleave(function(){ $("p").css("background-color","gray"); });
- hover :鼠标悬停事件,指鼠标指针在元素位置,会发生hover事件,hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数,方法触发 mouseenter 和 mouseleave 事件
- 语法:$(selector).hover(inFunction,outFunction)
(参数:inFunction,描述: 必需。规定 mouseenter 事件发生时运行的函数。 参数:outFunction。描述: 可选。规定 mouseleave 事件发生时运行的函数。 )
- 实例:当鼠标指针悬停在上面时,改变元素的背景颜色:
$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });
$( selector ).hover( handlerIn, handlerOut )相当于$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
$(selector).hover(handlerInOut)相当于$( selector ).on( "mouseenter mouseleave", handlerInOut );
- 键盘事件
- keypress:键被按下事件,keypress() 方法触发 keypress 事件
- 语法:$(selector).keypress()
或$(selector).keypress(function)
(参数:function。描述:可选。规定 keypress 事件触发时运行的函数)
- 实例:计算在 字段内的按键次数:$("input").keypress(function(){ $("span").text(i+=1); });
- keydown :键按下的过程事件,keydown() 方法触发 keydown 事件
- 语法:$(selector).keydown()
或$(selector).keydown(function)
(参数:function。描述:可选。规定 keydown 事件触发时运行的函数)
- 实例:当键盘键被按下时,设置 < input> 字段的背景颜色:$("input").keydown(function(){ $("input").css("background-color","yellow"); });
- keyup:键被松开事件,keyup() 方法触发 keyup 事件
- 语法:$(selector).keyup()
或$(selector).keyup(function)
(参数:function。描述:可选。规定 keyup 事件触发时运行的函数。)
- 实例:当键盘键被松开时,设置 < input> 字段的背景颜色:$("input").keyup(function(){ $("input").css("background-color","pink"); });
event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下 实例: 返回哪个键盘键被按下:$("input").keydown(function(event){ $("div").html("Key: " + event.which); });
- 表单事件
- submit:提交表单事件,submit() 方法触发 submit 事件,该事件只适用于 < form> 元素,当提交表单时,会发生 submit 事件
- 语法:$(selector).submit()
或$(selector).submit(function)
(参数:function。描述:可选。规定当 submit 事件被触发时运行的函数。)
- 实例:当提交表单时,显示警告框:$("form").submit(function(){ alert("提交"); });
event.preventDefault();:阻止表单被提交。
实例:$(document).ready(function(){ $("form").submit(function(event){ event.preventDefault(); alert("阻止表单提交"); }); });
- change:当元素的值改变时发生 change 事件(仅适用于表单字段),change() 方法触发 change 事件 注意:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。
- 语法:$(selector).change()
或$(selector).change(function)
(参数:function。描述:可选。规定针对被选元素当 change 事件发生时运行的函数。)
- 实例:当 < input> 字段改变时警报文本:$("input").change(function(){ alert("文本已被修改"); });
- **focus **:当元素获得焦点时(当通过鼠标点击选中元素或者通过tab键定位到元素时),发生foucs事件,focus() 方法触发 focus 事件
- 语法:$(selector).focus()
或$(selector).focus(function)
(参数:function。描述:可选。规定当 focus 事件发生时运行的函数。)
- 实例:添加函数到 focus 事件。当 < input> 字段获得焦点时发生 focus 事件在这里插入代码片$("input").focus(function(){ $("span").css("display","inline").fadeOut(2000); });
- blur:当元素失去焦点时发生blur事件,blur() 方法触发 blur 事件
- 语法:$(selector).blur()
或$(selector).blur(function)
(参数:function。描述:可选。规定当 blur 事件发生时运行的函数)
- 实例:添加函数到 blur 事件。当 < input> 字段失去焦点时发生 blur 事件:$("input").blur(function(){ alert("输入框失去了焦点"); });
- 文档/窗口事件
- load:当指定的元素加载时,会发生load事件。该事件适用于任何带有URL的元素(比如:图像、脚本、框架、内联框架)以及window对象。根据不同浏览器(Firefox和IE),如果图像已被缓存,则不会触发load事件。注意:还存在一个名为load()的jQuery AJAX方法。根据不同参数决定调用哪个方法( jQuery 版本 1.8 中已废弃。)
- 语法:$(selector).load(function)
(参数:function 。描述:必需。规定当指定元素加载完成时运行的函数。)
- 实例:当图像全部加载时警报文本:$("img").load(function(){ alert("图片已载入"); });
- resize:当调整浏览器大小时,发生resize事件。resize() 方法触发 resize 事件
- 语法:$(selector).resize()
或$(selector).resize(function)
(参数:function。描述:可选。规定当 resize 事件被触发时运行的函数。)
- 实例:对浏览器窗口调整大小进行计数:$(window).resize(function(){ $('span').text(x+=1); });
- scroll:事件适用于所有可滚动的元素和window对象(浏览器窗口)。scroll() 方法触发 scroll 事件
- 语法:$(selector).scroll()
或$(selector).scroll(function)
(参数:function。描述:可选。规定当 scroll 事件被触发时运行的函数。)
- 实例:对元素滚动的次数进行计数:$("div").scroll(function(){ $("span").text(x+=1); });
jQuery效果
- jQuery hide() 和 show() 方法来隐藏和显示 HTML 元素;Callback 函数在当前动画 100% 完成之后执行。
语法:$(selector).hide(speed,callback);
和$(selector).hide(speed,callback);
(可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒;可选的 callback 参数是隐藏或显示完成后所执行的函数名称。)
实例:<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><style>div{width: 130px;height: 50px;padding: 15px;margin: 15px;background-color: green;}</style><script>$(document).ready(function(){ $(".hidebtn").click(function(){ $("div").hide(1000,"linear",function(){ alert("Hide() 方法已完成!"); }); });});</script></head><body> <div>隐藏及设置回调函数</div><button class="hidebtn">隐藏</button> </body>第二个参数(linear)是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing",其他可以使用相关的插件)。
- jQuery toggle() 使用 toggle() 方法来切换 hide() 和 show() 方法
语法:$(selector).toggle(speed,callback);
(可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒;可选的 callback 参数是隐藏或显示完成后所执行的函数名称。)
实例:<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").toggle(); });});</script></head><body><button>隐藏/显示</button><p>这是一个文本段落。</p><p>这是另外一个文本段落。</p></body></html>
jQuery HTML
- 获得内容和设置内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值
text() 和 html() 方法来获得内容:<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });});</script></head><body><p id="test">这是段落中的 <b>粗体</b> 文本。</p><button id="btn1">显示文本</button><button id="btn2">显示 HTML</button></body></html>/val() 方法获得输入字段的值:<!DOCTYPE html><html><meta charset="utf-8"><head><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ alert("值为: " + $("#test").val()); });});</script></head><body><p>名称: <input type="text" id="test" value="菜鸟教程"></p><button>显示值</button></body></html>/设置内容 - text()、html() 以及 val():<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); });});</script></head><body><p id="test1">这是一个段落。</p><p id="test2">这是另外一个段落。</p><p>输入框: <input type="text" id="test3" value="菜鸟教程"></p><button id="btn1">设置文本</button><button id="btn2">设置 HTML</button><button id="btn3">设置值</button></body></html>
- 获取属性和设置属性 - attr()
///atrr()获得属性值<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ alert($("#runoob").attr("href")); });});</script></head><body><p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p><button>显示 href 属性的值</button></body></html>/atrr()设置多个属性<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); // 通过修改的 title 值来修改链接名称 title = $("#runoob").attr('title'); $("#runoob").html(title); });});</script></head><body><p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p><button>修改 href 和 title</button><p>点击按钮修改后,可以查看 href 和 title 是否变化。</p></body></html>
- prop()函数与attr()函数的区别
- prop()函数:
1. 如果有相应的属性,返回指定属性值。
2. 如果没有相应的属性,返回值是空字符串
- attr()函数:
1. 如果有相应的属性,返回指定属性值。
2. 如果没有相应的属性,返回值是 undefined。
- 在HTML中:
1. 元素本身就带有的固有属性,在处理时,使用prop方法。
2. 元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。
3. 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()。 - 添加新的 HTML 内容:
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
/通过 append() 和 prepend() 方法添加若干新元素<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>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); // 追加新元素}</script></head><body><p>这是一个段落。</p><button onclick="appendText()">追加文本</button></body></html>/通过 after() 和 before() 方法添加若干新元素<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>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); // 在图片后添加文本}</script></head><body><img src="/images/logo2.png" ><br><br><button onclick="afterText()">之后插入</button></body></html>
- 删除元素/内容
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
//jQuery remove() 方法删除被选元素及其子元素。<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); });});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">这是 div 中的一些文本。<p>这是在 div 中的一个段落。</p><p>这是在 div 中的另外一个段落。</p></div><br><button>移除div元素</button></body></html>///jQuery empty() 方法删除被选元素的子元素。<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").empty(); });});</script></head><body><div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">这是 div 中的一些文本。<p>这是在 div 中的一个段落。</p><p>这是在 div 中的另外一个段落。</p></div><br><button>清空div元素</button></body></html>///过滤被删除的元素,remove() 方法也可接受一个参数,允许您对被删元素进行过滤。<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("p").remove(".italic"); });});</script></head><body><p>这是一个段落。</p><p class="italic"><i>这是另外一个段落。</i></p><p class="italic"><i>这是另外一个段落。</i></p><button>移除所有 class="italic" 的 p 元素。</button></body></html>
- jQuery 尺寸方法
- width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
- height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
- innerWidth() 方法返回元素的宽度(包括内边距)。
- innerHeight() 方法返回元素的高度(包括内边距)。
- outerWidth() 方法返回元素的宽度(包括内边距和边框)。
- outerWidth() 方法返回元素的宽度(包括内边距和边框)。
/width() 和 height() 方法<!DOCTYPE html><html><head> <meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 的宽度是: " + $("#div1").width() + ""; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 元素的尺寸</button><p>width() - 返回元素的宽度</p><p>height() - 返回元素的高度</p></body></html>/innerWidth() 和 innerHeight() 方法<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 宽度: " + $("#div1").width() + ""; txt+="div 高度: " + $("#div1").height() + ""; txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + ""; txt+="div 高度,包含内边距: " + $("#div1").innerHeight(); $("#div1").html(txt); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 元素的尺寸</button><p>innerWidth() - 返回元素的宽度 (包含内边距)。</p><p>innerHeight() - 返回元素的高度 (包含内边距)。</p></body></html>///outerWidth() 和 outerHeight() 方法<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="div 宽度: " + $("#div1").width() + ""; txt+="div 高度: " + $("#div1").height() + ""; txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + ""; txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); });});</script></head><body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div><br><button>显示 div 元素的尺寸</button><p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p><p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p></body></html>
- jQuery 元素标签的关系
标签家谱
jQuery AJAX
- AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。
方法 | 描述 |
---|---|
$.ajax() | 执行异步 AJAX 请求 |
$.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
$.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
$.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
$.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
$.param() | 创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串) |
load() | 从服务器加载数据,并把返回的数据放置到指定的元素中 |
- $.ajax()
- 定义: ajax() 方法用于执行 AJAX(异步 HTTP)请求。
- 语法:$.ajax({name:value, name:value, ... })
参数
名称 | 值/描述 |
---|---|
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
dataType | 预期的服务器响应的数据类型。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:“application/x-www-form-urlencoded”。 |
data | 规定要发送到服务器的数据。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
async | 布尔值,表示请求是否异步处理。默认是 true。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
scriptCharset | 规定请求的字符集。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(result){ $("#div1").html(result); }}); });});</script></head><body><div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div><button>获取其他内容</button></body></html>
- $.get()
- 定义: $ .get() 方法使用 HTTP GET 请求从服务器加载数据。
- 语法:$.get(URL,data,function(data,status,xhr),dataType)
参数
参数 | 描述 |
---|---|
URL | 必需。规定您需要请求的 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。默认地,jQuery 会智能判断。 |
实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $.get("/try/ajax/demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });});</script></head><body><button>发送一个 HTTP GET 请求并获取返回结果</button></body></html>
- $.post()
- $ .post() 方法使用 HTTP POST 请求从服务器加载数据。
- 语法:$(selector).post(URL,data,function(data,status,xhr),dataType)
参数
参数 | 描述 |
---|---|
URL | 必需。规定将请求发送到哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function(data,status,xhr) | 可选。规定当请求成功时运行的函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。 默认地,jQuery 会智能判断。 |
实例
/使用 HTTP POST 请求从服务器加载数据:<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $.post("/try/ajax/demo_test_post.php",{ name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });});</script></head><body><button>发送一个 HTTP POST 请求页面并获取返回内容</button></body></html>///使用 AJAX 的 POST 请求来改变元素的文本:<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.php",{suggest:txt},function(result){ $("span").html(result); }); });});</script></head><body><p>在以下输入框中输入名字:</p>第一个名称:<input type="text" /><p>匹配项: <span></span></p><p>该实例的PHP代码 (<a href="demo_ajax_gethint.txt" target="_blank">demo_ajax_gethint</a>) </p></body></html>
- param()
- param() 方法创建数组或对象的序列化表示形式。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
- 语法:$.param(object,trad)
参数
参数 | 描述 |
---|---|
object | 必需。规定要序列化的数组或对象。 |
trad | 可选。布尔值,指定是否使用参数序列化的传统样式。 |
实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue"; $("button").click(function(){ $("div").text($.param(personObj)); });});</script></head><body><button>序列化对象</button><div></div></body></html>
- load()
- 定义:load() 方法从服务器加载数据,并把返回的数据放置到指定的元素中。
- 语法:$(selector).load(url,data,function(response,status,xhr))
参数
参数 | 描述 |
---|---|
url | 必需。规定您需要加载的 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function | 可选。规定 load() 方法完成时运行的回调函数。 |
实例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ $("#div1").load("/try/ajax/demo_test.txt"); });});</script></head><body><div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div><button>获取外部内容</button></body></html>
如何使用其他框架并与jQuery共存
- noConflict() 方法
- 定义:noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。
实例
通过全名替代简写的方式来使用 jQuery:<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$.noConflict();jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍然在工作!"); });});</script></head><body><p>这是一个段落。</p><button>点我</button></body></html>/noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>var jq=$.noConflict();jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍然在工作!"); });});</script></head><body><p>这是一个段落。</p><button>点我</button></body></html>如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$.noConflict();jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍然在工作!"); });});</script></head><body><p>这是一个段落。</p><button>点我</button></body></html>
标签:jQuery,function,han,元素,selector,事件,click 来源: https://blog.51cto.com/u_15180480/2731679