常见26个Jquery使用技巧（转）

最新推荐文章于 2020-08-10 23:23:08 发布
最新推荐文章于 2020-08-10 23:23:08 发布
阅读量1.3k 收藏
点赞数
分类专栏： JavaScript 文章标签： jquery function stylesheet html javascript google
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a497785609/article/details/6154748
版权

本文列出jquery一些应用小技巧，比如有禁止右键点击、隐藏搜索文本框文 字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元 素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类 库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。
请看下文jquery技巧：
1、禁止右键点 击

1$(document).ready(function(){
2$(document).bind("contextmenu",function(e){
3return  false;
4});
5});

2、 隐藏搜索文本框文字

01$(document).ready(function() {
02$("input.text1").val("Enter  your search text here");
03textFill($('input.text1'));
04});
05 
06function textFill(input){ //input  focus text function
07var originalvalue = input.val();
08input.focus( function(){
09if( $.trim(input.val())  == originalvalue ){ input.val(''); }
10});
11input.blur( function(){
12if( $.trim(input.val()) == ''  ){ input.val(originalvalue); }
13});
14}

3、 在 新窗口中打开链接

01$(document).ready(function()  {
02//Example 1: Every link will open in a new window
03$('a[href^="<a href="http://%22]%27%29.attr%28%22target/">http://"]').attr("target</a>","_blank");
04 
05//Example 2: Links  with the rel="external" attribute will only open in a new window
06$('a[@rel$='external']').click(function(){
07this.target = "_blank";
08});
09});
10//  how to use
11<A href="<a href="http://www.opensourcehunter.com/">http://www.opensourcehunter.com</a>" rel=external>open link</A>

4、检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。

01$(document).ready(function()  {
02// Target Firefox 2 and above
03if  ($.browser.mozilla && $.browser.version >= "1.8" ){
04// do something
05}
06 
07// Target  Safari
08if( $.browser.safari ){
09// do  something
10}
11 
12// Target Chrome
13if(  $.browser.chrome){
14// do something
15}
16 
17// Target Camino
18if( $.browser.camino){
19// do  something
20}
21 
22// Target Opera
23if(  $.browser.opera){
24// do something
25}
26 
27// Target IE6 and below
28if ($.browser.msie &&  $.browser.version <= 6 ){
29// do something
30}
31 
32// Target anything above IE6
33if ($.browser.msie  && $.browser.version > 6){
34// do something
35}
36});

5、预加载图片

1$(document).ready(function() {
2jQuery.preloadImages =  function()
3{
4for(var i = 0;  i").attr("src", arguments[i]);
5}
6};
7// how to use
8$.preloadImages("image1.jpg");
9});

6、页面样式切换

01$(document).ready(function() {
02$("a.Styleswitcher").click(function() {
03//swicth  the LINK REL attribute with the value in A REL attribute
04$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
05});
06// how to use
07// place this in your  header
08<LINK href="default.css" type=text/css  rel=stylesheet>
09// the links
10<A  class=Styleswitcher href="#" rel=default.css>Default  Theme</A>
11<A href="#"  rel=red.css>Red Theme</A>
12<A  href="#" rel=blue.css>Blue Theme</A>
13});

7、 列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

01$(document).ready(function() {
02function equalHeight(group)  {
03tallest = 0;
04group.each(function()  {
05thisHeight = $(this).height();
06if(thisHeight > tallest) {
07tallest =  thisHeight;
08}
09});
10group.height(tallest);
11}
12// how to use
13$(document).ready(function() {
14equalHeight($(".left"));
15equalHeight($(".right"));
16});
17});

8、 动态控制 页面字体大小用户可以改变页面字体大小

01$(document).ready(function() {
02// Reset the font  size(back to default)
03var originalFontSize =  $('html').css('font-size');
04$(".resetFont").click(function(){
05$('html').css('font-size', originalFontSize);
06});
07// Increase the font size(bigger font0
08$(".increaseFont").click(function(){
09var  currentFontSize = $('html').css('font-size');
10var  currentFontSizeNum = parseFloat(currentFontSize, 10);
11var  newFontSize = currentFontSizeNum*1.2;
12$('html').css('font-size', newFontSize);
13return false;
14});
15// Decrease the font size(smaller font)
16$(".decreaseFont").click(function(){
17var currentFontSize =  $('html').css('font-size');
18var currentFontSizeNum =  parseFloat(currentFontSize, 10);
19var newFontSize =  currentFontSizeNum*0.8;
20$('html').css('font-size',  newFontSize);
21return false;
22});
23});

9、返回页面顶部功能

01$(document).ready(function() {
02$('a[href*=#]').click(function() {
03if  (location.pathname.replace(/^///,'') ==  this.pathname.replace(/^///,'')
04&&  location.hostname == this.hostname) {
05var $target =  $(this.hash);
06$target = $target.length &&  $target
07|| $('[name=' + this.hash.slice(1) +']');
08if ($target.length) {
09var targetOffset =  $target.offset().top;
10$('html,body')
11.animate({scrollTop: targetOffset}, 900);
12return false;
13}
14}
15});
16// how to use
17// place  this where you want to scroll to
18<A name=top></A>
19// the link
20<A href="#top">go to top</A>
21});

10、获得鼠标指针 ＸＹ值

1$(document).ready(function() {
2$().mousemove(function(e){
3//display the x and y axis  values inside the div with the id XY
4$('#XY').html("X  Axis : " + e.pageX + " | Y Axis " + e.pageY);
5});
6// how to use
7<DIV id=XY></DIV>
8 
9});

11、 验证元素是否为空

1$(document).ready(function() {
2if ($('#id').html()) {
3// do something
4}
5});

12、替换元素

1$(document).ready(function() {
2$('#id').replaceWith('
3<DIV>I have been  replaced</DIV>
4 
5');
6});

13、jQuery延时加载功能

1$(document).ready(function() {
2window.setTimeout(function() {
3// do something
4}, 1000);
5});

14、 移除单词功能

1$(document).ready(function()  {
2var el = $('#id');
3el.html(el.html().replace(/word/ig, ""));
4});

16、验证元素是否存在于Ｊｑｕｅｒｙ对象集合中

1$(document).ready(function() {
2if ($('#id').length) {
3// do something
4}
5});

17、使整个ＤＩＶ可点击

1$(document).ready(function() {
2$("div").click(function(){
3//get the url from href  attribute and launch the url
4window.location=$(this).find("a").attr("href"); returnfalse;
5});
6// how to use
7<DIV><A  href="index.html">home</A></DIV>
8 
9});

18、ID与 Class之间转换当改变Window大小时，在ID与Class之间切换

01$(document).ready(function() {
02function  checkWindowSize() {
03if ( $(window).width() > 1200 )  {
04$('body').addClass('large');
05}
06else {
07$('body').removeClass('large');
08}
09}
10$(window).resize(checkWindowSize);
11});

19、 克隆对象

1$(document).ready(function() {
2var  cloned = $('#id').clone();
3// how to use
4<DIV id=id></DIV>
5 
6});

20、使元素居屏幕中间位置

1$(document).ready(function() {
2jQuery.fn.center =  function () {
3this.css("position","absolute");
4this.css("top", ( $(window).height() - this.height() ) /  2+$(window).scrollTop() + "px");
5this.css("left", (  $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
6return this;
7}
8$("#id").center();
9});

21、写自己的选择器

01$(document).ready(function() {
02$.extend($.expr[':'], {
03moreThen1000px: function(a) {
04return $(a).width() > 1000;
05}
06});
07$('.box:moreThen1000px').click(function() {
08// creating a simple js alert box
09alert('The element  that you have clicked is over 1000 pixels wide');
10});
11});

22、统计元素个数

1$(document).ready(function() {
2$("p").size();
3});

23、使用自己的 Bullets

1$(document).ready(function() {
2$("ul").addClass("Replaced");
3$("ul > li").prepend("‒  ");
4// how to use
5ul.Replaced { list-style :  none; }
6});

24、引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.

01//Example 1
02<SCRIPT src="<a href="http://www.google.com/jsapi%22%3E%3C/SCRIPT">http://www.google.com/jsapi"></SCRIPT</a>>
03<SCRIPT type=text/javascript>
04google.load("jquery", "1.2.6");
05google.setOnLoadCallback(function() {
06// do something
07});
08</SCRIPT><SCRIPT src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>"  type=text/javascript></SCRIPT>
09 
10//  Example 2:(the best and fastest way)
11<SCRIPT src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>"  type=text/javascript></SCRIPT>

25、禁用Jquery（动画）效果

1$(document).ready(function() {
2jQuery.fx.off = true;
3});

26、 与 其他Javascript类库冲突解决方案

1$(document).ready(function() {
2var $jq = jQuery.noConflict();
3$jq('#id').show();
4});

清山博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 常见开发使用技巧总结
10-29
下面这些知识都是开发过程中，经常遇到的。所以整理了下，需要的朋友可以参考下。
常见26个jquery使用技巧详
天天开心
03-02 92
[code] 本文列出jquery一些应用小技巧，比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、...
jQuery的100个使用技巧
xjanting的博客
03-21 552
1.当document文档就绪时执行JavaScript代码。 　　我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。 "http://code.jquery.com/jquery-1.10.2.min.js"> // Different ways
10个最常见的JQuery面试题
weixin_45820444的博客
08-10 617
(非原创) 毫无疑问，jQuery给了JavaScript急需的提振，这是一门如此有用，但同时总是常常被低估的语言. 在 jQuery 粉墨登场之前，我们曾经会写出冗长的JavaScript代码，不仅仅为更大型的应用程序，有时即使是更小的应用程序也要如此. 那种代码常常是既难以阅读又难以维护的. 在使用这个优秀的库之前写过原生的JavaScript，仅仅在用过它的一个月之后，我就能意识到jQuery的真正力量. 鉴于它的巨大人气，有关jQuery的面试问题，以及有关HTML和JavaScript的数量在任何
jQuery常见开发技巧详细整理
10-27
jquery开发过程中经验丰富可以提高开发技巧，本文整理了一些常见的jquery开发技巧，有需要的朋友可以参考下
30个经典的jQuery代码开发技巧
10-25
主要介绍了30个经典的jQuery代码开发技巧,包含了常见属性、方法、元素等的使用技巧,非常具有实用价值,需要的朋友可以参考下
百度地图显示多个标注点
热门推荐
清山博客
04-18 9万+
效果图：
jQuery获得页面元素的绝对/相对位置
清山博客
08-09 8万+
获取页面某一元素的绝对X,Y坐标，可以用offset()方法：1 2 var X = $('#DivID').offset().top;var Y = $('#DivID').offset().left;获取相对(父元素)位置:1 2 var X = $('#DivID').position().top;var Y = $('#DivID').position().left;
jQuery easyUI datagrid 增加求和统计行
清山博客
01-14 3万+
在datagrid的onLoadSuccess事件增加代码处理。             .subtotal { font-weight: bold; }/*合计单元格样式*/                 function onLoadSuccess() {             //添加“合计”列             $('#table').datagrid('ap
百度地图-省市县联动加载地图
清山博客
04-26 2万+
在平常项目中，我们会遇到这样的业务场景：         客户希望把自己的门店绘制在百度地图上，通过省、市、区的选择，然后加载不同区域下的店铺位置。 先看看效果图吧： 实现思路： 第一步：整理行政区域表：       要实现通过地区筛选来动态加载地图，首先要有一套中国行政区域表。哪里来呢？如果你做过淘宝API接入，应该会想到淘宝物流接口提供了一个官方的行政区域代码，这个比较靠谱。
UC浏览器 分享到朋友圈和微信好友
清山博客
04-28 2万+
用手机UC浏览器访问新浪微博，会注意到有这样的两个分享按钮： 在手机端浏览器里，点击分享按钮，就可以启动微信客户端并分享到微信。研究了下其源代码，存在这样的一个js：http://mjs.sinaimg.cn/wap/module/share/201504071745/js/addShare.min.js 从里面抽离出了分享调用的方法，方便调用。(注意：这个分享功能只在UC手机浏览器有
javascript禁用button：原生方式和jQuery方式
清山博客
11-08 1万+
这个问题看似很简单，但是确实有时候也有必要拿出来给大家看。     上面是一段按钮的html代码   1.原生的js方式：document.getElementByIdx_x_x("btnShow").disabled=true;//这样就把按钮禁用了，如果要重新开启按钮，则可以让disabled=false;即可.   2.jQuery方式：$("#btnShow").attr({"d
IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
清山博客
04-12 1万+
以下代码在IE8下运行通过，在IE9中出错：document.createElement('');错误提示：exception : SCRIPT5022: DOM Exception: INVALID_CHARACTER_ERR (5)思路分析：第一步：兼容IE9，firefox，Opera，Safari等浏览器；var iframe = document.createElement("iframe");iframe.setAttribute("id", "yui-history-iframe");ifra
Web移动端使用localStorage缓存Js和css文件
清山博客
09-09 1万+
将jquery和公共样式缓存到localStorage，可以减少Http请求，从而优化页面加载时间，下面的代码可以实现此功能： //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp20150
百度地图 驾车/公交查询Demo（支持多起点多终点）
清山博客
01-23 1万+
效果图： html页面： 百度地图-驾车/公交查询 线路查询 从 到 虹桥T1
图片onerror事件，为图片加载指定默认图片
清山博客
07-31 1万+
为图片指定加载失败时显示默认图片，js输出的img对象，onerror是事件，不是属性，所以这样写是不起作用的： var img = $(document.createElement("IMG"));     img.attr({ "src": imgs[idx], "alt": tips[idx], "onerror": "this.src='" + NoPicPath + "'
阻止浏览器冒泡事件，兼容firefox和ie
清山博客
09-19 1万+
//得到事件 function getEvent(){      if(window.event)    {return window.event;}      func=getEvent.caller;      while(func!=null){          var arg0=func.arguments[0];          if(arg0){
alert可以弹出图片么_web前端9个开发常见小技巧，还有你不会的么
最新发布
06-06
至于 Web 前端开发常见小技巧，这里列举一些： 1. 使用 CSS 预处理器（如 Less 或 Sass）来简化样式表的编写。 2. 使用 CSS Grid 或 Flexbox 等布局技术来创建响应式布局。 3. 使用 JavaScript 框架（如 React 或 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值