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 相关文章推荐
window.print打印指定div实例代码
Dec 13 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP 引用文件技巧
2010/03/02 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
php接口隔离原则实例分析
2019/11/11 PHP
基于jQuery的history历史记录插件
2010/12/11 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
如何正确理解vue中的key详解
2019/11/02 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python可视化 matplotlib画图使用colorbar工具自定义颜色
2020/12/07 Python
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
应届行政管理专业个人自我评价
2013/12/28 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
施工员岗位职责
2014/03/16 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
单位考核鉴定意见
2015/06/05 职场文书
运动会广播稿200字
2015/08/19 职场文书
详解Python常用的魔法方法
2021/06/03 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript