20个热门jQuery的提示和技巧

阿东2020 发布于 2013/07/16 09:02
阅读 467
收藏 25
  • 1。优化性能复杂的选择  
  •   
  • 查询DOM中的一个子集,使用复杂的选择时,大幅提高了性能:  
  • var subset = $("");  
  • $("input[value^='']", subset);  
  •   
  • 2。设置上下文和提高性能  
  •   
  • jQuery核心功能上,指定上下文参数。指定context参数,允许从DOM中更深的分支,而不是从DOM根,jQuery来启动。鉴于一个足够大的DOM,指定上下文参数转化为性能提升。  
  • $("input:radio", document.forms[0]);  
  •   
  • 3。现场事件处理程序  
  •   
  • 设置任何一个选择的元素相匹配的事件处理程序,即使它被添加后的初始页面加载到DOM:  
  • $('button.someClass').live('click', someFunction);  
  •   
  • 这允许你通过Ajax加载内容,或通过JavaScript添加事件处理程序的成立为这些元素正确自动。  
  •    
  • 同样,要停止现场事件处理:  
  •   
  • 4。检查索引  
  •   
  • jQuery有索引,但它是一种痛苦,使用你所需要的元素的列表,并通过元素你想要的指标  
  •   
  • var index = e.g $('#ul>li').index( liDomObject );  
  • 以下是比较容易:  
  • $("ul > li").click(function ()  
  • {  
  •     var index = $(this).prevAll().length;  
  • });  
  • 如果你想知道在一个集合元素的索引,例如在一个无序列表的列表项:  
  •   
  • 5。使用jQuery的数据的方法  
  •   
  • jQuery的数据()方法是有用的,不为人所熟知。它可以让你无需修改DOM绑定数据到DOM元素。  
  • $("ul > li").click(function ()  
  • {  
  •     var index = $(this).prevAll().length;  
  • });  
  •   
  • 6。删除一个元素的淡出效果基本show效果  
  •   
  • 结合多个jQuery效果,动画和删除DOM元素。  
  •   
  • $("#myButton").click(function() {  
  •          $("#myDiv").fadeTo("slow", 0.01, function(){ //fade   
  •              $(this).slideUp("slow"function() { //slide up   
  •                  $(this).remove(); //then remove from the DOM   
  •              });  
  •          });  
  • });  
  •   
  • 7。检查是否存在一个元素  
  •   
  • if ($("#someDiv").length) {  
  •     //hooray!!! it exists...   
  • }  
  • 使用下面的代码片段来检查一个元素是否存在与否。  
  •   
  • 8。添加到DOM中动态创建的元素  
  •   
  • 使用下面的代码片段来动态创建一个DIV,并添加到DOM。  
  • var newDiv = $('<div></div>');  
  • newDiv.attr("id","myNewDiv").appendTo("body");  
  •   
  • 9。换行符和chainability的  
  •   
  • 而不是做:  
  •    
  • $("a").hide().addClass().fadeIn().hide();  
  •   
  • 像这样可以增加可读性:  
  • $("a")  
  •   .hide()  
  •   .addClass()  
  •   .fadeIn()  
  •   .hide();  
  •   
  • 10。创建自定义选择  
  •   
  • $.extend($.expr[':'], {  
  •     over100pixels: function(a) {  
  •         return $(a).height() > 100;  
  •     }  
  • });  
  •    
  • $('.box:over100pixels').click(function() {  
  •     alert('The element you clicked is over 100 pixels high');  
  • });  
  •   
  • 11。克隆在jQuery对象  
  •   
  • 使用clone()方法。jQuery的方法克隆任何JavaScript中的DOM对象。  
  •   
  • // Clone the DIV   
  • var cloned = $('#somediv').clone();  
  • jQuery的clone()方法不克隆一个JavaScript对象。克隆JavaScript对象,使用下面的代码。  
  • // Shallow copy   
  • var newObject = jQuery.extend({}, oldObject);  
  •    
  • // Deep copy   
  • var newObject = jQuery.extend(true, {}, oldObject);  
  •   
  • 12。测试,如果事情是隐藏使用jQuery  
  •   
  • 我们使用。隐藏()。在jQuery的show()方法来改变元素的知名度。使用以下代码来检查一个元素是否是可见或不可见。  
  • if($(element).is(":visible") == "true") {  
  •        //The element is Visible   
  • }  
  •   
  • 13。另一种方式的文件准备就绪  
  •   
  • //Instead of   
  • $(document).ready(function() {  
  •     //document ready   
  • });  
  • //Use   
  • $(function(){  
  •     //document ready   
  • });  
  •   
  • 14。选择一个元素。(期),在它的ID  
  •   
  • 在选择使用反斜杠来选择的元素,在它的ID期间。  
  • $("#Address\\.Street").text("Enter this field");  
  •   
  • 15。计数的直接子元素  
  •   
  • 如果你要计算所有的div#foo的元素存在于  
  • <div id="foo">  
  •   <div id="bar"></div>  
  •   <div id="baz">  
  •     <div id="biz">  
  •   </div>  
  •   <span><span>  
  • </div>  
  •    
  • //jQuery code to count child elements   
  • $("#foo > div").size()  
  •   
  • 16。做一个“闪存”的元素  
  •   
  • jQuery.fn.flash = function( color, duration )  
  • {  
  •     var current = this.css( 'color' );  
  •     this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );  
  •     this.animate( { color: current }, duration / 2 );  
  • }  
  • //Then use the above function as:   
  • $( '#importantElement' ).flash( '255,0,0', 1000 );  
  •   
  • 17。中心元素在屏幕上  
  •   
  • 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;  
  • }  
  •    
  • //Use the above function as:   
  • $(element).center();  
  •   
  • 18。获取父div使用最接近  
  •   
  • 如果你想找到的包装纸DIV元素(不论该DIV的ID),然后你会想这个jQuery选择:  
  • $("#searchBox").closest("div");  
  •   
  • 19。禁用右键单击上下文菜单  
  •   
  • 还有许多JavaScript片段禁用右键  
  • 单击上下文菜单,但jQuery让事情容易多了:  
  • $(document).ready(function(){  
  •     $(document).bind("contextmenu",function(e){  
  •         return false;  
  •     });  
  • });  
  •   
  • 20。获取鼠标光标的X和Y轴  
  •   
  • 这个脚本会显示X和Y值 - 鼠标指针的坐标。  
  • $().mousemove(function(e){  
  •     //display the x and y axis values inside the P element   
  •     $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);  
  • }); 

     

    我也封装了一下Jquery 地址:http://www.360ui.net

  • 加载中
    0
    __FresHmaN
    __FresHmaN
    请复制粘贴的时候付点责任吧,我想关键是最后的广告吧 =  =!
    返回顶部
    顶部