jquery常用技术总结_H5之家 - 中国HTML5教程资源分享第一站

相关热词搜索：

篇一：jquery技术核心点总结

2014-05-19 14:11:50

jquery是一款非常优秀的web脚本语言，可以处理后端的各种数据，实现前端各样的效果，是web开发不可缺少的一门语言，下面就对jquery常用的函数做概要的介绍，方便查询和使用。

一、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。

1、 ${表达式}：根据这个表达式来查找所有匹配的元素。

eg:$("div>p"); 查找所有p元素，且这些p元素都是div的子元素.

$("input:radio",document.forms[0]); 查找文档第一个表单中，所有的单选按钮。 $("div",xml.responseXML);在一个由ajax返回的xml文档中，查找所有的div元素。

2、$(html标记字符串) :根据提供的html字符串，创建jquery对象包装的dom元素。 eg: $("<div><p>Hello</p></div>").appendTo("body");

创建一个 <input> 元素必须同时设定 type 属性

$("<input type='text'>")

3、$(dom元素):将一个或多个dom元素转换为jquery对象。

eg: $(document.body).css( "background", "black" ); 设置页面背景色

4、$(document).ready(function(){})==$(function(){})；在页面加载完成后自动执行的代码。

二、jquery对象访问。eq返回的是jquery对象，只能使用jquery方法，get返回的是dom元素对象，只能使用dom方法.

1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数

2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代码：$(&q(来自: 在点网:jquery常用技术总结)uot;img").size(); 返回2

3、context：返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。

4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。

5、$(dom元素).get(index)：取得其中一个匹配的元素.

6、$(dom元素).index():搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。

三、插件机制:

1、jQuery.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。 eg:jQuery.fn.extend({

check: function() { return this.each(function() { this.checked = true; });},

uncheck: function() { return this.each(function() { this.checked = false; });}

});

调用：

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

2、$.extend(object);用来在jQuery命名空间上增加新函数,针对所有dom元素。

$.extend({

min:function(a,b){return a<b?a:b;},

max:function(a,b){return a>b?a;b;}

});

调用：$.max(10,20);

四、选择器

基本：

1、$("#id"): 根据给定的ID匹配一个元素。

2、$("dom元素名")：根据给定的元素名匹配所有元素

3、$(".Class类名"): 根据给定的类匹配元素。

4、$("*") ：匹配所有元素。

5、$("dom元素.class类名")：选择所有class属性为指定类名的dom元素。

6、$(".stripe tr"): 获取class属性为stripe的table元素下的所有行

层级：

1、$("ancestor descendant"):在给定的祖先元素下匹配所有的后代元素

2、$("parent > child"):在给定的父元素下匹配所有的子元素

3、$("prev + next"):匹配所有紧接在 prev 元素后的 next 元素

4、$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同级) 元素

简单:

1、$("tr:first") 匹配找到的第一个元素

2、$("tr:last") 匹配找到的最后一个元素

3、$("input:not(:checked)") 去除所有与给定选择器匹配的元素

4、$("tr:even") 匹配所有索引值为偶数的元素，从 0 开始计数

5、$("tr:odd") 匹配所有索引值为奇数的元素，从 0 开始计数

6、$("tr:eq(1)") 匹配一个给定索引值的元素

7、$("tr:gt(0)") 匹配所有大于给定索引值的元素

8、$("tr:lt(2)") 匹配所有小于给定索引值的元素

内容：

1、$("div:contains('John')") 匹配包含给定文本的元素

2、$("div:has(p)") 匹配所有包含 p 元素的 div 元素

3、$("td:empty") 查找所有不包含子元素或者文本的空元素

可见性：

1、$("tr:visible") 查找所有可见的 tr 元素

2、$("tr:hidden") 匹配所有的不可见元素，input 元素的 type 属性为 "hidden" 的话也会被匹配到

属性：

1、$("div[id]") 查找所有含有 id 属性的 div 元素

2、$("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素

3、$("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素

4、$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素

5、$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素

6、$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素

7、$("input[id][name$='man']") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的子元素：

1、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素

2、$("ul li:first-child") 在每个 ul 中查找第一个 li

3、$("ul li:last-child")在每个 ul 中查找最后一个 li

4、$("ul li:only-child")在 ul 中查找是唯一子元素的 li

表单：

1、$(":input") 查找所有的input元素

2、$("text") 匹配所有的单行文本框

3、$(":password") 匹配所有密码框

4、$("radio")匹配所有单选按钮

5、$("checkbox") 匹配所有复选框

6、$("submit")匹配所有提交按钮

7、$("image") 匹配所有图像域

8、$("button")匹配所有按钮

9、$("file") 匹配所有文件域

10、$("hidden") 匹配所有不可见元素，或者type为hidden的元素

表单对象属性：

1、$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

2、$("input:enabled") 匹配所有可用元素

3、$("input:disabled") 匹配所有不可用元素

4、$("select option:selected") 匹配所有选中的option元素

五、属性操作

操作属性：

1、$("img").attr("src"); 返回文档中第一个图像的src属性值。

2、$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值

3、$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值

4、$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性

5、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。

操作CSS:

1、$("p").addClass("selected"); 为每个匹配的元素添加指定的类名

2、$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开

$("p").removeClass();删除匹配元素的所有类

3、$("p").toggleClass("selected"); 如果存在（不存在）就删除（添加）一个类

4、 var count = 0;

$("p").click(function(){

$(this).toggleClass("highlight", count++ % 3 == 0);

}); 每点击三下加上一次 'selected' 类

HTML代码:

1、$("div").html(); 取得第一个匹配元素的html内容

2、$("div").html("<p>Hello Again</p>"); 设置每一个匹配元素的html内容

文本：

1、$("p").text(); 取得所有匹配元素的内容

2、$("p").text("<b>Some</b> new text."); 设置所有匹配元素的文本内容

值：

1、 $("#single").val() 获得第一个匹配元素的当前值。

2、$("input").val("hello world!"); 设置每一个匹配元素的值

六、筛选

过滤：

1、$("p").eq(1) 获取第N个元素，这个元素的位置是从0算起

2、 if ( $(this).hasClass("protected") ) 检查当前的元素是否含有某个特定的类，如果有，则返回true。

3、$("p").filter(".selected") 筛选出与指定表达式匹配的元素集合

4、is(expr) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。

5、$("p").not( $("#selected")[0] ) 删除与指定表达式匹配的元素

查找：

1、$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

2、$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

3、$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

4、$("p").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

5、$("div").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。

6、$("span").parents;找到每个span元素的所有祖先元素

7、$("div").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

七、文档处理

内部插入：

1、$("p").append("<b>Hello</b>"); 向每个匹配的元素内部尾部追加内容

2、$("p").prepend("<b>Hello</b>"); 向每个匹配的元素内部前部追加内容

3、$("p").appendTo("#foo"); 把所有段落追加到ID值为foo的元素中。

外部插入：

1、$("p").after("<b>Hello</b>"); 在每个匹配的元素之后插入内容

2、$("p").before("<b>Hello</b>"); 在每个匹配的元素之前插入内容

包裹

1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的结构化标记包裹起来。

替换：

1、$("p").replaceWith("<b>Paragraph. </b>"); 将所有匹配的元素替换成指定的HTML或DOM元素。

删除：

1、$("p").empty(); 删除匹配的元素集合中所有的子节点。

2、$("p").remove(); 从DOM中删除所有匹配的元素

八、CSS操作

CSS:

1、$("p").css("color"); 取得第一个段落的color样式属性的值

2、$("p").css({ color: "#ff0011", background: "blue" }); 把一个“名/值对”对象设置为所有匹配元素的样式属性。

3、$("p").css("color","red"); 在所有匹配的元素中，设置一个样式属性的值

位置：

1、var offset = p.offset();获取匹配元素在当前视口的相对偏移，返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

2、var position = p.position();获取匹配元素相对父元素的偏移

尺寸：

1、$("p").height(); 取得第一个匹配元素当前计算的高度值（px）。

2、$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值

3、$("p").width(); 取得第一个匹配元素当前计算的宽度值（px）。$(window).width(); 获取当前窗口的宽

4、$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值

九、效果

基本：

1、$("p").show() 显示隐藏的匹配元素

2、$("p").hide() 隐藏显示的元素

3、$("p").show("slow"); 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

callback (Function) : (Optional) 在动画完成时执行的函数，每个元素执行一次。

用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("fast",function(){

$(this).text("Animation Done!");

});

4、$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

5、$("p").toggle() 切换元素的可见状态

6、$("p").toggle("slow"); 以优雅的动画切换所有匹配的元素，并在显示完成后可选地触发一个回调函数

淡入淡出:

1、$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

2、$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

自定义：

1、$("#block").animate({

width: "90%",

篇二：JQuery常用方法总结

JQuery常用方法总结（2）

ajaxSend( callback ) 在一个AJAX请求发送时，执行一个函数。这是一个Ajax事件 $(”#msg”).ajaxSend(function(evt, request, settings){

$(this).append(”<li<Starting request at ” + settings.url

+ “</li<”);

});

ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件

当AJAX请求开始(并还没有激活时)显示loading信息

$(”#loading”).ajaxStart(function(){

$(this).show();

});

ajaxStop( callback ) 当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件

当所有AJAX请求都停止时，隐藏loading信息。

$(”#loading”).ajaxStop(function(){

$(this).hide();

});

ajaxSuccess( callback ) 当一个AJAXAjax事件当AJAX请求成功完成时，显示信息。

$(”#msg”).ajaxSuccess(function(evt, request, settings){

$(this

});

jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。

设置默认的全局AJAX请求选项。

global: false,

type: “POST”

});

$.ajax({ data: myData });

serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列

function showValues() {

var str = $(”form”).serialize();

$(”#results”).text(str);

}

$(”:checkbox, :radio”).click(showValues);

$(”select”).change(showValues);

showValues();

serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。

从form中取得一组值，显示出来

function showValues() {

var fields = $(”:input”).serializeArray();

alert(fields); $(”#results”).empty(); jQuery.each(fields, function(i, field){

$(”#results”).append(field.value + ” “);

});

}

$(”:checkbox, :radio”).click(showValues);

$(”select”).change(showValues);

showValues();

JQuery Effects 方法说明

show( ) 显示隐藏的匹配元素。

show( speed, [callback] ) 回调函数。

hide( ) 隐藏所有的匹配元素。

hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数

toggle( ) 切换为可见的。

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选

地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以

“”slideUp( speed, [callback] ) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地

触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”

的方式隐藏起来。

slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回

调函数。这个动画效果只调整元素的高度，可以使匹配的元素以”滑动”的方式隐

藏或显示。

fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触

发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的

高度和宽度不会发生变化。

fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触