30个经典的jQuery代码开发技巧


Posted in Javascript onDecember 15, 2014

本文实例总结了30个经典的jQuery代码开发技巧。分享给大家供大家参考。具体如下:

1. 创建一个嵌套的过滤器

.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

2. 重用你的元素查询

var allItems = $("div.item");

var keepList = $("div#container1 div.item");

<div>class names: $(formToLookAt + " input:checked").each(function() { keepListkeepList = keepList.filter("." + $(this).attr("name"));

});

</div>

3. 使用has()来判断一个元素是否包含特定的class或者元素

//jQuery 1.4.* includes support for the has method. This method will find 

//if a an element contains a certain other element class or whatever it is

//you are looking for and do anything you want to them. 

$("input").has(".email").addClass("email_icon");

4. 使用jQuery切换样式

//Look for the media-type you wish to switch then set the href to your new style sheet

$('link[media='screen']').attr('href', 'Alternative.css');

5. 限制选择的区域

//Where possible, pre-fix your class names with a tag name

//so that jQuery doesn't have to spend more time searching

//for the element you're after. Also remember that anything

//you can do to be more specific about where the element is

//on your page will cut down on execution/search times

var in_stock = $('#shopping_cart_items input.is_in_stock');

<ul id="shopping_cart_items">

<li> <input value="Item-X" name="item" type="radio"> Item X</li>

<li> <input value="Item-Y" name="item" type="radio"> Item Y</li>

<li> <input value="Item-Z" name="item" type="radio"> Item Z</li>

</ul>

6. 如何正确使用ToggleClass

//Toggle class allows you to add or remove a class

//from an element depending on the presence of that

//class. Where some developers would use:

a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

//toggleClass allows you to easily do this usinga.toggleClass('blueButton');

7. 设置IE指定的功能

if ($.browser.msie) { 

// Internet Explorer is a sadist.

}

8. 使用jQuery来替换一个元素

$('#thatdiv').replaceWith('fnuh');

9. 验证一个元素是否为空

if ($('#keks').html()) {

//Nothing found ;

}

10. 在无序的set中查找一个元素的索引

$("ul > li").click(function () { var index = $(this).prevAll().length; });

11. 绑定一个函数到一个事件

$('#foo').bind('click', function() { alert('User clicked on "foo."'); });

12. 添加HTML到一个元素

$('#lal').append('sometext');

13. 创建元素时使用对象来定义属性

var e = $("", { href: "#", class: "a-class another-class", title: "..." });

14. 使用过滤器过滤多属性

//This precision-based approached can be useful when you use

//lots of similar input elements which have different types

var elements = $('#someid input[type=sometype][value=somevalue]').get();

15. 使用jQuery预加载图片

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; 

// Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
16. 设置任何匹配一个选择器的事件处理程序
[code]$('button.someClass').live('click', someFunction);

//Note that in jQuery 1.4.2, the delegate and undelegate options have been

//introduced to replace live as they offer better support for context 

//For example, in terms of a table where before you would use..

//

.live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }); });

//Now use.. 

$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); });

17. 找到被选择到的选项(option)元素

$('#someElement').find('option:selected');

18. 隐藏包含特定值的元素

$("p.value:contains('thetextvalue')").hide();

19. 自动的滚动到页面特定区域

jQuery.fn.autoscroll = function(selector) { $('html,body').animate( {scrollTop: $(selector).offset().top}, 500 ); }

//Then to scroll to the class/area you wish to get to like this:

$('.area_name').autoscroll();

20. 检测各种浏览器

Detect Safari (if( $.browser.safari)), Detect IE6 and over (if ($.browser.msie && $.browser.version > 6 )), Detect IE6 and below (if ($.browser.msie && $.browser.version <= 6 )), Detect FireFox 2 and above (if ($.browser.mozilla && $.browser.version >= '1.8' ))

21. 替换字符串中的单词

var el = $('#id'); el.html(el.html().replace(/word/ig, ''));

22. 关闭右键的菜单

$(document).bind('contextmenu',function(e){ return false; });

23. 定义一个定制的选择器

$.expr[':'].mycustomselector = function(element, index, meta, stack){

// element- is a DOM element

// index - the current loop index in stack

// meta - meta data about your selector

// stack - stack of all elements to loop

// Return true to include current element

// Return false to explude current element

};

// Custom Selector usage:

$('.someClasses:test').doSomething();

24. 判断一个元素是否存在

if ($('#someDiv').length) {

//hooray!!! it exists...

}

25. 使用jQuery判断鼠标的左右键点击

$("#someelement").live('click', function(e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { alert("Left Mouse Button Clicked"); } else if(e.button == 2) alert("Right Mouse Button Clicked"); });

26. 显示或者删除输入框的缺省值

//This snippet will show you how to keep a default value

//in a text input field for when a user hasn't entered in

//a value to replace it

swap_val = []; 

$(".swap").each(function(i){ swap_val[i] = $(this).val();

$(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i]); } }); }); <INPUT value="Enter Username here.." type=text>

27. 指定时间后自动隐藏或者关闭元素(1.4支持)

//Here's how we used to do it in 1.3.2 using setTimeout 

setTimeout(function() { $('.mydiv').hide('blind', {}, 500) }, 5000); 

//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)

$(".mydiv").delay(5000).hide('blind', {}, 500);

28. 动态创建元素到DOM

var newgbin1Div = $('');

newgbin1Div.attr('id','gbin1.com').appendTo('body');

29. 限制textarea的字符数量

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); 

var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" && 

inputType == "text" || inputType == "password"){

//Apply the standard maxLength this.maxLength = max;

} else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || event;

var keyCode = ob.keyCode;

var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;

return !(this.value.length >= max &&

(keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; 

this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } }); }; 

//Usage: 

$('#gbin1textarea').maxLength(500);

30. 为函数创建一个基本测试用例

//Separate tests into modules.

module("Module B");

test("some other gbin1.com test", function() {

//Specify how many assertions are expected to run within a test. expect(2); //A comparison assertion, equivalent to JUnit's assertEquals. 

equals( true, false, "failing test" );

equals( true, true, "passing test" ); 

});

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
node.js中的fs.fsync方法使用说明
Dec 15 #Javascript
innerHTML在IE中报错解决方案
Dec 15 #Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 #Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 #Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 #Javascript
node.js中的fs.write方法使用说明
Dec 15 #Javascript
node.js中的http.createClient方法使用说明
Dec 15 #Javascript
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
python getopt 参数处理小示例
2009/06/09 Python
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
使用python进行拆分大文件的方法
2018/12/10 Python
python 伯努利分布详解
2020/02/25 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
小学生常见病防治方案
2014/06/06 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2015年试用期工作总结
2014/12/12 职场文书
冰雪公主观后感
2015/06/16 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis
JavaScript执行机制详细介绍
2021/12/06 Javascript
Python 视频画质增强
2022/04/28 Python