[转]整理jquery开发技巧

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

 

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

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

 

1.$("input").has(".email").addClass("email_icon");//如果class是email的，就添加email_iocn的class

3.使用jQuery切换样式

 

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

4.限制选择的区域

 

1.var in_stock = $('#myid input.myclass');//找到id=myid元素里class=myclass的输入框

5.正确使用ToggleClass
不使用情况：

 

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

使用ToggleClass

 

1.a.toggleClass('blueButton');

6.浏览器判断

 

1.if ($.browser.msie && $.browser.version > 6) { //如果是IE6后的版本... }

7.查找一个元素的索引

 

1.$("ul > li").click(function () {  

2.    var index = $(this).prevAll().length;  

3.});

8.使用jQuery预加载图片

 

1.$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');   

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

 

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

10. 关闭右键的菜单

 

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

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

 

1.if ($('#someDiv').length) {//存在}

12.判断一个元素是否为空

 

1.if ($('#keks').html()) { //为空}  

13.判断鼠标的左右键点击

 

1.$("#someelement").live('click', function(e) {

2.    if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {

3.        alert("左键点击");

4.    }

5.    else if(e.button == 2)

6.        alert("右键点击");

7.});

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

 

01.$(".swap").each(function(i){

02.    $(this).focusin(function(){

03.        if ($(this).val() == "请输入") {

04.            $(this).val("");

05.        }

06.    }).focusout(function(){

07.        if ($.trim($(this).val()) == "") {

08.            $(this).val("请输入");

09.        }

10.    });

11.});

15.指定时间后自动隐藏或者关闭元素

 

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

16.动态创建元素到DOM

 

1.var newgbin1Div = $('');

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

17.使用jQuery克隆元素

 

1.var cloned = $('#gbin1div').clone();

18.元素屏幕居中

 

1.jQuery.fn.center = function () {

2.  this.css('position','absolute');

3.  this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');

4.  this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;

5.}

6.$('#gbin1div').center();

19.剔除元素中的HTML

 

01.(function($) {

02.    $.fn.stripHtml = function() {

03.        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;

04.        this.each(function() {

05.            $(this).html(

06.                $(this).html().replace(regexp,"")

07.            );

08.        });

09.        return $(this);

10.    }

11.})(jQuery);

12.$('p').stripHtml();

20. 使用closest来得到父元素

 

1.$('#searchBox').closest('div');

21.使用firebug来记录jQuery事件

 

1.jQuery.log = jQuery.fn.log = function (msg) {

2.      if (console){

3.         console.log("%s: %o", msg, this);

4.      }

5.      return this;

6.};

7.$('#someDiv').hide().log('div hidden').addClass('someClass');

22.点击链接强制弹出新窗口

 

1.Query('a.popup').live('click', function(){

2.  newwindow=window.open($(this).attr('href'),'','height=200,width=150');

3.  if (window.focus) {newwindow.focus()}

4.  return false;

5.});

23.点击链接强制打开新标签页

 

1.jQuery('a.newTab').live('click', function(){

2.  newwindow=window.open($(this).href);

3.  jQuery(this).target = "_blank";

4.  return false;

5.});

24.取得鼠标的X和Y坐标

 

1.$(document).mousemove(function(e){

2.$(document).ready(function() {

3.$().mousemove(function(e){

4.$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);

5.});

6.});

25.解析XML

 

1.function parseXml(xml) {

2.  //find every Tutorial and print the author

3.  $(xml).find("Tutorial").each(function()

4.  {

5.  $("#output").append($(this).attr("author") + "");

6.  });

7.}

26.判断一个图片是否加载完全

 

1.$('#theGBin1Image').attr('src', 'image.jpg').load(function() {

2.alert('This Image Has Been Loaded');

3.});