jQuery元素属性操作实例(设置、获取及删除元素属性)


Posted in Javascript onSeptember 08, 2016

本文实例讲述了jQuery元素属性操作的方法。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
  //设置<p>元素的属性'title'
  $("input:eq(0)").click(function(){
    $("p").attr("title","选择你最喜欢的水果.");
  });
  //获取<p>元素的属性'title'
  $("input:eq(1)").click(function(){
    alert( $("p").attr("title") );
  });
  //删除<p>元素的属性'title'
  $("input:eq(2)").click(function(){
    $("p").removeAttr("title");
  });
});
//]]>
</script>
</head>
<body>
<input type="button" value="设置<p>元素的属性'title'"/>
<input type="button" value="获取<p>元素的属性'title'"/>
<input type="button" value="删除<p>元素的属性'title'"/>
<p title="T选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
</ul>
</body>
</html>

效果图:

jQuery元素属性操作实例(设置、获取及删除元素属性)

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
枚举JavaScript对象的函数
Dec 22 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 #Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 #Javascript
js发送短信倒计时的简单实现方法
Sep 08 #Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 #Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 #Javascript
jQuery遍历节点树方法分析
Sep 08 #Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 #Javascript
You might like
神族 Protoss 剧情介绍
2020/03/14 星际争霸
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
yii添删改查实例
2015/11/16 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python 用下标截取字符串的实例
2018/12/25 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
python3从网络摄像机解析mjpeg http流的示例
2020/11/13 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
30岁生日感言
2014/01/25 职场文书
应收账款管理制度
2015/08/06 职场文书
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android