皮皮网

1.jquery鉴之show()/hide()
2.关于jQuery 代码的书写形式

jquery鉴之show()/hide()

       jQuery中show()和hide()方法用于控制元素的源码显示与隐藏。从字面理解，设置show()方法显示元素，源码hide()方法隐藏元素。设置房屋出售源码在JavaScript中，源码显示与隐藏元素通常有两种方法：一种是设置修改CSS样式中的display属性，设置display为'none'实现隐藏。源码另一种是设置修改CSS样式中的opacity属性，在0到1之间调整实现从隐藏到显示的源码变化。

       show()方法的设置使用格式为：show(speed,callback)。其中speed参数可选，源码java源码分享用于指定元素从可见到隐藏的设置速度，默认为"0"。源码callback参数同样可选，设置用于指定在方法执行完毕后要执行的源码函数。

       show()方法主要通过控制display属性实现元素的spark源码教程显示与隐藏。在jQuery源码中，show()方法通过调用showHide()方法实现元素的显示或隐藏。

       在分析show()方法的源码时，我们首先需要了解toggle()方法。toggle()方法用于切换show()和hide()的捕鱼源码php执行，其实质是这两个方法的集合。jQuery.js中的方法按照类型进行分组，相同类型的函数位于同一扩展包内，这种结构使得代码更加简洁、易于阅读。dtcms源码下载

       show()方法首先触发show或hide事件，然后调用showHide()方法进行处理。showHide()方法对输入的元素进行封装，并根据传入的speed参数调用jQuery.fn['show']方法或animate()方法进行元素显示或隐藏操作。

       在showHide()方法中，会遍历elements参数，将display属性设置为值，并对每个元素进行处理。具体来说，对于hide()方法，会将目标节点的display属性设置为'none'。对于show()方法，则会先判断目标节点的display属性是否为'none'，如果是，则将display属性设置为空字符串，实现显示效果。

       总结而言，show()和hide()方法通过控制display属性实现元素的显示与隐藏。每次调用时，都会根据目标元素的当前display状态进行相反的赋值操作。这样的设计使得代码简洁且易于理解和维护。

关于jQuery 代码的书写形式

       1、定义jQuery变量的时候添加var关键字

       ã€€ã€€è¿™ä¸ªä¸ä»…仅是jQuery，所有javascript开发过程中，都需要注意，不要定义成如下：  

  $loading = $('#loading'); //这个是全局定义

       2、使用一个var来定义变量

       ã€€ã€€å¦‚果使用多个变量的话，如下方式定义：

var page = 0,

         $loading = $('#loading'),

         $body = $('body');

       ä¸è¦ç»™æ¯ä¸€ä¸ªå˜é‡éƒ½æ·»åŠ ä¸€ä¸ªvar关键字

       3、定义jQuery变量

       ã€€ã€€ç”³æ˜Žæˆ–者定义变量的时候，请记住如果定义的是jQuery的变量，添加一个$符号到变量前，如下：

var$loading = $('#loading');

       è¿™é‡Œå®šä¹‰æˆè¿™æ ·çš„好处在于， 可以有效的提示自己或者其它阅读 代码的用户，这是一个jQuery的变量

       4、DOM操作请务必记住缓存（cache）

           åœ¨jQuery代码开发中，常常需要操作DOM，DOM操作是非常消耗资源的一个过程，而往往很多人都喜欢这样使用jQuery：

$('#loading').html('完毕');

       $('#loading').fadeOut();

       ä»£ç æ²¡æœ‰ä»»ä½•é—®é¢˜ï¼Œ 也可以正常运行出结果，但是这里注意 每次定义并且调用$('#loading')的时候，都实际创建了一个新的变量，如果 需要重用的话，记住一定要定义到一个变量里，这样可以有效的缓存变量内容，如下：

var $loading = $('#loading');

       $loading.html('完毕');$loading.fadeOut();

       è¿™æ ·æ€§èƒ½ä¼šæ›´å¥½ã€‚

       5、使用链式操作

       ã€€ã€€ä¸Šé¢é‚£ä¸ªä¾‹å­ï¼Œå¯ä»¥å†™çš„更简洁一些：

var $loading = $('#loading');

       $loading.html('完毕').fadeOut();

       6、精简jQuery代码

       ã€€ã€€å°½é‡æŠŠä»£ç éƒ½æ•´åˆåˆ°ä¸€èµ·ï¼Œè¯·å‹¿è¿™æ ·ç¼–码：

// ï¼ï¼åé¢äººç‰©$button.click(function(){

           $target.css('width','%');

           $target.css('border','1px solid #');

           $target.css('color','#fff');

       });

       åº”该这样书写：

$button.click(function(){

           $target.css({ 'width':'%','border':'1px solid #','color':'#fff'});

       });

       7、避免使用全局类型的选择器

　　请勿如下方式书写：

       ã€€ã€€    $('.something > *');

       ã€€ã€€è¿™æ ·ä¹¦å†™æ›´å¥½ï¼š

       ã€€ã€€    $('.something').children();

       8、不要叠加多个ID

　　请勿如下书写：

       ã€€ã€€    $('#something #children');

       ã€€ã€€è¿™æ ·ä¹¦å†™æ›´å¥½ï¼š

       ã€€ã€€    $('#children');

       9、多用逻辑判断||或者&&来提速

       ã€€

　请勿如下书写：

       if(!$something) {

           $something = $('#something ');

       }

       ã€€ã€€è¿™æ ·ä¹¦å†™æ€§èƒ½æ›´å¥½ï¼š

       $something= $something|| $('#something');

        

       ã€å°½é‡ä½¿ç”¨æ›´å°‘的代码

       ã€€ã€€

    ä¸Žå…¶è¿™æ ·ä¹¦å†™ï¼šif(string.length > 0){ ..}

       ã€€ã€€ä¸å¦‚这样书写：if(string.length){ ..}

       ã€å°½é‡ä½¿ç”¨ .on方法

       ã€€ã€€å¦‚æžœ 使用比较新版本的jQuery类库的话，请使用.on，其它任何方法都是最终使用.on来实现的

       ã€å°½é‡ä½¿ç”¨æœ€æ–°ç‰ˆæœ¬çš„jQuery

       ã€€ã€€æœ€æ–°ç‰ˆæœ¬çš„jQuery拥有更好的性能，但是最新的版本可能不支持ie6/7/8，所以大家需要自己针对实际情况选择

       ã€å°½é‡ä½¿ç”¨åŽŸç”Ÿçš„Javascript

       ã€€ã€€å¦‚果使用原生的Javascript也可以实现jQuery提供的功能的话，推荐使用原生的javascript来实现