VS中的jQuery
jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。
1. attr( 属性名 ) //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）
2. attr( 属性名, 属性值 ) //设置属性的值 （为所有匹配的元素设置一个属性值。）
3. attr( 属性名 , 函数值 ) //设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）
4. attr(properties) //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery中attr()方法</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript" ></script>
<style>
p{color:red}
li{color:blue;}
.lili{font-weight:bold;color:red;}
#lili{font-weight:bold;color:red;}
</style>
</head>
<body>
<p title="你最喜欢的水果是。">你最喜欢的水果是？</p>
<ul>
<li title="苹果汁">苹果</li>
<li title="橘子汁" alt="123">橘子</li>
<li title="菠萝汁">菠萝</li>
</ul>
<script>
...
</script>
</body>
<html>
1.attr(name)//获取属性的值
1.1使用attr(name)获取title值：
<script>
alert($("ul li:eq(1)").attr("title"));
</script>
结果： 显示 橘子汁
1.2使用attr(name)获取alt值：
<script>
alert($("ul li:eq(1)").attr("alt"));
</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把alt属性的值设置为title属性的值。
<script>
$("ul li:eq(1)").attr("title",function(){ return this.alt});
alert($("ul li:eq(1)").attr("title"));
</script>
结果：
显示123
4.attr(properties) //将一个“名/值”形式的对象设置为所有匹配元素的属性
4.1获取<ul>里第2个<li>设置title和alt属性。
<script>
$("ul li:eq(1)").attr({title:"不喝橘子汁",alt:"不是123"});
alert($("ul li:eq(1)").attr("title"));
alert($("ul li:eq(1)").attr("alt"));
</script>
结果：
显示2个，不喝橘子汁 不是123
4.2获取<ul>里第2个<li>设置class。
<script>
$("ul li:eq(1)").attr({className:"lili"});
</script>
结果：
<li title="苹果汁">苹果</li>
<li class="lili" alt="123" title="橘子汁">橘子</li>
<li title="菠萝汁">菠萝</li>
4.3获取<ul>里第2个<li>设置id。
<script>
$("ul li:eq(1)").attr({id:"lili"});
</script>
结果：
<li title="苹果汁">苹果</li>
<li class="lili" alt="123" title="橘子汁">橘子</li>
<li title="菠萝汁">菠萝</li>
4.4获取<ul>里第2个<li>设置style。
<script>
$("ul li:eq(1)").attr({style:"color:red"});
</script>
结果：
<li title="苹果汁">苹果</li>
<li class="lili" alt="123" title="橘子汁" style="color:red">橘子</li>
<li title="菠萝汁">菠萝</li>
在 li中添加alt是错误的，它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。在这里为了很详细说明attr()方法，没有合适的属性，所有用了alt进行举例，只供学习参考attr()方法用法。
在此说明下alt和tite的区别。
alt：这是用以描述图形的文字，当图片无法显示时，这些文字会替代图片而被显示。当鼠标移至图片上该些文字亦会显示。
title：是鼠标放上去之后，会显示出来的文字。
那么怎么删除属性呢?
jquery中删除属性的关键词是: removeAttr 注意A是大写的. 看看怎么用的:
同样是用法一中的html代码, 我想删掉li的title属性, 那么就这样:
<script>
$("ul li:eq(1)").removeAttr("title");
</script>
就这么简单， attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。
那么是否有跟attr()相似的属性呢？
jquery中val()与之类似，
$(this).val();获取某个元素节点的value值，相当于$(this).attr("value");
$(this).val(value);设置某个元素节点的value值，相当于$(this).attr("value",value);
VS中的jQuery的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- 关于angularjs中的jQuery
关于angularjs中的jQuery 下面是一个小例子,用来说明我经常看到的一种模式.我们需要一个开关型的按钮.(注意:这个例子的代码有点装逼,并且有点冗长,只是为了用来代表更加复杂一些的例子,这些 ...
- 在.NET中使用JQuery 选择器精确提取网页内容
1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46| 分类: Easy UI|举报|字号 订阅 可以使用$.parser.pa ...
- 在 ASP.NET 中使用 jQuery.load() 方法
今天就让我们看看在 ASP.NET 中使用 jQuery.load() 方法来调用 ASP.NET 的方法,实现无刷新的加载数据. 使用 jQuery 的朋友应该知道可以使用 jQuery.load( ...
- 在CodedUI中使用JQuery选择器
在CodedUI中使用JQuery选择器http://automationqa.com/forum.php?mod=viewthread&tid=3574&fromuid=29
- iframe中的jquery ui modal dialog 覆盖父窗口
在iframe中 使用jquery ui dialog,弹出后可以覆盖父窗体 ///iframe中的jquery ui modal dialog 覆盖父窗口 function openDialog() ...
- 如何在.NET MVC中使用jQuery并返回JSON数据
http://blog.csdn.net/dingxingmei/article/details/9092249 开始实践 - jQuery端 假设我们要从服务器端获取一个文章列表,并把文章条目显示在 ...
- 获取子窗口中使用jQuery.data()设置的参数
http://hyj1254.iteye.com/blog/643035 假设在iframe子窗口中设置了$('#mydata').data('key','hello world'); 那在包含ifr ...
随机推荐
- java 驼峰字符和下划线字符相互转换工具类
public static final char UNDERLINE='_'; public static String camelToUnderline(String param){ if (par ...
- Android 尺寸单位转换和屏幕适配相关
Android 尺寸单位转换和屏幕适配相关 各种尺寸单位的意义 dp: Density-independent Pixels 一个抽象的单元,基于屏幕的物理密度. (dp和dip的意义相同,所以不用区 ...
- 微信小程序（应用号）开发资源汇总整理 - 一直更新中
开源项目 wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO ...
- Android 应用程序的反编译
1.ApkTool工具 安装ApkTool工具,该工具可以解码得到资源文件,但不能得到Java源文件.安装环境:需要安装JRE1.61> 到http://code.google.com/p/an ...
- Swift开发第十篇——可变参数函数&初始化方法顺序
本篇分为两部分: 一.Swift中的可变参数函数 二.初始化方法的顺序 一.Swift中的可变参数函数 可变参数函数指的是可以接受任意多个参数的函数,在 OC 中,拼接字符串的函数就属于可变参数函数 ...
- AndroidStudio添加依赖库
以Gson为例 Step1:点击下图中的入口,进入ProjectStructure Step2: 在app项中选择Dependencies窗口,点击右侧的加号 Step3:在搜索框中输入gson,点击 ...
- Runnable，Thread实现多线程以及Runnable的同步资源共享
(一) 实现多线程有两种方式 (1) 继承Thread类,重写run()方法,如以下例子 class MyThread extends Thread{ public void run(){ // } ...
- Javascript之旅——第五站：说说那些所谓的包装类型
最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续 苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型. 一:String 说 ...
- 使用vs2010生成SQL Server 随机数据
前几天做测试数据,偶然发现vs2010中有一个生成随机数据的功能,记录下来,方便以后使用,确实非常的好用灵活快捷. 为了简单扼要的说明,下面我用一个实例来说明如何快捷使用: 在VS2010创建数据库项 ...
- 0006 《SQL必知必会》笔记02-计算字段与函数
1.从数据库中检索出的数据往往并不是最后要展示的格式,可以在数据库端或者客户端应用程序中完成转换和格式化,但一般说来,在数据库服务器中完成要快很多. 2.拼接字段:将几个值连接到一起构成单个值.Ora ...