本文主要是介绍锋利的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();
这篇关于锋利的jQuery读书笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
