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 相关文章推荐
JS控制日期显示的小例子
Nov 23 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
javascript中递归的两种写法
Jan 17 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
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
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
php实现的mongodb操作类
2015/05/28 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
简单了解python协程的相关知识
2019/08/31 Python
如何使用python进行pdf文件分割
2019/11/11 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
金山毒霸系列的笔试题
2013/04/13 面试题
护士的岗位职责
2013/12/04 职场文书
如何撰写岗位职责
2014/02/01 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
学历公证委托书
2014/04/09 职场文书
致运动员加油稿
2015/07/21 职场文书
学雷锋感言
2015/08/03 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL