锋利的Jquery 读书有感

《锋利的JQuery》是一本国内非常不错的JQuery入门书，基本上通读本书后对JQuery的精髓都能掌握了，稍后再通过多加实践应该能对Jquery有比较好的理解了。下面是笔者对整本书的读书笔记，也算是对全书主要内容的一个总结吧。

一、JQuery的环境配置

1、JQuery分为压缩版和非压缩版

2、$=JQuery

3、$(document).ready(funtion(){}); 相当于 $(function(){});

4、注释用//

5、DOM对象与JQuery对象的相互转换

var $variable (jquery对象) =$(variable)(Dom对象);

var variable(Dom对象)=$variable[0]或$variable.get(0) (JQuery对象)

6、与其他JS库冲突的解决（主要是$符号谁生效的问题）

[1]、在其他库之后导入

使用前：先调用jQuery.noconflict(); ————$会被释放给jQuery库， 就是说在使用jquery库之前先声明一下 "我下面要用的是jquery的用法，$符号代表jquery了"

[2]、在其他库之后导入

不必调用jQuery.noconflict(); ,直接用就行了

二、JQuery选择器

1、CSS是找到元素后添加样式，jQuery是找到元素后添加行为

2、jQuery选择器的优势：

[1]简洁的写法

[2]支持CSS1到CSS3的选择器

[3]完善的处理机制，即使元素不存在也不会像JS一样报错

3、判断某元素是否存在的方法

if($("#tt").length>0)或者 if($("#tt")[0]) 而不要用if($("#tt")!=null),因为永远不为空。

4、原生js中查找或获取元素的方法

getElementById("id") 如 id="one"

getElementByName("name") 如多选按钮的 name="check"

getElementByTag("tagname") 如、等html标签

5、选择器的分类

基本选择器

层次选择器

过滤选择器

表单选择器

6、基本选择器

<1> $("#test") id选择器

<2> $(".test") 类选择器

<3> $("p") 标签选择器

<4>$("*") 选择所有元素

<5>$("div,span,.myclass") 组合

7、层次选择器

<1>$("div span") 选择div中 span后代元素

<2>$(“div >span”) 选择div中span的子元素

<3>$(“.one + div”)选one的下一个div元素————相当于$(“.one”).next("div")

<4>$("#two ~ div") 选id为two的后面所有

兄弟元素————相当于$(“#two”).nextAll("div");

8、过滤选择器

<1>$(" div:first") 所有div元素中第一个div <2>$(" div:last") 所有div元素中最后一个div<3>$(" input:not(.myclass)") 不是 class为myclass 的元素<4>$(" input:even") 索引为偶数的input<5>$(" input:odd")索引为奇数的input<6>$("input:eq(1)") 索引为1的input——————index从0开始<7>$("input:gt(1)") 索引大于1的input<8>$("input :lt(1)") 索引小于1的input<9>$(":header") 所有的

......<10>$("div:animated") 正在执行动画的
<11>$("div:contains('我')") 含有文本‘我’的div<12>$("div:empty") 空的div<13>$(" div :has(p)") 含有

的

<14>$("div:parent") 含有子元素的
<15> $(":hidden") 所有不可见元素<16>$("div:visible") 所有的可见的
<17>$(" div[id]") 拥有id属性的
<18>$(" div[title=test]") title为test的
<19> $ ("div [title!=test]") title不为test的
<20> $(" div[title^=test]") title以“test”开头的div<21>$ ("div [title$=test]") title以“test”结束的div<22>$(" div[title*=test]") title含有test的div<23>$("div[id][title$=test]") 组合多条件选择

<24>:nth-child(index/even/odd/equation) ————————index从1开始<25>:first-child<26>:last-child<27> :only-child<28> $("#form1 :enabled") id为“form1”的表单内所有可用的元素<29>$("#form2:disable")<30>$("input:checked") 所有被选中的元素<31>$("select:selected") 所有被选中的