JQuery 学习笔记 element属性控制


Posted in Javascript onJuly 23, 2009
<!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" /> 
<script src="js/jquery-1.3.2.js" ></script> 
<script type="text/javascript"><!-- 
    $(function(){ 
             $("#aAttr1").click(function(){ 
                    $(    ":text").attr("value",$("#divTest").attr("id"));                 
                }) 
             $("#aAttr2").click(function(){ 
                    $(    ":text").attr("value",function(){ 
                                                             return $("#divTest").attr("id");         
                                                     });                 
                }) 
             $("#aAttr3").click(function(){ 
                    $(    ":text").attr({value:"test2"}); 
                }) 
             $("#aAttr4").click(function(){ 
                    $("#inputTest2").removeAttr("value");     
                })     }) 
// --></script> 
<title>无标题文档</title> 
</head> 
<body> 
<form> 
<input id="inputTest1" type="text" /> 
<input id="inputTest2" type="text" value="test" /> 
<div id="divTest">123</div> 
<a href="#" id="aAttr1">在text表单中显示DIV的ID方法1</a>| 
<a href="#" id="aAttr2">在text表单中显示DIV的ID方法2</a>| 
<a href="#" id="aAttr3">在text表单中显示test2</a>| 
<a href="#" id="aAttr4">去除inputTest2的value属性</a>| 
<input type="reset" /> 
</form> 
</body> 
</html>

1.element.attr(name)
描述:用于获取某个元素的name属性值,如例子中 $("#divTest").attr("id")就可获取divTest的ID值。
2.element.attr(name,value)
描述:用于设置某个元素的name属性值,如例子中$(":text").attr("value",$("#divTest").attr("id"))就将divTest的ID值赋于text表单的value值。
注:例子中(":text")用于获取input表单type为text的元素,同样其它表单也可用同样的方法获取,如<input type="button"/>即可用$(":button")进行获取,其返回值为Array(Element),也可用$(":input")获取所有的input元素。。在JQuery中要获取和设置元素的text与value值还可以使用element.text()/element.text(value)、element.val()/element.val(Value),用法与element.html()一样,若有疑问可以跟帖,我再做说明

3.element.attr(name,function)
描述:用于设置某个元素的name属性值与上一个类似,只是这里的value可以写成个function,更为灵活。
4.element.remove(name);
描述:用于删除某个元素的name属性。

Javascript 相关文章推荐
javascript工具库代码
Mar 29 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
微信小程序 下拉菜单的实现
Apr 06 Javascript
详谈js模块化规范
Jul 07 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
JavaScript中.min.js和.js文件的区别讲解
Feb 13 Javascript
微信小程序解析富文本过程详解
Jul 13 Javascript
JQuery 学习笔记 选择器之六
Jul 23 #Javascript
JQuery 学习笔记 选择器之五
Jul 23 #Javascript
JQuery 学习笔记 选择器之四
Jul 23 #Javascript
JQuery 学习笔记 选择器之三
Jul 23 #Javascript
JQuery 学习笔记 选择器之二
Jul 23 #Javascript
JQuery 学习笔记 选择器之一
Jul 23 #Javascript
javascript IFrame 强制刷新代码
Jul 23 #Javascript
You might like
PHP写的求多项式导数的函数代码
2012/07/04 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
destoon之一键登录设置
2014/06/21 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
JS实现按钮颜色切换效果
2020/09/05 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
公司授权委托书范本
2014/04/03 职场文书
付款委托书范本
2014/04/04 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
警示教育片观后感
2015/06/17 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
Python使用永中文档转换服务
2022/05/06 Python