前端开发利器jQuery-操作属性

1,975次阅读
没有评论

前端开发利器jQuery-操作属性

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

jQuery筛选器之操作属性

方法 描述
$("SET").attr(name/properties/key,value/fn); 设置或返回被选元素的属性值
$("SET").removeAttr(name); 从每一个匹配的元素中删除一个属性
$("SET").prop(name/properties/key,value/fn); 获取在匹配的元素集中的第一个元素的属性值
$("SET").removeProp(name); 用来删除由.prop()方法设置的属性集

jQuery筛选器之操作属性示例

  • $("SET").attr(name/properties/key,value/fn);
属性 描述
name 属性名称
properties 作为属性的“名/值”对象
key,value 属性名称,属性值
key,function(index, attr) 属性名称,返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值。
  • 参数name 描述:

返回文档中所有图像的src属性值

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"img"</span>).attr(<span class="string">"src"</span>);</span>
  • 参数properties 描述:

为所有图像设置src和alt属性

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"img"</span>).attr({ src: <span class="string">"test.jpg"</span>, alt: <span class="string">"Test Image"</span> });</span>
  • 参数key,value

为所有图像设置src属性

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"img"</span>).attr(<span class="string">"src"</span>,<span class="string">"test.jpg"</span>);</span>
  • 参数key,回调函数

把src属性的值设置为title属性的值。

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"img"</span>).attr(<span class="string">"title"</span>, <span class="function"><span class="keyword">function</span>() </span>{ <span class="keyword">return</span> <span class="keyword">this</span>.src });</span>
  • $("SET").removeAttr(name);
参数 描述
name 要删除的属性名

 将文档中图像的src属性删除

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"test.jpg"</span>/></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"img"</span>).removeAttr(<span class="string">"src"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">img</span> /></span> ]</span>
  • $("SET").prop(name|properties|key,value|fn);

随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误

参数 描述
name 属性名称
properties 作为属性的名/值对对象
key,value 属性名称,属性值

key,function(index, attr)

  1. 属性名称
  2. 返回属性值的函数,第一个参数为当前元素的索引值,第二个参数为原先的属性值
  • 参数name

选中复选框为true,没选中为false

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[type='checkbox']"</span>).prop(<span class="string">"checked"</span>);</span>
  • 参数properties

禁用页面上的所有复选框

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">"input[type='checkbox']"</span>).prop({</span>
<span class="line">  disabled: <span class="literal">true</span></span>
<span class="line">});</span>
  • 参数key,value

禁用和选中所有页面上的复选框

jQuery代码

<span class="line">1</span>
2
<span class="line">$(<span class="string">"input[type='checkbox']"</span>).prop(<span class="string">"disabled"</span>, <span class="literal">false</span>);</span>
<span class="line">$(<span class="string">"input[type='checkbox']"</span>).prop(<span class="string">"checked"</span>, <span class="literal">true</span>);</span>
  • 参数key,回调函数

通过函数来设置所有页面上的复选框被选中

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">"input[type='checkbox']"</span>).prop(<span class="string">"checked"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"> i, val </span>) </span>{</span>
<span class="line">  <span class="keyword">return</span> !val;</span>
<span class="line">});</span>
  • $("SET").removeProp(name);
参数 描述
propertyName 要删除的属性名

设置一个段落数字属性,然后将其删除

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span> <span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
2
3
4
5
<span class="line"><span class="keyword">var</span> $para = $(<span class="string">"p"</span>);</span>
<span class="line">$para.prop(<span class="string">"luggageCode"</span>, <span class="number">1234</span>);</span>
<span class="line">$para.append(<span class="string">"The secret luggage code is: "</span>, <span class="built_in">String</span>($para.prop(<span class="string">"luggageCode"</span>)), <span class="string">". "</span>);</span>
<span class="line">$para.removeProp(<span class="string">"luggageCode"</span>);</span>
<span class="line">$para.append(<span class="string">"Now the secret luggage code is: "</span>, <span class="built_in">String</span>($para.prop(<span class="string">"luggageCode"</span>)), <span class="string">". "</span>);</span>

结果:

<span class="line">1</span>
<span class="line">The secret luggage code is: 1234. Now the secret luggage code is: undefined.</span>

jQuery筛选器之操作HTML代码/文本/值

读取、修改元素的html结构或者元素的文本内容是常见的DOM操作,jQuery针对这样的处理提供了2个便捷的方法.html().text()

方法 描述
$("SET").html([val/fn]); 取得第一个匹配元素的html内容
$("SET").text([val/fn]); 取得所有匹配元素的内容
$("SET").val([val/fn/arr]); 获得匹配元素的当前值
  • .html与.text的异同`
  1. .html.text的方法操作是一样,只是在具体针对处理对象不同
  2. .html处理的是元素内容,.text处理的是文本内容
  3. .html只能使用在HTML文档中,.textXMLHTML文档中都能使用
  4. 如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的
  5. 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器

jQuery筛选器之操作HTML代码/文本/值示例

  • $("SET").html([val|fn]);

这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取。

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

参数 描述
val 用于设定HTML内容的值
function(index, html) 此函数返回一个HTML字符串。

function(index, html)接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。

返回p元素的内容

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">'p'</span>).html();</span>
  • 参数val

设置所有p元素的内容

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).html(<span class="string">"Hello <b>world</b>!"</span>);</span>
  • 回调函数

使用函数来设置所有匹配元素的内容

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">"p"</span>).html(<span class="function"><span class="keyword">function</span>(<span class="params">n</span>)</span>{</span>
<span class="line">    <span class="keyword">return</span> <span class="string">"这个 p 元素的 index 是:"</span> + n;</span>
<span class="line">    });</span>
  • $("SET").text([val|fn]);

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

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

参数 描述
val 用于设置元素内容的文本
function(index, text) 此函数返回一个字符串,接受两个参数,index为元素在集合中的索引位置,text为原先的text值。

返回p元素的文本内容。

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">'p'</span>).text();</span>
  • 参数val

设置所有p元素的文本内容

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).text(<span class="string">"Hello world!"</span>);</span>
  • 回调函数

使用函数来设置所有匹配元素的文本内容

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">"p"</span>).text(<span class="function"><span class="keyword">function</span>(<span class="params">n</span>)</span>{</span>
<span class="line">    <span class="keyword">return</span> <span class="string">"这个 p 元素的 index 是:"</span> + n;</span>
<span class="line">    });</span>
  • $("SET").val([val|fn|arr]);

jQuery中有一个.val()方法主要是用于处理表单元素的值,比如 input,selecttextarea

属性 描述
val 要设置的值
function(index, value) 此函数返回一个要设置的值,接受两个参数,index为元素在集合中的索引位置,text为原先的text值
array 用于check/select的值

获取文本框中的值

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input"</span>).val();</span>
  • 参数val

设定文本框的值

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input"</span>).val(<span class="string">"hello world!"</span>);</span>
  • 回调函数

设定文本框的值

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">'input:text.items'</span>).val(<span class="function"><span class="keyword">function</span>() </span>{</span>
<span class="line">  <span class="keyword">return</span> <span class="keyword">this</span>.value + <span class="string">' '</span> + <span class="keyword">this</span>.className;</span>
<span class="line">});</span>
  • 参数array

设定一个select和一个多选的select的值

HTML代码:

<span class="line">1</span>
2
3
4
5
6
7
8
9
10
11
12
13
<span class="line"><span class="tag"><<span class="name">select</span> <span class="attr">id</span>=<span class="string">"single"</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span>></span>Single<span class="tag"></<span class="name">option</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span>></span>Single2<span class="tag"></<span class="name">option</span>></span></span>
<span class="line"><span class="tag"></<span class="name">select</span>></span></span>
<span class="line"><span class="tag"><<span class="name">select</span> <span class="attr">id</span>=<span class="string">"multiple"</span> <span class="attr">multiple</span>=<span class="string">"multiple"</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span> <span class="attr">selected</span>=<span class="string">"selected"</span>></span>Multiple<span class="tag"></<span class="name">option</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span>></span>Multiple2<span class="tag"></<span class="name">option</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">option</span> <span class="attr">selected</span>=<span class="string">"selected"</span>></span>Multiple3<span class="tag"></<span class="name">option</span>></span></span>
<span class="line"><span class="tag"></<span class="name">select</span>></span><span class="tag"><<span class="name">br</span>/></span></span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"check1"</span>/></span> check1</span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> <span class="attr">value</span>=<span class="string">"check2"</span>/></span> check2</span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">value</span>=<span class="string">"radio1"</span>/></span> radio1</span>
<span class="line"><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">value</span>=<span class="string">"radio2"</span>/></span> radio2</span>

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">"#single"</span>).val(<span class="string">"Single2"</span>);</span>
<span class="line">$(<span class="string">"#multiple"</span>).val([<span class="string">"Multiple2"</span>, <span class="string">"Multiple3"</span>]);</span>
<span class="line">$(<span class="string">"input"</span>).val([<span class="string">"check2"</span>, <span class="string">"radio1"</span>]);</span>

jQuery筛选器之操作CSS样式

方法 描述
$("SET").addClass(class/fn); 为每个匹配的元素添加指定的类名
$("SET").removeClass([class/fn]); 从所有匹配的元素中删除全部或者指定的类
$("SET").toggleClass(class/fn[,sw]); 如果存在(不存在)就删除(添加)一个类

jQuery筛选器之操作CSS样式示例

  • $("SET").addClass(class|fn);

.addClass();方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

参数 描述
class 每个匹配元素所要增加的一个或多个样式名,请用空格分开
function(index, class) 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。

为匹配的元素加上selected

jQuery代码:

<span class="line">1</span>
2
<span class="line">$(<span class="string">"p"</span>).addClass(<span class="string">"selected"</span>);</span>
<span class="line">$(<span class="string">"p"</span>).addClass(<span class="string">"selected1 selected2"</span>);</span>
  • 回调函数

给li加上不同的class

HTML代码

<span class="line">1</span>
2
3
4
5
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">      <span class="tag"><<span class="name">li</span>></span>Hello<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">      <span class="tag"><<span class="name">li</span>></span>Hello<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">      <span class="tag"><<span class="name">li</span>></span>Hello<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">'ul li:last'</span>).addClass(<span class="function"><span class="keyword">function</span>() </span>{</span>
<span class="line">  <span class="keyword">return</span> <span class="string">'item-'</span> + $(<span class="keyword">this</span>).index();</span>
<span class="line">});</span>
  • $("SET").removeClass([class/fn]);

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数,那么所有的样式类将被移除

参数 描述
class 一个或多个要删除的CSS类名,请用空格分开
function(index, class) 此函数必须返回一个或多个空格分隔的class名。接受两个参数,index参数为对象在这个集合中的索引值,class参数为这个对象原先的class属性值。
  • 参数class

 从匹配的元素中删除 ‘selected’ 类

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).removeClass(<span class="string">"selected"</span>);</span>
  • 参数class

删除匹配元素的所有类

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).removeClass();</span>
  • 回调函数

删除最后一个元素上与前面重复的class

jQuery代码:

<span class="line">1</span>
2
3
<span class="line">$(<span class="string">'li:last'</span>).removeClass(<span class="function"><span class="keyword">function</span>() </span>{</span>
<span class="line">    <span class="keyword">return</span> $(<span class="keyword">this</span>).prev().attr(<span class="string">'class'</span>);</span>
<span class="line">});</span>
  • $("SET").toggleClass(class|fn[,sw]);

在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类

属性 描述
class CSS类名
class,switch 要切换的CSS类名,用于决定元素是否包含class的布尔值。
switch 用于决定元素是否包含class的布尔值
function(index, class,switch)[, switch] 如下↓
  1. 用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
  2. 一个用来判断样式类添加还是移除的boolean值。
  • 参数class

为匹配的元素切换selected

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).toggleClass(<span class="string">"selected"</span>);</span>
  • 参数class,switch

每点击三下加上一次highlight

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">strong</span>></span>jQuery 代码:<span class="tag"></<span class="name">strong</span>></span></span>

jQuery代码:

<span class="line">1</span>
2
3
4
<span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span>
<span class="line">$(<span class="string">"p"</span>).click(<span class="function"><span class="keyword">function</span>()</span>{</span>
<span class="line">    $(<span class="keyword">this</span>).toggleClass(<span class="string">"highlight"</span>, count++ % <span class="number">3</span> == <span class="number">0</span>);</span>
<span class="line">});</span>
  • 回调函数

根据父元素来设置class属性

jQuery代码:

<span class="line">1</span>
2
3
4
5
6
7
<span class="line">$(<span class="string">'div.foo'</span>).toggleClass(<span class="function"><span class="keyword">function</span>() </span>{</span>
<span class="line">  <span class="keyword">if</span> ($(<span class="keyword">this</span>).parent().is(<span class="string">'.bar'</span>) {</span>
<span class="line">    <span class="keyword">return</span> <span class="string">'happy'</span>;</span>
<span class="line">  } <span class="keyword">else</span> {</span>
<span class="line">    <span class="keyword">return</span> <span class="string">'sad'</span>;</span>
<span class="line">  }</span>
<span class="line">});</span>
admin
版权声明:本站原创文章,由admin2016-07-16发表,共计6004字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)