jQuery基础学习笔记（1）

--------2.0以上版本体积更小。

--------CDN  内容分发网络（Content delivery network或Content distribution network，常简写成CDN）可以减少带宽，但需要保证网络正常连接。

jQuery函数：jQuery()  或者写成 $()  ，使用方法：1.选择器；2.对象，如document；3.文本内容，注意这个文本内容里一定要包含至少一个 html 标签 … 不然 jQuery 会把没有 html 标签的文本内容当成是选择器来处理 …

size--------针对标签对象元素，比如数html页面有多少个段落元素<p></p>，那么此时的$("p").size() == $("p").length

length------计算一个字符串的长度或者计算一个数组元素的个数，那么此时只能用length而不能用size()

选择器：

1.支持css3选择器

2.选择器过滤，例如$('img:even')  注意:第一个是0,0 是偶数；$( ‘img:eq( 1 )’ )     $( 'img:lt( 3 )' )

3.选择器里使用元素属性

例如：$( 'li[data-album!="single"] > img' )

=包含的具体的值，也就是所选择的元素里面的这个属性的值里不能包含其它的东西

~ =号等于只会包含用空格分隔开的值

* 号等于不在乎有没有空格，只要属性的值里包含设置的字符就可以

选择表单元素：

选择不同的类型的表单元素，一般就是使用冒号加上元素的名称 ，或者元素类型的名称

$( ‘:input’ )

$( ‘:password’ )

$( ‘:checked’ )

跟表单相关的选择器，都有一个冒号 … :input 表示找到所有 input 类型的元素。

注意这里使用 button 标签的按钮也被看成是 input 类型的元素 。如果想单独选中按钮元素 ，可以使用 $( ‘:button’ )

另外我们还有一些根据表单元素的状态来选择的选择器，比如 :focus 会选择处在焦点状态的 input 元素 ，

:disabled 选择的是被禁用的表单元素，:enabled 选择是启用的表单元素。

子元素选择器

:nth-child 允许我们指定选择第几个子元素

$( 'ul li:nth-child(1)' )

注意这个：nth-child 是从 1 开始的 … 也就是第一个子元素的索引号是1，eq() 是从 0 开始的 。

:nth-child 里可以指定子元素所在位置的关键词 … 比如可以使用 odd 或者 even … 选择奇数位置的子元素 … 或者偶数位置的子元素 …

$( 'ul li:nth-child(odd)' )

:nth-child 还支持选择自己定义的成倍数位置上的子元素 …

比如我们要选择第 4 ，还有第 8 个 li 元素 …

$( 'ul li:nth-child(4n)' )

选择的子元素就是，从1数到 4 ，第4个子元素 … 然后在从第4个子元素往后再数4个数 …

如果你想反过来做的话，可以把 :nth-child … 换成 :nth-last-child …

$( 'ul li:nth-last-child(4n)' )

内容过滤

:contains 这个选择器可以找到包含指定文字内容的元素 … 比如我们想要选择带 Viva 这个词的 li 元素 …

$( 'li:contains("Viva")' )

注意文字的大小写 … 还有文字是字符串形式 … 所以我们需要在文字周围添加一组引号，这里也要注意引号的类型 ，如果外面我们用了单引号 ，那这里就需要使用双引号。

过滤的方法

jQuery 里面提供了一些方法，可以对选择的结果进一步去过滤。

$( 'li img' ).eq(1)

这个位置号，或者叫索引号，也可以是负数 。

我们可以试一下 -1 … 这样，会过滤出倒数第一个结果 …

$( 'li img' ).eq(-1)

.first() 和 .last()

.first() 和 .last() 可以找到结果里的第一个，和最后一个结果 …

先看一下 .first() … 这两个方法都不支持参数，所以，直接在它们的后面输入一个括号就行了。

$( 'li img' ).first()

选择结果里的某个范围，可以使用 .slice() 方法，比如我们想要的是页面上第7个图像到第12个图像 ，

$( 'li img' ).slice(6, 12)

.slice() 这个方法里有两个参数，第一个参数是开始的值 ，第二个参数是结束的值。

使用文档树形里的关系过滤

例如：

$( '#christmas' ).nextAll()