首页 / JQUERY / han_jQuery

han_jQuery

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了han_jQuery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含27471字，纯文字阅读大概需要40分钟。

内容图文

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_jQuery全部内容，希望文章能够帮你解决han_jQuery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1000345.html

来源：【匿名】