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. // 移除属性
8. $('a').removeAttr('href')
9.
10. // 设置属性
11. $('a').attr('href','https://www.baidu.com')
12.
13. // 总结
14. // 设置值
15.
16. // $('input').attr('checked',true)
17. // 能转换为true的什么值都行 在查看器中能观察到
18. $('input').prop('checked',true)
19. // 能转换为true的什么值都行 在查看器中不能观察到
20.
21. // 获取值
22. // 用attr选中的 返回checked
23. // console.log($('input').attr('checked'))
24. // //prop 返回true
25. // console.log($('input').prop('checked'))
26.
27. // 使用prop选中的
28. // 返回undefined
29. // console.log($('input').attr('checked'))
30. // // 返回true
31. // console.log($('input').prop('checked'))
32.
33.
34. // 移除
35. // 用attr选中的
36. // 不再选中
37. // $('input').removeAttr('checked')
38. // 仍然选中
39. // $('input').removeProp('checked')
40. // 不选中要使用
41. // $('input').prop('checked',false)
42.
43. // 用prop选中的
44. // 不再选中
45. // $('input').removeAttr('checked')
46. // 仍然选中
47. // $('input').removeProp('value')
48. // 不选中要使用
49. // $('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.
5. console.log(div.dataset.name)
6.
7. // 不要保存一个对象 会导致数据丢失
8. div.dataset.student = {
9. name:'王宝强',
10. age:6
11. }
12.
13. console.dir(div.dataset.student)
14.
15. div.setAttribute('data-age',3)
16. div['id'] = 'miyDiv'
17. // 下面方法不能设置属性
18. div['data-fff'] = '3'
19.
20. // 这种方法可以保存对象在查看器上看不到
21. // div.student ={
22. // name:'123',
23. // age:4
24. // }
25. // console.log(div.student)
26.
27. // 下面方法也可以
28. div['student'] = {
29. name:'123',
30. age:4
31. }
32. console.log(div.student)
33.
34. // 总结
35. // 标签的属性有两种
36. // 一种是作为普通对象的属性
37. // 这种属性通过 运算符或通过['key']访问
38. // 这种标签可以在调试器中查看
39.
40. // 另一种标签作为HTML标签的属性
41. // href = "http://www.zhiyou100.com"
42. // 这种属性通过getAttrbute/setAttrbute 访问
43. // 这种属性可以在查看器上看到
44. // 2种属性都可以自定义
45.
46. // *****************************************
47. $('div').data('name','智游')
48. // 在查看器上看不到
49. console.log($('div').data('name'))
50. $('div').data('student',{
51. name:'xiaowang',
52. age:4
53. })
54. // 可以保存对象
55. console.log($('div').data('student'))
56. $('div').removeData('student')
57. console.log($('div').data('student'))
58. // 移除
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. }
18. .red-text{
19. color: red;
20. }
21. </style>
22. </head>
23. <body>
24. <div>点击这里会变哦</div>
25. <ul>
26. <li>第1项</li>
27. <li>第2项</li>
28. <li>第3项</li>
29. <li>第4项</li>
30. <li>第5项</li>
31. <li>第6项</li>
32. <li>第7项</li>
33. </ul>
34. <script src="jquery.js"></script>
35. <script src="js/index2.js"></script>
36. </body>
37. </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.
13. $('div').click(function(){
14. // if($('div').hasClass('blue-div')){
15. // $('div').removeClass('blue-div')
16. // }
17. // else{
18. // $('div').addClass('blue-div')
19. // }
20. // 如果存在就删除一个类
21. // 如果不存在就添加一个类
22. $('div').toggleClass('blue-div')
23. })
24.
25. // 使用原生的方法要写循环
26. // var lis = document.querySelectorAll('li')
27. // for(var i = 0;i < lis.length;i++){
28. // var li = lis[i]
29. // // li.className = 'red-text'
30. // li.classList.add('red-text')
31. // }
32.
33. // 使用jquery一行代码搞定
34. $('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.
13. font-family: '幼圆';
14. background-color: red;
15. color: white;
16. }
17. </style>
18. </head>
19. <body>
20. <div>样式</div>
21. <ul>
22. <li>第1项</li>
23. <li>第2项</li>
24. <li>第3项</li>
25. <li>第4项</li>
26. <li>第5项</li>
27. <li>第6项</li>
28. <li>第7项</li>
29. </ul>
30. <script src="jquery.js"></script>
31. <script src="js/index3.js"></script>
32. </body>
33. </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.
12. // $('li').css('font-size',function(i,value){
13.
14. // // 回调函数两个值第一个代表索引 第二个原先的属性的值
15. // return parseInt(value)*(i + 1) + 'px'
16. // })
17.
18. $('li').css('transform',function(index,oldValue){
19. return 'translate(' + (Math.abs((index - 3))* - 5 + 200) + 'px, 50px)rotate(' + (index - 3)*5 + 'deg)'
20. })
21.
22. // 恢复原始值
23.
24. $('div').css('font-size','inherit')
25.
26. $('div').css('font-family','inherit')
27.
28. $('div').css('margin','auto')
29.
30. $('div').css('color','initial')
31.
32. $('div').css('background','none')
33.
34. $('div').css('padding','0')