[转]整理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.
});
[转]整理jquery开发技巧的更多相关文章
- 15个值得开发人员关注的jQuery开发技巧和心得
在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用了大量的创新.最好的方法来提高 ...
- jQuery开发技巧
jQuery 事件 - submit() 方法 $("form").submit(function(e){}); 当提交表单时,会发生 submit 事件. 该事件只适用于表单元素 ...
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- jQuery常用技巧-使用的总结
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...
- jQuery常用技巧
1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用 ...
- 人人必知的10个 jQuery 小技巧
原文地址:http://info.9iphp.com/10-jquery-tips-everyone-should-know/ 人人必知的10个 jQuery 小技巧 收集的10个 jQuery ...
- SQL开发技巧(二)
本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列文章基于SQLServer系列,且版本为SQLServer2005及以上-- 文章系列目录 SQL开发技巧(一) SQL开 ...
- 10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...
随机推荐
- Vultr日本vps搭建ss/ssr/openvpn免流教程
每个月的手机流量不够用,运营商流量套餐价格偏高,怎么才能省钱?你在淘宝上,搜索手机免流,可找到很多奸商销售免流套餐,一块钱可买1GB流量,免流原理是什么?自己能搞吗? 手机免流原理 手机运营商中国电信 ...
- C# asp.net PhoneGap html5
很久没写博客,今天自己写一篇吧.来谈一谈c# PhoneGap,html5 与asp.net.能搜到这篇博客就说明你是一位.net开发者,即将或者正在从事移动开发. 大家可能都有疑,我是一名.net开 ...
- 【 VS 插件开发 】二、了解Vs插件结构
[ VS 插件开发 ]二.了解Vs插件结构
- php常量作用
PHP常量的特点是: 1.不能通过外部来传递,也就是不能通过get与post还有cookie等方式来传递赋值,所以可以确定是程序执行过程中定义的,非外界变量.2.定义后不能更改,可以防止被篡改. 基于 ...
- html基础及心得
html开始 <adress></adress>斜体(地址) <em><em>斜体(表示强调) <code></code>插入一 ...
- Signal and Slots
Signal and Slots 用于对象之间通信. 它是 Qt 的核心特性之一, 并且也是Qt 与其它框架差别最大的部分. 概述 在GUI编程中, 如果我们改变了一个控件, 我们可能想其它控件知道: ...
- iOS UIBezierPath类 介绍
使用UIBezierPath类可以创建基于矢量的路径,这个类在UIKit中.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和 ...
- js关于setTimeout传参
setTimeout函数有两个参数,都是必须的,一个是要执行的函数,一个是延时的时间 第一个参数: 要执行的函数,一般来说是可以执行的,但是这里遇到一个问题,就是如果变量是个数组的话, 如果数组为nu ...
- C#编码好习惯,献给所有热爱c#的同学
1. 避免将多个类放在一个文件里面. 2. 一个文件应该只有一个命名空间,避免将多个命名空间放在同一个文件里面. 3. 一个文件最好不要超过500行的代码(不包括机器产生的代码). 4. 一个方法的代 ...
- HDU 5795 A Simple Nim(SG打表找规律)
SG打表找规律 HDU 5795 题目连接 #include<iostream> #include<cstdio> #include<cmath> #include ...