• 当前标签:jQuery 样式属性

程序开发 jQuery属性、jQuery 数据属性、jQuery 样式属性、jQuery样式

jQuery属性 <body>    <p class="ffff"></p>    <a href="https://www.bing.com">必应搜索</a><br>    <input type="checkbox">    <script src="jquery.js"></script>    <script src="js/index.js"></script> </body> index.js // var a = document.getElementsByTagName('a')[0] // var href = a.getAttribute('hreg') // a.target = "_bank" // 获取属性值 $('a').attr('target') // 移除属性 $('a').removeAttr('href') // 设置属性 $('a').attr('href','https://www.baidu.com') // 总结 // 设置值 // $('input').attr('checked',true) // 能转换为true的什么值都行 在查看器中能观察到 $('input').prop('checked',true) // 能转换为true的什么值都行 在查看器中不能观察到 // 获取值 // 用attr选中的  返回checked // console.log($('input').attr('checked')) // //prop 返回true // console.log($('input').prop('checked')) // 使用prop选中的 // 返回undefined // console.log($('input').attr('checked')) // // 返回true // console.log($('input').prop('checked')) // 移除 // 用attr选中的  // 不再选中 // $('input').removeAttr('checked') // 仍然选中 // $('input').removeProp('checked') // 不选中要使用 // $('input').prop('checked',false) // 用prop选中的  // 不再选中 // $('input').removeAttr('checked') // 仍然选中 // $('input').removeProp('value') // 不选中要使用 // $('input').prop('checked',false) jQuery 数据属性 <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>jquery 数据属性</title>     <style>         div{            padding: 10px;            background-color: red;            color: white;         }     </style> </head> <body>     <div>使用标签保存数据</div>     <script src="jquery.js"></script>     <script src="js/index1.js"></script> </body> js/index1.js var div = document.querySelector('div') div.dataset.name = '智游教育' div.dataset.course = 'H5' console.log(div.dataset.name) // 不要保存一个对象 会导致数据丢失 div.dataset.student = {     name:'王宝强',     age:6 } console.dir(div.dataset.student) div.setAttribute('data-age',3) div['id'] = 'miyDiv' // 下面方法不能设置属性 div['data-fff'] = '3' // 这种方法可以保存对象在查看器上看不到 // div.student ={ //      name:'123', //      age:4 // } // console.log(div.student) // 下面方法也可以 div['student'] = {     name:'123',      age:4 } console.log(div.student) // 总结 // 标签的属性有两种 // 一种是作为普通对象的属性 // 这种属性通过 运算符或通过['key']访问 // 这种标签可以在调试器中查看 // 另一种标签作为HTML标签的属性 // href = "http://www.zhiyou100.com" // 这种属性通过getAttrbute/setAttrbute 访问 // 这种属性可以在查看器上看到  // 2种属性都可以自定义 // ***************************************** $('div').data('name','智游') // 在查看器上看不到 console.log($('div').data('name')) $('div').data('student',{     name:'xiaowang',     age:4 }) // 可以保存对象 console.log($('div').data('student')) $('div').removeData('student') console.log($('div').data('student')) // 移除 jQuery 样式属性 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>jQuery 样式属性</title>     <style>        div{            padding: 10px;            background-color: red;            color: white;        }        .blue-div{            background-color: blue;        }        .red-text{            color: red;        }     </style> </head> <body>     <div>点击这里会变哦</div>     <ul>         <li>第1项</li>         <li>第2项</li>         <li>第3项</li>         <li>第4项</li>         <li>第5项</li>         <li>第6项</li>         <li>第7项</li>     </ul>     <script src="jquery.js"></script>     <script src="js/index2.js"></script> </body> </html> js/index2.js // var div = document.querySelector('div') // div.onclick = function(){

2017-08-14 20:02:32 45 0 0
阅读详情
  • 1
前往