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.});

[转]整理jquery开发技巧的更多相关文章

  1. 15个值得开发人员关注的jQuery开发技巧和心得

    在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新.最好的方法来提高 ...

  2. jQuery开发技巧

    jQuery 事件 - submit() 方法 $("form").submit(function(e){}); 当提交表单时,会发生 submit 事件. 该事件只适用于表单元素 ...

  3. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  4. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  5. jQuery常用技巧-使用的总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  6. jQuery常用技巧

      1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用 ...

  7. 人人必知的10个 jQuery 小技巧

    原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 人人必知的10个 jQuery 小技巧   收集的10个 jQuery ...

  8. SQL开发技巧(二)

    本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列文章基于SQLServer系列,且版本为SQLServer2005及以上-- 文章系列目录 SQL开发技巧(一) SQL开 ...

  9. 10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...

随机推荐

  1. Vultr日本vps搭建ss/ssr/openvpn免流教程

    每个月的手机流量不够用,运营商流量套餐价格偏高,怎么才能省钱?你在淘宝上,搜索手机免流,可找到很多奸商销售免流套餐,一块钱可买1GB流量,免流原理是什么?自己能搞吗? 手机免流原理 手机运营商中国电信 ...

  2. C# asp.net PhoneGap html5

    很久没写博客,今天自己写一篇吧.来谈一谈c# PhoneGap,html5 与asp.net.能搜到这篇博客就说明你是一位.net开发者,即将或者正在从事移动开发. 大家可能都有疑,我是一名.net开 ...

  3. 【 VS 插件开发 】二、了解Vs插件结构

    [ VS 插件开发 ]二.了解Vs插件结构

  4. php常量作用

    PHP常量的特点是: 1.不能通过外部来传递,也就是不能通过get与post还有cookie等方式来传递赋值,所以可以确定是程序执行过程中定义的,非外界变量.2.定义后不能更改,可以防止被篡改. 基于 ...

  5. html基础及心得

    html开始 <adress></adress>斜体(地址) <em><em>斜体(表示强调) <code></code>插入一 ...

  6. Signal and Slots

    Signal and Slots 用于对象之间通信. 它是 Qt 的核心特性之一, 并且也是Qt 与其它框架差别最大的部分. 概述 在GUI编程中, 如果我们改变了一个控件, 我们可能想其它控件知道: ...

  7. iOS UIBezierPath类 介绍

      使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和 ...

  8. js关于setTimeout传参

    setTimeout函数有两个参数,都是必须的,一个是要执行的函数,一个是延时的时间 第一个参数: 要执行的函数,一般来说是可以执行的,但是这里遇到一个问题,就是如果变量是个数组的话, 如果数组为nu ...

  9. C#编码好习惯,献给所有热爱c#的同学

    1. 避免将多个类放在一个文件里面. 2. 一个文件应该只有一个命名空间,避免将多个命名空间放在同一个文件里面. 3. 一个文件最好不要超过500行的代码(不包括机器产生的代码). 4. 一个方法的代 ...

  10. HDU 5795 A Simple Nim(SG打表找规律)

    SG打表找规律 HDU 5795 题目连接 #include<iostream> #include<cstdio> #include<cmath> #include ...