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 相关文章推荐
js substr、substring和slice使用说明小记
Sep 15 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
Jul 31 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
js中switch case循环实例代码
Dec 30 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
详解ES6中的let命令
Apr 05 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 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解决约瑟夫环算法实例分析
2019/09/30 PHP
php中yii框架实例用法
2020/12/22 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
深入认识javascript中的eval函数
2009/11/02 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python文件的读写和异常代码示例
2017/10/31 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
简单了解python数组的基本操作
2019/11/26 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
2014年信访工作总结
2014/11/17 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
自书遗嘱范文
2015/08/07 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
html form表单基础入门案例讲解
2021/07/21 HTML / CSS