JQuery常用函数(一)

深渊向深渊呼唤

 

目录

attr函数

removeAttr函数

data函数

removeData函数

addClass函数

removeClass函数

toggleClass函数

hasClass函数

css函数

width和height函数

与尺寸相关的JQuery函数

offset函数

position函数

jQuery滚动控制方法

html函数

text函数

append函数

prepend函数

before函数

after函数

appendTo函数

prependTo函数

insertBefore函数

insertAfter函数

wrap函数

wrapAll函数

wrapInner函数

unwrap函数

remove函数

detach函数

empty函数

clone函数

replaceWith函数

replaceAll函数

val函数


 


attr函数

方法语法:attr
attr(name)
获取匹配集合中第一个元素指定特性的值
参数
name (字符串)需要获取值的特性名称
返回值
第一个匹配元素的特性值。如果匹配集为空,或者第一个元素不存在此特性,则返回undefined

举例说明
$("#myImage").attr("data-custom")

方法语法:attr
attr(name, value)
将包装集中所有元素的已命名的特性设置为传入的值

参数
name (字符串)要设置的特性名称
value (任意|函数)指定特性的值。既可以是生成一个值的任意JavaScript表达式,也可以是一个函数。为每个包装元素分别调用此函数,传递元素的索引和已命名特性的当前值。函数的返回值会成为新的特性值
返回值
包装集

举例说明
/*
这个方法会作用于页面上的所有元素,通过为每个元素的title 
特性附加一个字符串(由元素在DOM中的下标值和每个元素的id 特性值组成)
来修改元素的title 特性。
*/

$('*').attr('title',function(index,previousValue) {
  return previousValue + ' I am element ' + index +
         ' and my name is ' + (this.id || 'unset');
});

方法语法:attr
attr(attributes)
用传入的对象指定的属性和值来设置匹配集中所有元素相应的特性值
参数

attributes (对象)一个对象,其属性会复制到包装集中所有元素的特性值上
返回值
包装集

举例说明
/*
这个语句设置所有<input> 元素的值为空字符串,
并将title 设置为字符串Please enter a value 。
*/
$('input').attr(
  { value: '', title: 'Please enter a value' }
);

removeAttr函数

方法语法:removeAttr
removeAttr (name)
从每个匹配元素中删除指定的特性
参数
name (字符串)要删除的特性名称
返回值
包装集

注意

删除一个特性不会删除JavaScript DOM元素中相应的属性,尽管这可能会导致属性值的改变。比如,从元素中删除readonly 特性会导致元素的readOnly 属性值由true 变为false ,但是属性本身不会从元素中删除。

data函数

方法语法:data
data (name, value)
将传入的值添加到为所有包装元素准备的jQuery托管数据仓库中
参数
name (字符串)要存储的数据名称,要符合W3C命名规范可以“data-”前缀开头。
value (对象|函数)要存储的值。如果值是个函数,则为每个包装元素调用此函数,传递当前元素作为函数的上下文。函数的返回值作为数据值
返回值
包装集

方法语法:data
data (name)
通过指定的名称来获取之前在包装集的第一个元素上保存的任何数据
参数
name (字符串)要获取的数据名称
返回值

获取的数据,如果没有找到则返回undefined

removeData函数

方法语法:removeData
removeData (name)
通过指定的名称来删除之前在包装集的所有元素上保存的数据
参数
name (字符串)要删除的数据名称
返回值
包装集

addClass函数

方法语法:addClass
addClass (names)
为包装集中的所有元素添加指定的单个或多个类名
参数
names (字符串|函数)指定要添加的单个类名,或者以空格分隔的字符串表示的多个类名。如果参数是一个函数,则为每个包装元素调用此函数,设置当前元素为函数上下文,并且传递两个参数:元素的下标和当前类的值。函数的返回值作为单个或者多个类名
返回值
包装集

removeClass函数

方法语法:removeClass
removeClass (names)
从包装集中的每个元素上删除指定的单个或多个类名
参数
names (字符串|函数)指定要删除的单个类名,或者以空格分隔的字符串表示的多个类名。如果参数是一个函数,则为每个包装元素调用此函数,设置当前元素为函数上下文,并且传递两个参数:元素的下标和删除操作之前的类名的值。函数的返回值作为将要删除的单个或者多个类名
返回值
包装集

toggleClass函数

方法语法:toggleClass
toggleClass (names)
如果元素不存在指定类名则为其添加此类名,如果元素已经拥有这个类名则从中删除此类名。注意,会分别检测每个元素,因此一些元素可能被添加了类名,而另外一些则可能被删除了类名
参数
names (字符串|函数)指定要切换的单个类名,或者以空格分隔的字符串表示的多个类名。如果参数是一个函数,则为每个包装元素调用此函数,设置当前元素为函数上下文。函数的返回值作为单个或者多个类名
返回值
包装集

方法语法:toggleClass
toggleClass (names, switch)
如果switch 表达式的计算结果为true ,则添加此类名;如果计算结果为false ,则删除此类名
参数
names (字符串|函数)指定要切换的单个类名,或者以空格分隔的字符串表示的多个类名。如果参数是一个函数,则为每个包装元素调用此函数,设置当前元素为函数上下文,并且传递两个参数:元素的下标和当前类的值。函数的返回值作为单个或者多个类名
switch (布尔)一个控制表达式,它的值决定了是要为元素添加类(值为true )还是删除类(值为false )
返回值
包装集

hasClass函数

方法语法:hasClass
hasClass (name)

确定匹配集中是否有元素拥有通过name 参数传入的类名
参数
name (字符串)要检查的类名
返回值
如果包装集中有元素拥有传入的类名,则返回true ;否则返回false

css函数

方法语法:css
css(name, value)

设置每个匹配元素的已命名CSS样式属性为指定的值
参数
name (字符串)要设置的CSS属性名称
value (字符串|数字|函数)一个包含属性值的字符串、数字,或函数。如果传入的参数是函数,则为包装集中的每个元素调用此函数,设置当前元素为函数上下文,并且传递两个参数:元素下标和CSS属性的当前值。函数的返回值作为CSS属性值的新值
返回值
包装集

举例说明
/*
可以将包装集中所有元素的宽度扩大20像素
*/
$("div.expandable").css("width",function(index, currentWidth) {
  return currentWidth + 20;
})

方法语法:css
css(properties)

设置所有匹配元素的CSS属性为传入对象的多个键值
参数
properties (对象)指定一个对象,其属性被复制为包装集中所有元素的CSS属性
返回值
包装集

举例说明
$('img').css({
    cursor: 'pointer',
    border: '1px solid black',
    padding: '12px 12px 20px 12px',
    backgroundColor: 'white'
  })

方法语法:css
css(name)

获取包装集中第一个元素的CSS属性的已计算值,这个CSS属性由name 指定
参数
name (字符串)指定一个CSS属性的名称,返回它的已计算样式值
返回值
字符串形式的已计算样式值

注意

css() 方法的这个变体总是返回字符串,因此如果需要数字或其他的类型时,就必须解析这个返回的字符串。

width和height函数

方法语法:width 和height
width(value) height(value)

设置匹配集中所有元素的宽度和高度
参数
value (数值|字符串|函数)要设置的值。它可以是以像素为单位的数字,也可以是以单位(比如px、em、%)表示的字符串值。如果没有指定单位,则默认为px。
如果参数是一个函数,则为每一个包装元素调用此函数,传递当前元素作为函数上下文。函数的返回值作为要设置的值
返回值
包装集

举例说明
$("div.myElements").width(500)

等价于

$("div.myElements").css("width",500)

方法语法:width 和height
width()
height()

获取包装集中第一个元素的宽度或高度
参数

返回值
已计算的宽度或高度,它是以像素为单位的数值

与尺寸相关的JQuery函数

方法 描述
innerHeight() 返回第一个匹配元素的“内部高度”,不包含边框但包含内边距
innerWidth() 返回第一个匹配元素的“内部宽度”,不包含边框但包含内边距
outerHeight(margin) 返回第一个匹配元素的“外部高度”,包含边框和内边距。如果margin 参数为true ,则包含外边距,否则忽略外边距
outerWidth(margin) 返回第一个匹配元素的“外部宽度”,包含边框和内边距。如果margin 参数为true ,则包含外边距,否则忽略外边距

offset函数

方法语法:offset
offset()

返回包装集中第一个元素相对于文档参照源的位置(以px为单位)
参数

返回值
一个用浮点数(通常四舍五入为最近的整数)来表示left 和top 属性的JavaScript对象,用来描述相对于文档源的以像素为单位的位置

position函数

方法语法:position
position()

返回包装集中第一个元素相对于最近偏移父元素的位置(以px为单位)
参数

返回值
一个以整数来表示left 和top 属性的JavaScript对象,用来描述相对于最近偏移父元素的位置(以px为单位)

jQuery滚动控制方法

方法 描述
scrollLeft() 返回第一个匹配元素的水平滚动偏移值
scrollLeft(value) 设置所有匹配元素的水平滚动偏移值
scrollTop() 返回第一个匹配元素的垂直滚动偏移值
scrollTop(value) 设置所有匹配元素的垂直滚动偏移值

html函数

方法语法:html
html()

获取匹配集中第一个元素的HTML内容
参数

返回值
第一个匹配元素的HTML内容。返回的值与所访问元素innerHTML 属性是一样的

方法语法:html
html(content)

将传入的HTML片段设置为所有匹配元素的内容
参数
content (字符串|函数)要设置为元素内容的HTML片段。如果参数是一个函数,则会为每一个包装元素调用此函数,设置当前元素为函数上下文,并传递两个参数:元素的下标和当前元素的内容。函数的返回值作为新的内容
返回值
包装集

text函数

方法语法:text
text()

将包装元素中的所有文本内容连接起来,并作为此方法的结果返回
参数

返回值
连接而成的字符串

方法语法:text
text(content)

设置所有包装元素的文本内容为传入的值。如果传入的文本包含尖括号(< 和> )或AND符号(&),则这些字符会被替换为其相应的HTML实体字符, < 、> 和& 的实体字符分别是&lt; 、&gt; 和&amp; 。
参数
content (字符串|函数)要设置到包装元素中的文本内容。所有的尖括号字符都会被转义为HTML实体字符。如果参数是一个函数,则为每个包装元素调用此函数,设置当前元素为函数上下文,并且传递两个参数:元素的下标和元素现有的文本内容。函数的返回值作为新的内容
返回值
包装集

注意

使用这些方法设置元素的内部HTML或文本,将会替换掉之前在元素中的内容,因此使用这些方法必须小心。

append函数

方法语法:append
append(content)

将传入的HTML片段或者元素追加到所有匹配元素的内容中
参数
content (字符串|元素| jQuery |函数)一个字符串、元素、包装集或者函数,用来指定要添加到包装集元素中的内容。如果参数是一个函数,则为每一个包装元素调用此函数,设置当前元素为函数上下文,并且传递两个参数:元素的下标和原先的内容。函数的返回值作为要追加的内容
返回值
包装集

prepend函数

方法语法:prepend
prepend(content)

将传入的HTML片段或者元素添加到所有匹配元素的内容的开头
参数
content (字符串|元素|jQuery|函数)一个字符串、元素、包装集或者函数,用来指定要添加到包装集元素中的内容。如果参数是一个函数,则为每一个包装元素调用此函数,设置当前元素为函数上下文,并且传递两个参数:元素的下标和之前的内容。函数的返回值作为要添加的内容
返回值
包装集

before函数

方法语法:before
before(content)

将传入的HTML片段或者元素插入为目标元素的兄弟节点,位于目标元素之前。目标包装元素必须已经是DOM的一部分
参数
content (字符串|元素| jQuery |函数)一个字符串、元素、包装集或者函数,用来指定要添加到DOM中目标包装集元素之前的内容。如果参数是一个函数,则为每一个包装元素调用此函数,传递当前元素作为函数上下文。函数的返回值作为要插入的内容
返回值
包装集

after函数

方法语法:after
after(content)

将传入的HTML片段或者元素插入为目标元素的同级节点,位于目标元素之后。目标包装元素必须已经是DOM的一部分
参数
content (字符串|元素| jQuery |函数)一个字符串、元素、包装集或者函数,用来指定要添加到DOM中目标包装集元素之后的内容。如果参数是一个函数,则为每一个包装元素调用此函数,传递当前元素为函数上下文。函数的返回值作为要插入的内容
返回值
包装集

appendTo函数

方法语法:appendTo
appendTo(targets)

将包装集中的所有元素追加到指定目标元素内容的末尾
参数
targets (字符串|元素)包含jQuery选择器的字符串,或者DOM元素。包装集中的所有元素都会被追加到每个目标元素内容的末尾
返回值
包装集

prependTo函数

方法语法:prependTo
prependTo(targets)

将包装集中所有的元素添加到指定目标元素内容的开头
参数
targets (字符串|元素)包含jQuery选择器的字符串,或者DOM元素。包装集中的所有元素都会被添加到每个目标元素内容的开头
返回值
包装集

insertBefore函数

方法语法:insertBefore
insertBefore(targets)

将包装集中的所有元素添加到DOM中指定目标元素的前面
参数
targets (字符串|元素)包含jQuery选择器的字符串,或者DOM元素。包装集中的所有元素都会被添加到每个目标元素的前面
返回值
包装集

insertAfter函数

方法语法:insertAfter
insertAfter(targets)

将包装集中所有的元素添加到DOM中指定目标元素的后面
参数
targets (字符串|元素)包含jQuery选择器的字符串,或者DOM元素。包装集中的所有元素都会被添加到每个目标元素的后面
返回值
包装集

wrap函数

方法语法:wrap
wrap(wrapper)

使用传入的HTML标签或元素的副本将匹配集中的元素包裹起来
参数
wrapper (字符串|元素)一个包含元素开始和结束标签的字符串,用来包裹匹配集中的每个元素;或者一个元素,其副本将用作包装器
返回值
包装集

 举例说明
/*
要在带有hello 类的<div> 中将所有拥有surprise 类的链接分别包裹起来
*/
$("a.surprise").wrap("<div ></div>")

wrapAll函数

方法语法:wrapAll
wrapAll(wrapper)

使用传入的HTML标签或者元素的副本,将匹配集中的元素作为一个整体包裹起来
参数
wrapper (字符串|元素)一个包含元素开始和结束标签的字符串,用来包裹匹配集中的每个元素;或者一个元素,其副本将用作包装器
返回值
包装集

wrapInner函数

方法语法:wrapInner
wrapInner(wrapper)

使用传入的HTML标签或者元素的副本,将匹配集中的元素内容(包含文本节点)包裹起来
参数
wrapper (字符串|元素)一个包含元素开始和结束标签的字符串,用来包裹匹配集中的每个元素;或者一个元素,其副本将用作包装器
返回值
包装集

unwrap函数

方法语法:unwrap
unwrap()

删除包装元素的父元素。子元素和其所有的同级节点一起替换了DOM中的父元素
参数

返回值
包装集

remove函数

方法语法:remove
remove(selector)

从页面DOM中删除包装集中的所有元素
参数
selector (字符串)一个可选的选择器,可以用来进一步过滤包装集中要删除的元素
返回值
包装集

detach函数

方法语法:detach
detach(selector)

从页面DOM中删除包装集中的所有元素,保留绑定的事件和jQuery数据
参数
selector (字符串)一个可选的选择器字符串,用来进一步过滤包装集中要删除的元素
返回值
包装集

empty函数

方法语法:empty
empty()

删除匹配集中所有DOM元素的内容
参数

返回值
包装集

clone函数

方法语法:clone
clone(copyHandlers)

创建包装集中元素的副本,并返回包含这些副本的新包装集。这些元素和任何子节点都会被复制。是否复制事件处理器取决于copyHandlers 参数的设置
参数
copyHandlers (布尔)如果参数是true ,则复制事件处理器。如果参数是false 或者被省略,则不复制事件处理器
返回值
新建的包装集

举例说明
/*
插入副本之后,会利用end() 方法来选择原始包装集(原始的目标元素)并隐藏它们。
这个示例阐明了复制操作如何创建包含一组新的元素的包装集。
*/
$('ul').clone().insertBefore('#here').end().hide();

replaceWith函数

方法语法:replaceWith
replaceWith(content)

使用指定的内容替换每个匹配元素
参数
content (字符串|元素|函数)一个包含HTML片段的字符串,作为将要替换的内容;或者一个元素的引用,它会被移动并替换现有的元素。如果参数是一个函数,则为每个包装元素分别调用此函数,设置当前元素为函数上下文,并且不传递任何参数。函数的返回值作为新的内容
返回值
包含被替换元素的jQuery包装集

举例说明
/*
使用包含图片alt 值的<span> 元素来替换页面上所有拥有alt 值的图片。
使用each() 和replaceWith() 可以这样来实现
*/
$('img[alt]').each(function(){
  $(this).replaceWith('<span>'+ $(this).attr('alt') +'</span>')
});

replaceAll函数

方法语法:replaceAll
replaceAll(selector)

使用调用此方法的匹配集的内容,替换所有与传入的选择器相匹配的元素
参数
selector (选择器)一个选择器字符串表达式,用来识别要被替换的元素
返回值
包含插入元素的jQuery包装集

val函数

方法语法:val
val()

返回匹配集中第一个元素的value 特性。如果此元素是一个可以多选的元素时,返回值是所有选择项所组成的数组,比如<select multiple="multiple"> ,则表达式$("#list").val() 返回包含一个或多个元素的数组。
参数

返回值
获取的值

举例说明
/*
返回唯一选中的单选按钮的值(如果没有选中任何单选按钮,则返回undefined )
*/
$('[name="radioGroup"]:checked').val()

/*
返回选中复选框的js数组
*/
var checkboxValues = $('[name="checkboxGroup"]:checked').map(
  function(){ return $(this).val(); }
).toArray();

方法语法:val
val(value)

设置传入的值为所有匹配的表单元素的value
参数
value (字符串|函数)指定一个值,将其设置为包装集中每个表单元素的value 属性。如果参数是个函数,则为包装集中每个元素分别调用此函数,设置当前元素为函数上下文,传递两个参数:元素下标和元素的当前值。函数的返回值作为要设置的值
返回值
包装集

方法语法:val
val(values)

导致包装集中任何复选框、单选按钮或者<select> 元素的可选项变成选中(checked )或者选择(selected )状态,只要它们值匹配传入的values 数组中的任何一个值
参数
values (数组)一个数组,用来确定应该选中或者选择哪些元素
返回值
包装集

举例说明
/*
这个语句会搜索页面上所有的<input> 和<select> 元素,
只要这些元素的值与输入字符串'one' 、'two' 或者'three' 
任何一个相匹配。任何匹配的复选框或者单选按钮都会变成选中状态,
而任何匹配的可选项将会变为选择状态
*/
$('input,select').val(['one','two','three']);

 

栏目