【锋利的Jquery】读书笔记一-优快云博客

本文介绍了jQuery的链式调用风格，并通过一个菜单滑动效果示例进行展示。此外，还探讨了如何在jQuery与其他JavaScript库共存时解决冲突问题，提供了三种不同的实现方法。

封面镇楼：

读这本书应该是7月份，二周读完，经典的好书，一直没怎么复习。so。。。。温故而知新下。

一.jquery的风格

链式风格

<div class="box">
    <ul class="menu">
        <li class="level1">
            <a href="#none">衬衫</a>
            <ul class="level2">
                <li><a href="#none">短袖衬衫</a></li>
                <li><a href="#none">长袖衬衫</a></li>
                <li><a href="#none">短袖T恤</a></li>
                <li><a href="#none">长袖T恤</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">卫衣</a>
            <ul class="level2">
                <li><a href="#none">开襟卫衣</a></li>
                <li><a href="#none">套头卫衣</a></li>
                <li><a href="#none">运动卫衣</a></li>
                <li><a href="#none">童装卫衣</a></li>
            </ul>
        </li>
        <li class="level1">
            <a href="#none">裤子</a>
            <ul class="level2">
                <li><a href="#none">短裤</a></li>
                <li><a href="#none">休闲裤</a></li>
                <li><a href="#none">牛仔裤</a></li>
                <li><a href="#none">免烫卡其裤</a></li>
            </ul>
        </li>
    </ul>
</div>

$(function(){
$(".level1 >a").click(function(){
$(this).addClass("current").next().slideDown()
.parent().siblings().children("a").removeClass("current")
.next().slideUp();
return false;
})
})

加载方式

//第一种种方法  加载
            $(document).ready(function(){
                // 代码写这里
            })
            //第二种
            $(function(){
                // 代码写这里
            })

二.jquery与DOM对象的转换

jquery转DOM

var $cr = $("#cr");

var cr = $cr.get(0)

DOM转jquery

var cr = document.getElementById("cr")

var $cr = $(cr)

$()是jquery的一个对象制造工厂

三.解决jquery与其他库的冲突

采用jquery.noConflict()函数方法将jquery控制权交给其他的javascript库

第一种

var $j = jQuery.noConflict(); //自定义jq快捷键
$j(function(){ //使用jq快捷键方法 执行方法
$j("p").click(function(){
alert($(this).text()) 
})
})

第二种

jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
jQuery(function(){                    //使用jQuery
    jQuery("p").click(function(){
        alert( jQuery(this).text() );
    });
});

第三种

jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
(function($){                        //定义匿名函数并设置形参为$
    $(function(){                    //匿名函数内部的$均为jQuery
        $("p").click(function(){    //继续使用 $ 方法
            alert($(this).text());
        });
    });
})(jQuery);