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 相关文章推荐
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 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源码分析之变量的存储过程分解
2014/07/03 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
使用PHP开发留言板功能
2019/11/19 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
jquery登录的异步验证操作示例
2019/05/09 jQuery
vue如何使用async、await实现同步请求
2019/12/09 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
Python工厂函数用法实例分析
2018/05/14 Python
tensorflow自定义激活函数实例
2020/02/04 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
应届护士求职信范文
2014/01/26 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
女性健康讲座主持词
2015/07/04 职场文书
工作自我评价范文
2019/03/21 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
学习nginx基础知识
2021/09/04 Servers
Django框架中模型的用法
2022/06/10 Python
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS