jquer属性

最新推荐文章于 2024-11-18 19:21:00 发布

原创最新推荐文章于 2024-11-18 19:21:00 发布 · 776 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了使用jQuery操作HTML元素的属性和样式的多种方法，包括获取和设置属性值、添加和删除类、修改HTML内容等，并提供了丰富的示例代码。

小插曲

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $v =$("#v") ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

==============================正文开始=========================================

返回文档中第一个图像的src属性值。

HTML 代码:

jQuery 代码:

$("img").attr("src");

结果:

test.jpg

示例

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

HTML 代码:

<img/>

jQuery 代码:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

结果:

[ <img src= "test.jpg" alt:="Test Image" /> ]

示例

为所有图像设置src属性。

HTML 代码:

jQuery 代码:

$("img").attr("src","test.jpg");

结果:

[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

示例

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

HTML 代码:

jQuery 代码:

$("img").attr("title", function() { return this.src });

结果:

<img src="test.jpg" title="test.jpg" />
$('div').attr("class",function(i){$(this).attr("style","class"+i);});

示例

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

HTML 代码:

jQuery 代码:

$("img").removeAttr("src");

结果:

[ <img /> ]

css类

示例

为匹配的元素加上 'selected' 类

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").addClass("selected");

结果:

[ <p class="selected">Hello</p> ]

为每个匹配的元素添加指定的类名。
function(index, class) (Function) : 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

$('ul li').addClass(function(index,c) {
return 'item-' + index + c;
<ul><li class="aaa">Hello</li><li class="bbb">Hello</li><li class="ccc">Hello</li></ul>

示例

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

jQuery 代码:

$('li:last').removeClass(function() {
      return $(this).prev().attr('class');  
});

toggleClass(class)

如果存在（不存在）就删除（添加）一个类

toggleClass(class,switch)

如果开关switch参数为true则加上对应的class，否则就删除。

返回值

jQuery

参数

class (String) :CSS类名

switch (Boolean) :用于决定元素是否包含class的布尔值。

示例

每点击三下加上一次 'selected' 类

HTML 代码:

<strong>jQuery 代码:</strong>

jQuery 代码:

var count = 0;    
$("p").click(function(){
        $(this).toggleClass("highlight", count++ % 3 == 0);    
});

结果:

[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

toggleClass(function(index,class),[switch])

从所有匹配的元素中删除全部或者指定的类。

返回值

jQuery

参数

function(index, class) (Function) : 返回class名的一个函数，接受两个参数，index为元素在集合中的索引位置，class为原先元素的class值。

switch (可选)(Boolean) : 用于决定元素是否包含class的布尔值。

示例

根据父元素来设置class属性

jQuery 代码:

$('div.foo').toggleClass(function() {
    if ($(this).parent().is('.bar') {
      return 'happy';    
    } else {
      return 'sad';    
    }  
});





<div class="father"><span>父亲</span></div>

  <div class="mother"><span>母亲</span></div>

$('span').toggleClass(function(){

       

         if($(this).parent().is('.father')) {

         

           return 'grey';

         

         }

         else if($(this).parent().is('.mother')) {

           return 'red';

         }

       

       });







$('#va').html("value");

$('#va').html();

$('#va').html(function(index,html){...});用函数来计算html的值

 $('div').html(function(index,html){

          if(index == 0) return html + "<span>第0个</span>"

          else return html + "<font>第1个</font>"

        });

text与之类似

val()

获得第一个匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

返回值

String,Array

示例

获得单个select的值和多选select的值。

HTML 代码:

<p></p><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>

jQuery 代码:

$("p").append(
"<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);

结果:

[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

获取文本框中的值

HTML 代码:

jQuery 代码:

$("input").val();

结果:

some text