jquery获取(设置)节点的属性与属性值

1. attr(属性名       //获取属性的值(取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined )

2. attr(属性名, 属性值)   //设置属性的值 (为所有匹配的元素设置一个属性值。)

3. attr(属性名,函数值    //设置属性的函数值  (为所有匹配的元素设置一个计算的属性值。不提供值,而是提供一个函数,由这个函数计算的值作为属性值。)

4.attr(properties)    //给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用‘className‘ 作为属性名。或者你可以直接使用‘class‘或者‘id‘。)

<p title="你最喜欢的水果是。">你最喜欢的水果是?</p>
<ul>
   <li title="苹果汁">苹果</li>
   <li title="橘子汁" value="123">橘子</li>
   <li title="菠萝汁">菠萝</li>
</ul>

1.attr(name)//获取属性的值

1.1 使用attr(name)获取title值:

<script>
alert($("ul li:eq(1)").attr("title"));
</script>

结果:橘子汁

1.2 使用attr(name)获取value值:

<script>alert($("ul li:eq(1)").attr("value"));</script>

结果:123

2. attr(name,value)   //设置属性的值

2.1 使用attr(name,value)修改title值为:不吃橘子

<script>
$("ul li:eq(1)").attr("title","不吃橘子");
alert($("ul li:eq(1)").attr("title"));
</script>

结果:不吃橘子

3. attr(name,fn)  //设置属性的函数值

3.1 把value属性的值设置设给title属性。

<script>
$("ul li:eq(1)").attr("title",function(){ return this.value});
alert($("ul li:eq(1)").attr("title"));
</script>

结果:123

4.attr(properties)  //将一个“名/值”形式的对象设置为所有匹配元素的属性

4.1 获取<ul>里第2个<li>设置title和value属性。

<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("value"));
</script>

结果:不喝橘子汁  不是123

4.2 获取<ul>里第2个<li>设置class。

<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>

结果:第二个li的html:<li class="lili" title="橘子汁" value="123">橘子</li>

4.3 获取<ul>里第2个<li>设置id。

<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>

结果:第二个li的html:<li id="lili" title="橘子汁" value="123">橘子</li>

4.4 获取<ul>里第2个<li>设置style。

<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>

那么怎么删除属性呢?

<script>
$("ul li:eq(1)").removeAttr ("title");
</script>
时间: 2024-08-26 15:17:03

jquery获取(设置)节点的属性与属性值的相关文章

使用jquery获取css的top和left属性

使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var top = $('#test').css('top'); 当然这样获取的是一个字符串,如果们想直接取得对象的left和top的像素值,可以通过position方法来获取 var left = $('#test').position().left; var top = $('#test').positi

jQuery -&gt; 获取孩子节点

jQuery提供了很多方法来获取一个元素的direct descendant(直接后代). 最简单的方式是使用direct descendant combinator (>) 例如,如果要获取如下html代码中<div id="content">的直接孩子节点中的a元素,就可以直接使用 > 符号 <body> <div id="content"> <a href="http://www.jquery.c

Jquery获取CheckBox、Select、radio的值

Jquery获取这三个控件的值不可以仅仅根据$("#控件ID")进行获取,以下是自己进行的简单的测试: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Control.aspx.cs" Inherits="Test.Control" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XH

Jquery获取html中select,radiobutton选中的值写法

1.Html代码: <select name="" class="qixian" id="tbCheckCycleUnit"> <option value="1">天</option> <option value="2">月</option> <option value="3">年</option> &l

jQuery - 获取/设置内容和属性

获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容: 实例 $("#btn1").click(function(){ alert("Text: " + $(&qu

jQuery获取文本节点之 text()/val()/html() 方法区别

在jquery中val,text,html都能取到值,或加一个参数来赋值,那么它们有些什么区别?下面我们来举例说明: 首先,html属性中有两个方法,一个有参,一个无参 1. 无参html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档,返回的是一个String 例子: html页面代码:<div><p>Hello</p></div> jquery代码:$("div").html(); 结果:H

转载JQuery 获取设置值,添加元素详解

转载原地址 http://www.cnblogs.com/0201zcr/p/4782476.html jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Document Object Model(文档对象模型) 获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法

jquery 获取设置值、添加元素详解

jQuery 获取内容和属性 jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Document Object Model(文档对象模型) 获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 H

jQuery 获取DOM节点的两种方式

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 2.使用函数get()访问,例如: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"); div.innerText = "TEST IS OK!"; document.body.a