锋利的jQuery读书笔记

目录

第一章 认识Jquery

第二章 jQuery选择器

第三章 jQuery中的DOM操作

第四章 jQuery中的事件和动画

第五章 jQuery对表单、表格的操作及更多应用

第六章 jQuery与Ajax的应用

第七章 jQuery插件的使用和写法

第八章 jQuery打造个性网站

第九章 jQuery Mobile

第十章 jQuery各个版本的变化

第一章 认识Jquery

1 $(document).ready(function(){

alert("hello world");

});

简化写法：

$(function(){

});

2 $("#table>tbody>tr:has(td:has(:checkbox:enabled))").css("background","red");

解释：在一个id为table的表格的tbody中，如果每行的一列中的checkbox没有被禁用，则把这一行的背景设置为红色

3//等待dom元素加载完毕.

$(document).ready(function(){

$(".level1 > a").click(function(){

$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();

return false;

});

});

优化后的写法：

//等待dom元素加载完毕.

$(document).ready(function(){

$(".level1 > a").click(function(){

$(this).addClass("current") //给当前元素添加"current"样式

.next().show() //下一个元素显示

.parent().siblings().children("a").removeClass("current") //父元素的兄弟元素的子元素<a>移除"current"样式

.next().hide(); //它们的下一个元素隐藏

return false;

});

});

4 jQuery对象和DOM对象的相互转换

1）jQuery对象转为DOM对象

var $cr = $("#cr"); //jquery对象

var cr = $cr[0]; //dom对象

2） DOM对象转成jQuery对象

var cr = document.getElementById("cr");//dom对象

var $cr = $(cr); //jquery对象

5 解决jQuery和其他库的冲突

代码片段：

<p id="pp">Test-prototype(将被隐藏)</p>

<p >Test-jQuery(将被绑定单击事件)</p>

<script src="lib/prototype.js" type="text/javascript"></script>

<!-- 引入 jQuery -->

<script src="../../scripts/jquery.js" type="text/javascript"></script>

1）jQuery在其他库之后导入

方案1：

var $j = jQuery.noConflict(); //自定义一个快捷方式

$j(function(){

$j("p").click(function(){

alert( $j(this).text() );

});

});

方案2：

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

jQuery(function($){ //使用jQuery

$("p").click(function(){ //继续使用 $ 方法

alert( $(this).text() );

});

});

方案3：

jQuery.noConflict(); //将变量$的控制权让渡给prototype.js

(function($){ //定义匿名函数并设置形参为$

$(function(){ //匿名函数内部的$均为jQuery

$("p").click(function(){ //继续使用 $ 方法

alert($(this).text());

});

});

})(jQuery); //执行匿名函数且传递实参jQuery

2）jQuery在其他库之前导入，无需处理

6 eclipse支持代码提示的插件：jQueryWTP和Spket

第二章 jQuery选择器

1 css选择器

2 优良的代码风格,网页内容和行为分离

<p class="demo">jQuery Demo</p>

<script>

$(".demo").click(function(){

});

</script>

不好的代码风格：

<p οnclick="demo()">jQuery Demo</p>

<script>

function demo(){

}

</script>

3 document,getElementById("tt").style.color="red";//在id为tt的元素不存在时将会报错

$("#tt").css("color","red");//在id为tt的元素不存在时不会报错

注意： $("#tt")获取的永远时对象，因此不能使用以下代码：

if($("#tt")){

}

正确的用法：

if($("#tt").length > 0){

}

或者

if($("#tt")[0]){

}

4基本选择器

5 层次过滤选择器

6 过滤选择器

7 内容过滤选择器

8 可见性过滤器

9 属性过滤器

10 子元素过滤器

11 表单对象属性过滤选择器

12 表单选择器

13 选择器中的注意事项

1）选择器中含有“.”、“#”、“]”，“(”等特殊字符串可以用\代替

2）属性选择器的@符号问题

3）选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果

第三章 jQuery中的DOM操作

1 查找节点

var $para = $("p");

var p_txt = $para.attr("title");

2 创建节点

var $li_1=$("<li></li>");//创建第一个<li>元素

var $li_2=$("<li></li>");//创建第二个<li>元素

$("ul").append($li_1); //添加到ul节点中

$("ul").append($li_2);

等价写法：$("ul").append($li_1).append($li_2);

3 插入节点的方法

4 删除节点

1)var $li = $("ul li:eq(1)").remove();

$li.appendTo("ul");

当某个节点用remove删除后，该节点的子节点都会被删除。该方法返回值是一个指向已被删除节点的引用，因此可以在以后使用这些元素

2) var $li = $(ul li:eq(1)).detach();//删除元素

$li.appendTo("ul");//重新追加此元素，发现之前绑定的事件还在，如果使用remove()方法删除的话，那么之前的绑定将会失效

3) empty方法

$("ul li:eq(1)").empty();//获取第二个li元素后，清空此元素里的内容不包括元素本身

5 复制节点

$("ul li").click(function(){

$(this).clone(true).appendTo("ul");//复制单击的节点，并将他追加到<ul>元素中

})

$(this).clone(true).appendTo("ul");

在clone方法中传递了一个参数true，它的含义是复制元素的同时复制元素中的绑定事件，因此该元素的副本也具有复制功能

6 替换节点

$(“p”).replaceWith("<strong>你最不喜欢的水果是？</strong>");

等价写法：

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");

7 包裹节点

$("strong").wrap("<b></b>");

示例代码：

<strong>你最不喜欢的水果是？</strong>

<strong>你最不喜欢的水果是？</strong>

$("strong").wrap("<b></b>");

结果：

<b><strong>你最不喜欢的水果是？</strong></b>

<b><strong>你最不喜欢的水果是？</strong></b>

$("strong").wrapAll("<b></b>");

结果：

<b><strong>你最不喜欢的水果是？</strong>

<strong>你最不喜欢的水果是？</strong></b>

注意：如果被包裹的多个元素中有其他元素，其他元素会被放到包裹元素之后

$("strong").wrapInner("<b></b>");

结果：<strong><b>你最不喜欢的水果是？</b></strong>

8 属性操作

1）获取属性与设置属性

var p_txt = $("p").attr("title");

var p_txt = $("p").attr("title","aaa");

2）删除属性

$("p").removeAttr("title");

9 样式操作

1) 获取样式与设置样式

var p_class = $("p").attr("class");

$("p").attr("class","myclass");

2)追加样式

3)移除样式

$("p").removeClass("high").removeClass("another");

等价于：$("p").removeClass("high another");

$("p").removeClass("high another");//移除p元素的所有class

4）切换样式

$toggleBtn.toggle(function(){

//显示元素

},function(){

//隐藏元素

})

示例代码：

<p title="bbbb" class="myClass another">aaaaaaaa</p>

$("p").toggleClass("another")；//class的值会在myClass和myClass another中重复切换

5）判断是否含有某个样式

$("p").hasClass("another")；

10 设置和获取HTML、文本和值

1)var p_html = $("div").html();

$("div").html("<p>aaa</p>");

2)var p_text = $("p").text();

$("p").text("aaa");

3)val()的用法

示例代码：

<select id="single">

<option>选择一号</option>

<option>选择二号</option>

<option>选择三号</option>

</select>

<select id="muliple" muliple="muliple" style="height:120px;">

<option selected="selected">选择1号</option>

<option>选择2号</option>

<option>选择3号</option>

<option selected="selected">选择4号</option>

</select>

<input type="checkbox" value="check1"/>

<input type="checkbox" value="check2"/>

<input type="checkbox" value="check3"/>

<input type="checkbox" value="check4"/>

<input type="radio" value="radio1"/>

<input type="radio" value="radio2"/>

<input type="radio" value="radio3"/>

操作：

$("#single").val("选择二号");

$("#muliple").val("选择2号","选择3号");

$(":checkbox").val(["check2","check3"]);

$(":radio").val(["radio2"]);

等价写法：

$("#single option:eq(1)").attr("selected",true);

$("[value=radio2]:radio").attr("checked",true);

11遍历节点

1）children()方法只考虑子元素而不考虑其它后代元素

2）var $p1 = $("p").next();//取出紧邻<p>元素后的同辈元素，包括该元素的子元素

3）var $ul = $("ul").prev();//取出紧邻<ul>元素前的同辈元素

4）siblings()用于取得元素前后所有的同辈元素

5）closest()用于取得最近的匹配元素

$(e.target).closest("li").css("color","red");

6）parent(),parents(),closes()的区别

12 css_dom操作

1）$("p").css("color");

$("p").css("color"，“red”);

$("p").css({"color":“red”,"fontSize":"30px"});

2）$("p").height();

$("p").height(100);

$("p").height(“10em”);

与height对应的方法有width()

13 CSS_DOM常用的方法

1） offset(),获取元素在当前窗口的相对偏移，其中返回的对象包含两个属性,即top和left

var offset = $("p").offset();

var left = offset.left;

vat top = offset.top;

2）position()方法

var position = $("p").position();

var left = position.left;

var top = position.top;

3）$("p").scrollTop();//获取元素的滚动条距顶端的距离

$("p").scrollLeft();//获取元素的滚动条距左侧的距离

//滚动到指定位置

$("p").scrollTop();

$("p").scrollLeft();

第四章 jQuery的事件和动画

1 事件绑定

示例;$("p").bind("click",function(){

$(this).next().show();

});

2 改变事件绑定的类型

$(function(){

$("p").bind("click",function(){

$(this).next().show();

}).bind("mouseout",function(){

$(this).next().hide();

});

})

3 简写绑定事件

$(function(){

$("p").click(function(){

$(this).next().show();

}).mouseout(function(){

$(this).next().hide();

});

});

4 合成事件

1）hover()方法

$(function(){

$().hover(function(){

$(this).next().show();

},function(){

$(this).next(),hide();

});

});

等价写法：

$(function(){

$("p").bind("click",function(){

$(this).next().show();

}).bind("mouseout",function(){

$(this).next().hide();

});

})

5 toggle()方法的语法结构

toggle(fn1,fn2,fn...);鼠标第一次点击出发第一个函数，第二次点击出发第二个函数依次类推，最后一个执行完后，则重新循环执行。此外toggle还有另一个作用切换元素的可见状态

应用示例：

$("#aa").toggle(function(){

alert(111);

},function(){

alert(222);

});

6 事件冒泡

1）<body><div><span></span></div></body> 三个元素都绑定了单击事件，则单击<span>的同时，也单击了div,body,每个元素都会依次响应单击事件

2）引发的问题：本来只想出发span的单击事件，然而div，body的单击事件也触发了

3）停止冒泡事件

$("span").click(function(event){

("span").html("aaa");

event.stopPropagation();//停止冒泡事件，也可用return false代替

});

4）阻止元素的默认行为，jQuery中提供了preventDefault()方法来阻止元素的默认行为

其中event.preventDefault()方法可以使用return false代替

5）获取事件类型

$("a").click(function(event){

alert(event.type);//获取事件类型

return false;//阻止链接跳转

});

$

6）获取触发事件的元素

$(a[href='http://google.com']).click(function(event){

var tg = event.target

})

7）event.relatedTarget 获取相关联的元素

8）event.pageX和event.pageY相对于x坐标和y坐标

9）event.which获取鼠标的左中右键（1左键 2中键 3右键），键盘事件中获取键盘的按键

10 ）event.metaKey获取键盘事件中<ctrl>按键

7 移除事件按钮元素上以前注册的事件

1)

<button id="delAll">删除所有事件</button>

$('#delAll').click(function(){

//处理函数

});

//删除元素的所有click事件,jQuery代码如下：

$("#delAll").click(function(){

$("#btn").unbind("click");

});

2)unbind()方法的语法结构：unbind([type],[data]);

第一个参数是事件类型，第二个参数是将要移除的函数，具体说明如下：

（1）如果没有参数，则删除所有绑定的事件

（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件

（3）如果把绑定时传递的处理函数作为第二个参，则只有这个特定的事件处理函数会被删除

3）one()只触发一次，随后立即解除绑定,语法结构和bind()方法相同，如下：

one(type,[data],fn)

8 模拟操作

1）$("#btn").trigger("click");简化写法$('#btn').click();

2）出发自定义事件

$("#btn").bind("myclick",function(){

$("#btn").alert("这是我自定义的事件");

});

$("#btn").trigger("myclick");

3）传递数据

$("#btn").bind("click",function(event,message1,message2){

alert(111);

});

4）执行默认操作

$("input").trigger("focus");//触发focus事件，也会使<input>元素本身的到焦点

$("input").triggerHander("focus");//触发绑定的特定事件，同时取消浏览器对此事件的默认操作

9 其他操作

1）绑定多个事件类型

2）$(function(){

$("div").bind("mouseover mouseout",function(){

$(this).toggleClass("over");

});

})

3）添加事件命名空间，便于管理

单击button元素后，“plugin”的命名空间被删除，而不在“plugin”空间的dblclick事件依然存在

删除多个事件的代码也可以如下书写：$("div").unbind("click").unbind("mouseover");

4）相同事件名称，不同命名空间执行方法（略）

10 jquery动画

1）show()方法和hide()方法，参数有slow normal fast以及特定的时间单位是毫秒如：show("slow")后者show(1000)//一秒内显式出来

2）fadeIn()和fadeOut()淡出和淡入

3）slideUp()和slideDown(),由下至上和由上至下延伸

4）自定义动画方法animate()

第五章 jQuery对表单表格的操作及更多应用

1 获取和失去焦点改变样式

input:focus,textarea:focus{

border:1px solid #f00;

background:#fcc;

}

jQuery代码如下：

$(function(){

$(":input").focus(function(){

$(this).addClass("focus");

}).blur(function(){

$(this).addClass("focus");

});

});

2 多行文本应用

1)放大、缩小

缓冲效果：

$comment.animent({height:"+=50"},400);

2)滚动条高度变化

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

$comment.animate({scrollTop:"-=50"},400);

$comment.animate({scrollTop:"+=50"},400);

3)复选款应用

$('[name=items]:checkbox').attr('checked',true);

反选或全选

$('[name=items]:checkbox').each(function(){

this.checked=!this.checked

});

$("#CheckedAll").click(function(){

$('[name=items]:checkbox').attr("checked",this.checked);

});

如果所有复选框都选中了，则选中全选框

var $tmp=$('[name=items]:checkbox');

$('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);

3 下拉框应用

1）将选中的选项添加给对方

$("#add").click(function(){

var $options=$('#select1 option:selected');

var $remove=$options.remove();

$remove.appendTo('#select2');

});

简化写法：

$("#add").click(function(){

var $options=$(‘#select1 option:selected’);//获取选中的对象

$options.appendTo('#select2');//追加给对方

});

2）将全部选项添加给对方

$("#add_all").click(function(){

var $options = $('#select1 option');//获取全部的选项

$options.appendTo('#selected');//追加给对方

});

3）双击某个选项将其添加给对方

$("select1").dbclick(function(){

var options=$("option:selected",this);

$options.appendTo('#select2');

});

4 表单验证

1)在必填框后添加*

避免重复添加校验信息：

根据class为onError元素的长度来判断是否可以提交

5 表格隔行变色

上述代码会将表头算进去，排除表头的写法

6 表格高亮

1)将其中某行高亮

$("tr:contains('王五')").addClass(“selected”);

2)单击某行时将其高亮，并去掉其他行的高亮

$('tbody>tr').click(function(){

$(this).addClass('selected').siblings().removeClass('selected').end()

.find(':radio').attr('checked','true');

});

end()方法解释：当前对象是$(this),当进行addClass('selected')操作时，对象并未发生变化，当执行siblings().removeClass('selected')时，对象已经变为$(this).siblings(),因此后面的操作都是针对这个对象的，如果要重新返回到$(this)，则可以使用end方法

7 复选框控制表格行高亮

刚进入页面时，处理选中的表格行

$('tbody>tr:has(checked)').addClass('selected');

8 表格展开关闭

点击展开或关闭

9 表格内容筛选

$("tr:contains('王五')").addClass("selected");//匹配包含指定文字的元素

$(function(){

$("table tbody tr").hide().filter(":contains(李)").show();

});

通过输入框来显示表格中的内容

$(function(){

$("filterName").keyup(function(){

$("table tbody tr").hide(":contains("+$(this).val()+")").filter().show();

}).keyup();

});

10 其他应用

1）网页选项卡

<div class="tab">

<div class="tab_menu">

<ul>

<li class="selected">时事</li>

<li class="selected">体育</li>

<li class="selected">娱乐</li>

</ul>

</div>

<div class="tab_box">

<div>时事</div>

<div class="hide">体育</div>

<div class="hide">娱乐</div>

</div>

</div>

2）控制

var $div_li = $("div.tab_menu ul li");

$div_li.click(function(){

//高亮当前元素，去掉其他同辈元素的高亮

$(this).addClass("selected").siblings().removeClass("selected");

var index = $div_li.index(this);//获取当前单击的<li>元素在全部的<li>元素中的索引

$("div.tab_box > div") //选取子节点

.eq(index).show() //显示<li>元素对应的<div>元素

.siblings().hide(); //隐藏同辈元素

}).hover(function(){

$(this).addClass("hover");

},function(){

$(this).removeClass("hover");

});

第六章 jQuery与ajax的应用

1 load()方法

1）载入HTML方法

load(url [,data] [,callback]);

$(function(

$("#send").click(function(){

$("resText").load("test.html");

});

));

只加载test.html中class为para的内容

$("resText").load("test.html .para");

2) 传递方式

3）回调参数

$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){

//responseText;请求返回的内容

//textStatus 请求的状态：success,error,notmodified,timeout

//XMLHttpRequest 对象

});

2 $.get()方法与$.post()方法

1）$.get(url [,data] [,callback] [,type])

例子：

$.get(

"get3.php",

{username:$("#username").val(),

password:$("password").val()},

function(data,textStatus){

alert(111);

},

"json");

2）post方法与get方法类似

3 $.getScript()方法与$.getjson()方法

1）$.getScript('test.js',function(){

alert();

});

2) $.getScript('test.json',function(data){

//data 返回的数据

$.each(data,function(commentIndex,comment){

});

});

4 $.ajax()方法

$.ajax(options)

$.getScript()等价写法

$(function(){

$('#send').click(function(){

$.ajax({

type:"GET",

url:"test.js".

dataType:"script"

});

});

});

$.getJson()等价写法

$(function(){

$.ajax(function(){

type:"GET",

url:"test.json",

dataType:"json",

success:function(data){

$('resText').empty();

}

});

});

5 序列化元素

1）serialize();

2）serializeArray()方法，将dom元素序列化后，返回json格式的数据

$(":checkbox,:radio").serializeArray();

3）$.param();

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k);//输出a=1&b=2&c=3

6 ajax全局事件

<div id="loading">加载中...</div>

$("#loading").ajaxStart(function(){

$(this).show();

});

$("#loading").ajaxStop(function(){

$(this).hide();

});//也可以使用链式写法

另外几个方法

ajaxComplete(callback)//Ajax请求完成执行的函数

ajaxError(callback)//Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递

ajaxSend(callback)//Ajax请求发送前执行的函数

ajaxSuccess(callback)//Ajax请求执行成功时执行的函数

附录：

1 解析xml

success:function(xml){

$(xml).find("student").each(

var id = $(this).children("id");

var id_value=id.text();

alert(id_value);

alert($(this).attr("email"));

);

}

2 禁用缓存（项目中问题：数据已经更新，但传递的还是旧数据，解决方案：禁用缓存）

post方法 默认禁用缓存

get方法

$.get('ajax.xml?'+(+new Date),function(xml){...})//(+new Date)等价于new Date.get();