jQuery实用技巧必备（下）

2024-10-16 18:33:57

本文实例总结了经典且实用的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实用技巧的全部内容，希望对大家的学习有所帮助。

jQuery实用技巧第1/2页

1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge
jQuery编写widget的一些技巧分享

1.在编写widget的时候,一般我们需要绑定一些事件,最好将这些widget的绑定事件加上当前widget的命名空间.如果同一个jQuery对象,使用了两个widget,而两个widget都绑定了相同的事件名称,可能会出现问题.在销毁widget的时候,去除绑定事件也很方便,只需要unbind(".namespace")就可以了. 2.在写jQuery的时候,因为jQuery对象是支持连写的.譬如:$(obj).css("height","20px&qu
编写高效jQuery代码的4个原则和5个技巧

jQuery的编写原则: 一.不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大.所以有原生方法可以使用的场合,尽量避免使用jQuery. 复制代码代码如下: $("a").click(function(){ alert($(this).attr("id"));});//改良后↓$("a").click(function(){ alert(t
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

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

1 jQuery UI 2 为我所用 2.1 Tabs 2.2 Accordion 2.2.1 使用基本的Accordion 2.2.2 实现打开多个标签 2.2.3 Accordion的嵌套 3 给插件应用主题--Theme Roller 3.1 更改配色 3.2 更改图标 4 相关连接 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行jQuery代
jQuery实用技巧必备（上）

本文实例总结了经典且实用的jQuery代码开发技巧.分享给大家供大家参考.具体如下: 1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 Hide when clicked in the search field, the value.(example can be found below in the
jQuery实用技巧必备（中）

本文实例总结了经典且实用的jQuery代码开发技巧.分享给大家供大家参考.具体如下: 12.预加载图片如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们: $.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('<img>').attr('src', arguments[i]); } }; $.preloadImages('img/hover1.png
jQuery源码分析之jQuery中的循环技巧详解

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha
jQuery 常见开发使用技巧总结

1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.ge
jQuery实用技巧必备（下）

本文实例总结了经典且实用的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()
Jquery常用技巧收集整理篇

比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片等等.具体如下: 禁止右键点击复制代码代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 隐藏搜索文本框文字复制代码代码如下: $(document).ready(function() { $("input.text1").va
jQuery基础学习技巧总结第1/4页

一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度. jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig
分享五个有用的jquery小技巧

下文里技巧实现的效果虽然并不新鲜,但通过jQuery的封装,HTML实现了很大的清洁.清爽简洁又高效的代码任何时候都是开发者所醉心追求的终极目标,也许它简单,但是它能量巨大.一起来看看我们小编推荐给大家的五个非常实用的jQuery技巧. 1.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { return false; }); }); 当然jquery1.7版本以后bin
jQuery操作表格（table）的常用方法、技巧汇总

以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色复制代码代码如下: $('#table1 tr').hover(function(){ $(this).children('td').addClass('hover')}, function(){ $(this).children('td').removeClass('hover')}); 方法二: 复制代码代码如下: $("#table1 tr:gt(0)").hover(function()
jquery操作复选框(checkbox)的12个小技巧总结

1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() { if ($(this).attr('che
jQuery 技巧大全(新手入门篇)

一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度.jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初创建
关于jQuery新的事件绑定机制on()的使用技巧

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔
jquery常用技巧及常用方法列表集合

1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象. 普通的dom对象一般可以通过$()转换成jquery对象. 如:$(document.g

jQuery实用技巧必备（下）

相关推荐

随机推荐