jQuery 使用

2022-06-10 10:15:45

1. jQuery

jQuery的字面意思其实就是JavaScript和查询（Query），即用于辅助开发JavaScript的库。jQuery是继prototype之后的又一个优质的Javascript库，属于开源编程语言。Query使用户可以更加方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，而且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详尽，同时还有很多成熟的插件可供选择。jQuery可以使用户的html页面保持代码和html的内容分离，也就是说，不需要再在html里面插入一堆js来调用命令了，只需要定义id即可。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

1). 您可以从网页中添加 jQuery

①从官网 jQuery 下载 jQuery 库
②从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

2).下载 jQuery：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

3). 什么是 jQuery ？

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

4). jQuery版本支持

在使用jQuery的时候你应该要注意的是 jQuery 2版本以上是不支持 IE6，7，8 浏览器的。那么如果使用的是 IE6，7，8 浏览器的话，你就得选择使用jQuery1.9版本的，或者，你也可以通过条件注释在使用 IE6，7，8 浏览器的时候只允许包含 jQuery 1.9.

注释代码如下：

<!--[if lt IE 9]> 
    <script src="jquery-1.9.0.js"></script> 
<![endif]--> 
<!--[if gte IE 9]><!--> 
    <script src="jquery-2.0.0.js"></script> 
<!--<![endif]-->

5). CDN加载

# 百度
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
# 又拍云
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
# 新浪
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
# 谷歌
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
# 微软
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

6). jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：

$(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素

7). 文档就绪事件

为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

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

可简写为：

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

8). jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

元素选择：$("p")
#id 选择器：$("#test")
.class 选择器：$(".test")
CSS 选择器：$("p").css("background-color","red");

语法	描述
$("*")	选取所有元素
$(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> 元素

9). jQuery 事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click(单击)	keypress(按键)	submit(提交)	load(加载)
dblclick(双击)	keydown(按下键)	change(改变)	resize(改变大小)
mouseenter(鼠标进入)	keyup(弹起键)	focus(焦点)	scroll(滚动)
mouseleave(鼠标离开)		blur(失去焦点)	unload(未加载)
hover(悬停)

比较keypress、keydown与keyup
keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

2. jQuery效果

1). 隐藏和显示

语法：

# 显示
$(selector).show(speed,callback);
# 隐藏
$(selector).hide(speed,callback);                
# 自动显示或隐藏
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
可选的 callback 参数，具有以下三点说明：
- $(selector)选中的元素的个数为n个，则callback函数会执行n次
- callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行
- callback既可以是函数名，也可以是匿名函数

2). 淡入淡出

# 淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
# 淡出可见元素
$(selector).fadeOut(speed,callback);
# 在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

# 允许渐变为给定的不透明度（值介于 0 与 1 之间）
$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

3). 滑动

# 向下滑动元素
$(selector).slideDown(speed,callback);
# 向上滑动元素
$(selector).slideUp(speed,callback);
# 在 slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

4). 动画

# 创建自定义动画
 $(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

注：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

I. 操作多个属性

  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });

当使用 animate() 时，必须使用 Camel (驼峰)标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
II. 使用相对值

$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });

III. 使用预定义的值

  $("div").animate({
    height:'toggle'
  });

IV. 使用队列功能

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

5). 停止动画

# 停止动画
$(selector).stop(stopAll,goToEnd);

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

6). Callback 方法

Callback 函数在当前动画 100% 完成之后执行。

7). Chaining

通过 jQuery，可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

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

3. jQuery Html

1). jQuery 获取

I. 获取内容

text() - 设置或返回所选元素的文本内容 $("#test").text()
html() - 设置或返回所选元素的内容（包括 HTML 标记） $("#test").html()
val() - 设置或返回表单字段的值 $("#test").val()

II. 获取属性

attr() - 用于获取属性值: $("#w3s").attr("href")

2). jQuery 设置

I. 设置内容

text() - 设置或返回所选元素的文本内容 $("#test1").text("Hello world!");
html() - 设置或返回所选元素的内容（包括 HTML 标记） $("#test2").html("<b>Hello world!</b>");
val() - 设置或返回表单字段的值 $("#test3").val("Dolly Duck");
text()、html() 以及 val() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

  $("#test1").text(function(i,origText){ 
    return "Old text: " + origText + " New text: Hello world! 
    (index: " + i + ")"; 
  });
  $("#test2").html(function(i,origText){ 
    return "Old html: " + origText + " New html: Hello <b>world!</b> 
    (index: " + i + ")"; 
  });

II. 设置属性

attr() - 用于设置/改变属性值

$("#w3s").attr({ 
    "href" : "//www.w3cschool.cn/jquery", 
    "title" : "jQuery 教程" 
  });

attr() 的回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#name").attr("href", function(i,origValue){ 
    return origValue + "/jquery"; 
  });

3). jQuery 添加元素

append() - 在被选元素内部的结尾插入指定内容 $("p").append("Some appended text.");
prepend() - 在被选元素内部的开头插入指定内容 $("p").prepend("Some prepended text.");
after()] - 在被选元素之后插入内容 $("img").after("在后面添加文本");
before() - 在被选元素之前插入内容 $("img").before("在前面添加文本");

注：在jQuery中，append/prepend 是在选择元素内部嵌入，而after/before 是在元素外面追加。

4). jQuery 删除元素

remove() - 删除被选元素（及其子元素）$("#div1").remove();
empty() - 从被选元素中删除子元素 $("#div1").empty();
- 过滤被删除的元素 $("p").remove(".italic");

5). jQuery CSS 类

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

6). jQuery css() 方法

返回 CSS 属性 css("propertyname");
设置 CSS 属性 css("propertyname","value");
设置多个 CSS 属性 css({"propertyname":"value","propertyname":"value",...});

7). jQuery 尺寸

jQuery 尺寸.png

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距） $("#div1").width()
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距） $("#div1").height()
innerWidth() 方法返回元素的宽度（包括内边距） $("#div1").innerWidth()
innerHeight() 方法返回元素的高度（包括内边距） $("#div1").innerHeight()
outerWidth() 方法返回元素的宽度（包括内边距和边框）$("#div1").outerWidth()
outerHeight() 方法返回元素的高度（包括内边距和边框）$("#div1").outerHeight()
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）

4. jQuery 遍历

1). 祖先

parent() - 返回被选元素的直接父元素 $("span").parent();
parents() - 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>) $("span").parents();
- 使用可选参数来过滤对祖先元素的搜索 $("span").parents("ul");
parentsUntil() - 返回介于两个给定元素之间的所有祖先元素 $("span").parentsUntil("div");

2). 后代

children() - 返回被选元素的所有直接子元素 $("div").children();
- 可选参数来过滤对子元素的搜索 $("div").children("p .1");
find() - 返回被选元素的后代元素，一路向下直到最后一个后代 $("div").find("span");, 所有后代 $("div").find("*");

3). 同胞(siblings)

siblings() - 返回被选元素的所有同胞元素 $("h2").siblings();
- 可选参数来过滤对同胞元素的搜索 $("h2").siblings("p");
next() - 返回被选元素的下一个同胞元素 $("h2").next();
nextAll() - 返回被选元素的所有跟随的同胞元素 $("h2").nextAll();
nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素 $("h2").nextUntil("h6");
prev() - 返回被选元素的上一个同胞元素 $("h2").prev();
prevAll() - 返回被选元素的所有之前的同胞元素 $("h2").prevAll();
prevUntil() - 返回介于两个给定参数之间的所有之前的同胞元素 $("h2").prevUntil("h6");

4). 过滤

first() - 返回被选元素的首个元素 $("div p").first();
last() - 返回被选元素的最后一个元素 $("div p").last();
eq() - 返回被选元素中带有指定索引号的元素 $("p").eq(1);
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。
filter() - 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 $("p").filter(".intro");
not() - 返回不匹配标准的所有元素 $("p").not(".intro");

5. jQuery AJAX

1). AJAX 简介

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

2). AJAX load() 方法

函数原型:

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

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
- 可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
  - responseTxt - 包含调用成功时的结果内容
  - statusTXT - 包含调用的状态
  - xhr - 包含 XMLHttpRequest 对象

  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });

提示：在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。

3). AJAX get() 和 post() 方法

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

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

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

II. GET请求

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });

III. POST

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

  $.post("demo_test_post.html",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "nStatus: " + status);
  });

IV. noConflict()方法

方式一：
noConflict() 方法会释放对 $ 标识符的控制。

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery is still working!");
  });
});

方式二：
创建自己的简写，noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery is still working!");
  });
});

方式三：
如果你的 jQuery 代码块使用 $jQuery 使用$ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery is still working!");
  });
});

6. 其他

1). 修改属性

prop() - 调整元素的属性

2). 选择器

3). 事件

4). 动画

5). HTML / CSS

6). 遍历

7). AJAX

8). 杂项方法

9). 属性

7. 插件

1). Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

2). Accordion

jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。

3). Autocomplete

Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可以过滤列表以获得更好的匹配。

4). Message

jQuery Message 插件允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击"确定"按钮等。用户可以通过移动鼠标或点击任何地方加快隐藏信息。

5). Password Validation

Password Validation（密码验证）插件扩展了 jQuery Validate 插件，提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。

6). Prettydate

Prettydate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

7). Treeview

Treeview 插件用于把一个无序列表改为一个可扩展的可折叠的树，有利于导航。该插件支持位置和基于 cookie 的持久性。

码农公寓

1. jQuery

1). 您可以从网页中添加 jQuery

2).下载 jQuery：

3). 什么是 jQuery ？

4). jQuery版本支持

5). CDN加载

6). jQuery 语法

7). 文档就绪事件

8). jQuery 选择器

9). jQuery 事件

2. jQuery效果

1). 隐藏和显示

2). 淡入淡出

3). 滑动

4). 动画

5). 停止动画

6). Callback 方法

7). Chaining

3. jQuery Html

1). jQuery 获取

2). jQuery 设置

3). jQuery 添加元素

4). jQuery 删除元素

5). jQuery CSS 类

6). jQuery css() 方法

7). jQuery 尺寸

4. jQuery 遍历

1). 祖先

2). 后代

3). 同胞(siblings)

4). 过滤

5. jQuery AJAX

1). AJAX 简介

2). AJAX load() 方法

3). AJAX get() 和 post() 方法

6. 其他

1). 修改属性

2). 选择器

3). 事件

4). 动画

5). HTML / CSS

6). 遍历

7). AJAX

8). 杂项方法

9). 属性

7. 插件

1). Validate

2). Accordion

3). Autocomplete

4). Message

5). Password Validation

6). Prettydate

7). Treeview

相关文章