jQuery权威指南_读书笔记
$(document).ready(function(){
//document对象ready后执行函数
})
$(function(){
//简化写法
});
$(function() {
var s; //示例变量
/*Ch1 Begin*/
//添加click事件
$(".divclass1").click(function() { //用class查找对象
$(this).addClass("divclass2").next(".nextdivclass").css("display", "block"); //为元素添加divclass2样式，next返回紧邻的同辈元素，css对同辈元素作用
});
//提交表单取值
$("#buttonid").click(function() { //用id查找对象
var oTxtValue = $("#Text1").val(); //获取文本框的值
var oRdoValue = $("#Radio1").is(":checked") ? "男": "女"; //获取单选框按钮值
var oChkValue = $("#Checkbox1").is(":checked") ? "已婚": "未婚"; //获取复选框按钮值
$("#divTip").css("display", "block").html(oTxtValue + "<br>" + oRdoValue + "<br>" + oChkValue); //显示提示文本元素
})
//切换样式
$(".divclass1").click(function(){
$(this).toggleClass("divclass2").html("点击后的样式");
});
/*Ch1 End*/
/*Ch2 Begin*/
//nth-child(number) 直接匹配第number个元素，下标从1开始
//nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样
$("#tableid tr:nth-child(even)").addClass("trclass");
//逗号合并选择器，同时选择id和span元素
$("#divid,span").css("display","block");
$("div>span").css("display","block"); //>号匹配子元素
$("div span").css("display","block"); //匹配div下的span元素，不管在几层
$(".classOut .classIn").css("display","block"); //在classOut样式下的，classIn样式的元素
$(".myClass :hidden").css("display","block"); //选择器中含有空格符，在myClass样式元素下的隐藏元素
$(".myClass:hidden").css("display","block"); //选择器中没有空格符，在myClass样式元素中的隐藏元素
//divid下一个div/元素，同辈
$("#divid + div").css("display","block");
$("#divid").next().css("display","block");
//匹配所有后面元素
$("#divid ~ div").css("display","block"); //后面同辈的所有div
$("#divid").nextAll().css("display","block"); //后面同辈的所有元素
$("li:first").addClass("GetFocus"); //第一个li添加样式
$("li:last").addClass("GetFocus"); //最后一个li添加样式
$("li:not(.NotClass)").addClass("GetFocus"); //给非NotClass样式的li添加样式
$("li:even").addClass("GetFocus"); //索引值为偶数的li，从0开始计
$("li:odd").addClass("GetFocus"); //索引值为奇数的li，从0开始计
$("li:eq(1)").addClass("GetFocus"); //索引为1的li，从0开始计
$("li:gt(1)").addClass("GetFocus"); //索引值大于1的li，从0开始计
$("li:lt(4)").addClass("GetFocus"); //索引值小于4的li，从0开始计
$(":header").addClass("GetFocus"); //页面所有标题元素（h1 - h6）
//toggleClass、toggle
$("#divMove").slideToggle("slow"); //慢速显示切换（一般用于click事件），可以添加callback函数
$("div:contains('A')").css("display","block"); //包括文本'A'的div，文本可以是多个字符
$("div:empty").css("display","block"); //不包含子元素和文本的空div
$("div:has(span)").css("display","block"); //含有选择器所匹配的元素的元素（含有span的div）
$("div:parent").css("display","block"); //含有子元素或者文本的父元素（包括子元素或文本的div）
//show()适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素，但不适用于 visibility:hidden 的元素
$("span:hidden").show(); //不占位的隐藏的span元素
$("div:visible").addClass("GetFocus"); //可见的div元素
/*Ch2 End*/
/*Ch3 Begin*/
var strAlt = $("img").attr("src"); //取得img的src属性值
strAlt += $("img").attr("title"); //取得img的title属性值
//当html()参数为空时返回元素的innerHTML，在做值判断时应该去掉空格，防止出错，如if($("#user").html().trim()=="jack")...;
//html()取值包括html元素标签，如<p><b><li>等，text()取值只包括文本
$("#divAlt").html(strAlt); //显示信息
//获取属性：当页面存在两个img元素时， $("img").length为2，但$("img).attr("src")值为第一个img的src
$("img").attr("src", "Images/img01.jpg");//设置src属性
$("img").attr("title", "这是一幅风景画");//设置title属性
$("img").attr({ src: "Images/img02.jpg", title: "这是一幅风景画2" });//重新加载，同时设置二个属性
$("img").addClass("clsImg");//增加样式
$("span").html("加载完毕");//将原来span中"正在加载"字样显示为"加载完毕"
//设置属性：所有的img元素都添加属性
//change事件第一次无效，求解救T_T
$("select").change(function() { //设置下拉列表框change事件
var strSel = $("select").val().join(","); //获取下拉列表框所选中全部选项值，<select multiple="multiple"...>
})
$("input").change(function() { //设置文本框change事件
var strTxt = $("input").val(); //获取文本框的值
})
$("input").focus(function() { //设置文本框focus事件
$("input").val(""); //清空文本框的值
})
//$(this)指被点击的p元素
$("p").click(function() {
$(this).css("font-weight", "bold");//字体加粗
$(this).css("font-style", "italic");//斜体
$(this).css("background-color", "#eee");//增加背景色
$(this).addClass("class1 class2"); //同时新增二个样式类别
$(this).toggleClass("classSpan"); //切换样式类别
})
var div = $("<div>newDiv</div>"); //创建DOM对象
$("#divId").show().append(div);//插入节点中
$("div").append(retHtml); //在div里面，原内容之后插入内容，参数为方法名
//jquery的function写在$(function(){...})里面
function retHtml() {
var str = " <b>Write Less Do More</b> ";
return str;
}
$("span").after(retHtml); //在span外，后接内容，参数为方法名
function retHtml() {
var str = "<span><b>Write Less Do More</b><span>";
return str;
}
$("img").appendTo($("span")); //把所有img插入到span里面原内容之后
$("img").click(function() {
//clone参数：是否复制元素的所有事件处理，默认空，false
$(this).clone(true).appendTo("span"); //img点击对自身复制（含事件），并追加到span内容后面
})
//去掉true之后，为什么新的img不能复制了么？$("img")不是一样可以取到新复制出来的img么？
//是的，是可以取到，但$(function(){ ... })事件只执行一次（想想onload事件）
$("#spName").replaceWith("<span title='replaceWith'>张三</span>"); //用指定的 HTML 内容或元素替换被选元素
$("<span title='replaceAll'>zs@163.com</span>").replaceAll("#spEmail"); //与replaceWith作用相同
//wrap：把每个被选元素放置在指定的 HTML 内容或元素中，如<div></div>或document.createElement("div")或$(".div1")
$("p").wrap("<b></b>"); //所有段落标记字体加粗（p外层加b）
$("span").wrapInner("<i></i>"); //所有段落中的span标记斜体（在p里面，p内容之后加上i）
$("img").each(function(index) {
//index从0开始。return false; 可用于及早停止循环
this.title = "第" + index + "幅风景图片，alt内容是" + this.alt;
})
$("ul li:first").css("font-weight", "bold"); //设置第一个li
$("#btnClick").click(function() {
$("ul li").remove("li[title=t]"); //删除title等于t的li，删除之后原eq序号改变
$("ul li:eq(1)").remove();//删除新dom中的ul节点中第2个元素
})
/*Ch3 End*/
/*Ch4 Begin*/
//body 含 div 含 btnShow，如果不加event.stopPropagation()，点击body会执行一次，div两次，btnShow三次
var intI = 0; //记录执行次数
$("body,div,#btnShow").click(function(event) { //点击事件
intI++; //次数累加
$("#spShow").show()
.html("<div>执行次数 <b>" + intI + "</b> </div>"); //追加文本
event.stopPropagation(); //阻止冒泡过程
})
//同时绑定两个事件函数
$("#btnBind").bind("click mouseout", function() {
$(this).attr("disabled", "disabled"); //按钮不可用
})
$(".txt").bind({
focus: function() { $("#divTip").show().html("执行的是focus事件"); },
change: function() { $("#divTip").show().html("执行的是change事件");}
})
//$(selector).bind(event,data,function)，其中data是可选参数
var message = "执行的是focus事件";
$(".txt").bind("focus", { msg: message }, function(event) {
$("#divTip").show().html(event.data.msg); //设置文本
});
//悬浮显示提示信息，未加入延迟处理，效果参考 http://www.zhangxinxu.com/wordpress/?p=906
$("#title").hover(
function() { $("#tip").show(); },
function() { $("#tip").hide(); }
)
//切换函数
$("img").toggle(function() {
$("img").attr("src", "Images/img01.jpg");
}, function() {
$("img").attr("src", "Images/img02.jpg");
}, function() {
$("img").attr("src", "Images/img03.jpg");
})
//用于传入判断条件，toggle(true)显示，toggle(false)为隐藏
$("img").toggle(true);
//this表示调用此函数的input对象
function btn_Click() { this.value = "xxx" }
//事件，函数名，从元素的指定事件取消绑定的函数名，两者都是可选参数
$("input").bind("click", btn_Click); //绑定自定义事件
$("input").unbind("click",btn_Click);
var oTxt = $("input"); //获取文本框
oTxt.bind("btn_Click", function() { /*编写文本框自定义事件*/ })
oTxt.trigger("btn_Click"); //自动触发自定义事件
oTxt.trigger("select"); //自动触发标准函数，选中文本框
//oTxt.trigger("focus");//默认时文本框获取焦点
//验证输入信息
$("#txtEmail").focus(function() { /*本框获取焦点事件*/})
$("#blur").focus(function() { /*文本框丢失焦点事件*/})
/*Ch4 End*/
/*Ch5 Begin*/
//slideUp/slideDown 如果元素已经隐藏/显示，则该效果不产生任何变化，除非规定了 callback 函数，可传入时间和callback函数
$("img").slideUp(); //以滑动方式隐藏被选元素（关上）
$("img").fadeOut(); //使用淡出效果来隐藏被选元素
//slideDown、fadeIn适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素，但不适用于 visibility:hidden 的元素，这点与show相同
$("img").slideDown(3000); //以滑动方式显示被选元素（放下）
$("img").fadeIn(); //使用淡入效果来显示被选元素
$("img").fadeTo(3000, 0.5); //淡化，透明度为50%
//$(selector).animate(styles(必填),speed,easing,callback)，宽与高变化的动画效果
//CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）
$(this).animate({
width: "20%", height: "70px" },
3000, function() { //动画完成后执行的回调函数
$(this).css({ "border": "solid 3px #666" })
.html("xxx");
})
$("img").animate({ left: "-=52px" }, 3000); //在3000毫秒内，以动画的形式向左移动52个像素
$("img").animate({ left: "+=52px" }, 3000); //在3000毫秒内，以动画的形式向右移动52个像素
$("img").stop(); //停止正在执行的动画
$("img").delay(2000).slideToggle(3000); //延时切换图片，delay后接的动画动作
/*Ch5 End*/
/*Ch6 Begin*/
//ajax实现参考：http://www.cnblogs.com/vipcjob/archive/2009/12/16/1625766.html
$("#divResult").load("Default.aspx", { "myParam": "myValue"},function (data, status){ alert(data); } );
//请求Default.aspx页，参数为myParam，值为myValue，得到服务器响应后再执行alert，显示请求页的HTML输出
//Default.aspx改成Default.aspx #divId，则只加载Default.aspx页中id为divId的内容，可用逗号分隔id，加载多个div
//返回的status值为success或error，用于判断请求是否成功
//参数传递参数值：{ "myParam": encodeURI($("#tbUserName").val()) }
//如果存在多个参数，可以用逗号连接，如：{ "myParam": "myValue" ,"otherParam" : "otherValue" }；
//也可以用整个表单序列化：$("#frmUserInfo").serialize()来传递数据
//也可以直接写在url后面，如.load("Default.aspx?myParam=myValue",null,function...
//UserInfo.json内容：[{"name": "张三","sex": "男","email": "mailto:aa@163.com%22%7D,%7B%22name": "李四","sex": "女","email": "bb@163.com"}]
$.getJSON("UserInfo.json", function(jsonData) {
$.each(jsonData, function(InfoIndex, Info) {
var strHTML = "姓名：" + Info["name"] + ",性别：" + Info["sex"] + ",邮箱：" + Info["email"];
})
})
//加载js处理文件，可以在js文件中加入当前dom的操作
$.getScript("UserInfo.js");
/*Ch6 End*/
/*Ch7 Begin*/
//jQuery.extend 函数详解，http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
//函数原型： extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest，src是json数据项
//用空集{}作为dest参数，将结果返回给result，result={name:"Jerry",age:21,sex:"Boy"}，后面同一参数（name）会覆盖前面的参数值
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"});
//省略dest参数时，将该src合并到调用extend方法的对象中去
$.extend({
hello:function(){alert('hello');} //将src合并到jquery的全局对象中去，调用 $.hello();
});
$.fn.extend({
hello:function(){alert('hello');} //将src合并到jquery的实例对象中去
});
//实例：
$.extend({
net:{} //相当于建立命名空间
});
$.extend(
$.net,{ hello:function(){alert('hello');} } //将hello方法扩展到之前扩展的net命名空间中去
);
//extend(boolean,dest,src1,src2,src3...) //第一个参数boolean代表是否进行深度拷贝
var result=$.extend( true, {}, { name: "John", location: {city: "Boston",county:"USA"} }, { last: "Resig", location: {state: "MA",county:"China"} } );
//结果：result={name:"John",last:"Resig", location:{city:"Boston",state:"MA",county:"China"}}
//false时：result={name:"John",last:"Resig",location:{state:"MA",county:"China"}} //false不对嵌套子对象操作
$("div").data("dataKey", "dataValue"); //向被选元素附加数据，不能直接用$.data(...)
$("div").data("dataKey"); //从被选元素获取数据
//dataValue可以是json，如{a:"avalue"}，取值data("datakey").a；也可以是一个自定义函数，如myfun，data("dataKey")("param")
$("p").data("tmpData"); //初始化
if($("p").data("tmpData")==null){}
/*Ch7 End*/
//第7、8章全都是jquery插件，略了
/*Ch9 Begin*/
//使用browser对象获取浏览器信息
if ($.browser.msie){} //如果是ie
if ($.browser.mozilla){} //如果是火狐
var v = $.browser.version; //版本号
//使用$.each()工具函数遍历数组
var ary = { "张三：": "60", "李四：": "70"};
$.each(ary, function(Name, Value) {
s += "<li>" + Name + "," + Value + "</li>"; //减少对DOM元素直接操作
})
$("#showUl").append(s); //一次性完成DOM元素的增加
//使用$.grep()工具函数筛选数组中的元素
var arrNum = [2, 8, 3, 7, 4, 9, 3, 10, 9, 7, 21]; //筛选前： arrNum.join();
var arrGet = $.grep(arrNum, function(ele, index) { //筛选后：arrGet.join();
return ele > 5 && index < 8 //元素值大于5且序号小于8
})
//使用$.map()工具函数变更数组中的元素
var arrGet2 = $.map(arrNum, function(ele, index) {
if (ele > 5 && index < 8) { //元素值大于5且序号小于8
return ele + 1; //元素增加1
}
})
//使用$.inArray()工具函数搜索数组中指定元素的位置
var arrNum = [4, 21, 2, 12, 5];
var arrPos = $.inArray(12, arrNum); //结果为3，下标从0开始
//isEmptyObject检测对象是否为空
var obj = {};
if($.isEmptyObject(obj)){}
//使用$.contains()函数检测两个节点是否包含
var node0 = document.documentElement;
var node1 = document.body;
if($.contains(node0, node1)){}; //对象node0包含对象node1，返回true
//使用$.param()进行数组元素序列化
var arrInfo = { id: 101, name: "tao", sex: 0 }; //基本信息数组
var arrScore = { Score: { chinese: 90, maths: 100, english: 98 }, SunNum: { Score: 288, Num: 3 } }; //分数和汇总信息数组
//序列化各数组
var arrNewInfo = $.param(arrInfo); //arrInfo数组序列化后，id=101&name=tao&sex=0
var arrNewScore = $.param(arrScore); //arrScore数组序列化后
var arrDecScore = decodeURIComponent($.param(arrScore)); //arrScore序列化解码后
//事件中的target方法优化冒泡现象
$("#frame").bind("click", function(e) {
$objChild = $(e.target); //点击frame中的元素时，可以捕捉到触发事件的元素是哪一个
})
/*Ch9 End*/
});
