jQuery学习3:操作元素属性和特性

2020-05-17 06:27:31易采站长站整理

先看一个例子:


<a id=”easy” href=”#”>//www.jb51.net</a>现在要得到a标签的属性id。有如下方法:


jQuery(“#easy”).click(function() {
    alert(document.getElementById(“easy”).id); //1
    alert(this.id); //2
    alert(jQuery(this).attr(“id”));  //3
});

方法1使用的是javascript原始方法;方法2用到了this,this就相当于一个指针,返回的是一个dom对象,本例中返回a标签对象。所以this.id可直接得到id。方法3将dom对象转换成了jQuery对象,再利用jQuery封装的方法attr()得到a标签的ID。

可见,有时候用javascript配合jQuery会很方便。下边着重总结一下jQuery操作元素属性。

◦attr(name)             取得元素的属性值
◦attr(properties)    设置元素属性,以名/值形式设置
◦attr(key,value)       为元素设置属性值
◦removeAttr(name) 移除元素的属性值

下边以实例说明每种方法的具体用法。


<div id=”test”>
    <a id=”hyip” href=”javascript:void(0)”>软件开发网</a>
    <a id=”baidu” href=”javascript:void(0)”>百度</a>
    <img id=”show” />
</div>


jQuery(“#test a”).click(function() {
    //得到ID
    jQuery(this).attr(“id”); //同this.id

    //为img标签设置src为指定图片;title为百度.
    var v = { src: “https://www.easck.com/d/file/200517/20200517062515427.jpg”, title: “百度” };
    jQuery(“#show”).attr(v);

    //将img的title设置为baidu,同上边的区别是每次只能设定一个属性
    jQuery(“#show”).attr(“title”, “baidu”);

    //移除img的title属性
    jQuery(“#show”).removeAttr(“title”);
});

大家可能已经发现了,在jQuery中attr()方法,既可以获得元素的属性值,又能设置元素的属性值。是的,在jQuery中,类似的方法还有很多,现在将它们总结下来,以后用起来也会比较容易。

方法有:

◦html()  获取或设置元素节点的html内容
◦text()  获取或设置元素节点的文本内容
◦height()  获取或设置元素高度
◦ width()  获取或设置元素宽度
◦ val()  获取或设置输入框的值

以html()为例,其余的相似: