jQuery属性、jQuery 数据属性、jQuery 样式属性、jQuery样式

黄良钵

分类: 程序开发 26 0

jQuery属性

  1. <body>
  2.    <p class="ffff"></p>
  3.    <a href="https://www.bing.com">必应搜索</a><br>
  4.    <input type="checkbox">
  5.    <script src="jquery.js"></script>
  6.    <script src="js/index.js"></script>
  7. </body>

index.js

  1. // var a = document.getElementsByTagName('a')[0]
  2. // var href = a.getAttribute('hreg')
  3. // a.target = "_bank"
  4. // 获取属性值
  5. $('a').attr('target')
  6. // 移除属性
  7. $('a').removeAttr('href')
  8. // 设置属性
  9. $('a').attr('href','https://www.baidu.com')
  10. // 总结
  11. // 设置值
  12. // $('input').attr('checked',true)
  13. // 能转换为true的什么值都行 在查看器中能观察到
  14. $('input').prop('checked',true)
  15. // 能转换为true的什么值都行 在查看器中不能观察到
  16. // 获取值
  17. // 用attr选中的  返回checked
  18. // console.log($('input').attr('checked'))
  19. // //prop 返回true
  20. // console.log($('input').prop('checked'))
  21. // 使用prop选中的
  22. // 返回undefined
  23. // console.log($('input').attr('checked'))
  24. // // 返回true
  25. // console.log($('input').prop('checked'))
  26. // 移除
  27. // 用attr选中的 
  28. // 不再选中
  29. // $('input').removeAttr('checked')
  30. // 仍然选中
  31. // $('input').removeProp('checked')
  32. // 不选中要使用
  33. // $('input').prop('checked',false)
  34. // 用prop选中的 
  35. // 不再选中
  36. // $('input').removeAttr('checked')
  37. // 仍然选中
  38. // $('input').removeProp('value')
  39. // 不选中要使用
  40. // $('input').prop('checked',false)

jQuery 数据属性

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  5.     <title>jquery 数据属性</title>
  6.     <style>
  7.         div{
  8.            padding: 10px;
  9.            background-color: red;
  10.            color: white;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div>使用标签保存数据</div>
  16.     <script src="jquery.js"></script>
  17.     <script src="js/index1.js"></script>
  18. </body>

js/index1.js

  1. var div = document.querySelector('div')
  2. div.dataset.name = '智游教育'
  3. div.dataset.course = 'H5'
  4. console.log(div.dataset.name)
  5. // 不要保存一个对象 会导致数据丢失
  6. div.dataset.student = {
  7.     name:'王宝强',
  8.     age:6
  9. }
  10. console.dir(div.dataset.student)
  11. div.setAttribute('data-age',3)
  12. div['id'] = 'miyDiv'
  13. // 下面方法不能设置属性
  14. div['data-fff'] = '3'
  15. // 这种方法可以保存对象在查看器上看不到
  16. // div.student ={
  17. //      name:'123',
  18. //      age:4
  19. // }
  20. // console.log(div.student)
  21. // 下面方法也可以
  22. div['student'] = {
  23.     name:'123',
  24.      age:4
  25. }
  26. console.log(div.student)
  27. // 总结
  28. // 标签的属性有两种
  29. // 一种是作为普通对象的属性
  30. // 这种属性通过 运算符或通过['key']访问
  31. // 这种标签可以在调试器中查看
  32. // 另一种标签作为HTML标签的属性
  33. // href = "http://www.zhiyou100.com"
  34. // 这种属性通过getAttrbute/setAttrbute 访问
  35. // 这种属性可以在查看器上看到 
  36. // 2种属性都可以自定义
  37. // *****************************************
  38. $('div').data('name','智游')
  39. // 在查看器上看不到
  40. console.log($('div').data('name'))
  41. $('div').data('student',{
  42.     name:'xiaowang',
  43.     age:4
  44. })
  45. // 可以保存对象
  46. console.log($('div').data('student'))
  47. $('div').removeData('student')
  48. console.log($('div').data('student'))
  49. // 移除

jQuery 样式属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>jQuery 样式属性</title>
  8.     <style>
  9.        div{
  10.            padding: 10px;
  11.            background-color: red;
  12.            color: white;
  13.        }
  14.        .blue-div{
  15.            background-color: blue;
  16.        }
  17.        .red-text{
  18.            color: red;
  19.        }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div>点击这里会变哦</div>
  24.     <ul>
  25.         <li>第1项</li>
  26.         <li>第2项</li>
  27.         <li>第3项</li>
  28.         <li>第4项</li>
  29.         <li>第5项</li>
  30.         <li>第6项</li>
  31.         <li>第7项</li>
  32.     </ul>
  33.     <script src="jquery.js"></script>
  34.     <script src="js/index2.js"></script>
  35. </body>
  36. </html>

js/index2.js

  1. // var div = document.querySelector('div')
  2. // div.onclick = function(){
  3. //     //  if(div.classList.contains('blue-div')){
  4. //     //      div.classList.remove('blue-div')
  5. //     //  }
  6. //     // else{
  7. //     //     div.classList.add('blue-div')
  8. //     // }'
  9. //     // 反转css类的有无
  10. //     div.classList.toggle('blue-div')
  11. // }
  12. $('div').click(function(){
  13.     // if($('div').hasClass('blue-div')){
  14.     //     $('div').removeClass('blue-div')
  15.     // }
  16.     // else{
  17.     //     $('div').addClass('blue-div')
  18.     // }
  19.     // 如果存在就删除一个类
  20.     // 如果不存在就添加一个类
  21.     $('div').toggleClass('blue-div')
  22. })
  23. // 使用原生的方法要写循环
  24. // var lis = document.querySelectorAll('li')
  25. // for(var i = 0;i < lis.length;i++){
  26. //     var li = lis[i]
  27. //     // li.className = 'red-text'
  28. //     li.classList.add('red-text')
  29. // }
  30. // 使用jquery一行代码搞定
  31. $('li').addClass('red-text')

jQuery样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>jquery样式</title>
  8.     <style>
  9.          div{
  10.              padding: 10px;
  11.              font-size: 1.5rem;
  12.              font-family: '幼圆';
  13.              background-color: red;
  14.              color: white;
  15.          }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>样式</div>
  20.     <ul>
  21.         <li>第1项</li>
  22.         <li>第2项</li>
  23.         <li>第3项</li>
  24.         <li>第4项</li>
  25.         <li>第5项</li>
  26.         <li>第6项</li>
  27.         <li>第7项</li>
  28.     </ul>
  29.    <script src="jquery.js"></script>
  30.    <script src="js/index3.js"></script>
  31. </body>
  32. </html>

js/index3.js

  1. // console.log($('div').css('font-size'))
  2. // console.log($('div').css(['font-size','padding','font-family',]))
  3. // 单独设置一个样式
  4. // $('div').css('background-color','blue')
  5. // 同时设置多个样式
  6. // $('div').css({'background-color':'blue','font-size':'5px','margin':'10px'})
  7. // $('div').css({
  8. //     backgroundColor:'prink',
  9. //     fontSize:'2rem'
  10. // })
  11. // $('li').css('font-size',function(i,value){
  12. //     // 回调函数两个值第一个代表索引 第二个原先的属性的值
  13. //     return parseInt(value)*(i + 1) + 'px'
  14. // })
  15. $('li').css('transform',function(index,oldValue){
  16.     return 'translate(' + (Math.abs((index - 3))* - 5 + 200) + 'px, 50px)rotate(' + (index - 3)*5 + 'deg)'
  17. })
  18. // 恢复原始值
  19. $('div').css('font-size','inherit')
  20. $('div').css('font-family','inherit')
  21. $('div').css('margin','auto')
  22. $('div').css('color','initial')
  23. $('div').css('background','none')
  24. $('div').css('padding','0')
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
jQuery 数据属性、jQuery 样式属性、jQuery属性、jQuery样式

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “jQuery属性、jQuery 数据属性、jQuery 样式属性、jQuery样式”

Loading...