jQuery学习笔记 #Day2

jQuery HTML操作

jQuery可以对DOM模型进行操作。DOM模型类似树结构，每个节点都是标签，清晰地表现了标签之间的包含关系。

读取与设置标签内容

有三种方式可以读取元素内容：

• text() //获取文字内容
• html() //获取元素内的html语句
• val() //获取表单的内容

获取元素属性值的方式：

• attr(属性名)

为以上方法添加参数则可以对相应内容进行设置：

• text(文本内容) //将被选择元素的内容设置为文本内容
• html(html语句) //将被选择元素的内部语句设置为指定html语句
• val(指定值) //将被选择表单的值设置为指定值
• attr(属性名,属性值) //将被选择的元素的指定属性设置为指定属性值

attr()也可以同时设置多个属性：

attr(属性1：value1；属性2：value2；…)

添加与删除

有四种方式可以实现添加：

• append(内容) //在被选择元素内部的后向添加
• prepend(内容)//在被选择元素内部的前部添加
• after(内容) //在被选择元素外部后向添加新元素及内容
• before(内容) //在被选择元素外部之前添加新元素及内容
  要添加的内容可以带标签

有两种方式可以实现元素删除：

• remove() //直接将所选元素删除
• empty() //保留所选元素，将其内部全部元素清空

CSS样式

CSS类设置

有三种方式可以对CSS类进行操作：

• addClass(类名) //为被选择的元素添加一个类
• removeClass(类名) //将被选择的元素的指定类名去除
• toggleClass(类名) //以上两种方法的切换

以上方法可以给一个元素设置多个类名，也可以给多个元素同时添加相同的类名。
设置多个类名时 不同类名之间用空格分开；选择多个元素时 不同元素之间用逗号隔开

CSS属性读取与设置

用到之前提到的css()函数，不仅可以读取属性值，还可以设置属性值：

• css(属性名) //获取对应属性值
• css(属性名，属性值) //设置单一属性
• css（属性1：value1；属性2：value2；…）//设置多个属性

窗口样式

对应的函数可以获取相应的值。（图片截自菜鸟教程）

jQuery遍历

这里的遍历是通过类似树结构的DOM模型对标签元素进行访问，首先得明白几个关系。借用一下菜鸟教程的例图

对span来说

• li是其父元素，则span是li的子元素
• ul是其祖父，div是其曾祖父，但和li一样均为其祖先

对于li来说

• 左右两个li都是ul的子元素，两个li成为同胞
• 而li、span、b都称为ul的后代，而他们又全都属于div的后代

对后代的访问

使用以下两个函数的多种形式进行对后代的各种访问：

• children()
• find()

children()函数，访问全部的子元素；
children(类特征/id特征)，访问对应特征的子元素，例如：访问子元素中类属于dog的p标签——children(“p.dog”)；
find("*")，访问全部的后代元素；
find(元素名)，访问后代中全部的符合元素名的标签元素，也可以指定类特征和id特征

对祖先的访问

有三种函数可以用来以不同形式访问祖先：

• parent()
• parents()
• parentsUntil()

parent()函数，访问直接相连的那个父元素；
parents()函数，访问全部的祖先；
parents(元素名)，访问祖先中全部的符合元素名的标签元素；
parentsUntil(元素名)，向上访问祖先，直到访问到符合元素名的标签元素后结束

对同胞的访问

对同胞的访问有很多方式，用法相似。

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

siblings()函数，访问被选择元素的所有同胞，根据同胞的定义，此函数是不会访问同胞的后代的；
next()函数，访问被选择元素的后面的第一个同胞元素；
nextAll()函数，访问被选择元素后面的所有同胞元素；
nextUntil(元素名)，访问被选择元素后面的所有同胞元素，直到访问到符合元素名的标签元素后停止；
prev()、prevAll()、prevUntil（元素名）用法和next的三个函数相似，只不过是从被选择元素向前访问。

过滤访问

过滤访问的目的是为了缩小访问的范围，符合的条件更具体，有以下几种方法：

• first()
• last()
• eq()
• filter()
• not()

first()函数，访问第一个符合要选择的元素条件的元素；
last()函数，访问最后一个符合要选择的元素条件的元素；
eq()函数，这个更骚一些，指定索引，这样就可以访问不在首尾位置而又符合要选择的元素条件的元素了，索引依旧从0开始；
filter(类特征/id特征)函数，访问既符合过滤器中格式的又符合要选择的元素条件的元素；
not(类特征/id特征)函数，与filter()函数对应，访问不符合符合过滤器中格式的但符合要选择的元素条件的元素；