jquery13 attr() prop() val() addClass()等 : 对元素属性的操作
Posted 672530440
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery13 attr() prop() val() addClass()等 : 对元素属性的操作相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> jQuery.fn.extend({ attr removeAttr prop removeProp addClass removeClass toggleClass hasClass val }); jQuery.extend({ valHooks attr removeAttr attrHooks propFix prop propHooks }); $(function(){ $(‘#div1‘).attr(‘title‘,‘hello‘); alert( $(‘#div1‘).attr(‘id‘) ); $(‘#div1‘).prop(‘title‘,‘hello‘); alert( $(‘#div1‘).prop(‘id‘) ); ---------------------------------------------------------- //setAttribute() //. | [] var oDiv = document.getElementById(‘div1‘); oDiv.setAttribute(‘title‘,‘hello‘); oDiv.title = ‘hello1‘; oDiv[‘title‘] = ‘hello2‘; ---------------------------------------------------------- $(‘#div1‘).attr(‘miaov‘,‘妙味‘);//可以加自定义属性 $(‘#div1‘).prop(‘miaov‘,‘妙味‘);//不可以加自定义属性 alert($(‘#div1‘).attr(‘miaov‘));//可以获取自定义属性 alert($(‘#div1‘).prop(‘miaov‘));//不可以获取自定义属性 --------------------------------------------------------- alert($(‘#div1‘).prop(‘href‘));//a标签href属性， alert($(‘#div1‘).attr(‘href‘)); --------------------------------------------------------- $(‘#div1‘).removeAttr(‘id‘); alert($(‘#div1‘).attr(‘id‘)); //对自带属性用attr操作， $(‘#div1‘).removeProp(‘id‘); alert($(‘#div1‘).prop(‘id‘));//删不掉， --------------------------------------------------------- $(document).attr(‘title‘,‘hello‘); $(‘#div1‘).attr(‘miaov‘，null);//调用remove //checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped alert( $(‘input‘).attr(‘checked‘) ); //checked alert( $(‘input‘).prop(‘checked‘) ); //true $(‘input‘).attr(‘checked‘,‘checked‘);//没问题 $(‘input‘).attr(‘checked‘,true);//没问题，做兼容了 $(‘#div1‘).removeAttr(‘class‘); }); </script> </head> <body> <a id="div1" miaov="妙味" class="box" href="miaov.com">aaaaaaaaaaaaaaaaa</a> <input type="checkbox"> <input type="text" tabindex="2"> <input type="text" tabindex="1"> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ $(‘#div1‘).addClass(‘box2 box3‘); $(‘#div1‘).removeClass(‘box3‘); $(‘#div1‘).toggleClass(‘box3‘);//切换，有就删除没有就添加， alert( $(‘#div1‘).hasClass(‘box3‘) ); $(‘div‘).addClass(function(index){ alert(index); return ‘box‘+index; }); alert( 1 || 0 && 2 );//1，先后面在前面，&&优先级高于|| $(‘#div1‘).removeClass(‘box1 box2‘); $(‘#div1‘).removeClass(‘‘);//全部删除 $(‘#div1‘).toggleClass(‘box2 box3‘)//有就删除没有就添加 $(‘#div1‘).toggleClass(‘box2 box3‘,true);//有没有都是add $(‘#div1‘).toggleClass(‘box2 box3‘,false);//有没有都是删除 $(‘#div1‘).toggleClass(false);//已有的class全部删除 $(‘#div1‘).toggleClass(true);//删除的class全部添加进去 }); </script> </head> <body> <div class="">aaaaaaaaaaaa</div> <div class="">aaaaaaaaaaaa</div> <div class="">aaaaaaaaaaaa</div> <div id="div1" class="box1 box2">aaaaaa</div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> $(function(){ alert( $(‘#input1‘).val() ); $(‘#input1‘).val(‘hi‘); alert( $(‘#input1‘).val() ); //兼容处理 valHooks : option select radio checkbox alert( $(‘checkbox‘).get(0).type );//checkbox alert( $(‘select‘).get(0).type );//select-one alert( $(‘option‘).eq(0).get(0).nodeName ); ------------------------------------------------------------------------- $(‘#input2‘).click(function(){ alert( $(‘select‘).val() );//select多选时弹出数组 }); $(‘#select‘).val(111);//111被选中了 ---------------------------------------------------------------------- $(‘#input1‘).val(123123); $(‘#input2‘).val([‘hello‘]); $(‘select‘).val(222); }); window.onload = function(){ //window.onload 是原生写法，$(function()是jQuery写法 var oP = document.getElementsByTagName(‘option‘)[0]; alert( oP.attributes.value.specified ); }; </script> </head> <body> <input type="text" id="input1" value="hello"> <select multiple> <option>111</option> <option disabled>222</option> <option>333</option> </select> <input type="checkbox" id="input2" value="hello"> </body> </html>
以上是关于jquery13 attr() prop() val() addClass()等 : 对元素属性的操作的主要内容，如果未能解决你的问题，请参考以下文章