Jquery下的26个实用小技巧,Jquery常用技巧收集整理篇_jquery_脚本之家

诸如有取缔右键点击、隐敝寻找文本框文字、在新窗口中开辟链接、检查测验浏览器、预加载图片等等。具体如下:
防止右键点击 复制代码 代码如下: $.ready{
$.bind(“contextmenu”,function; }卡塔尔; 隐蔽寻觅文本框文字 复制代码 代码如下: $.ready { $.val(“Enter your
search text here”State of Qatar; textFill; function textFill{ //input focus text
function var originalvalue = input.val(卡塔尔(قطر‎; input.focus{ if ==
originalvalue State of Qatar{ input.val; input.blur{ if == ” 卡塔尔(قطر‎{ input.val; }
在新窗口中开荒链接 复制代码 代码如下:
$.ready { //Example 1: Every link will open in a new window $.attr;
//Example 2: Links with the rel=”external” attribute will only open in a
new window $(‘a[@rel$=’external’]’).click{ this.target = “_blank”;
}); }); // how to use open link
检查评定浏览器 注: 在本子jQuery 1.4中,$.support 替换掉了$.browser 变量。
复制代码 代码如下: $.ready { // Target
Firefox 2 and above if ($.browser.mozilla && $.browser.version >=
“1.8” 卡塔尔国{ // do something } // Target Safari if{ // do something } //
Target Chrome if{ // do something } // Target Camino if{ // do something
} // Target Opera if{ // do something } // Target IE6 and below if
($.browser.msie && $.browser.version <= 6 卡塔尔{ // do something } //
Target anything above IE6 if ($.browser.msie && $.browser.version >
6State of Qatar{ // do something } }卡塔尔(قطر‎; 预加载图片 复制代码 代码如下: $.ready {
jQuery.preloadImages = function(卡塔尔 { for.attr; } }; // how to use
$.preloadImages; 页面样式切换 复制代码
代码如下: $.ready { $.click { //swicth the LINK REL attribute with the
value in A REL attribute $(‘link[rel=stylesheet]’).attr.attr; // how
to use // place this in your header // the links Default
Theme Red
Theme Blue
Theme }卡塔尔(قطر‎; 列中度相近假如运用了七个CSS列,使用此种方式得以是两列的中度同样。 复制代码 代码如下: $.ready { function
equalHeight { tallest = 0; group.each { thisHeight = $; if { tallest =
thisHeight; } }卡塔尔; group.height; } // how to use $.ready { equalHeight;
equalHeight; 动态调控页面字体大小 复制代码 代码如下: $.ready { // Reset the font
size var originalFontSize = $.css; $.click.css(‘font-size’,
originalFontSize卡塔尔(قطر‎; }卡塔尔; // Increase the font size(bigger font0 $.click{
var currentFontSize = $.css; var currentFontSizeNum = parseFloat; var
newFontSize = currentFontSizeNum*1.2; $.css(‘font-size’, newFontSize);
return false; }); // Decrease the font size $.click{ var currentFontSize
= $.css; var currentFontSizeNum = parseFloat; var newFontSize =
currentFontSizeNum*0.8; $.css(‘font-size’, newFontSizeState of Qatar; return false;
}卡塔尔国; }State of Qatar; 重返页面最上端作用 复制代码
代码如下: $.ready { $.click { if (location.pathname.replace ==
this.pathname.replace && location.hostname == this.hostname卡塔尔(قطر‎ { var
$target = $; $target = $target.length && $target || $(‘[name=’ +
this.hash.slice; if { var targetOffset = $target.offset
.animate({scrollTop: targetOffset}, 900); return false; } } }); // how
to use // place this where you want to scroll to // the link 金沙8331网址,go to
top }卡塔尔国; 得到鼠标指针XY值
复制代码 代码如下: $.ready.mousemove{
//display the x and y axis values inside the div with the id XY
$.html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageYState of Qatar; }卡塔尔国; // how to
use

比如有取缔右键点击、蒙蔽寻觅文本框文字、在新窗口中开发链接、检查测量试验浏览器、预加载图片、页面样式切换、全体列等高、动态调节页面字体大小、获得鼠标指针的X值Y值、验证元素是或不是为空、替换到分、延迟加载、验证成分是或不是留存于Jquery会集中、使DIV可点击、克隆对象、使成分居中、总结成分个数、使用谷歌(Google卡塔尔主机上的Jquery类库、禁止使用Jquery效果、消除Jquery类库与其余Javascript类库冲突难题。
具体如下: 1. 不允许右键点击 复制代码
代码如下: $.ready{ $.bind(“contextmenu”,function; }卡塔尔(قطر‎; 2.
藏身搜索文本框文字 复制代码 代码如下:
$.ready { $.val(“Enter your search text here”卡塔尔国; textFill; function
textFill{ //input focus text function var originalvalue = input.val(卡塔尔国;
input.focus{ if == originalvalue 卡塔尔(قطر‎{ input.val; input.blur{ if == ” 卡塔尔{
input.val; } 3 在新窗口中开垦链接 复制代码 代码如下: $.ready { //Example 1: 伊夫ry
link will open in a new window $.attr; //Example 2: Links with the
rel=”external” attribute will only open in a new window
$(‘a[@rel$=’external’]’).click{ this.target = “_blank”; }); }); //
how to use open link 4 检查实验浏览器 注:
在本子jQuery 1.4中,$.support 替换掉了$.browser 变量。 复制代码 代码如下: $.ready { // Target Firefox
2 and above if ($.browser.mozilla && $.browser.version >= “1.8” 卡塔尔(قطر‎{ //
do something } // Target Safari if{ // do something } // Target Chrome
if{ // do something } // Target Camino if{ // do something } // Target
Opera if{ // do something } // Target IE6 and below if ($.browser.msie
&& $.browser.version <= 6 卡塔尔{ // do something } // Target anything
above IE6 if ($.browser.msie && $.browser.version > 6State of Qatar{ // do
something } }卡塔尔国; 5 预加载图片 复制代码
代码如下: $.ready { jQuery.preloadImages = function(卡塔尔(قطر‎ { for.attr; } };
// how to use $.preloadImages; 6 页面样式切换 复制代码 代码如下: $.ready { $.click { //swicth
the LINK REL attribute with the value in A REL attribute
$(‘link[rel=stylesheet]’).attr.attr; // how to use // place this in
your header // the links Default
Theme Red
Theme Blue
Theme }卡塔尔(قطر‎; 7 列高度风度翩翩致
假诺应用了三个CSS列,使用此种方式能够是两列的可观生龙活虎致。 复制代码 代码如下: $.ready { function
equalHeight { tallest = 0; group.each { thisHeight = $; if { tallest =
thisHeight; } }卡塔尔(قطر‎; group.height; } // how to use $.ready { equalHeight;
equalHeight; 8 动态调控页面字体大小 客户能够更正页面字体大小 复制代码 代码如下: $.ready { // Reset the font
size var originalFontSize = $.css; $.click.css(‘font-size’,
originalFontSize卡塔尔(قطر‎; }卡塔尔国; // Increase the font size(bigger font0 $.click{
var currentFontSize = $.css; var currentFontSizeNum = parseFloat; var
newFontSize = currentFontSizeNum*1.2; $.css(‘font-size’, newFontSize);
return false; }); // Decrease the font size $.click{ var currentFontSize
= $.css; var currentFontSizeNum = parseFloat; var newFontSize =
currentFontSizeNum*0.8; $.css(‘font-size’, newFontSize卡塔尔; return false;
}State of Qatar; }卡塔尔; 9 重临页面顶端作用 复制代码
代码如下: $.ready { $.click { if (location.pathname.replace ==
this.pathname.replace && location.hostname == this.hostnameState of Qatar { var
$target = $; $target = $target.length && $target || $(‘[name=’ +
this.hash.slice; if { var targetOffset = $target.offset
.animate({scrollTop: targetOffset}, 900); return false; } } }); // how
to use // place this where you want to scroll to // the link go to
top }卡塔尔(قطر‎; 10
获得鼠标指针XY值 复制代码 代码如下:
$.ready.mousemove{ //display the x and y axis values inside the div with
the id XY $.html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY卡塔尔(قطر‎; }卡塔尔国; //
how to use

}卡塔尔(قطر‎; 验证成分是或不是为空 复制代码 代码如下:
$.ready { if { // do something } }卡塔尔国; 替换元素 复制代码 代码如下: $.ready.replaceWith(‘

}卡塔尔(قطر‎; 11 验证成分是或不是为空 复制代码
代码如下: $.ready { if { // do something } }卡塔尔; 12 替换到分 复制代码 代码如下: $.ready.replaceWith(‘

I have been replaced

I have been replaced

卡塔尔(قطر‎; }State of Qatar; jQuery延时加载作用 复制代码
代码如下: $.ready { window.set提姆eout { // do something }, 1000卡塔尔; }卡塔尔;
移除单词功效 复制代码 代码如下: $.ready {
var el = $; el.html.replace; 验证成分是或不是留存于jQuery对象集结中 复制代码 代码如下: $.ready { if { // do
something } }卡塔尔国; 使整个DIV可点击 复制代码
代码如下: $.ready.click{ //get the url from href attribute and launch
the url window.location=$.attr; return false; }State of Qatar; // how to use

‘卡塔尔; }State of Qatar; 13 jQuery延时加载功效 复制代码
代码如下: $.ready { window.setTimeout { // do something }, 1000卡塔尔; }State of Qatar; 14
移除单词功用 复制代码 代码如下: $.ready {
var el = $; el.html.replace; 15 验证成分是还是不是留存于Jquery对象集合中
复制代码 代码如下: $.ready { if { // do
something } }卡塔尔国; 16 使全体DIV可点击 复制代码 代码如下: $.ready.click{ //get the url
from href attribute and launch the url window.location=$.attr; return
false; }卡塔尔(قطر‎; // how to use

home

home

}卡塔尔; ID与Class之间转移当改动Window大刻钟,在ID与Class之间切换 复制代码 代码如下: $.ready { function
checkWindowSize.width { $.addClass; } else { $.removeClass; } }
$.resize; 克隆对象 复制代码 代码如下:
$.ready { var cloned = $; // how to use

}卡塔尔国; 17 ID与Class之间转变当改换Window大时辰,在ID与Class之间切换 复制代码 代码如下: $.ready { function
checkWindowSize.width { $.addClass; } else { $.removeClass; } }
$.resize; 18 克隆对象 复制代码 代码如下:
$.ready { var cloned = $; // how to use

}卡塔尔; 使成分居显示器中间地方 复制代码
代码如下: $.ready { jQuery.fn.center = function (卡塔尔国 {
this.css(“position”,”absolute”卡塔尔(قطر‎; this.css.height / 2+$ + “px”卡塔尔;
this.css.width / 2+$ + “px”State of Qatar; return this; } $; 写自身的筛选器 复制代码 代码如下: $.ready {
$.extend($.expr[‘:’], { moreThen1000px: function.width;
$(‘.box:moreThen1000px’State of Qatar.click { // creating a simple js alert box
alert(‘The element that you have clicked is over 1000 pixels wide’State of Qatar; }卡塔尔国;
}State of Qatar; 总计成分个数 复制代码 代码如下:
$.ready.size; 使用自个儿的Bullets 复制代码
代码如下: $.ready.addClass; $.prepend; // how to use ul.Replaced {
list-style : none; } }卡塔尔; 援引谷歌主机上的jQuery类库 复制代码 代码如下: //Example 1

}State of Qatar; 19 使成分居显示器中间地方 复制代码
代码如下: $.ready { jQuery.fn.center = function (卡塔尔国 {
this.css(“position”,”absolute”卡塔尔; this.css.height / 2+$ + “px”卡塔尔(قطر‎;
this.css.width / 2+$ + “px”State of Qatar; return this; } $; 20 写自身的取舍器 复制代码 代码如下: $.ready {
$.extend($.expr[‘:’], { moreThen1000px: function.width;
$(‘.box:moreThen1000px’卡塔尔国.click { // creating a simple js alert box
alert(‘The element that you have clicked is over 1000 pixels wide’卡塔尔(قطر‎; }卡塔尔(قطر‎;
}卡塔尔; 21 总计成分个数 复制代码 代码如下:
$.ready.size; 22 使用自个儿的 Bullets 复制代码 代码如下: $.ready.addClass; $.prepend;
// how to use ul.Replaced { list-style : none; } }卡塔尔; 23
援引谷歌主机上的Jquery类库Let 谷歌(Google卡塔尔国 host the jQuery script for you.
This can be done in 2 ways. 复制代码
代码如下: //Example 1

// Example 2:(the best and fastest way)

// Example 2:(the best and fastest way)

剥夺jQuery效果 复制代码 代码如下: $.ready
{ jQuery.fx.off = true; }卡塔尔; 与任何JavaScript类库矛盾技术方案 复制代码 代码如下: $.ready { var $jq =
jQuery.noConflict; }卡塔尔;

  1. 剥夺Jquery效果 复制代码 代码如下:
    $.ready { jQuery.fx.off = true; }卡塔尔(قطر‎; 25.与别的Javascript类库冲突技术方案复制代码 代码如下: $.ready { var $jq =
    jQuery.noConflict; }State of Qatar; 26. Load: > 首先写好
    CSS,相对定位到页面右上角。 复制代码
    代码如下: #loading { position:absolute;z-index:900;text-align:center;
    background-color:#eef2fa;border:1px solid #d8e3e8;
    color:#000;font-size:12px;padding:3px;width:80px; right:0;top:0; } >
    然后用 jQuery 然后在装有图片载入达成之后,隐蔽 Loading DIV。 >
    别忘记载入 jQuery 库哈,刚才测量试验代码的时候地址写错了,少了一些疯掉。 复制代码 代码如下:

> 随意某处插入二个 DIV 就可以,OO 哈哈。

发表评论

电子邮件地址不会被公开。 必填项已用*标注