juqery笔记 jquery操纵DOM元素属性 attr()

jQuery操纵元素属性方法:

  attr():读或者写匹配元素的属性值。

  removeAttr():从匹配的元素中溢出指定的属性。

attr()方法 读操作

  attr()读操作,读取的是匹配元素中第一个元素的指定属性值。

  格式:.attr(attributeName),返回值类型:String,读取不存在的属性会返回undefined。

注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值。

例子:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script type="text/javascript" src="/jquery/jquery.js"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             $("button").click(function () {
 8                 alert($("p").attr("title"));//获取属性
 9                 // this code can only get the first element‘s attribute.
10             });
11         });
12     </script>
13 </head>
14 <body>
15 <p title="title1">paragraph 1</p>
16 <p title="title2">paragraph 2</p>
17 <br/>
18 <button>get title</button>
19 </body>
20 </html>

    运行结果:弹框显示: title1.

    

    想要分别获取每一个元素的属性,需要使用jQuery的循环结构,比如.each()或.map()方法.

    上面的例子可以改成:

 

<script type="text/javascript">
        $(document).ready(function (){
                $("button").click(function(){
                      //get attribute for every element in selection.
                      $("p").each(function () {
                      alert($(this).attr("title"));
                      });
                 });
        });
</script>

    即可分别获取每个元素的属性.

attr()方法 写操作

  attr()写操作,为匹配元素的一个或多个属性赋值。

  一般格式:.attr(attributeName,value),纪委属性设置value。

  返回值类型:jQuery,也即支持链式方法调用。

  执行操作的时候,如果指定的属性名不存在,将会增加一个改名字的属性,即增加自定义属性,

  起名为属性名,其值为value值。

  

  写属性是为匹配集合中的每一个元素都进行操作的,例子

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script type="text/javascript" src="/jquery/jquery.js"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function(){
 7             $("#button1").click(function(){
 8                 $("p").attr("title","Hello World");
 9
10             });
11         });
12     </script>
13 </head>
14 <body>
15 <input type="button" id="button1" value="button1"></input>
16 <p>This is a paragraph.</p>
17 <div>This is a div.</div>
18 <p>This is another paragraph.</p>
19 <div>This is another div.</div>
20 </body>
21 </html>

  点击按钮之后所有的p都加上了title="Hello World”的属性。

  

时间: 2024-10-11 04:44:07

juqery笔记 jquery操纵DOM元素属性 attr()的相关文章

jquery学习笔记-jQuery操纵DOM元素属性 attr()和removeAtrr()方法

jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: <!DOCTYPE html> <html>

jQuery(五) jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个

JQuery处理DOM元素-属性操作

1 //操作元素的属性: 2 $('*').each(function(n){ 3 this.id = this.tagName + n; 4 }) 5 6 //获取属性值: 7 $('').attr(''); 8 9 //设置属性值: 10 //为一个属性设置值 11 $('*').attr('title', function(index, previousValue){ 12 return previousValue + ' I am element ' + index + ' and my

web进阶之jQuery操作DOM元素&amp;&amp;MySQL记录操作&amp;&amp;PHP面向对象学习笔记

hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 控制就是获取以及设置 <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a> <d

js操作dom元素属性和方法

1.用于处理xml文档的dom元素属性 属性名                      描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSbling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的的元素 2.用于遍历XML文档的dom元素方法 方法名        

jQuery -&gt; 克隆DOM元素

使用jQuery内置的clone函数可以克隆DOM元素,而且clone函数支持链式调用 下例是clone的一个简单用法,它做了一个ul的副本,并添加到body中. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ul> <li>list</li> <li>list</li&

工作积累(六)——jQuery实现DOM元素事件绑定

用 jQuery 为DOM元素绑定事件时,如果用下面这种方式: <button class="dynamic-bind">按钮一</button> $(function() {   $('.dynamic-bind').on('click', function(e) {     alert(e.type); //'click' }); }); 那么如果在绑定事件之后通过 jQuery 添加与该选择器相同的新的DOM元素: $('.dynamic-bind:las

Jquery设置获取DOM元素属性

1, attr() $("button").click(function(){ $("#runoob").attr("href","www.96net.com.cn"); }); 2, 可以传递匿名函数 $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ retu