jQuery基础学习笔记(1)

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

--------CDN  内容分发网络Content delivery networkContent 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()

原文地址:https://www.cnblogs.com/love9happy/p/4023229.html