博客列表 >jQuery方法使用

jQuery方法使用

月光下,遗忘黑暗
月光下,遗忘黑暗原创
2021年04月15日 15:01:07467浏览

1.$()的四种参数的使用场景

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <ul>
  9. <li class="item">item1</li>
  10. <li class="item">item2</li>
  11. <li class="item">item3</li>
  12. <li class="item">item4</li>
  13. </ul>
  14. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  15. <script>
  16. // jquery $()的四种类型参数与使用场景
  17. // 1.元素选择器
  18. $('.item, ul').css('color','red');
  19. //2.将js对象包装成jquery对象,包装器
  20. $(document.body).css('background','green');
  21. //3.$(html文本),创建dom元素,包装成jquery对象返回
  22. $("<p>hello world</p>").insertAfter('ul');
  23. //4.$(回调): dom树一旦创建完成,就会立即执行这个回调
  24. $(()=>{
  25. $('h2').css('color','white');
  26. })
  27. </script>
  28. <h2>hahaha</h2>
  29. </body>
  30. </html>

效果图

2.jQuery方法演示

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>属性操作:attr</title>
  6. <style>
  7. .item {
  8. color: red;
  9. }
  10. </style>
  11. </head>
  12. <body id="main">
  13. <ul>
  14. <li class="item">item1</li>
  15. <li class="item">item2</li>
  16. <li class="item">item3</li>
  17. <li class="item">item4</li>
  18. </ul>
  19. <input type="text" value="123">
  20. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  21. <script>
  22. //获取属性 第二个参数允许使用回调函数
  23. console.log($('body').attr('id'));
  24. //删除属性
  25. $('ul li').removeAttr('class');
  26. //css操作
  27. console.log( $('ul').css('width'));
  28. //设置多个样式
  29. // $('ul').css({
  30. // border : '1px solid red',
  31. // })
  32. //颜色随机变换
  33. $('ul').css('background',()=>{
  34. const color = ['green','red','lime'];
  35. return color[Math.floor(Math.random() * color.length)];
  36. })
  37. // 获取元素value的值
  38. console.log($('input').val());
  39. //text():读写入文本
  40. //html():读写入html文本
  41. </script>
  42. </body>
  43. </html>

效果图

3.为什么将jQuery转为js对象

因为jquery方法的局限性,不可能封装所有的js方法

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议