han_jQuery

2024-03-13 17:56:21

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>

han_jQuery

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 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
    han_jQuery

jQuery选择器 

	-  jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
	-  jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

  1. 元素选择器
    - 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>

  1. .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>

  1. #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> 元素

事件

  1. 鼠标事件
    - 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 );

  1. 键盘事件
    - 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);
 });

  1. 表单事件
    - 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("输入框失去了焦点"); });
  2. 文档/窗口事件
    - 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 元素标签的关系

han_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>

借鉴于菜鸟教程，详细请点击

上一篇：han_反射


下一篇：han_类的加载顺序