jQuery实用技巧必备(下)


Posted in Javascript onNovember 03, 2015

本文实例总结了经典且实用的jQuery代码开发技巧。分享给大家供大家参考。具体如下:
23. jQuery延时加载功能

Want to delay something?

$(document).ready(function() {
 window.setTimeout(function() {
  // do something
 }, 1000);
});

24. 移除单词功能

Want to remove a certain word(s)?

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

25. 验证元素是否存在于jquery对象集合中

Simply test with the .length property if the element exists.

$(document).ready(function() {
 if ($('#id').length) {
 // do something
 }
});

26. 使整个DIV可点击

Want to make the complete div clickable?

$(document).ready(function() {
 $("div").click(function(){
  //get the url from href attribute and launch the url
  window.location=$(this).find("a").attr("href"); return false;
 });
// how to use
<DIV><A href="index.html">home</A></DIV>

});

27. ID与Class之间转换

当改变Window大小时,在ID与Class之间切换

$(document).ready(function() {
 function checkWindowSize() {
 if ( $(window).width() > 1200 ) {
  $('body').addClass('large');
 }
 else {
  $('body').removeClass('large');
 }
 }
$(window).resize(checkWindowSize);
});

28. 克隆对象

Clone a div or an other element.

$(document).ready(function() {
 var cloned = $('#id').clone();
// how to use
<DIV id=id></DIV>

});

29. 使元素居屏幕中间位置

Center an element in the center of your screen.

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

30. 写自己的选择器

Write your own selectors.

$(document).ready(function() {
 $.extend($.expr[':'], {
  moreThen1000px: function(a) {
   return $(a).width() > 1000;
  }
 });
 $('.box:moreThen1000px').click(function() {
  // creating a simple js alert box
  alert('The element that you have clicked is over 1000 pixels wide');
 });
});

31. 统计元素个数

Count an element.

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

32. 使用自己的Bullets

Want to use your own bullets instead of using the standard or images bullets?

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

33. 引用Google主机上的Jquery类库

Let Google host the jQuery script for you. This can be done in 2 ways.

//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
 // do something
});
</SCRIPT><SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

 // Example 2:(the best and fastest way)
<SCRIPT type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></SCRIPT>

34. 禁用Jquery(动画)效果

Disable all jQuery effects

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

35. 与其他Javascript类库冲突解决方案

To avoid conflict other libraries on your website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

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

以上就是所有关于jQuery实用技巧的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JS如何判断json是否为空
Jul 06 Javascript
AngularJS实现标签页的两种方式
Sep 05 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
React进阶学习之组件的解耦之道
Aug 07 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
JS实现的自定义map方法示例
May 17 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 #Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 #Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 #Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 #Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 #Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 #Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
jQuery-ui插件sortable实现自由拖动排序
2018/12/01 jQuery
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python进阶篇之字典操作总结
2016/11/16 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
自荐信结尾
2013/10/27 职场文书
毕业生自我鉴定实例
2014/01/21 职场文书
护士进修自我鉴定
2014/02/07 职场文书
部队党性分析材料
2014/02/16 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
图书馆标语
2014/06/19 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
个人先进事迹材料
2014/12/29 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python