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获取变量
Aug 24 Javascript
Javascript模板技术
Apr 27 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue--vuex详解
Apr 15 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
vue2.x数组劫持原理的实现
Apr 19 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP简洁函数小结
2011/08/12 PHP
php 中英文语言转换类
2011/09/07 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
javascript回调函数详解
2018/02/06 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
详解Python中DOM方法的动态性
2015/04/11 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
django解决跨域请求的问题详解
2019/01/20 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
如何写好自荐信
2014/04/07 职场文书
供用电专业求职信
2014/07/07 职场文书
最美护士演讲稿
2014/08/27 职场文书
公司委托书格式范本
2014/09/16 职场文书
保卫工作个人总结
2015/03/03 职场文书
mysql查找连续出现n次以上的数字
2022/05/11 MySQL