脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript开发指南之jQuery使用技巧，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

JavaScript开发指南之jQuery使用技巧。

1. jquery 是如何工作的

1.1. 开始使用jQuery

jQuery 本身只有一个 js 文件，所以，要使用它，就和使用其它的 js 文件一样，直接将它引入就可以使用了。

但是，要注意一点，因为 jQuery 大部分功能需要根据文档的 DOM 模型来工作，所以，它首先需要正确地解析到整个文档的 DOM 模型结构。为此，一般，我们使用 jQuery 所做的工作都需要在整个文档被浏览器完全加载完毕后才开始进行：

$是在 jQuery 中被定义的一个函数，它可以简单方便地取到相关结点。$(document).ready是一个事件绑定，这在文档加载完毕后被调用。

事实上$()等于jQuery()即 jQuery 的核心函数的一个简写。

之后的 javascript 代码，都默认是写在$(document).ready这个事件绑定当中的。

当然，$(document).ready()可以简写成$()。

前面说了，$是一个在 jQuery 中被使用了的一个变量名，如果因为某些原因，你不能让 jQuery 使用它，那么你可以使用jQuery.noConflict()做到这一点，它的返回值就是 jQuery 这个对象。

jQuery.noConflict();

$j = jQuery.noConflict();

1.2. jquery对象与DOM对象之间的转换

通常，使用$()得到的是一个 jQuery 对象。它封装了很多 DOM 对象的操作，但是，它和 DOM 对象之间是不同的。比如，如果你要使用Obj.innerHTML，那只有当obj是一个 DOM 对象时才能用，相应地，如果是 jQuery 对象你应该使用obj.html()。

从 DOM 对象转到 jQuery 对象：$(obj)。

从 jQuery 对象转到 DOM 对象：obj[0]。

比较正规地从 jQuery 对象到 DOM 的转换，是使用 jQuery 对象的get()方法：

foo

bar

$('li').get(); //[

,

] $('li').get(0); //

$('li').get(-1); //

2. 丰富的选择器

完整的列表在http://api.jquery.COM/category/selectors/。

2.1. 常规选择器

$("*")选择所有结点(“#id”)ID选择器，注意其中的一些特殊字符，比如.(“.class”)类选择器(“tag”)按标签选择(“ancestor descendant”)选择子元素(“parent > child”)选择直接子元素:focus获取焦点元素:First-child:last-child选择第一个/最后一个子元素:first:last截取第一个/最后一个符合条件的元素(“prev + next”)直接兄弟元素(“PRev ~ siblings”)兄弟元素:nth-child()索引选择，索引从 1 开始:nth-child(odd):nth-child(even):nth-child(4n)

2.2. 属性选择器

[name~="value"]属性中包括某单词[name="value"]属性完全等于指定值[name!="value"]属性不等于指定值[name]包括有指定属性的元素

2.3. 控件选择器

:checked选择所有被中的元素:selected被选择了的元素:disabled:enabled选择被禁用/未禁用的元素:hidden选择隐藏元素，不仅是[tyPE="hidden"]，还有display: none:visible可见控件，visibilITy: hidden和opacity: 0同样被认为是可见。

:input:button:checkbox:file:image:password:radio:reset:submit:text具体控件，图像控件是[type="image"]

2.4. 其它选择器

[name="value"][name2="value2"]多个 AND 条件(“selector1, selector2, selectorN”)多个 OR 条件:not()否定选择(':contains("text")')包含有指定内容的元素:eq():lt():gt():even:odd列表索引选择(不支持负数)(':has(selector)')符合条件的再次过滤:header选择像 h1,h2,h3 这些标题元素:only-child仅有一个子元素的元素:empty空元素，即无内容也无子元素:parent非空元素

3. 节点漫游

完整列表在http://api.jquery.com/category/traversing/

通过上面的选择器，我们可以得到希望处理的节点。但是通常，我们还希望得到当前节点的一些相对节点，以便下一步处理，比如“所有子节点”，“下一个兄弟节点”之类的东西。

3.1. 调用链处理

.add()向已有的节点序列中添加新的对象.andSelf()在调用链中，随时加入原始序列.eq()指定索引选取节点，支持负数.filter().is().not().find().first().last().has()序列选择.end()链点回溯

list item 1

list item 2

list item 3

list item 1

list item 2

list item 3

$('ul.first').find('.foo').css('background-color', 'red') .end().find('.bar').css('background-color', 'green');

3.2. 子节点

.children()所有的子节点，可加入过滤条件，.children(selector)

3.3. 兄弟节点

.siblings().next().nextAll().nextUntil().prev().prevAll().prevUntil().closest()兄弟节点选择

3.4. 父节点

.parent().parents().parentsUntil()父节点选择

4. 元素控制相关

4.1. attributes和properties的区别

attributes是 XML 结构中的属性节点概念范畴：

上面的代码表示了body这个节点，有一个名为onload的attributes。

properties则是对于 DOM 对象的，对象属性概念范畴。这一般就没有直观的表现，但是它总是可以被访问到的，比如：

$('body').get(0).tagName;

//BODY

虽然attributes与properties是不同的概念范畴，但是它们对于某些特殊的属性是有共同的访问属性名的，比如id。

4.2. 类与属性控制

.addClass().hasClass().removeClass()添加一个类，判断是否有指定类，删除类

$('body').addClass('test');

$('body').addClass(function(index, current){return current + 'new'});

$('body').removeClass('test');

$('body').removeClass(function(index, current){return current + ' ' + 'other'});

.toggleClass()类的开关式转换，它的使用方法有多种：

 

@H_406_138@ $('img').toggleClass(); //对所有类的开关 $('img').toggleClass('test'); //对指定类的开关 $('img').toggleClass(isTrue); //根据isTrue判断所有类的开关 $('img').toggleClass('test', isTrue); //根据isTrue判断指定类的开关 //同 $('img').toggleClass('test') 只是类名由函数返回 $('img').toggleClass(function(index, class, isTrue){return 'name'}); //isTrue会作为函数的第三个参数传入 $('img').toggleClass(function(index, class, isTrue){return 'name'}, isTrue);

 

.attr()获取或者设置一个属性值，它的使用方法有多种：

 

$('#greatphoto').attr('alt'); //获取属性 $('#greatphoto').attr('alt', 'Beijing brush Seller'); //设置属性 //同时设置多个属性 $('#greatphoto').attr({ alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' }); //设置属性为函数返回值, 函数的上下文为当前元素 $('#greatphoto').attr('title', function(i, val) { return val + ' - photo by Kelly Clark'; });

 

.prop()用法同.attr()，只是对象变成了properties.removeAttr().removeProp()删除属性.val()设置或获取元素的表单值，通常用于表单元素。

 

 

$('input').val();

$('input').val('other');

.htML()设置或获取元素的节点文件本值。

测试

$('p').html(); $('p').html('

测试

'); $('p').html(function(index, old){return old + '另外的内容'});

4.3. 样式控制

.css()获取或设置指定的 css 样式：

$('body').css('background-color');

$('body').css('background-color', 'red');

$('body').css('background-color', function(index, value){return value + '1'});

$('body').css({color: 'green', 'background-color': 'red'});

.width().height()获取或设置元素的宽和高

$('body').width();

$('body').width(50);

$('body').width(function(index, value){return value += 10});

.innerWidth().innerHeight().outerHeight().outerWidth()元素的其它尺寸值

.scrollLeft().scrollTop()获取或设置滚动条的位置

.offset().position()获取元素的坐标。offset是相对于document，position是相对于父级元素

4.4. 结构控制

4.4.1. 文本节点

.html().text()设置和获取节点的文值。设置时.text()会转义标签，获取时.text()会移除所有标签。

4.4.2. 子节点

.append().prepend()

Greetings

Hello

Goodbye

$('.inner').append('

Test

');

Greetings

Hello

Test

Goodbye

Test

参数可以有多种形式：

VAR $newp1 = $('

'), newp2=document.createElement('p'), existingp1=document.getElementById('foo'); $('body').append($newp1, [newp2, existingp1]);

4.4.3. 兄弟节点

.after().before()

Greetings

Hello

Goodbye

$('.inner').after('

Test

');

Greetings

Hello

Test

Goodbye

Test

4.4.4. 父节点

.wrap().wrapAll().wrapInner()

Hello

Goodbye

$('.inner').wrap('

');

Hello

Goodbye

$('.inner').wrapAll('

');

Hello

Goodbye

$('.inner').wrapInner('

');

Hello

Goodbye

4.4.5. 复制/删除/替换节点

.clone()复制节点，可选参数表示是否处理已绑定的事件与数据 .clone(true)处理当前节点的事件与数据.clone(true, true)处理当前节点及所有子节点的事件与数据 .detach()暂时移除节点，之后可以再次恢复了指定位置。.remove()永久移除节点。.empty()清除一个节点的所有内部内容。.unwrap()移除节点的父节点。

5. 工具函数

5.1. jQuery对象序列

.map()遍历所有成员

$(':checkbox').map(function() {

return this.id;

}).get().join(',');

$(':checkbox').map(function(index, node) {

return node.id;

}).get().join(',');

.slice()序列切片, 支持一个或两个参数，支持负数

$('li').slice(2).css('background-color', 'red');

$('li').slice(2, 4).css('background-color', 'red');

$('li').slice(-2, -1).css('background-color', 'red');

5.2. 通用工具

$.each()$.map()遍历列表,$.map()可以作用于对象。

$.each([52, 97], function(index, value) {

alert(index + ': ' + value);

});

$.map( [0,1,2], function(index, n){

return n + 4;

});

//[4, 5, 6]

$.map( [0,1,2], function(n){

return n > 0 ? n + 1 : null;

});

//[2, 3]

$.map( [0,1,2], function(n){

return [ n, n + 1 ];

});

//[0, 1, 1, 2, 2, 3]

var dimensions = { width: 10, height: 15, length: 20 };

$.map( dimensions, function( value, key ) {

return value * 2;

});

//[20, 30, 40]

var dimensions = { width: 10, height: 15, length: 20 },

$.map( dimensions, function( value, key ) {

return key;

});

//["width", "height", "length"]

$.extend()合并对象，第一个参数表示是否进行递归深入

var object = $.extend({}, object1, object2);

var object = $.extend(true, {}, object1, object2);

$.merge()合并列表

$.merge( [0,1,2], [2,3,4] )

//[0,1,2,2,3,4]

$.grep()过滤列表，第三个参数表示是否为取反

$.grep( [0,1,2], function(array,index){ return n > 0; }); //[1,2]

$.grep( [0,1,2], function(array,index){ return n > 0; }, true); //[0]

$.inArray()存在判断

$.inArray( value, array [, FromIndex] )

$.isArray()$.iSEMptyObject()$.isFunction()$.isNumeric()$.isPlainObject()$.isWindow()$.isXMLDoc()类型判断$.noop()空函数$.now()当前时间戳，值为(new Date).getTime()$.parseJson()$.parseXML()把字符串解析为对象

var xml = "",

xmlDoc = $.parseXML( xml ),

$xml = $( xmlDoc ),

$title = $xml.find( "title" );

$.trim()去头去尾，$.trim(str)$.type()判定参数的类型

# If the object is undefined or null,

#then "undefined" or "null" is returned accordingly.

* jQuery.type(undefined) === "undefined"

* jQuery.type() === "undefined"

* jQuery.type(window.notDefined) === "undefined"

* jQuery.type(null) === "null"

# If the object has an internal [[Class]] equivalent to

#one of the browser's built-in objects, the associated name is returned.

#(More details about this technique.)

* jQuery.type(true) === "boolean"

* jQuery.type(3) === "number"

* jQuery.type("test") === "string"

* jQuery.type(function(){}) === "function"

* jQuery.type([]) === "array"

* jQuery.type(new Date()) === "date"

* jQuery.type(/test/) === "regexp"

$.unique()遍历后去重，$.unique(array)

6. 上下文绑定

上下文绑定在函数型的语言当中起着非常重要的作用。不过， jQuery 中对此似乎并没有怎么强调，它的很多函数都默认处理了上下文，文档中也会告诉你，在某个函数当中，this是什么东西，我觉得这种做法不太好。

jQuery 中有一个函数专门用于处理上下文绑定，虽然我觉得把context放在后面的格式非常别扭，不过好过没有吧。

$.Proxy()为函数绑定上下文

它有两种使用方法，第一种就是最普通的，提供函数，和上下文对象，然后返回一个新函数：

$.proxy( function, context )

第二种，是提供一个上下文对象，及在这个上下文当中的一个成员名，然后把这个上下文绑定到这个成员之后，再返回这个成员。

$.proxy( context, name )

看下面的例子，来理解上下文：

var o = {

x: '123',

f: function(){console.LOG(this.x)},

}

var go = function(f){f()}

o.f() // 123

go(o.f) // undefined

go($.proxy(o.f, o)) //123

$.proxy(o, 'f')() //123

当一个函数被传递之后，它就失去原先的上下文了。

7. 把数据存到节点中

jQuery 提供了一种机制，可以把节点作为数据存储的容器。

$.data()往节点中获取/设置数据$.removeData()删除数据

在内部实现上， jQuery 会在指定节点添加一个内部标识，以此为key，把数据存在内部闭包的一个结构当中。事实上， jQuery 的事件绑定机制也使用了这套数据接口。

$.data($('#data').get(0), 'test', '123');

$('#data').data('test', '456');

console.log($.data($('#data').get(0), 'test'));

console.log($('#data').data('test'));

8. 事件处理

8.1. 事件绑定

在 jQuery1.7 之后，推荐统一使用on()来进行事件绑定。

在讲事件绑定之前，需要首先明确一个概念。通常，我们是需要对具体的节点的相关事件作处理，比如一个按钮被点击了之类的。但这里有一个问题，如果我们能获取到具体的节点，当然没什么说的。不过有时，我们要处理的节点却还没有存在，但是我们又要预定义它的事件处理。比如，我们说在一个UL中，每一个LI被点击时，都要执行一个函数。但是，UL中的内容本身可能是变化的，开始时它只有两个LI，之后又变成了三个LI，多出的那一个LI也要能响应事件才行。

上述的情况是一个普遍的需求。我们可以利用事件的冒泡机制来实现目的。我们把事件处理绑定在UL上，这样，当LI被点击时，会冒泡到上级的UL，这样在处理事件时就可以判断出具体是哪个节点的事件，以便作下一步处理。

当然，原理是这样，具体操作时，on()这个方法已经把一切都封装好了。

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ @L_126_7@，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript开发指南之jQuery使用技巧全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript开发指南之jQuery使用技巧所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。