来自 美高梅4858永利777 2019-12-26 04:15 的文章
当前位置: 美高梅游戏平台网站 > 美高梅4858永利777 > 正文

Jquery常用技巧收集整理篇_jquery_脚本之家

比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下: 禁止右键点击 复制代码 代码如下: $.ready{ $.bind("contextmenu",function; }); 隐藏搜索文本框文字 复制代码 代码如下: $.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; } 在新窗口中打开链接 复制代码 代码如下: $.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 > 6){ // 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', newFontSize); return false; }); }); 返回页面顶部功能 复制代码 代码如下: $.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 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.pageY); }); // 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: 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 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 > 6){ // 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; }); }); 9 返回页面顶部功能 复制代码 代码如下: $.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 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

); }); jQuery延时加载功能 复制代码 代码如下: $.ready { window.setTimeout { // 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; }); // how to use

'); }); 13 jQuery延时加载功能 复制代码 代码如下: $.ready { window.setTimeout { // do something }, 1000); }); 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

本文由美高梅游戏平台网站发布于美高梅4858永利777,转载请注明出处:Jquery常用技巧收集整理篇_jquery_脚本之家

关键词: