《锋利的JQuery》笔记

#1.2 JQ的特点1.轻量级—压缩后只有30K（用Packer）、18K（用Gzip）2.强大的选择器—兼容CSS1到CSS3的选择器并可自定义选择器3.出色的DOM操作的封装4.可靠的事件处理机制5.完善的Ajax—所有Ajax操作封装到了函数$.ajax()里6.不污染顶级变量—JQ只建立一个Jquery的对象，所有函数都在该对象下7.出色的浏览器兼容性8.链式操作方式—一组操作，可以直接连写而无重复获取对象9.隐式迭代10.行为层与结构层的分离—可用选择器选中元素直接添加事件；后期维护方便11.丰富的插件支持12.完善的文档13.开源#1.32 在JQ库中，$就是JQ一个简写形式，如$(“#foo”)就代表JQuery(“#foo”)

$(document).ready(function(){

//…

});

可简写为：

$(function(){

//…

});

1.3.3统一代码风格，方便日后维护

1.链式操作风格

1）对于同一个对象不超过三个操作的，直接写成一行。

如$(“li”).show().unbind(“click”);

2)对于同一个对象的较多操作，建议每行写一个操作。

行数过多则可以功能块来换行

3）对于多个对象的少量操作，可以每个对象写一行，若涉及子元素则适当缩进。

4）对于多对象的较多操作，则结合第2、3条。

2.给代码添加注释，否则很难看懂代码

#1.4.1了解区分JQ和DOM对象的区别1.DOM对象每一份DOM都可以表示成一棵树。DOM对象可以使用JS中的方法，通过getElementsByTagName或getElementById来获取元素节点（DOM对象）2.JQ对象JQ对象就是通过JQ包装DOM对象后产生的对象。只有JQ对象才能使用JQ的方法。在JQ对象中不能使用DOM对象的任何方法，反之亦然。#1.4.2 JQ对象和DOM对象的相互转换约定定义变量的风格是：获取的对象是JQ对象，则加前缀$.获取的对象是DOM对象不加前缀$.1.JQ对象转换成DOM对象1）若JQ对象是一个数组对象，则通过[index]的方法得到相应的DOM对象2）通过get(index)方法得到相应的DOM对象2.DOM对象转换成JQ对象用$()将DOM对象包装就可以获得相应的JQ对象我们平时用到的JQ对象都是通过$()函数制造的。#1.6 开发工具推荐

1.DW

支持提示JQ代码,在http://xtnd.us/dreamweaver/jquery下载插件Jquery...API.MXP

2.Aptana

是Ajax开发IDE

3.JQueryWTP和Spket插件

装在Eclipse上的插件

4.Visual Studio 2008

1.7

1）CSS选择器复习

标签选择器

E{

CSS规则

}

ID选择器

ID{

CSS规则

}

类选择器

E.className{

CSS规则

}

群组选择器

E1，E2，E3{

CSS规则

}

后代选择器

E F{

CSS规则

}

通配符

*{

CSS规则

}

其他选择器：伪类选择器

E：Pseudo-Elements{

CSS规则

}

子选择器

E>F{

CSS规则

}

临近选择器

E+F{

CSS规则

}

属性选择器

E[attr]{

CSS规则

}

注意，目前并不是所有的浏览器都支持【其他选择器】

2）学习JQ选择器JQ中的选择器完全继承了CSS的风格简洁写法：$()作为一个选择器函数如$(“#ID”)代替了document.ElementsByTagName()扩浏览器兼容：不像CSS，JQ选择器不用考虑浏览器是否支持这些选择器JQ选择器的分类1)基本选择器/通过id/class/标签名来查找DOM元素注意id只能使用一次2）层次选择器/3）过滤选择器/以冒号（：）开头，分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤盒表单对象过滤4）表单选择器 #2.5.1 选择器中含有特殊符号的注意事项1）.选择器中含有”.” “#” “(“ “]”等字符时,需要用转义字符”\“(注意是两个反斜杠)2).JQ1.3.1以后的版本都不能在属性名前加“@”3)选择器中添加空格可能产生严重错误#2.7其他选择器1.JQ选择器是可以进一步拓展的1）MoreSelectors for jQuery 这插件用于增加更多的选择器2）Basic XPath插件（使用人数不多且降低了选择器匹配的效率）2.使用其他CSS选择器的方法1）document.getElementsBySelector()—-通过选择器来获取文档元素2）cssQuery()——-通过CSS选择器查找元素3.querySelectorAll()也是用于实现通过CSS选择器来获取元素的（W3C在Selectors API中的方法） #3.1 jquery中的DOM操作1.DOM core2.HTML_DOM获取某些对象、属性可用这两个来实现，但显然HTML_DOM比较简短，但只能用来处理WEB文档3.CSS_DOM用来获取和设置style对象的各种属性jquery对DOM的各种操作都围绕DOM树展开1.查找元素节点 2.查找属性节点用attr()方法来获取各种属性的值创建节点1.创建节点，建议添加顺序为：元素-文本-属性var $li_1= $(“

文本1

”);var $li_2= $(“

文本2

”); 将新元素插入到节点ul中$(“ul”).append($li_1);$(“ul”).append($li_2);（或采用链式写法：$(“ul”).append($li_1).append($li_2);） 注意：1）动态创建的新元素节点需要使用方法才能插入文档中而不会自动添加 2）创建元素时，注意书写的规范性（注意闭合标签和使用标准的XHTML格式）2.插入节点几种插入节点的方法——-$(“节点”).方法(“元素”)1）append()向每个匹配的元素内部后置内容2）appendTo()后置追加到指定的元素中3）prepend()向每个匹配的元素内部前置内容4）prependTo()后置追加到指定的元素中5）after()在每个匹配的元素后插入内容6）insertAfter()将所有匹配的元素插入到指定元素的后面7）before()在每个匹配的元素之前插入内容8）insertBefore()将所有匹配的元素插入到指定的元素的前面3.删除节点1）remove()从DOM中删除所有匹配的元素该方法返回的是一个指向已被删除的节点的引用，因而可以在以后使用这些元素2）empty()清空节点，清空元素的所有后代节点4.复制节点复制节点后，新元素并不具有任何行为注意：若传递true为参数，则表示复制元素的同时复制元素中所绑定的事件$(this).clone(true).appendTo(“body”);//注意参数true5.替换节点replaceWith()将所有匹配的元素都换成指定的HTML或DOM元素replaceAll()与replaceWith()作用相同但颠倒了操作注意：如果在替换之前已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。6.包裹节点wrap()将某个节点用其他标记包裹起来，不破坏原始文档的语义wrapAll()将所有匹配的元素用一个元素来包裹与wrap()不同，wrap()是将所有的元素进行单独的包裹wrapInner()将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来wrap是外包，wrapInner是内包 #3.2.8 属性操作在JQ中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性1.获取属性和设置属性获取用attr()方法也可以直接设置$(“p”).attr(“title”,”my title”);同时设置多个属性$(“p”).attr({“title”:”my title”,”name”:”test”});2.删除属性用removeAttr()方法删除某个元素的特定属性$(“p”).removeAttr(“title”);#3.2.9 样式操作1.获取样式和设置样式获取var p_class$=$(“p”).attr(“class”);设置$(“p”).attr(“class”,”high”);2.追加样式用addClass()方法区别：attr()设置样式会覆盖替换，而addClass()则是追加兼并3.移除样式用removeClass()方法$(“p”).removeClass(“high”);//移除

元素中值为”high”的class若要删除多个class，则$(“p”).removeClass(“high another”);或者直接使用$(“p”).removeClass();//默认移除所有class4.切换样式toggle()交替执行代码③、④函数，控制行为上的重复切换$toggleBtn.toggle(function(){//显示元素 代码③},function(){//显示元素 代码④})toggleClass()如果类型存在则删除，否则添加。控制样式上的重复切换。5.判断是否含有某个样式hasClass()方法，若有则返回true，否则返回false$(“p”).hasClass(“another”);等价于：$(“p”).is(“.another”);#3.2.10 设置和获取HTML、文本和值1.html()读取或者设置某个元素中的HTML内容（与javascript中的innerHTML属性类似）2.text()读取或者设置某个元素中的文本内容（与javascript中的innerRext属性类似）3.val()读取或者设置元素的值(与javascript中的value属性类似)元素师文本框、下拉列表、单选框都能返回，若元素为多选，则返回包含所有选择的值的数组val()方法还能使select、checkbox、radio相应的选项被选中，在表单操作中会经常用到#3.2.11 遍历节点1.children()取得匹配元素的子元素的集合2.next()取得匹配元素后面紧邻的同辈元素3.prev()取得匹配元素前面紧邻的同辈元素4.siblings()取得元素前后所有的同辈元素5.closest()取得最近的匹配元素6.其他方法find()/filter()/nextAll()/preAll()/parent()/parents()等#3.2.12 CSS-DOM操作css()获取元素的样式属性 设置某个元素的样式$(“p”).css(“color”); //获取

元素的样式颜色$(“p”).css(“color”,”red”);//设置

元素的样式颜色为红色$(“p”).css({“fontSize”:”30px”,”backgroundColor”:”#888888”});//同时设置字体颜色和背景色height()取得匹配元素当前计算的高度值$(“p”).height(100);//设置高度值为100px$(“p”).height(“10em”);//设置高度值为10emcss()获得的高度值与样式的设置有关，可能得到“auto”“10px”之类的字符串，而height()方法获得的则是在页面中的实际高度，与样式设置无关且不带单位width()取得匹配元素的宽度值（px）$(“p”).width();//获取宽度值$(“p”).width(“40px”);设置宽度值几个常用方法1.offset()获取元素在当前视窗的相对位移，返回top和left属性，只对可见元素有效var offset=$(“p”).offset();//获取offsetvar left=offset.left;//获取左偏移var top=offset.top;//获取上偏移2.position()获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对位移，也返回top和left属性var position=$(“p”).position();//获取offsetvar left=position.left;//获取左偏移var top=position.top;//获取上偏移3.scrollTop() scrollLeft()获取元素的滚动条距顶端和左侧的距离var $p=$(“p”);var scolltop=$p.scollTop();var scollleft=$p.scollLeft();另外，可指定参数让滚动条滚动到指定位置$(“textarea”).scollTop(300);//元素的垂直滚动条滚动到指定位置$(“textarea”).scollLeft(300);//元素的横向滚动条滚动到指定位置