jQuery属性、jQuery 数据属性、jQuery 样式属性、jQuery样式
BG7ZAG
|
|
1,244
|
0
|
程序开发

1193 字
|
7 分钟

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')
  7. // 移除属性
  8. $('a').removeAttr('href')
  10. // 设置属性
  11. $('a').attr('href','https://www.baidu.com')
  13. // 总结
  14. // 设置值
  16. // $('input').attr('checked',true)
  17. // 能转换为true的什么值都行 在查看器中能观察到
  18. $('input').prop('checked',true)
  19. // 能转换为true的什么值都行 在查看器中不能观察到
  21. // 获取值
  22. // 用attr选中的  返回checked
  23. // console.log($('input').attr('checked'))
  24. // //prop 返回true
  25. // console.log($('input').prop('checked'))
  27. // 使用prop选中的
  28. // 返回undefined
  29. // console.log($('input').attr('checked'))
  30. // // 返回true
  31. // console.log($('input').prop('checked'))
  34. // 移除
  35. // 用attr选中的 
  36. // 不再选中
  37. // $('input').removeAttr('checked')
  38. // 仍然选中
  39. // $('input').removeProp('checked')
  40. // 不选中要使用
  41. // $('input').prop('checked',false)
  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'
  5. console.log(div.dataset.name)
  7. // 不要保存一个对象 会导致数据丢失
  8. div.dataset.student = {
  9.     name:'王宝强',
  10.     age:6
  11. }
  13. console.dir(div.dataset.student)
  15. div.setAttribute('data-age',3)
  16. div['id'] = 'miyDiv'
  17. // 下面方法不能设置属性
  18. div['data-fff'] = '3'
  20. // 这种方法可以保存对象在查看器上看不到
  21. // div.student ={
  22. //      name:'123',
  23. //      age:4
  24. // }
  25. // console.log(div.student)
  27. // 下面方法也可以
  28. div['student'] = {
  29.     name:'123',
  30.      age:4
  31. }
  32. console.log(div.student)
  34. // 总结
  35. // 标签的属性有两种
  36. // 一种是作为普通对象的属性
  37. // 这种属性通过 运算符或通过['key']访问
  38. // 这种标签可以在调试器中查看
  40. // 另一种标签作为HTML标签的属性
  41. // href = "http://www.zhiyou100.com"
  42. // 这种属性通过getAttrbute/setAttrbute 访问
  43. // 这种属性可以在查看器上看到 
  44. // 2种属性都可以自定义
  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;
  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. // }
  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. })
  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. // }
  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;
  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. // })
  12. // $('li').css('font-size',function(i,value){
  14. //     // 回调函数两个值第一个代表索引 第二个原先的属性的值
  15. //     return parseInt(value)*(i + 1) + 'px'
  16. // })
  18. $('li').css('transform',function(index,oldValue){
  19.     return 'translate(' + (Math.abs((index - 3))* - 5 + 200) + 'px, 50px)rotate(' + (index - 3)*5 + 'deg)'
  20. })
  22. // 恢复原始值
  24. $('div').css('font-size','inherit')
  26. $('div').css('font-family','inherit')
  28. $('div').css('margin','auto')
  30. $('div').css('color','initial')
  32. $('div').css('background','none')
  34. $('div').css('padding','0')
jQuery 数据属性jQuery 样式属性jQuery属性jQuery样式
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
Vue使用websocket即时通信

							
							

							
字号与尺寸、像素对照表

							
							

							
小程序选择、预览、删除、上传图片

							
							

							
vue修改打包文件的路径

							
							

							
微信小程序所有组件初始化样式box-sizing

							
							

							
微信小程序picker组件中多列选择器的使用