js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)
来源:互联网 发布:南风知我意七微书包网1 编辑:程序博客网 时间:2024/05/17 21:47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Sample Page!</title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script language="JavaScript" type="text/javascript"><!-- function TestEvent(){ document.MyForm.text1.removeAttribute("disabled"); //移除文本框disable属性. document.MyForm.text1.value="enable";//改变文本框中的文字. } //给ID为key的a标签 添加 title属性并赋值为"测试title" 摘取天上星:http://blog.csdn.net/zqtsxfunction AddTitle(){ document.getElementById('key').setAttribute("title","测试title"); }//给ID为key的a标签 删除 title属性function DelTitle(){ document.getElementById('key').removeAttribute("title");}//js获取title属性的值function GetTitle(){ var value=document.getElementById('key').getAttribute("title"); alert('title的属性值为:'+value);}//jq方式删除、设置元素属性,为了更加形象些对比,这里采用嵌入式方式,没有进行js html分离 摘取天上星:http://blog.csdn.net/zqtsxfunction a(){ alert('测试jq添加onclick属性');}//jq方式添加onclick属性function jqAddOnclick(){ $("#key").attr("onclick","a();");}//jq方式取得onclick属性值function jqGetOnclick(){ var value=$("#key").attr("onclick"); alert('onclick属性值为:'+value);}//jq方式删除onclick属性function jqDelOnclick(){ $("#key").removeAttr("onclick");}// --></script> </head> <body> <a id="key" href="#123">add title</a> <form name="MyForm" action=""> <input type="text" name="text1" value="disabled" disabled="disabled"/> <input type="button" name="MyButton" value="js移除文本框disabled属性" onclick="TestEvent()"/> <input type="button" name="addTitle" onclick="AddTitle();" value="js添加title属性"> <input type="button" name="getTitle" onclick="GetTitle();" value="js获取title属性"> <input type="button" name="delTitle" onclick="DelTitle();" value="js删除title属性"> <input type="button" name="jqadd" onclick="jqAddOnclick();" value="jq添加onclick属性"> <input type="button" name="jqget" onclick="jqGetOnclick();" value="jq获取onclick属性"> <input type="button" name="jqdel" onclick="jqDelOnclick();" value="jq删除onclick属性"> </form> </body> </html>
关于jQuery1.9.1针对checkbox属性设置的一些调整差异(摘取天上星:http://blog.csdn.net/zqtsx):
在jquery 1.8.x中的版本,我们对于checkbox的选中与不选中操作如下:
判断是否选中
$('#checkbox').prop('checked')
设置选中与不选中状态:
$('#checkbox').attr('checked',true)
$('#checkbox').attr('checked',false)
但此方法在jquery1.9.1中,有些处理不一样
IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现
但是当通过代码清除选中,下次再通过代码 $('#checkbox').attr('checked',true) 去选中时
虽然代码中有checked='checked',但是画面表现都没有打勾。
IE8,IE6下无此问题。
后来调查了相关的资料,发现现在attr('checked',true)都换成prop('checked',true)
下面给出个JQ1.8.x以后 的全选反选的JQ例子
JS代码部分如下
- $(function(){
- $("#select_yes").click(function(){
- $("input[name=id]").each(function(){
- $(this).prop("checked",true);
- });
- });
- $("#select_no").click(function(){
- $("input[name=id]").each(function(){
- $(this).prop("checked",false);
- });
- });
- });
HTML代码部分如下()
- <input type="checkbox" value="1" name="id"><br/>
- <input type="checkbox" value="2" name="id"><br/>
- <input type="checkbox" value="3" name="id"> <br/>
- <input type="checkbox" value="4" name="id"> <br/>
- <input type="checkbox" value="5" name="id"> <br/>
- <input type="checkbox" value="6" name="id"> <br/>
- <input type="checkbox" value="7" name="id"> <br/>
- <a href="javascript:void(0);" id="select_yes">全选</a>
- <a href="javascript:void(0);" id="select_no">返选</a>
2 0
- js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)
- 动态设置js的属性
- js动态创建元素以及设置属性
- js动态创建/删除 (页面)元素节点、设置其属性方法
- jQuery中动态设置表格的属性
- 动态设置HyperLink的属性
- DataGridView1的属性动态设置
- 动态设置表格属性
- 动态设置表格属性
- ireport 动态设置属性
- 动态设置链接的Title的js方法
- JS动态创建表格,动态设置属性,动态添加事件
- JS动态创建表格,动态设置属性,动态添加事件
- JS动态创建表格,动态设置属性,动态添加事件
- 用js/JQuery获取/设置元素属性
- jQuery -> 获取/设置/删除DOM元素的属性
- jQuery -> 获取/设置/删除DOM元素的属性
- 在元素中设置onClick属性方法
- 第十六周自由练习项目——acm C++复数运算符重载(+与<<)
- 【黑马程序员】java基础_正则表达式
- Unable to compile class for JSP 错误的解决过程
- bug 非Activity中使用startActivity
- pkg_info 命令使用方法
- js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)
- Memcache客户端,随意写的
- 黑马程序员_类的合理设计_基本的属性&对象类型的属性
- 【转】Myeclipse 10.6 导出war问题解决思路
- OC学习4——@property和@synthesize
- Qt学习之将资源文件添加到工程里面
- linux unlink() access() mkfifo()使用实例
- 时间类
- linux下top命令的使用