【锋利的Jquery】读书笔记一

2023-07-26 20:19:40

封面镇楼：

读这本书应该是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);

码农公寓