jQuery详解 - 网站源码_资源分享

【38】

甚么是 jQuery ？

jQuery 是两个 JavaScript C#。 jQuery 是两个轻量的 “写的少，做的多” 的 JavaScript 库。

jQuery 库包涵下列机能：

HTML 原素挑选出 HTML 原素操作方式 CSS 操作方式 HTML 该事件表达式 JavaScript 特技和动画电影 HTML DOM 结点和修正 AJAX Utilities

提示信息：除此以外，Jquery 还提供更多了大批的应用程序。

此基础jQuery 句法

jQuery 中$的涵义

促进作用 1：$(function)

1.相等于 window.onload=function(){}

2.机能比window.onload更强悍

1) window onload两个网页根本无法写两个,但能写数个$() 而不武装冲突

2) window onload要等整座网页读取瘤果再继续执行（主要包括相片、源文件、音频等），

但$的继续执行天数要早

3.完备形式是$(document).ready(…….);

促进作用 2：$(selector) 示例，jQuery具备强悍的示例机能

jQuery 句法是透过挑选出 HTML 原素，并对挑选出的原素继续执行这类操作方式。

通过 jQuery，您能挑选出（查阅，query） HTML 原素，并对它继续执行 “操作方式”（actions）。

此基础句法： $(selector).action()

英镑记号表述 jQuery 选择符（selector）“查阅” 和 “搜寻” HTML 原素 jQuery 的 action () 继续执行对原素的操作方式

所有 jQuery 表达式位于两个 document ready 表达式中：

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

这是为了防止文档在完全读取（就绪）之前运行 jQuery 代码，即在 DOM 读取完成后才能对 DOM 进行操作方式。

如果在文档没有完全读取之前就运行表达式，操作方式可能失败。

提示信息：简洁写法（与以上写法效果相同）:

$(function(){//这是jQuery的入口表达式 // 开始写 jQuery 代码… });

jQuery 示例

jQuery 示例允许您对 HTML 原素组或单个原素进行操作方式。 jQuery 示例基于原素的 id、类、类型、属性、属性值等 “搜寻”（或选择）HTML 原素。它基于已经存在的 CSS 示例，除此以外，它还有一些自表述的示例。 jQuery 中所有示例都以英镑记号开头：$()。

示例学习 A（基本示例）

对象之间的转换

className， innerHTML， value

addClass()， html()， val()

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

1、DOM对象转换成jQuery对象

$(DOM对象)

2、jQuery对象转换成DOM对象

jQuery对象[index]

jQuery对象.get(index)

基本示例

标签示例 $(“a”) ID示例 $(“#id”) $(“p#id”) 类示例 $(“.class”) $(“h2.class”)通配示例 $(“*”)

示例学习 B（普通示例）

并集示例$(“elem1,elem2,elem3”) 后代示例$(ul li) 父子示例 $(ul>li) 后面第两个兄弟原素 prev + next

后面所有的兄弟原素 prev ~ next

<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title></title> <style> div{ height: 200px; border: 3px solid red; } </style> <script src=“js/jquery-1.9.1.js” type=“text/javascript” charset=“utf-8”></script> <script type=“text/javascript”> $(function(){ // div下面包涵的所有span标签 // $(“div span”).css(“background-color”,”red”); // div下面的直系子原素 // $(“div>span”).css(“background-color”,”green”); // 紧接着的span标签 // $(“#sp1 + span”).css(“background-color”,”red”); //获得指定原素后面同级的span标签 $(“#sp1~span”).css(“background-color”,“aqua”); }) </script> </head> <body> <div> <span id=“sp1”>北京尚学堂</span> <span>北京尚学堂</span><br /> <span>北京尚学堂</span><br /> <p> <span>北京尚学堂</span><br /> <span>北京尚学堂</span><br /> <span>北京尚学堂</span><br /> </p> </div> </body> </html>

示例学习 C（子示例）

//只是第一行变颜色 $(“ul li:first”).css(“background-color”,“red”); $(“ul li”).first().css(“background-color”,“red”); //最后一行变颜色 $(“ul li:last”).css(“background-color”,“green”); $(“ul li”).last().css(“background-color”,“green”); //获得索引是奇数对象索引从0开始 $(“ul li:odd”).css(“background-color”,“green”); //获得索引是偶数对象索引从0开始$(“ul li:even”).css(“background-color”,“green”); //获得索引下标位3的对象 $(“ul li:eq(3)”).css(“background-color”,“green”); //获得大于指定索引下标的对象 $(“ul li:gt(3)”).css(“background-color”,“green”); //获得小于指定索引下标的对象 $(“ul li:lt(3)”).css(“background-color”,“green”); /**************子示例*************************/ $(“ul li:nth-child(1)”).css(“background-color”,“green”); $(“ul li:first-child”).css(“background-color”,“darkred”); $(“ul li:last-child”).css(“background-color”,“darkred”); $(“ul li:only-child”).css(“background-color”,“#00A40C”);

示例学习 D（属性示例）

//type属性等于text $(“input[type=text]”).css(“background-color”,“#00A40C”); // name属性用z开头的$(“input[name^=z]”).css(“background-color”,“#FF0000”); // name属性同d结尾的 $(“input[name$=d]”).css(“background-color”,“green”); //name属性中包涵p 的原素 $(“input[name*=p]”).css(“background-color”,“green”); //复合属性示例，需要同时满足数个条件时使用$(“input[type=text][name^=z]”).css(“background-color”,“deep pink”);

示例学习 E（表单示例）

// √ 获得form表单中的所有的表单项var inp= $(“:input”) //获得标签名称是input 的所有的标签对象 var inp2=$(“input”); alert(inp.length+“—-“+inp2.length); $(“input[type=text]”) // √ input标签 type属性等于text所对应的对象 $(“:text”).css(“background-color”,“green”); $(“:password”).css(“background-color”,“red”); /************表单属性示例*****************/ //获得input标签中含有disabled属性的对象var but= $(“input:disabled”); alert(but.val()); //√ 获得含有checked属性的对象 var ch =$(“input:checked”);

总结：

2）下列的示例都是在基本和层级示例的后面追加：

简单示例(比如：$(“li：first”)或 $(li).first())内容示例(比如：$(“div:contains(John)”))可见性示例(比如：$(“tr:visible”))属性示例(比如：$(“input[name^=news]”))子原素示例(比如：$(“ul li:nth-child(2)”))

以上除了属性示例是“[]”表示，其他都是“:”表示

3）表单示例:唯一不需要在基本和层级示例后追加，而独立使用的示例。

比如：$(“:input”)

(1)匹配所有的表单原素标签。

(2)即匹配所有 input, textarea, select 和 button 原素

操作方式网页的样式 A

//获得div对象 var div =$(“#div1”); //获得css样式 var wid=div.css(“width”); var hi=div.css(“height”); console.log(wid+“—-“+hi); //操作方式原素对象的cssdiv.css(“width”,“400px”); div.css(“height”,“500px”); div.css(“background-color”,“red”); div.css(“backgroundColor”,“red”); //以上内容的综合—{key1:value1,key2:value2}—json 数据格式 div.css({width:300px,height:300px,backgrou nd-color:red});

操作方式网页的样式 B

如果当网页中的css样式比较多的时候能透过添加类的方式添加样式，方法如下：

两种

$(“#bu1”).click(function(){ //获得div对象 –透过添加类的方式添加css样式 //$(“#div1”).attr(“class”,”div”); $(“#div1”).addClass(“div”); })

获得网页原素的属性

$(“#bu1”).click(function(){ //获得原素对象 var tex=$(“#inp1”); //获得原素对象的属性 var te=tex.attr(“type”); var cl =tex.attr(“class”); //获得原素固有的属性值 var val =tex.attr(“value”); console.log(te+“——“+cl+“—–“+val); //获得文本框实时输入的值var val2=tex.val(); // alert(val2); }

操作方式网页原素的属性

tex.attr(“type”,“button”); tex.attr(“value”,“测试按钮”); //支持json数据格式tex.attr({“type”:“button”,“value”:“测试按钮”}); var ch= $(“#fav”).attr(“checked”); var flag=$(“#fav”).prop(“checked”,true);

想要操作方式原素的属性有几种方式，请列举。

对象名.attr(“属性名”，“属性值“)。对象名.attr({属性名1：“属性值1“，属性名2：“属性值2“…})。对象名.prop(“属性名”，布尔值)。(限于checked、selected、disabled属性) 对象名.addClass(“class属性值”)

对象名.removeClass(“class属性值”)

对象名.toggleClass(“class属性值”)// 如果存在（不存在）就删除（添加）两个类

获得网页的文本和值

//获得div原素对象 var div =$(“#div1”); //获得原素的内容含有HTML的标签的var ht=div.html(); console.log(ht); //只是获得文本内容，不含有HTML标签 var te =div.text(); console.log(te); //获得文本框的值 var val=$(“#inp1”).val(); console.log(val);

操作方式网页的文本和值

能识别里面的html代码 div.html(“<b>我们都爱笑</b>”); 识别不了里面的HTML代码 div.text(div.text()+“<b>我们都爱笑</b>”); 获得文本的值 $(“#inp1”).val(“sxt”); 注意特殊情况： Select 、textarea 两个标签获得值得时候需要用val()

jQuery操作方式原素属性：

2）修正

Ø 对象名.attr(“属性名”,”属性值”);

总结表单标签的checked、selected、disabled、onsubmit属性：

1）表单标签有input, textarea, select 和 button 原素

2）checked和selected意思一样，都是是否被选中。

（1）checked只属于input原素。

（2）selected只属于select原素。

3）disabled(无效的)，所有的表单原素都拥有。

4）onsubmit(可提交的)，所有的表单原素都拥有。(一般直接使用form上的)

5）checked、selected、disabled都能被DOM和JQ以boolean值的

该事件处理 A

/*网页读取完继续执行的操作方式*/ $(function(){}) jQuery(function(){}) $(document).ready(function(){}) $(function(){ /*******该事件的此基础绑定*************/ $(“#bu1”).click(function(){ alert(“单击该事件”); }) $(“#bu1”).dblclick(function(){ alert(“双击该事件”); }) /*******bind该事件绑定**************/ $(“#bu2”).bind(click,function(){ alert(“单击该事件绑定”); }) //内容还支持json数据格式 $(“#bu2”).bind({ click:function(){}, dblclick:function(){}, blur:function(){} }) /*********one一次该事件绑定*************/ $(“#bu3”).one(click,function(){ alert(“一次该事件绑定”); })

该事件处理 B

/*********trigger该事件操作方式****************/ $(“#bu4”).click(function(){ $(“#bu1”).trigger(dblclick); $(“#bu3”).trigger(click); }) /********该事件的解绑*********************/ $(“#bu5”).click(function(){ //该事件的解绑 //解绑指定对象上的所有该事件 $(“#bu1”).unbind(); //解绑指定的该事件 $(“#bu1”).unbind(“dblclick”); }) $(“.bu6”).click(function(){ alert(“单击该事件的绑定”); }) $(“.bu6”).live(click,function(){ alert(“单击该事件绑定”); }) $(“body”).append(<input type=”button” name=”” id=”” class=”bu6″ value=”该事件操作方式 2″ />);

1. 操作方式网页原素的属性2

(1) 想要操作原素的属性有几种方式，请列举。

1）对象名.attr(“属性名”，“属性值“)。

2）对象名.attr({属性名1：“属性值1“，属性名2：“属性值2“…})。

3）对象名.prop(“属性名”，布尔值)。(限于checked、selected、disabled属性)

4）对象名.addClass(“class属性值”)

对象名.removeClass(“class属性值”)

对象名.toggleClass(“class属性值”)// 如果存在（不存在）就删除（添加）两个类

(2) attr(“checked”)和prop(“checked”)这两个操作方式方式有甚么区别？使用场景是甚么？

1、区别：

2、使用场景：

1）attr能操作方式所有的属性。

2）prop当操作方式checked、selected、disabled等属性，返回的boolean值，非常适合作为条件判断。

(3) prop(“checked”,true) 这句代码是甚么意思。

把使用该方法的对象的checked属性值设定为“checked“。

2. 操作方式网页的文本和值1

(1) 请写出html()和text()在获得值得时候两者的区别,和使用的场景。

类比于js的对象名.innerHTML和对象名.innerText。

1、区别：

1）对象名.html()//返回当前对象的所有内容，主要包括HTML标签

2）对象名.text()//返回当前对象的所有标签，不主要包括HTML标签

2、使用场景：

1）html()用于查看该对象的内包涵的所有原素信息。

2）text()用于查看该对象的纯文本信息。

(2) 请说出val()和html()在获得值得时候两者的差异。

2）

3. 操作方式网页的文本和值2

(1) 请写出html()和text()在赋值得时候两者的区别,和使用的场景。

1、区别：

1）对象名.html(“新的内容)//新的内容会将原有内容覆盖，HTML标签会被解析继续执行

2）对象名.text(“新的内容”)//新的内容会将原有内容覆盖，HTML标签不会被解析。

2、使用场景：

1）html()用于修正html文档对象的结构。

2）text()用于单纯修正文档对象的显示文本内容。

(2) 请说出val()和html()在赋值得时候两者的差异。

1) 对象名.val(“value属性的值”)。

2) 对象名.html(“对象中包涵的所有内容”)。

3）赋值没有甚么区别，都是使用字符串赋值。

4）注意select、textarea两个标签不是透过html赋值，而是透过val()赋值。

5. 操作方式网页的原素2

(1) 请问replaceAll(“div p:nth-child(5)”);代码是甚么意思？

使用该对象替换掉每个div内的第5个p原素对象。

(2) 请问replaceWith()和replaceAll()方法之间的区别是甚么?

1)区别:

对象名.replaceWith():将所有匹配的原素替换成指定的HTML或DOM原素。对象名.replaceAll():用匹配的原素替换掉所有 selector匹配到的原素。

(1)replaceWith()的参数是newContent: String

(能是HTMLString或Selector)，如下两种方式：

(2)replaceAll()的参数是target: Selector

(3) 请问 remove()和empty()之间的区别是甚么？

1) empty():删除匹配的原素中所有的子节点(子原素)。

2) remove():删除所有匹配的原素。

6. 该事件处理1

(1) 请说出 bind() 该事件的促进作用和使用场景是甚么？请列举

1) 促进作用：为每个匹配原素的特定该事件绑定该事件处理表达式。

2) 使用场景：为指定原素绑定指定该事件。

3) 比如：给id为but的原素绑定单击和双击该事件的处理表达式。

$(“#but”).bind({ click:function(){alert(“单击该事件“)}, dbclick:function(){“双击该事件“} })

(2) one()该事件的使用的场景是甚么？

使用场景：绑定只触发一次的该事件处理表达式。

7. 该事件处理2

(1) 请说出trigger()这个该事件的促进作用和使用，我们能在甚么位置来使用这个标签？

1）促进作用：

Ø 在该事件绑定的表达式中声明，触发其他该事件处理表达式。

Ø 把已经绑定在原素上的该事件处理表达式，直接拿来用。

Ø 不需要再写重复的表达式代码，减少了代码量。

2）使用：

$(“#bu4”).click(function(){ $(“#bu1”).trigger(dblclick); $(“#bu3”).trigger(click); })

3）位置：处理该事件的表达式内部。

(2) 在JQ中如何能解绑两个对象上的所有该事件，如何解绑两个对象上的单个该事件？

1) 对象名.unbind();

2) 对象名.unbind(“该事件类型”);

(3) live这个方法是解决甚么问题的，现在还继续使用吗？

解决：

1）使用 .bind() 时，示例匹配的原素会附加两个该事件处理表达式，而以后再添加的原素则不会有。为此需要再使用一次 .bind() 才行。

2）而使用.live()时，不管是现在还是后来添加的原素都会附加该事件处理表达式。

使用情况：

1）在1.7版本后的jQuery无法使用，必须是版本是1.7或其之前的版本才能使用

动画电影机能 A

//获得div对象 var div1 =$(“#div1”); //3s隐藏动画电影 div1.hide(3000); div1.show(3000); //隐藏的显示 —显示的隐藏 //$(“div”).toggle(3000); //滑动上 div1.slideUp(3000); //滑动下 div1.slideDown(3000); //滑动上–滑动下滑动下—滑动上$(“div”).slideToggle(3000); //淡出 div1.fadeOut(3000); //淡入 div1.fadeIn(3000);

动画电影机能 B

//获得div对象var div1 =$(“#div1”); //3s隐藏动画电影 div1.hide(3000); div1.show(3000); //隐藏的显示 —显示的隐藏 //$(“div”).toggle(3000); //滑动上div1.slideUp(3000); //滑动下 div1.slideDown(3000); //滑动上–滑动下滑动下—滑动上 $(“div”).slideToggle(3000); //淡出div1.fadeOut(3000); //淡入 div1.fadeIn(3000);

jQuery DOM 操作方式

jQuery 中非常重要的部分，就是操作方式 DOM 的能力。

三个简单实用的用于 DOM 操作方式的 jQuery 方法：

text () – 设置或返回所选原素的文本内容 html () – 设置或返回所选原素的内容（主要包括 HTML 标记） val () – 设置或返回表单字段的值

实例：

//获得内容 – text ()、html () 以及 val ()$(“#btn1”).click(function(){ alert(“Text: “ + $(“#test”).text()); }); $(“#btn2”).click(function(){ alert(“HTML: “ + $(“#test”).html()); }); //设置内容 – 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”); });

jQuery 操作方式 CSS

jQuery 拥有若干进行 CSS 操作方式的方法。我们将学习下面这些：

addClass () – 向被选原素添加两个或数个类 removeClass () – 从被选原素删除两个或数个类 toggleClass () – 对被选原素进行添加 / 删除类的切换操作方式 css () – 设置或返回样式属性

实例

$(“button”).click(function(){ $(“h1,h2,p”).addClass(“blue”); $(“div”).addClass(“important”); }); //使用此方法，这类标签会增添class这个属性，如果此时在配合css样式

例如：

.blue { color:blue; } //就能让标签达到变色的效果。

jQuery 结点

甚么是结点？

jQuery 结点，意为 “移动”，用于根据其相对于其他原素的关系来 “搜寻”（或挑选出）HTML 原素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的原素为止。

下图展示了两个家族树。透过 jQuery 结点，您能够从被选（当前的）原素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行结点。

结点 DOM 树

这些 jQuery 方法很有用，它用于结点 DOM 树：

parent() ：方法返回被选原素的直接父原素。 parents()：方法返回被选原素的所有祖先原素，它一路向上直到文档的根原素 ()。 parentsUntil()：方法返回介于两个给定原素之间的所有祖先原素。 children () 方法返回被选原素的所有直接子原素。 find () 方法返回被选原素的后代原素，一路向下直到最后两个后代。

下面的例子返回介于 <span>与<div> 原素之间的所有祖先原素：

实例

$(document).ready(function(){ $(“span”).parentsUntil(“div”); });

下面的例子返回属于 <div>后代的所有 <span>原素：

实例

$(document).ready(function(){ $(“div”).find(“span”); });

jQuery – AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部网页的情况下，实现了对部分网页的更新。

jQuery load () 方法jQuery load () 方法是简单但强大的 AJAX 方法。load () 方法从服务器读取数据，并把返回的数据放入被选原素中。

句法:

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

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查阅字符串键 / 值对集合。

可选的 callback 参数是 load () 方法完成后所继续执行的表达式名称。

可选的data (Map) 是发送至服务器的 key/value 数据。

实例：

$(“#box”).load(“testa.html”,{name:“bingo”,sex:“man”});

可选的 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); }); });

jQuery – AJAX get () 和 post () 方法

jQuery get () 和 post () 方法用于透过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求 – 响应的常用方法是：GET 和 POST。

GET – 从指定的资源请求数据 POST – 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

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

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:“菜鸟教程 – 学的不仅是技术，更是梦想！” }, function(data,status){ alert(” 数据: \n” + data + “\n 状态: “ + status); }); });

$.post表达式会从网页传信息到php网页，PHP网页透过

$.get () 和 $.post () 方法是 jQuery 中的全局表达式，而在此之前讲的 load () 是对 jQuery 对象进行操作方式的。

1. jQuery封装原理

(1) 请问jQuery的底层是如何封装的？

使用闭包