jQuery操作属性的相关方法

1.前言

下面这组方法是操作DOM对象属性的通用方法,可以操作DOM对象的通用属性,例如title、alt、src等。

1)        attr(name):访问jQuery对象里第一个匹配元素的name属性值。

2)        attr(map):用于为jQuery对象里所有DOM对象同时设置多个属性值。

3)        attr(name,value):用于为jQuery对象里的所有DOM对象设置单个属性值。

4)        attr(key,fn):用于为jQuery对象里所有DOM对象设置单个属性值。

5)        removeAttr(name):删除jQuery对象里所有DOM元素里的name属性值

6)        prop(propName):访问jQuery对象里第一个匹配元素的proName属性值。

7)        prop(properties):用于为jQuery对象里的所有DOM对象同时设置多个属性值。

8)        prop(name, value):用于为jQuery对象里所有DOM对象设置单个属性值。其中name属性是必须设置的,value是需要设置的属性值。

9)        prop(key,fn):用于为jQuery对象里所有DOM对象设置单个属性值,但浊直接给定属性值,而是提供fn函数,由fn函数来计算各元素的属性值。

10)    removeProp(propName):删除jQuery对象里所有DOM对象里的propName.

2.例子

下面的程序示范了动态改变页面中<img…/>元素src属性的情况。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 操作属性的工具方法 </title>
</head>
<body>
<img/><img/>
<div>
	<img/><img/><img/>
</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
	// 获取body下的img元素,并为这些img元素设置src属性值
	$("body>img").attr("src" , "test.jpg")
		.attr("alt" , "Java");
	// 获取div下的img元素,并为这些img元素设置src属性值
	$("div>img").attr("src" , function(index)
	{
		return index + 1 + ".gif";
	});
</script>
</body>
</html>

3.运行结果

时间: 2024-08-30 01:44:40

jQuery操作属性的相关方法的相关文章

jQuery操作属性和样式详解

我们可以使用 javascript 中的getAttribute和setAttribute来操作元素的"元素属性".在 jQuery 中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性: 虽然我们可以使用removeAttr(name)删除元素属性,但是对应的 DOM 属性是不会被删除的, 只会影响 DOM 属性的值.比如将一个input元素的readonly元素属性去掉,会导致对应的 DOM 属性变成false(即input变成可编辑状态). ?修改 CSS 类

jQuery操作属性

1.设置单个属性 //第一个参数:需要设置的属性名 //第二个参数:对应的属性值 attr(name, value); //用法举例 $("img").attr("title","哎哟,不错哦"); $("img").attr("alt","哎哟,不错哦"); 2.设置多个属性 //参数是一个对象,包含了需要设置的属性名和属性值 attr(obj) //用法举例 $("img&

Jquery操作属性选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>层级选择器</title> <link rel="stylesheet" href="../../css/style.css" /> <script type="text/javascript" src="..

jQuery组织您钞四----jQuery操作DOM

一.采用jQuery创建节点 节点是DOM基础设施.依据DOM产品规格,Node是一个很宽泛的概念,包含元素.属性.正文.档..实际开发过程中,要创建动态内容,主要操作的节点包括元素. 属性和文本. 看一个样例 实例4-1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>

jQuery操作CSS属性的相关方法

1.前言 jQuery提供了以下几种操作DOM元素CSS样式的方法,包括直接访问.修改DOM元素的class属性值,还提供了访问.修改DOM元素内联CSS属性值的方法,除此之外还提供了大量直接访问.修改DOM元素大小和位置的方法. jQuery提供的操作CSS属性的相关方法如下. 1)        addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DOM对象上. 2)        hasClass(class):判断该jQuery对象是否包含至少一个具有指定C

jQuery 操作元素的属性和内容

1. 操作"元素属性" 我们可以使用javascript中的getAttribute和setAttribute来操作元素的"元素属性". 在jQuery中给你提供了attr()包装集函数, 能够同时操作包装集中所有元素的属性: 名称 说明 举例 attr( name ) 取得第一个匹配元素的属性值.通过这个方法可以方便地从第一个匹配元素中获取一个属性的值.如果元素没有相应属性,则返回 undefined . 返回文档中第一个图像的src属性值: $("im

使用jQuery操作元素的属性与样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性

从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

原文:从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来!