jQuery学习笔记.docx

jQuery学习笔记.docx

《jQuery学习笔记.docx》由会员分享，可在线阅读，更多相关《jQuery学习笔记.docx（29页珍藏版）》请在冰豆网上搜索。

jQuery学习笔记

中间的一个‘*’是对所有的标签添加属性

对所有的divul进行标签设定

又一种组合

选择div下的input只包含其子元素的input

选择yyjcw下的所有input子集

改变所有tbyyjcw2后边同辈的input标签

或者是利用下边的代码实现：

改变所有tbyyjcw2后边同辈的第一个input标签

选择第一个div并且改变字体的颜色以及转译字符的使用（双引号里边有双引号就需要转移字符）

最后一个div：

任意一个div：

选择所有小于4的div：

后边的三个div：

偶数项：

排除掉不需要的div：

选取网页中所有的h1h2h3等：

内容选择器选择div中内容是jquery的东西：

选择所有包还有内容的元素：

显示隐藏的div：

一个淡入的显示隐藏效果：

遍历的效果：

选择input中name位a1的input.each是遍历

实用的函数工具：

（$实用函数工具的命名空间前缀，$就是一个标示符，与其他标示符没有区别，利用标示符jQuery（而不是别名$）去调用同样的函数功能是一样的）

$.trim（someString）;删除字符串前后的空格的使用工具函数

（功能和jQuery.trim（someString）;是一样的）

jQuery事件-ready（）方法

在文档加载后激活函数：

$（document）.ready（function（）{

$（".btn1"）.click（function（）{

$（"p"）.slideToggle（）;

}）;

}）;

jQuery效果-toggle（）方法

jQuery效果参考手册

实例

切换

元素的显示与隐藏状态：

$（".btn1"）.click（function（）{

$（"p"）.hide（）;

}）;

亲自试一试

定义和用法

toggle（）方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

语法

$（selector）.toggle（speed,callback,switch）

参数

描述

speed

可选。

规定元素从可见到隐藏的速度（或者相反）。

默认为"0"。

可能的值：

∙毫秒（比如1500）

∙"slow"

∙"normal"

∙"fast"

在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。

如果设置此参数，则无法使用switch参数。

callback

可选。

toggle函数执行完之后，要执行的函数。

如需学习更多有关callback的内容，请访问我们的jQueryCallback这一章。

除非设置了speed参数，否则不能设置该参数。

switch

可选。

布尔值。

规定toggle是否隐藏或显示所有被选元素。

∙True-显示所有元素

∙False-隐藏所有元素

如果设置此参数，则无法使用speed和callback参数。

提示和注释

注释：

该效果适用于通过jQuery隐藏的元素，或在CSS中声明display:

none的元素（但不适用于visibility:

hidden的元素）。

亲自试一试-实例

使用speed参数

使用speed参数来隐藏和显示元素。

使用switch参数

使用switch参数来显示所有隐藏的段落。

$（document）.ready（function（）{

$（".btn1"）.click（function（）{

$（"p"）.toggle（true）;

}）;

}）;

Thisisaparagraph.

none">Thisisanotherparagraph.

把switch参数设置为false，可以隐藏所有段落。

显示所有p元素

jQuery效果-slideToggle（）方法

通过使用滑动效果，在显示和隐藏状态之间切换

元素：

$（".btn1"）.click（function（）{

$（"p"）.slideToggle（）;

}）;

定义和用法

slideToggle（）方法通过使用滑动效果（高度变化）来切换元素的可见状态。

如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

语法

$（selector）.slideToggle（speed,callback）

参数

描述

speed

可选。

规定元素从隐藏到可见的速度（或者相反）。

默认为"normal"。

可能的值：

∙毫秒（比如1500）

∙"slow"

∙"normal"

∙"fast"

在设置速度的情况下，元素在切换的过程中，会逐渐地改变其高度（这样会创造滑动效果）。

callback

可选。

toggle函数执行完之后，要执行的函数。

如需学习更多有关callback的内容，请访问我们的jQueryCallback这一章。

除非设置了speed参数，否则不能设置该参数。

jQuery遍历-andSelf（）方法

实例

找到所有div，以及其中的所有段落，并为它们添加两个类名。

请注意，由于未使用.andSelf（），div没有黄色背景色。

$（"div"）.find（"p"）.andSelf（）.addClass（"border"）;

$（"div"）.find（"p"）.addClass（"background"）;

亲自试一试

定义和用法

add（）方法把堆栈中之前的元素集添加到当前集合。

语法

.andSelf（）

详细说明

请思考这个拥有简单列表的页面：

• listitem1
• listitem2

listitem3

• listitem4
• listitem5

以下代码的结果是项目3,4,5拥有红色背景：

$（"li.third-item"）.nextAll（）.andSelf（）

.css（"background-color","red"）;

jQuery遍历函数

jQuery遍历函数包括了用于筛选、查找和串联元素的方法。

函数

描述

.add（）

将元素添加到匹配元素的集合中。

.andSelf（）

把堆栈中之前的元素集添加到当前集合中。

.children（）

获得匹配元素集合中每个元素的所有子元素。

.closest（）

从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。

.contents（）

获得匹配元素集合中每个元素的子元素，包括文本和注释节点。

.each（）

对jQuery对象进行迭代，为每个匹配元素执行函数。

.end（）

结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。

.eq（）

将匹配元素集合缩减为位于指定索引的新元素。

.filter（）

将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。

.find（）

获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。

.first（）

将匹配元素集合缩减为集合中的第一个元素。

.has（）

将匹配元素集合缩减为包含特定元素的后代的集合。

.is（）

根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回true。

.last（）

将匹配元素集合缩减为集合中的最后一个元素。

.map（）

把当前匹配集合中的每个元素传递给函数，产生包含返回值的新jQuery对象。

.next（）

获得匹配元素集合中每个元素紧邻的同辈元素。

.nextAll（）

获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。

.nextUntil（）

获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。

.not（）

从匹配元素集合中删除元素。

.offsetParent（）

获得用于定位的第一个父元素。

.parent（）

获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。

.parents（）

获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。

.parentsUntil（）

获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。

.prev（）

获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。

.prevAll（）

获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。

.prevUntil（）

获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

.siblings（）

获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。

.slice（）

将匹配元素集合缩减为指定范围的子集。

jQuery效果-fadeIn（）方法

使用淡入效果来显示一个隐藏的

元素：

$（".btn2"）.click（function（）{

$（"p"）.fadeIn（）;

}）;

定义和用法

fadeIn（）方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

语法

$（selector）.fadeIn（speed,callback）

参数

描述

speed

可选。

规定元素从隐藏到可见的速度。

默认为"normal"。

可能的值：

∙毫秒（比如1500）

∙"slow"

∙"normal"

∙"fast"

在设置速度的情况下，元素从隐藏到可见的过程中，会逐渐地改变其透明度（这样会创造淡入效果）。

callback

可选。

fadeIn函数执行完之后，要执行的函数。

如需学习更多有关callback的内容，请访问我们的jQueryCallback这一章。

除非设置了speed参数，否则不能设置该参数。

jQuery拥有下面四种fade方法：

∙fadeIn（）

∙fadeOut（）

∙fadeToggle（）

∙fadeTo（）

jQueryfadeToggle（）方法

jQueryfadeToggle（）方法可以在fadeIn（）与fadeOut（）方法之间进行切换。

如果元素已淡出，则fadeToggle（）会向元素添加淡入效果。

如果元素已淡入，则fadeToggle（）会向元素添加淡出效果。

语法：

$（selector）.fadeToggle（speed,callback）;

可选的speed参数规定效果的时长。

它可以取以下值：

"slow"、"fast"或毫秒。

可选的callback参数是fading完成后所执行的函数名称。

下面的例子演示了带有不同参数的fadeToggle（）方法：

实例

$（"button"）.click（function（）{

$（"#div1"）.fadeToggle（）;

$（"#div2"）.fadeToggle（"slow"）;

$（"#div3"）.fadeToggle（3000）;

}）;

jQueryfadeTo（）方法

jQueryfadeTo（）方法允许渐变为给定的不透明度（值介于0与1之间）。

语法：

$（selector）.fadeTo（speed,opacity,callback）;

必需的speed参数规定效果的时长。

它可以取以下值：

"slow"、"fast"或毫秒。

fadeTo（）方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与1之间）。

可选的callback参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的fadeTo（）方法：

实例

$（"button"）.click（function（）{

$（"#div1"）.fadeTo（"slow",0.15）;

$（"#div2"）.fadeTo（"slow",0.4）;

$（"#div3"）.fadeTo（"slow",0.7）;

}）;

jQuery属性操作-attr（）方法

实例

改变图像的width属性：

$（"button"）.click（function（）{

$（"img"）.attr（"width","180"）;

}）;

定义和用法

attr（）方法设置或返回被选元素的属性值。

根据该方法不同的参数，其工作方式也有所差异。

返回属性值

返回被选元素的属性值。

语法

$（selector）.attr（attribute）

参数

描述

attribute

规定要获取其值的属性。

设置属性/值

设置被选元素的属性和值。

语法

$（selector）.attr（attribute,value）

参数

描述

attribute

规定属性的名称。

value

规定属性的值。

使用函数来设置属性/值

设置被选元素的属性和值。

语法

$（selector）.attr（attribute,function（index,oldvalue））

参数

描述

attribute

规定属性的名称。

function（index,oldvalue）

规定返回属性值的函数。

该函数可接收并使用选择器的index值和当前属性值。

设置多个属性/值对

为被选元素设置一个以上的属性和值。

语法

$（selector）.attr（{attribute:

value,attribute:

value...}）

参数

描述

attribute:

value

规定一个或多个属性/值对。

jQuery属性操作-toggleClass（）方法

实例

对设置和移除所有

元素的"main"类进行切换：

$（"button"）.click（function（）{

$（"p"）.toggleClass（"main"）;

}）;

亲自试一试

定义和用法

toggleClass（）对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。

如果不存在则添加类，如果已设置则删除之。

这就是所谓的切换效果。

不过，通过使用"switch"参数，您能够规定只删除或只添加类。

语法

$（selector）.toggleClass（class,switch）

参数

描述

class

必需。

规定添加或移除class的指定元素。

如需规定若干class，请使用空格来分隔类名。

switch

可选。

布尔值。

规定是否添加或移除class。

使用函数来切换类

$（selector）.toggleClass（function（index,class）,switch）

亲自试一试

参数

描述

function（index,class）

必需。

规定返回需要添加或删除的一个或多个类名的函数。

∙index-可选。

接受选择器的index位置。

class-可选。

接受选择器的当前的类。

switch

可选。

布尔值。

规定是否添加（true）或移除（false）类。

jQuery-css（）方法

jQuerycss（）方法

css（）方法设置或返回被选元素的一个或多个样式属性。

返回CSS属性

如需返回指定的CSS属性的值，请使用如下语法：

css（"propertyname"）;

下面的例子将返回首个匹配元素的background-color值：

实例

$（"p"）.css（"background-color"）;

设置CSS属性

如需设置指定的CSS属性，请使用如下语法：

css（"propertyname","value"）;

下面的例子将为所有匹配元素设置background-color值：

实例

$（"p"）.css（"background-color","yellow"）;

设置多个CSS属性

如需设置多个CSS属性，请使用如下语法：

css（{"propertyname":

"value","propertyname":

"value",...}）;

下面的例子将为所有匹配元素设置background-color和font-size：

实例

$（"p"）.css（{"background-color":

"yellow","font-size":

"200%"}）;

jQuery属性操作-hasClass（）方法

实例

检查第一个

元素是否包含"intro"类：

$（"button"）.click（function（）{

alert（$（"p:

first"）.hasClass（"intro"））;

}）;

定义和用法

hasClass（）方法检查被选元素是否包含指定的class。

语法

$（selector）.hasClass（class）

参数

描述

class

必需。

规定需要在指定元素中查找的类。

JavaScriptsplit（）方法

定义和用法

split（）方法用于把一个字符串分割成字符串数组。

语法

stringObject.split（separator,howmany）

参数

描述

separator

必需。

字符串或正则表达式，从该参数指定的地方分割stringObject。

howmany

可选。

该参数可指定返回的数组的最大长度。

如果设置了该参数，返回的子串不会多于这个参数指定的数组。

如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值

一个字符串数组。

该数组是通过在separator指定的边界处将字符串stringObject分割成子串创建的。

返回的数组中的字串不包括separator自身。

但是，如果separator是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

提示和注释

注释：

如果把空字符串（""）用作separator，那么stringObject中的每个字符之间都会被分割。

注释：

String.split（）执行的操作与Array.join执行的操作是相反的。

实例

例子1

在本例中，我们将按照不同的方式来分割字符串：

varstr="Howareyoudoingtoday?

"

document.write（str.split（""）+"
"）

document.write（str.split（""）+"
"）

document.write（str.split（"",3））

输出：

How,are,you,doing,today?

H,o,w,,a,r,e,,y,o,u,,d,o,i,n,g,,t,o,d,a,y,?

How,are,you

例子2

在本例中，我们将分割结构更为复杂的字符串：

"2:

3:

4:

5".split（":

"）//将返回["2","3","4","5"]

"|a|b|c".split（"|"）//将返回["","a","b","c"]

例子3

使用下面的代码，可以把句子分割成单词：

varwords=sentence.split（''）

或者使用正则表达式作为separator：

varwords=sentence.split（/\s+/）

例子4

如果您希望把单词分割为字母，或者把字符串分割为字符，可使用下面的代码：

"hello".split（""）//可返回["h","e","l","l","o"]

若只需要返回一部分字符，请使用howmany参数：

"hello".split（"",3）//可返回["h","e","l"]

jQueryHTML操作

jQuery包含很多供改变和操作HTML的强大函数。

改变HTML内容

语法

$（selector）.html（content）

html（）函数改变所匹配的HTML元素的内容（innerHTML）。

实例

$（"p"）.html（"W3School"）;

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"p"）.html（"W3School"）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

请点击这里

添加HTML内容

语法

$（selector）.append（content）

append（）函数向所匹配的HTML元素内部追加内容。

语法

$（selector）.prepend（content）

prepend（）函数向所匹配的HTML元素内部预置（Prepend）内容。

实例

$（"p"）.append（"W3School"）;

亲自试一试

语法

$（selector）.after（content）

after（）函数在所有匹配的元素之后插入HTML内容。

语法

$（selector）.before（content）

before（）函数在所有匹配的元素之前插入HTML内容。

实例

$（"p"）.after（"W3School."）;

亲自试一试

函数

描述

$（selector）.html（content）

改变被选元素的（内部）HTML

$（selector）.append（content）

向被选元素的（内部）HTML追加内容

$（selector）.prepend（content）