在jQuery里我们可以通过.attr()的方法来实现对HTML标签属性(tag attribute)处理。

1. 获取标签属性的值 (演示)

  • 语法:$('选定目标').attr('属性名')
  • 例子如下:(如果你对如何选定目标不了解,请查看前面的文章:jQuery基础 - 选择器)
<p id="b6_a">点击获取本段落的ID</p>
<button>查看ID</button>
<p id="b6_a">点击查看链接的URL</p>
<ul>
  <li><a href="http://www.61dh.com/blog">网站开发日志</a></li>
  <li><a href="http://www.61dh.com/blog/categories/">日志分类</a></li>
</ul>
//使用下面的jQuery代码,来获取ID和HREF
$(document).ready(function() {
  $('button:eq(0)').click(function(){
    alert("ID:" +$('p:eq(0)').attr("id"));
  });

  $("ul>li>a").click(function(){
    alert("URL:"+$(this).attr('href'));
    return false;
  });
});

2. 设置标签属性的值 (演示)

  • 语法:$('选定目标').attr('属性名', '值')
  • 例子如下:
<p id="b6_c">点击设置本段落的ID,</p>
<button>设置ID</button>
//通过下面的jQuery代码,点击按钮后,p的'id'将被设置为"b6_cc"
$("button").click(function(){
  $('#b6_c').attr("id", "b6_cc");
});

3. 使用jQuery设置标签属性值的功能,我们可以对表单的提交的目的地进行修改,这在实际运用中还是挺有用。例如:用户可以通过点击某个链接,让表单提交给不同的php文件做不同的处理。

$('a').click(function(){
  $("#myform").attr("action", "custom1.php");
});

4. 上面介绍的设置标签属性值的方法都只有对一个属性进行修改,其实jQuery的.attr()方法也可以对某个标签的多个属性进行修改,例子如下:

$("#myimg").attr({
  src : "newimage.gif",
  title : "New Image",
  alt : "New Image",
  border : 1
});

如何处理HTML标签属性的更多相关文章

  1. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  2. html标签属性(attribute)和dom元素的属性(property)

    简介 attribute和property都有属性之意,但对于attribute和property的区分其实并不难.从对象来说,attribute是html文档上标签属性, 而property则是对应 ...

  3. HTML标签界里不会再用到的标签属性(一)

    为了成为一名初级前端开发工程师,最近正在探寻HTML标签的众多奥秘,果不其然,让我发现了许多被“冷落”了的标签属性. 一.<!DOCTYPE> 自从HTML5流行之后,<!DOCTY ...

  4. PHP通用的XSS攻击过滤函数,Discuz系统中 防止XSS漏洞攻击,过滤HTML危险标签属性的PHP函数

    XSS攻击在最近很是流行,往往在某段代码里一不小心就会被人放上XSS攻击的代码,看到国外有人写上了函数,咱也偷偷懒,悄悄的贴上来... 原文如下: The goal of this function ...

  5. Dom之标签属性

    一.标签默认属性的查找与修改 查找 <!DOCTYPE html><html lang="en"><head> <meta charset ...

  6. PHP如何提取img标签属性

    extract_attrib是一个提取的图像标签属性的PHP脚本函数,使用正则表达式方法提取. 当你想在HTML的img标签中提取图像数据,这非常有用. 如果你知道如何修改正则表达式,那么同样的功能进 ...

  7. ECSide标签属性说明之<ec:column>

    <ec:column>标签 ◆ 属性: columnId描述: 单元格的id,相当于<td>的id属性 ◆ 属性: title描述: 列在列表表头里显示的名称. ◆ 属性: p ...

  8. 常用HTML meta 标签属性(网站兼容与优化需要),meta标签

    常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...

  9. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

随机推荐

  1. python 基础 列表生成式

    data = {'a':'abc';'b':'bac','c':'cba'} [v for k,v in data] 结果 ['abc','bca','cba'] 格式 [x for x in  内容 ...

  2. 树莓派 Learning 002 装机后的必要操作 --- 02 解决中文问题

    树莓派 装机后的必要操作 - 解决中文问题 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 每一块树莓派,装机后都应该执行的步骤 刚装机后, ...

  3. PCLVisualizer可视化类(2)

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=163 可视化点云颜色特征 所示,点赋予不同的颜色表征其对应的z轴值不同.PC ...

  4. 聪明的kk (南洋理工—171)

    #include<iostream> using namespace std; ][]; ][]; int N, M; int dp(int i, int j) { ) return d[ ...

  5. 【C#】清除webBrowser 缓存和Cookie的解决方案

    试了很多方法,最后发现万剑大哥的方法管用,转载一下 转自:https://www.cnblogs.com/midcn/p/3527123.html 通过测试webBrowser与IE缓存和Cookie ...

  6. jquery事件之事件处理函数

    一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...

  7. 让你的Kivy支持中文字符

    前言 默认Kivy字体不支持中文,本文简单描述如何让你的应用支持中文字符 代码 from kivy.app import App from kivy.core.text import LabelBas ...

  8. C#网络编程学习(5)---Tcp连接中出现的粘包、拆包问题

    本文参考于CSDN博客wxy941011 1.疑问 我们使用第四个博客中的项目. 修改客户端为:连接成功后循环向服务器发送从1-100的数字.看看服务器会不会正常的接收100次数据. 可是我们发现服务 ...

  9. thinkphp5更新时验证数据

    在编辑页面form表单中添加一个隐藏域:<input type="hidden" name="表中id字段名" value="get方式传过来的 ...

  10. iOS开发 - CocoaPods远程私有库从0到1

    1. 创建主工程  路径:/Users/Funky/Desktop/CocoaPodRemoteLib/MyMainProject/MyMainProject.xcodeproj 2. 在码云(htt ...