jquery案例经典Word下载.docx
- 文档编号:22670637
- 上传时间:2023-02-05
- 格式:DOCX
- 页数:14
- 大小:21.96KB
jquery案例经典Word下载.docx
《jquery案例经典Word下载.docx》由会员分享,可在线阅读,更多相关《jquery案例经典Word下载.docx(14页珍藏版)》请在冰豆网上搜索。
).has("
.email"
).addClass("
email_icon"
4.如何使用jQuery来切换样式表
1.//找出你希望切换的媒体类型(media-type),然后把href设置成新的样式表。
2.$('
link[media='
screen'
]'
).attr('
href'
'
Alternative.css'
5.如何限制选择范围(基于优化目的):
1.//尽可能使用标签名来作为类名的前缀,
2.、、这样jQuery就不需要花费更多的时间来搜索
3.//你想要的元素。
还要记住的一点是,
4.//针对于你的页面上的元素的操作越具体化,
5.//就越能降低执行和搜索的时间。
6.var
in_stock
$('
#shopping_cart_items
input.is_in_stock'
<
ulid="
shopping_cart_items"
li>
inputtype="
radio"
value="
Item-X"
name="
item"
class="
is_in_stock"
/>
ItemX<
/li>
Item-Y"
3-5_days"
ItemY<
Item-Z"
unknown"
ItemZ<
/ul>
6.如何正确地使用ToggleClass:
1.//切换(toggle)类允许你根据某个类的
2.//是否存在来添加或是删除该类。
3.//这种情况下有些开发者使用:
4.a.hasClass('
blueButton'
?
a.removeClass('
a.addClass('
5.//toggleClass允许你使用下面的语句来很容易地做到这一点
6.a.toggleClass('
7.如何设置IE特有的功能:
1.if
($.browser.msie)
2.//
Internet
Explorer就是个虐待狂
3.}
8.如何使用jQuery来代替一个元素:
1.$('
#thatdiv'
).replaceWith('
fnuh'
9.如何验证某个元素是否为空:
($('
#keks'
).html())
2.//什么都没有找到;
10.如何从一个未排序的集合中找出某个元素的索引号
1.$("
ul
li"
).click(function
()
2.
var
index
$(this).prevAll().length;
3.});
11.如何把函数绑定到事件上:
#foo'
).bind('
click'
function()
alert('
User
clicked
on
foo."
12.如何追加或是添加html到元素中:
#lal'
).append('
sometext'
13.在创建元素时,如何使用对象字面量(literal)来定义属性
e
{
href:
#"
class:
a-class
another-class"
title:
..."
});
14.如何使用多个属性来进行过滤
1.//在使用许多相类似的有着不同类型的input元素时,
2.//这种基于精确度的方法很有用
3.var
elements
#someid
input[type=sometype][value=somevalue]'
).get();
15.如何使用jQuery来预加载图像:
1.jQuery.preloadImages
for(var
i
0;
arguments.length;
i++)
3.
img
/>
src'
arguments[i]);
4.
}
5.};
6.//用法
7.$.preloadImages('
image1.gif'
/path/to/image2.png'
some/image3.jpg'
16.如何为任何与选择器相匹配的元素设置事件处理程序:
button.someClass'
).live('
someFunction);
2.//注意,在jQuery
1.4.2中,delegate和undelegate选项
3.//被引入代替live,因为它们提供了更好的上下文支持
4.//例如,就table来说,以前你会用
5.//.live()
6.$("
table"
).each(function(){
7.
td"
this).live("
hover"
function(){
$(this).toggleClass("
9.
10.});
11.//现在用
12.$("
).delegate("
13.
14.});
17.如何找到一个已经被选中的option元素:
#someElement'
).find('
option:
selected'
18.如何隐藏一个包含了某个值文本的元素:
p.value:
contains('
thetextvalue'
)"
).hide();
19.如果自动滚动到页面中的某区域
1.jQuery.fn.autoscroll
function(selector)
html,body'
).animate(
{scrollTop:
$(selector).offset().top},
500
5.
};
6.}
7.//然后像这样来滚动到你希望去到的class/area上。
8.$('
.area_name'
).autoscroll();
20.如何检测各种浏览器:
1.检测Safari
(if(
$.browser.safari)),
2.检测IE6及之后版本
(if
($.browser.msie
&
$.browser.version
6
)),
3.检测IE6及之前版本
4.检测FireFox
2及之后版本
($.browser.mozilla
1.8'
))
21.如何替换串中的词
el
#id'
el.html(el.html().replace(/word/ig,
22.如何禁用右键单击上下文菜单:
1.$(document).bind('
contextmenu'
function(e){
return
false;
23.如何定义一个定制的选择器
1.$.expr['
].mycustomselector
function(element,
index,
meta,
stack){
element-
一个DOM元素
3.//
–
栈中的当前循环索引
4.//
meta
有关选择器的元数据
5.//
stack
要循环的所有元素的栈
6.//
如果包含了当前元素就返回true
7.//
如果不包含当前元素就返回false
8.//
定制选择器的用法:
9.$('
.someClasses:
test'
).doSomething();
24.如何检查某个元素是否存在
#someDiv'
).length)
2.//万岁!
!
它存在……
25.如何使用jQuery来检测右键和左键的鼠标单击两种情况:
#someelement"
function(e)
if(
(!
$.browser.msie
e.button
==
0)
||
1)
alert("
Left
Mouse
Button
Clicked"
}
else
if(e.button
2)
Right
6.
7.});
26.如何显示或是删除input域中的默认值
1.//这段代码展示了在用户未输入值时,
2.//如何在文本类型的input域中保留
3.//一个默认值
4.wap_val
[];
5.$("
.swap"
).each(function(i){
wap_val[i]
$(this).val();
$(this).focusin(function(){
if
($(this).val()
swap_val[i])
$(this).val("
10.
11.
}).focusout(function(){
12.
($.trim($(this).val())
$(this).val(swap_val[i]);
14.
15.
16.});
27.如何在一段时间之后自动隐藏或关闭元素(支持1.4版本):
1.//这是1.3.2中我们使用setTimeout来实现的方式
2.setTimeout(function()
.mydiv'
).hide('
blind'
{},
500)
4.},
5000);
5.//而这是在1.4中可以使用delay()这一功能来实现的方式(这很像是休眠)
.mydiv"
).delay(5000).hide('
500);
28.如何把已创建的元素动态地添加到DOM中:
newDiv
newDiv.attr('
id'
'
myNewDiv'
).appendTo('
body'
29.如何限制“Text-Area”域中的字符的个数:
1.jQuery.fn.maxLength
function(max){
this.each(function(){
type
this.tagName.toLowerCase();
inputType
this.type?
this.type.toLowerCase()
null;
if(type
text"
password"
){
//Apply
the
standard
maxLength
this.maxLength
max;
textarea"
this.onkeypress
function(e){
ob
event;
keyCode
ob.keyCode;
hasSelection
document.selection?
document.selection.createRange().text.length
0
this.selectionStart
!
this.selectionEnd;
(this.value.length
max
(keyCode
50
32
13)
ob.ctrlKey
ob.altKey
hasSelection);
16.
this.onkeyup
17.
if(this.value.length
max){
18.
this.value
this.value.substring(0,max);
19.
20.
21.
22.
23.};
24.//用法
25.$('
#mytextarea'
).maxLength(500);
30.如何为函数创建一个基本的测试
1.//把测试单独放在模块中
2.module("
Module
B"
3.test("
some
other
test"
//指明测试内部预期有多少要运行的断言
expect
(2);
//一个比较断言,相当于JUnit的assertEquals
equals(
true,
false,
failing
passing
31.如何在jQuery中克隆一个元素:
cloned
#somediv'
).clone();
32.在jQuery中如何测试某个元素是否可见
1.if($(element).is('
visible'
true'
//该元素是可见的
33.如何把一个元素放在屏幕的中心位置:
1.jQuery.fn.center
function
this.css('
position'
absolute'
top'
(
$(window).height()
-
this.height()
/
+$(window).scrollTop()
px'
left'
$(window).width()
this.width()
2+$(window).scrollLeft()
this;
7.//这样来使用上面的函数:
8.$(element).center();
34.如何把有着某个特定名称的所有元素的值都放到一个数组中:
arrInputValues
new
Array();
2.$("
input[name='
table[]'
]"
arrInputValues.push($(this).val());
4.});
35.如何从元素中除去HTML
1.(function($)
$.fn.stripHtml
regexp
/<
("
[^"
]*"
|'
[^'
]*'
|[^'
])*>
/gi;
this.each(function()
$(this).html(
$(this).html().replace(regexp,”"
$(this);
9.})(jQuery);
10.//用法:
11.$('
p'
).stripHtml();
36.如何使用closest来取得父元素:
#searchBox'
).closest('
div'
37.如何使用Firebug和Firefox来记录jQuery事件日志:
1.//
允许链式日志记录
用法:
3.$('
).hide().log('
div
hidden'
).addClass('
someClass'
4.jQuery.log
jQuery.fn.log
(msg)
(console){
console.log("
%s:
%o"
msg,
this);
9.};
38.如何强制在弹出窗口中打开链接:
1.jQuery('
a.popup'
newwindow=window.open($(this).attr('
),'
height=200,width=150'
(window.focus)
newwindow.focus();
39.如何强制在新的选项卡中打开链接:
a.newTab'
newwindow=window.open($(this).href);
jQuery(this).target
_blank"
;
5.});
40.在jQuery中如何使用.siblings()来选择同辈元素
不这样做
#nav
li'
).click(function(){
).removeClass('
active'
$(this).addClass('
6.//替代做法是
7.$('
).siblings().removeClass('
41.如何切换页面上的所有复选框:
tog
或者为true,如果它们在加载时为被选中状态的话
a'
).click(function()
input[type=checkbox]"
).attr("
!
tog);
tog;
6.});
42.如何基于一些输入文本来过滤一个元素列表:
1.//如果元素的值和输入的文本相匹配的话
2.//该元素将被返回
.someClass'
).filter(function()
$(this).attr('
value'
input#someId'
).val();
5.})
43.如何获得鼠标垫光标位置x和y
1.$(document).ready(function()
$(document).mousemove(function(e){
$(’#XY’).html(”X
Axis
”
e.pageX
|
Y
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 案例 经典