【锋利的Jquery】读书笔记一
封面镇楼:
读这本书应该是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);