jquery入门基础知识
jQuery是继prototype之后又一个优秀的javascrīpt框架。其宗旨是——写更少的代码,做更多的事情。jQuery是一个快速的,简洁的Javascript库,使用户能更方便地处理HTML documents、events、实现动画效果,并方便地为网站提供ajax交互。要学jquery必须学会用“$”,如果你学会了使用“$”,那你就已经成功了一半了。不管怎样,这种传闻肯定有他的起因。所以我的begginning自学课程也从这个符号开始。
1.什么是选择器
在dom中,我们用少量的函数来访问dom节点,但是在jq中我们有很丰富的方法来访问dom节点,在使用jq时返回一个jquery包装集。”$”是jquery对象的一个引用。jquery是jquery框架的核心,下面他提供的一些方法:
JQuery(expression,context) 这个函数接收一个css选择器的字符串,然后用这个字符串去匹配一组元素。
JQuery(html,ownerDocumetn) 根据HTML原始字符串动态创建Dom元素。
JQuery(element) 将一个或多个Dom对象封装jQuery函数功能。
JQuery(callback) $(document).ready()的简写方式。
JQuery(seltector,context) 根据选择器选取匹配的对象,以jQuery包装集的形式返回。context可以是Dom对象集合或jQuery包装集,传入则表示要从context中选择匹配的对象,不传入则表示范围为文档对象(即页面全部对象)。
2.选择器类型
jquery的选择器有几种:类选择器(Class selectors)、ID选择器(ID selectors)、伪类选择器(Pseudo-classes selectors)。其中,类选择器和ID选择器具有比较重要的地位。
按照功能分,jQuery选择器主要分为“选择”和“过滤”,并且是配合使用的。可以同时使用组合成一个选择器字符串,主要区别是“过滤”作用的选择器是指定条件从前面匹配的内容中筛选,“过滤”选择器也可以单独使用, 表示从全部“*”中筛选。 比如:
(1)基本选择器:#id element .class * selector1,selector2,selector
(2)层次选择器: ancestor descendant parent->child prev+next prev~siblings
(3)基本过滤器:first :last :not(selector) :even :odd :eq(index) :gt(index) lt(index) :header animated
(4)内容过滤器:contains(text) :empty :has(selector) :parent
(5)可见性过滤器:hadden :visible
(6)属性过滤器:[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attribute1][attribute2]
(7)子元素过滤器:nt-child(index/even/odd/equation) :first-child :last-child :only-child
(8)表单选择器:input :text :password :radio :checkbox :submit :image :reset :button :file
(9)表单过滤器:enabled ;disabled :checked :selected
3.CSS3与jquery
总的来说,css与jquery的形式有如下种类:
* :所有标记。
E :所有名称为E的标记。
EF:所有标记为F的标记,并且是E标记的子标记。
E>F:所有的F标记,并且是E标记的子标记(不包含孙标记)。
E+F:所有名称为F的标记,并且该标记紧跟着前面的E标记。
E~F:所有名称为F的标记,并且该标记前面有一个E标记。
E.has(F):所有名称为E的标记,并且该标记包含F标记。
E.C:所有名称为E的标记,属性类别为C,如果去掉E,就是属性选择器C。
E#I:所有名称为E的标记,id为I,如果去掉E,就是ID选择权#I。
E[A]:所有名称为的标记,并且设置属性值A。
E[A=V]:所有的E标记,并且属性A等于V。
E[A^=V]:所有的E标记,并且属性A的值以V开头。
E[A$=V]:所有的E标记,并且属性A的值以V结尾。
E[A*=V]:所有的E标记,并且属性A的值包含V。
最后,jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用的说明也很详细,同时还有许多成熟的插件可供选择。它还能够使用户的html页保持代码和html内容分离,即不用再在html里面插入一堆js来调用命令了,只需定义id即可。