《锋利的Jquery》笔记

124 阅读1分钟

1.jquery和传统的js相比,在于封装了大量的API以及强大的选择器和DOM操作。

2.书写代码时尽量链式调用:$("#id").removeClass('thisClass').addClass('myClass').click(function(){......})。

3.jquery对象和DOM对象的相互转化:$("#id")  //jquery对象   $("#id")[0]   //DOM对象

   究其原因是jquery的对象是数组类型的对象。

4.强大的选择器:

   4.1  CSS选择器   

           .class { background : red ;}  //主要用于给全局带该class的标签添加样式

           .class,#id,div { CSS规则 }  //多个选择符应用同样的样式

           .class  #id {CSS规则}  //该class后代中带该id的都应用于该样式

    4.2   基本选择器 

              $("#id")   id选择器

              $(".class")  类选择器

              $("p")   元素选择器

              $("div,class,id") 选取包含div和class以及相应id的元素进行返回

4.3 层级选择器

              $("div span") 选取div中所有的span 

              $(".class + div") 选取class的下一个div元素 

               $(".class ~ div") 选取class后面的所有div的兄弟元素,只能选择之后的      

               $(".class").siblings("div") 选取class的所有同辈的div,不管前后都可以 

4.4 过滤选择器 

               $("div:first") 选取所有div元素中的第一个div元素 

               $("div:last") 选取所有div元素中的最后一个div元素 

               $("input:not(.myclass)") 选取class不是myclass的input元素 

                $("div:even") 选取索引是偶数的div 

                $("div:odd") 选取索引是奇数的div 

                $("div:eq(1)") 选取索引是1的div $("div:gt(1)") 选取索引大于1的div 

                $("div:lt(1)") 选取索引小于1的div

 4.5 内容过滤选择器 

                $("div:contains('科技')") 选取包含文本‘科技’的div元素 

4.6 属性过滤选择器 

                 $("div[id]") 选取拥有该id属性的div 

                 $("div[name=lyc]") 选取属性name=lyc的div元素 

                 $("div[name^=lyc]") 选取属性以name=lyc开始的div元素

4.7 子元素过滤选择器

                 未完,待更。。。。。。。。。