JQUERY实用大全Word格式文档下载.docx
- 文档编号:15352356
- 上传时间:2022-10-29
- 格式:DOCX
- 页数:15
- 大小:22.59KB
JQUERY实用大全Word格式文档下载.docx
《JQUERY实用大全Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《JQUERY实用大全Word格式文档下载.docx(15页珍藏版)》请在冰豆网上搜索。
tfoot>
/tfoot>
'
$($('
thead'
).clone(true,true).children().get().reverse()).each(function(){
$tfoot.append($(this));
$tfoot.insertAfter('
tablethead'
3.加载外部内容
你需要添加外部内容到div标签么?
如果使用jquery,这就变得很简单,具体实例如下:
#content"
).load("
somefile.html"
function(response,status,xhr){
//errorhandling
if(status=="
error"
){
).html("
Anerroroccured:
"
+xhr.status+"
+xhr.statusText);
}
4.相同高度的标签纵列
当你的网站是用纵列来显示的内容是,如果所有的模块列都是等高度的将会更好看,更整洁。
下面的代码将会,将为所有类为.col的div标签自适应为(所有纵列高度最高)的等高模块:
varmaxheight=0;
div.col"
).each(function(){
if($(this).height()>
maxheight){maxheight=$(this).height();
).height(maxheight);
5.表格的条纹(斑马条纹)
在表格上展示数据时,颜色交替无疑会增加可读性;
下面这段代码,将为两行中间的的一行自动加上CSS类(css类自己定义):
$(document).ready(function(){
tabletr:
even"
).addClass('
stripe'
6.页面局部刷新
如果你需要刷新页面的一部分,下面会有一定的帮助,只需要3行代码。
在这个例子中,#refreshdiv每10秒自动刷新:
setInterval(function(){
#refresh"
).load(location.href+"
#refresh>
*"
"
"
},10000);
//millisecondstowait
Preloadimages
jQuery轻松预载图像背景中的游客不会永远等待时,他们将要显示的图像。
此代码可以使用,更新图像列表只需8行:
$.preloadImages=function(){
for(vari=0;
i<
arguments.length;
i++){
img/>
).attr("
src"
arguments[i]);
}
$(document).ready(function(){
$.preloadImages("
hoverimage1.jpg"
hoverimage2.jpg"
7.在新标签/窗口打开链接
target=”blank”属性允许你链接在新窗口打开的力量。
当打开一个新窗口或标签的外部链接是相关,同域的链接一定要在同一个窗口中打开。
此代码检测,如果一个链接是外部的,如果是,增加了一个目标target=”blank”的属性给它。
$('
a'
).each(function(){
vara=newRegExp('
/'
+window.location.host+'
if(!
a.test(this.href)){
$(this).click(function(event){
event.preventDefault();
event.stopPropagation();
window.open(this.href,'
_blank'
});
8.使用jQuery让div满宽度/高度
这个方便的代码允许你根据视图窗口创建一个全屏宽度/高度的div。
代码也处理窗口大小调整。
对模态对话框或弹出窗口来说不错。
//globalvars
varwinWidth=$(window).width();
varwinHeight=$(window).height();
//setinitialdivheight/width
div'
).css({
'
width'
:
winWidth,
height'
winHeight,
//makesuredivstaysfullwidth/heightonresize
$(window).resize(function(){
$('
9.检验密码强度
当你让用户定义的密码时,这是表示密码一般是多么强大的好东西。
这就是下面代码要做的事:
首先,假设HTML是:
inputtype="
password"
name="
pass"
id="
/>
spanid="
passstrength"
>
/span>
这里是相应的jQuery代码。
输入的密码将被评估使用正则表达式和一个消息将被返回给用户,让他知道如果他选择的密码强,中,弱,或过短。
#pass'
).keyup(function(e){
varstrongRegex=newRegExp("
^(?
=.{8,})(?
=.*[A-Z])(?
=.*[a-z])(?
=.*[0-9])(?
=.*\\W).*$"
"
g"
varmediumRegex=newRegExp("
=.{7,})(((?
=.*[a-z]))|((?
=.*[0-9]))|((?
=.*[0-9]))).*$"
varenoughRegex=newRegExp("
(?
=.{6,}).*"
if(false==enoughRegex.test($(this).val())){
#passstrength'
).html('
MoreCharacters'
}elseif(strongRegex.test($(this).val())){
).className='
ok'
;
Strong!
}elseif(mediumRegex.test($(this).val())){
alert'
Medium!
}else{
error'
Weak!
returntrue;
10.使用jQuery调整图像大小
尽管你应该调整您的图像在服务器端(使用PHP和GD)。
使用jQuery调整图像也非常有用。
下面的代码将诠释怎么用。
$(window).bind("
load"
function(){
//IMAGERESIZE
#product_cat_listimg'
varmaxWidth=120;
varmaxHeight=120;
varratio=0;
varwidth=$(this).width();
varheight=$(this).height();
if(width>
maxWidth){
ratio=maxWidth/width;
$(this).css("
width"
maxWidth);
height"
height*ratio);
height=height*ratio;
}
if(height>
maxHeight){
ratio=maxHeight/height;
maxHeight);
width*ratio);
width=width*ratio;
//$("
#contentpageimg"
).show();
11.页面滚动自动加载内容
一些网站如Twitter通过滚动加载内容。
这意味着一个页面所有的内容是通过你向下滚动来实现动态加载的。
这里将介绍怎么做的,你可以复制到自己网站看看效果:
varloading=false;
$(window).scroll(function(){
if((($(window).scrollTop()+$(window).height())+250)>
=$(document).height()){
if(loading==false){
loading=true;
$('
#loadingbar'
).css("
display"
block"
$.get("
load.php?
start="
+$('
#loaded_max'
).val(),function(loaded){
$('
body'
).append(loaded);
).val(parseInt($('
).val())+50);
none"
loading=false;
});
).val(50);
12.检查图片是否已加载
这段代码是我使用图片时经常用到的,它是了解一个图片是否加载完毕最好的方式:
varimgsrc='
img/image1.png'
img/>
).load(function(){
alert('
imageloa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQUERY 实用 大全