标签：注意 tag 开发 -- switch string title 高级程序设计 引用类型
.attr()与.removeAttr()
每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。
操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题
jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()
attr()有4个表达式
removeAttr()删除方法
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
优点：
attr、removeAttr都是jQuery为了属性操作封装的，直接在一个 jQuery 对象上调用该方法，很容易对属性进行操作，也不需要去特意的理解浏览器的属性名不同的问题
dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性
例如：html中常用的id、class、title、align等：
<div id="immooc" title="慕课网"></div>
而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等
获取Attribute就需要用attr，获取Property就需要用prop
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> input { display : block; margin : 10px; padding : 10px; background : #bbffaa; border : 1px solid #ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>.attr()与.removeAttr()</h2> <h3>.attr</h3> <form> <input type="text" value="设置value" /> <input type="text" value="获取value"/> <input type="text" value="回调拼接value" /> <input type="text" value="删除value" /> </form> <script type="text/javascript"> //找到第一个input，通过attr设置属性value的值 $("input:first").attr(‘value‘,‘.attr( attributeName, value )‘) </script> <script type="text/javascript"> //找到第二个input，通过attr获取属性value的值 $("input:eq(1)").attr(‘value‘) </script> <script type="text/javascript"> //找到第三个input，通过使用一个函数来设置属性 //可以根据该元素上的其它属性值返回最终所需的属性值 //例如，我们可以把新的值与现有的值联系在一起： $("input:eq(2)").attr(‘value‘,function(i, val){ return ‘通过function设置‘ + val }) </script> <script type="text/javascript"> //找到第四个input，通过使用removeAttr删除属性 $("input:eq(3)").removeAttr(‘value‘) </script> </body> </html>
.html()与.text():
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text()
.html()方法
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
注意事项：
.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
.text()方法
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
.html与.text的异同:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h3>.html()与.text()</h3> <div class="left first-div"> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> </div> <h4>显示通过html方法获取到的内容</h4> <p></p> <h4>显示通过text方法获取到的内容</h4> <p></p> <script type="text/javascript"> //显示出html方法获取到的内容 //.html()是整个html文档结构 $(‘p:first‘).text( $(".first-div").html() ) </script> <script type="text/javascript"> //显示出text方法获取到的内容 //.text()是文本内容的合集 $(‘p:last‘).text( $(".first-div").text() ) </script> <script type="text/javascript"> //通过.text()方法替换文本内容 $(".left a:first").text(‘替换第一个a元素的内容‘) </script> <script type="text/javascript"> //通过.html()方法替换html结构 $(".left div:first").html(‘整个div的子节点都被替换了‘) </script> <script type="text/javascript"> //通过.text()的回调，获取原本的内容，修改，在重新赋值 $(".left a:first").text(function(idnex,text){ return ‘增加新的文本内容‘ + text }) </script> </body> </html>
.val():
jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。
.val()方法
注意事项：
.html(),.text()和.val()的差异总结：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> p { color: red; margin: 4px; } b { color: blue; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h3>.val()</h3> <select id="single"> <option>慕课网</option> <option>博客园</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">imocc</option> <option>慕课网</option> <option selected="selected">博客园</option> </select> <input type="text" value="click a button" /> <p></p> <script type="text/javascript"> //单个select，返回第一个 $("p").text( $("#single").text() ) </script> <script type="text/javascript"> //多个select被选择，返回["imocc", "博客园"] $("p").text( $("#multiple").text() ) </script> <script type="text/javascript"> //选择一个表单，修改value的值 $("input[type=‘text‘]").val(‘修改表单的字段‘) </script> </body> </html>
增加样式.addClass()、删除样式.removeClass()
通过动态改变类名（class），可以让其修改元素呈现出不同的效果。在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名
.addClass( className )方法
在p元素增加一个newClass的样式
<p class="orgClass">
$("p").addClass("newClass")
那么p元素的class实际上是 class="orgClass newClass"样式只会在原本的类上继续增加，通过空格分隔
.removeClass( )方法
注意事项
如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除
切换样式.toggleClass():
在做某些效果的时候，可能会针对同一节点的某一个样式不断的切换，也就是addClass与removeClass的互斥切换，比如隔行换色效果
jQuery提供一个toggleClass方法用于简化这种互斥的逻辑，通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类
注意事项：
样式操作.css()：
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性
获取：
设置：
注意事项：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="imooc.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h3>获取css属性</h3> <div class="first">获取颜色</div> <p></p> <div class="second">获取文字尺寸</div> <p></p> <div class="third">获取宽高尺寸</div> <p></p> <script type="text/javascript"> //background-color:blue; => rgb(0, 0, 255) //颜色都会转化成统一的rgb标示 $(‘p:eq(0)‘).text( $(‘.first‘).css("background-color") ) </script> <script type="text/javascript"> //字体大小都会转化成统px大小 em=>px $(‘p:eq(1)‘).text( $(‘.first‘).css("font-size") ) </script> <script type="text/javascript"> //获取尺寸，传入CSS属性组成的一个数组 //{width: "60px", height: "60px"} var value = $(‘.first‘).css(["width","height"]); //因为获取的是一个对象，取到对应的值 $(‘p:eq(2)‘).text( ‘widht:‘ + value.width + ‘ height:‘ +value.height ) </script> </br></br></br> <h3>设置css属性</h3> <div class="fourth">设置颜色设置文字尺寸</div> <div class="fifth">设置颜色设置文字尺寸</div> <div class="sixth">通过回调设置新的值</div> <div class="seventh">同时设置多少个样式</div> <script type="text/javascript"> //多种写法设置颜色 $(‘.fourth‘).css("background-color","red") $(‘.fifth‘).css("backgroundColor","yellow") </script> <script type="text/javascript"> //多种写法设置字体大小 $(‘.fourth‘).css("font-size","15px") $(‘.fifth‘).css("fontSize","0.9em") </script> <script type="text/javascript"> //获取到指定元素的宽度，在回调返回宽度值 //通过处理这个value，重新设置新的宽度 $(‘.sixth‘).css("width",function(index,value){ value = value.split("px"); return (Number(value[0]) + 50) + value[1]; }) </script> <script type="text/javascript"> //合并设置,通过对象传设置多个样式 $(‘.seventh‘).css({ ‘font-size‘ :"15px", "background-color" :"#40E0D0", "border" :"1px solid red" }) </script> </body> </html>
元素的数据存储：
html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题
使用jQuery初学者一般不是很关心data方式，这个方法是jquery内部预用的，可以用来做性能优化，比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了，常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的
jQuery提供的存储接口
jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据
2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。
我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险
通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了
同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了
jQuery.removeData( element [, name ] ) .removeData( [name ] )
参考右边的代码区域，2个代码段分别描述了静态与实例data的使用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>jQuery.data()静态方法</h2> <div class="left"> <div class="aaron"> <p>点击看结果</p> <p>jQuery.data</p> </div> <div><span></span></div> </div> <h2>.data()实例方法</h2> <div class="right"> <div class="aaron"> <p>点击看结果</p> <p>.data</p> </div> <div><span></span></div> </div> <script type="text/javascript"> $(‘.left‘).click(function() { var ele = $(this); //通过$.data方式设置数据 $.data(ele, "a", "data test") $.data(ele, "b", { name : "慕课网" }) //通过$.data方式取出数据 var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name ele.find(‘span‘).append(reset) }) </script> <script type="text/javascript"> $(‘.right‘).click(function() { var ele = $(this); //通过.data方式设置数据 ele.data("a", "data test") ele.data("b", { name: "慕课网" }) //通过.data方式取出数据 var reset = ele.data("a") + "</br>" + ele.data("b").name ele.find(‘span‘).append(reset) }) </script> </body> </html>
标签：注意 tag 开发 -- switch string title 高级程序设计 引用类型
原文地址：http://www.cnblogs.com/Nyan-Workflow-FC/p/6443598.html
