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 相关文章推荐
Jquery 的扩展方法总结
Oct 01 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 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
坏狼的PHP学习教程之第2天
2008/06/15 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
判断脚本加载是否完成的方法
2009/05/26 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
深入理解Python变量与常量
2016/06/02 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
服装店营销方案
2014/03/10 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
收款委托书范本
2014/09/11 职场文书
电台广播稿范文
2015/08/19 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫