jQuery-样式（jQuery的属性与样式）
来源：互联网 发布：矩阵半张量积等式的解 编辑：程序博客网 时间：2024/04/30 01:47
jQuery的属性与样式
之.attr()与.removeAttr()
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery的属性与样式之.attr()与.removeAttr()</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><p> 一、jQuery中用attr()方法来获取和设置元素属性。 attr()有4个表达式： 1，attr(属性名)：获取属性的值； 2，attr(属性名，属性值)：设置属性的值； 3，attr(属性名，函数名)：设置属性的函数值； 4，attr(属性名1：属性值1，属性名2：属性值2)； 二、removeAttr()删除方法 .removeAttr(属性名)：为匹配的元素集合中的所有元素移除属性； 三、区分attribute和property 1，Attribute：特性，dom节点自带的属性，如id，class，title，align等； 2，Property：属性，是dom元素作为对象，其附加的内容，如tagName，nodeName，弄的T一盆等； 3，获取Attribute用attr，获取Property用prop；</p><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()
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery的属性与样式之html()及.text()</title> <link rel="stylesheet" href="choose.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body><h3>.html()与.text()</h3>.html() 与 .text()1，.html()读取修改元素的html结构；2，.text()读取修改元素的文本内容；3，.html()方法内容使用的是DOM的innerHTML()属性来处理的。这个操作是针对整个HTML内容，不仅仅只是文本内容；4，.text()结果返回一个字符串，包含所有匹配元素的合并文本；<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').html( $(".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()
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>jQuery的属性与样式之.val()</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>1，.val()方法：用于处理表单元素的值，如input、select、textarea；只能用在表单元素上；2，.text()方法：用来读取元素的纯文本内容，包括后代元素；不能用在表单元素上；3，.html()和.val()方法：若是用在多个元素上时，只读取第一个元素；4，.text()方法：若是用在多个元素上时，将会读取所有选中元素的文本内容；<br><select id="single"> <option selected="selected">单选前端</option> <option>单选后端</option></select><select id="multiple" multiple="multiple"> <option selected="selected">多选上面</option> <option>多选中间</option> <option selected="selected">多选下面</option></select><input type="text" value="click a button" /><p id="p1"></p><p id="p2"></p><script type="text/javascript"> //单个select，返回第一个 $("#p1").text( $("#single").val() )</script><script type="text/javascript"> //多个select被选择，返回["上面", "下面"] $("#p2").text( $("#multiple").val() )</script><script type="text/javascript"> //选择一个表单，修改value的值 $("input[type='text']").val('修改表单中的内容')</script></body></html>之增加样式.addClass()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="3-4.css" type="text/css"> <title>jQuery的属性与样式之增加样式.addClass()</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body>1，.addClass(className)方法作用：为每个匹配元素动态增加一个或多个class类名；2，注意：.addClass(className)方法不会替换一个样式类名， 它只是简单的添加一个类名到元素上；<h2>.addClss()方法</h2><div class="left"> <div class="xiao"> <p>newClass</p> </div> <div class="xiao"> <p>newClass</p> </div></div><div class="right"> <div class="aa bb boke"> <article> <p>bokeClass</p> </article> </div> <div class="bb cc boke"> <article> <p>bokeClass</p> </article> </div></div><script type="text/javascript"> $('.left div').addClass('newClass');</script><script type="text/javascript"> $('div').addClass(function (index, className) { if(-1!==className.indexOf('boke')){ $(this).addClass('bokeClass'); } });</script></body></html>之删除样式 .removeClass()
<!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; } .newClass{ background: #bbffaa; } .imoocClass{ background: red; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script></head><body><h2>.removeClass()方法</h2>1，removeClass([className])：每个匹配元素移除一个或多个用空格隔开的类名；2，removeClass(function(index,class))：一个函数，返回一个或多个将要被移除的类名；<div class="left"> <div class="aaron newClass"> <p>newClass</p> </div> <div class="aaron newClass"> <p>newClass</p> </div></div><div class="right"> <div class="aa bb imoocClass"> <article> <p>imoocClass</p> </article> </div> <div> <article> <p>imoocClass</p> </article> </div></div><script type="text/javascript"> //class=left下div元素删除newClass样式 $('.left div').removeClass('newClass')</script><script type="text/javascript"> //.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式 $('.right > div:first').removeClass(function(index,className){ //className = aa bb imoocClass //把div的className赋给下一个兄弟元素div上作为它的class $(this).next().addClass(className) //删除自己本身的imoocClass return 'imoocClass' })</script></body></html>之切换样式 .toggleClass()
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>jQuery切换样式.toggleClass()</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> body, table, td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .h { background: #f3f3f3; color: #000; } .c { background: #ebebeb; color: #000; } </style></head><body><h2>隔行换色</h2><h4>.toggleClass(className)和.toggleClass(className,switch)</h4><table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td>jQuery快到碗里来！</td> <td>jQuery快到碗里来！</td> </tr> <tr> <td>jQuery快到碗里来！</td> <td>jQuery快到碗里来！</td> </tr> <tr> <td>jQuery快到碗里来！</td> <td>jQuery快到碗里来！</td> </tr> <tr> <td>jQuery快到碗里来！</td> <td>jQuery快到碗里来！</td> </tr> <tr> <td>jQuery快到碗里来！</td> <td>jQuery快到碗里来！</td> </tr></table><script type="text/javascript"> //给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c");</script><script type="text/javascript"> //给所有的偶数tr元素切换class="c"的样式 //所有基数的样式保留，偶数的被删除 $("#table tr:odd").toggleClass("c");</script><script type="text/javascript"> //第二个参数判断样式类是否应该被添加或删除 //true，那么这个样式类将被添加; //false，那么这个样式类将被移除 //所有的奇数tr元素，应该都保留class="c"样式 $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的</script></body></html>之样式操作 .css()
<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="3-7.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <title>jQuery样式操作.css()</title></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('font-size','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':'green', 'border':'1px solid gray' })</script></body></html>之元素的数据存储
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery元素的数据存储</title> <style type="text/css"> .left,.right { width: 300px; height: 120px; } .left div,.right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #cccccc; } .left div { background: #bbffdd; } .right div { background: #ddffbb; } </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="inner"> <p>click</p> <p>jQuery.data</p> </div> <div><span></span></div></div><h2>.data()实例方法</h2><div class="right"> <div class="inner"> <p>click</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> 0 0
- jQuery-样式（jQuery的属性与样式）
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- jQuery的属性与样式
- JQuery--属性与样式
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- jQuery的属性与样式之.val()
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之切换样式.toggleClass()
- jQuery的属性与样式之样式操作.css()
- jQuery的属性与样式之增加样式.addClass()
- jQuery的属性与样式之删除样式.removeClass()
- jQuery的属性与样式之切换样式.toggleClass()
- 3、jQuery的属性与样式--样式篇
- goto anything
- Spring Security 自定义登陆页面报HTTP Status 403
- mongodb lock 出毛病时解决方法
- 一个ExtJs实例
- 管理后台的登录功能－重新思考
- jQuery-样式（jQuery的属性与样式）
- 排序篇(1)--冒泡排序
- 一些通过uv纹理坐标实现的简单shader（一）
- 浅尝树莓派3之串口配置
- 使用dwz框架导出当页数据
- 多行游标
- JVM调优总结
- 特殊方格取数
- JS无法取得display:none元素的宽高
