jQuery(一)样式部分

jQuery样式基础

1. 基本概念

jQuery 每一个系列版本分为:压缩版(compressed)开发版(development),我们在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版

本体积更小,效率更快)。

jQuery对象与DOM对象是不一样的

  1. 通过jQuery方法包装后的对象,是一个类数组对像,与DOM对象完全不同,但它们都能操作DOM。
  2. 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,不需要具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,用jQuery提供的API进行开发,代码也会更加精短。

jQuery是一个类数组对象(可通过get方法,将jquery对象转化为dom对象),而DOM对象就是一个单独的DOM元素。
如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象

基本设计思想

jQuery的基本设计思想和主要用法,就是”选择某个网页元素,然后对其进行某种操作”。这是它区别于其他Javascript库的根本特点。
jQuery设计思想之二,就是提供各种强大的过滤器,对结果集进行筛选,缩小选择结果。
jQuery设计思想之三,就是最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来。
jQuery设计思想之四,就是使用同一个函数,来完成取值(getter)和赋值(setter),即”取值器”与”赋值器”合一。到底是取值还是赋值,由函数的参数决定。
Query设计思想之五,就是提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。
jQuery设计思想之六:除了对选中的元素进行操作以外,还提供一些与元素无关的工具方法(utility)。不必选中元素,就可以直接使用这些方法。
jQuery设计思想之七,就是把事件直接绑定在网页元素之上。

2. 选择器

id选择器

1
$("#id)

id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

class选择器

1
$(".class")

class选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选,另外,jQuery除了选择上的简单,而且没有再次使用循环处理

element选择器

1
$("element")

搜索指定元素标签名的所有节点,这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持

*选择器

1
$("*")

抛开jQuery,如果要获取文档中所有的元素,通过document.getElementsByTagName(“*”)同样可以获取到

  • 选择器的兼容性问题
  1. IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的
  2. getElementById的参数在IE8及较低的版本不区分大小写
  3. IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A
  4. IE8及较低的版本,浏览器不支持getElementsByClassName

层级选择器

选择器 描述
$(“parent > child”) 子选择器:选择所有指定“parent”元素中指定的“child”的直接子元素。
$(“ancestor descendant”) 后代选择器:选择给定的祖先元素的所有后代元素,一个元素的后代可能是该元素的一个孩子,孙子,曾孙等
$(“prev + next”) 相邻兄弟原则器:选择所有紧接在“prev”元素后的“next”元素
$(“prev ~ siblings”) 一般兄弟选择器:匹配“prev”元素之后的所有兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器
  1. 层级选择器都有一个参考节点
  2. 后代选择器包含子选择器的选择的内容
  3. 一般兄弟选择器包含相邻兄弟选择的内容
  4. 相邻兄弟选择器和一般兄弟选择器所选择到的元素,必须在同一个父元素下且不能向前选择

基本筛选选择器

选择器 描述
$(“:first”) 匹配第一个元素
$(“:last”) 匹配最后一个元素
$(“:not(selector)”) 一个用来过滤的选择器,选择所有元素去除不匹配给定的选择器元素
$(“:eq(index)”) 在匹配的集合中选择索引值为index的元素
$(“:gt(index)”) 选择匹配集合中所有大于给定index的元素
$(“:lt(index)”) 选择匹配集合中所有小于给定index的元素
$(“:even”) 选择索引值为偶数的元素,从0开始计数
$(“:odd”) 选择索引值为奇数的元素,从0开始计数
$(“:header”) 选择所有标题元素,像h1,h2,h3等
$(“:lang(language)”) 选择指定语言的所有元素
$(“:root”) 选择该文档的根元素

$(“:animated”) 选择所有正在执行动画效果的元素

  1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意 jQuery合集都是从0开始索引
  2. gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始

内容筛选选择器

选择器 描述
$(“:contains(text)”) 选择所有包含指定文本的元素
$(“:has(selector)”) 选择元素中至少包含制定选择器的元素
$(“:parent”) 选择所有含有子元素或文本的元素
$(“:empty”) 选择所有没有子元素或者文本的元素
  1. :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。
  3. :parent与:empty是相反的,两者所涉及的子元素,包括文本节点

可见性筛选选择器

选择器 描述
$(“:visible”) 选择所有显示的元素
$(“:hidden”) 选择所有隐藏的元素

隐藏一个元素的方法有下面几种方式:

  1. CSS display的值是none
  2. type=”hidden”的表单元素
  3. 宽度和高度都显式设置为0
  4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的值是0

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度,是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。

属性筛选选择器

选择器 描述
$(“[attribute]”) 选择所有具有指定属性的元素,该属性可以是任何值
$(“[attribute=’value’]”) 选择指定属性是给定值的元素
$(“[attribute\ =’value’]”) 选择指定属性值等于给定字符串或以该文字串为前缀(该字符串后跟一个连字符“-”)的元素
$(“[attribute^=’value’]”) 选择指定属性是以给定字符串开始的元素
$(“[attribute\$=’value’]”) 选择指定属性是以给定字符串结尾的元素(区分大小写)
$(“[attribute*=’value’]”) 选择指定属性具有包含一个给定的子字符串的元素(选择给定的属性是以包含某些值的元素)
$(“[attribute~=’value’]”) 选择指定属性用空格分隔的值中包含一个给定值的元素
$(“[attribute!=’value’]”) 选择不存在指定属性,或者指定的属性值不等于给定值的元素
$(“[attributeFilter1][attributeFilterN]”) 选择匹配所有指定的属性筛选器的元素

子元素筛选选择器

选择器 描述
$(“:first-child”) 选择所有父级元素下的第一个子元素
$(“:last-child”) 选择所有父级元素下的最后一个子元素
$(“:only-child”) 如果某个元素是其父元素的唯一子元素,那么它就会被选中
$(“:nth-child”) 选择他们所有父元素的第n个子元素
$(“:nth-last-child”) 选择所有他们父元素的第n个子元素,计数从最后一个元素开始到第一个
  1. :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
  2. :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
  3. 如果子元素只有一个的话,:first-child与:last-child是同一个
  4. :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
  5. jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
  6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算

表单元素选择器

选择器 描述
$(“:input”) 选择所有input,textarea,select和button元素
$(“:text”) 匹配所有文本框
$(“:password”) 匹配所有密码框
$(“:radio”) 匹配所有单选按钮
$(“:checkbox”) 匹配所有复选框
$(“:submit”) 匹配所有提交按钮
$(“:image”) 匹配所有图像域
$(“:reset”) 匹配所有重置按钮
$(“:button”) 匹配所有按钮
$(“:file”) 匹配所有文件域

表单对象属性筛选选择器

选择器 描述
$(“:enabled”) 选择可用的表单元素
$(“:disabled”) 选择不可用的表单元素
$(“:checked”) 选取被选中的\元素
$(“:selected”) 选取被选中的\

选择器之特殊选择器this

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。

3. 属性与样式

.attr()

  1. attr(传入属性名):获取属性的值
  2. attr(属性名, 属性值):设置属性的值
  3. attr(属性名,函数值):设置属性的函数值
  4. attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

.removeAttr()

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)

.html()

获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容

  1. .html() 不传入值,就是获取集合中第一个匹配元素的HTML内容
  2. .html( htmlString ) 设置每一个匹配元素的html内容
  3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

.html()方法内部使用的是DOM的innerHTML属性来处理的,所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅只是文本内容)

.text()

得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

  1. .text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代
  2. .text( textString ) 用于设置匹配元素内容的文本
  3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

.text()结果返回一个字符串,包含所有匹配元素的合并文本

  • .html()与.text()的异同
  1. .html与.text的方法操作是一样,只是在具体针对处理对象不同
  2. .html处理的是元素内容,.text处理的是文本内容
  3. .html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用
  4. 如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的
  5. 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器

.val()

主要是用于处理表单元素的值

  1. .val()无参数,获取匹配的元素集合中第一个元素的当前值
  2. .val( value ),设置匹配的元素集合中每个元素的值
  3. .val( function ) ,一个用来返回设置值的函数

通过.val()处理select元素, 当没有选择项被选中,它返回null
.val()方法多用来设置表单的字段的值
如果select元素有multiple(多选)属性,并且至少一个选择项被选中, .val()方法返回一个数组,这个数组包含每个选中选择项的值

.addClass()

用于动态增加class类名

  1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
  2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

.removeClass()

从匹配的元素中删除全部或者指定的class

  1. .removeClass( [className ] ):每个匹配元素移除的一个或多个用空格隔开的样式名
  2. .removeClass( function(index, class) ) : 一个函数,返回一个或多个将要被移除的样式名

.toggleClass()

如果存在(不存在)就删除(添加)一个class

  1. .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名
  2. .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除
  3. .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值
  4. .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

.css()

获取元素样式属性的计算值或者设置元素的CSS属性

  1. .css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值
  2. .css( propertyNames ):传递一组数组,返回一个对象结果
  • .addClass()与.css()的异同
  1. .addClass()本质只是针对class的类的增加删除,不能获取到指定样式的属性的值,.css()可以获取到指定的样式值。
  2. 通过.css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的,所以优先级要高于.addClass()