Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery常用方法
Blogger Information
Blog 52
fans 1
comment 1
visits 38802
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery常用方法
小丑0o鱼
Original
364 people have browsed it
  1. jQuery是一个快速，简洁的JavaScript库，座右铭：少写，多做。
  3. 1. $()的四种类型参数的应用场景实例
  4. $(筛选器) : 获取dom对象,相当于document.querySelectorAll
  5. $(dom对象) : 把dom对象转化为jQuery对象
  6. $(html文本) : 创建dom元素,返回为jQuery对象
  7. $(callback) :当dom树加载完成后的回调
  9. <body>
  10.     <ul>
  11.         <li>item1</li>
  12.         <li>item2</li>
  13.         <li>item3</li>
  14.         <li>item4</li>
  15.         <li>item5</li>
  16.     </ul>
  17.     <script>
  18.         // 1. $(筛选器) : 获取dom对象,相当于document.querySelectorAll
  19.         console.log($('ul'));
  20.         // 2. $(dom对象) : 把dom对象转化为jQuery对象
  21.         console.log($(document.body) instanceof jQuery);
  22.         // 3. $(html文本) : 创建dom元素,返回为jQuery对象
  23.         $("<h2>Hello World</h2>").insertBefore($('ul'));
  24.         // 4. $(callback) :当dom树加载完成后的回调
  25.         $(() => $('h3').css('color', 'red'));
  26.     </script>
  27.     <h3>bye,bye</h3>
  28. </body>
  29. 2. jQuery常用方法
  30. attr(name, value) : 属性操作,单参数时是获取 同比:getAttribute, 双参数是设置 同比: setAttribute,设置多个属性时可使用对象传参
  31. removeAttr() : 移除属性 同比: removeAttribute
  33. <body>
  34.     <ul name='lists' id="ul1" style="border: 1px solid #000;">
  35.         <li>item1</li>
  36.         <li>item2</li>
  37.         <li>item3</li>
  38.         <li>item4</li>
  39.         <li>item5</li>
  40.     </ul>
  41. </body>
  42. <script>
  43.     const ul = $('ul');
  44.     const li = $('li');
  45.     // 获得属性
  46.     console.log(ul.attr('name'));
  47.     // 设置属性
  48.     ul.attr('name', 'test');
  49.     console.log(ul.attr('name'));
  50.     // 多属性设置
  51.     ul.attr({ 'name': 'test2', 'id': '1', 'data-index': 'shop' });
  52.     console.log(ul.attr('id'));
  53.     // 删除属性
  54.     ul.removeAttr('id');
  55.     console.log(ul.attr('id'));
  56. </script>
  57. css(name, value) : 样式操作,单参数时是获取 同比:style, 双参数是设置 同比: style.name = value,设置多个属性时可使用对象传参
  59. <body>
  60.     <ul name='lists' id="ul1" style="border: 1px solid #000; color: lightgreen;">
  61.         <li>item1</li>
  62.         <li>item2</li>
  63.         <li>item3</li>
  64.         <li>item4</li>
  65.         <li>item5</li>
  66.     </ul>
  67. </body>
  68. <script>
  69.     const ul = $('ul');
  70.     // 获取样式
  71.     console.log(ul.css('color'));
  72.     // 设置样式
  73.     $('li:nth-of-type(1)').css('backgroundColor', 'yellow');
  74.     // 设置多个样式
  75.     $('li:nth-of-type(2)').css({ 'font-size': '20', 'backgroundColor': 'red' });
  76. </script>
  77. addClass(name) : 添加样式类 同比:classlist.add
  78. removeClass(name) : 删除样式类 同比:classlist.remove
  79. hasClass(name) : 判断是否有某个样式类 同比:classlist.contains
  80. toggleClass(name) : 切换样式类 同比:classlist.toggle
  82. <style>
  83.     .error {
  84.         background-color: red;
  85.     }
  86.     .warning {
  87.         background-color: orange;
  88.     }
  89. </style>
  90. <body>
  91.     <ul>
  92.         <li>item1</li>
  93.         <li class=" warning">item2</li>
  94.         <li>item3</li>
  95.         <li>item4</li>
  96.         <li>item5</li>
  97.     </ul>
  98. </body>
  99. <script>
  100.     // 添加样式类
  101.     $('li:nth-of-type(1)').addClass('error');
  102.     // 删除样式类
  103.     $('li:nth-of-type(2)').removeClass('warning');
  104.     // 判断是否有类
  105.     console.log($('li:nth-of-type(2)').hasClass('warning'));;
  106.     // 切换样式类
  107.     $('li:nth-of-type(2)').on('click', function () {
  108.         $(this).toggleClass('warning');
  109.     });
  110. </script>
  111. val() : 获取或者设置表单元素的value属性的值,无参获取, 有参数是设置
  112. html() : html文本处理 无参获取, 有参数是设置 同比: innerHTML
  113. text() : 文本处理 无参获取, 有参数是设置 同比:textContent
  115. <body>
  116.     <form action="">
  117.         <label for="" id="userlab">用户名:</label>
  118.         <input type="text" id="username">
  119.         <label for="" id="pwdlab">密码:</label>
  120.         <input type="password" id="password">
  121.         <div id='btn'></div>
  122.     </form>
  123. </body>
  124. <script>
  125.     // 设置value
  126.     $('#username').val('php.com');
  127.     // 获得value
  128.     console.log($('#username').val());
  129.     // 获得text
  130.     console.log($('#userlab').text());
  131.     // 设置text
  132.     $('#pwdlab').text('password');
  133.     // 设置html文本
  134.     $('#btn').html('<Button type="button">提交在此</Button>');
  135. </script>
  136. 3. 将jQuery对象转js对象的方法
  137. 因为jQuery的限制性,无法完全替换js的一些操作或方法.需要将jQuery对象转为js对象.
  138. jQuery对象转换成DOM对象：
  139. jQuery对象.get(索引值);
  140. jQuery对象[索引值]
  141. jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
  142. DOM对象转换成jQuery对象：
  143. $(DOM对象) 只有这一种方法;
  146. <style>
  147.     .cur {
  148.         color: lightcoral;
  149.     }
  150.     .pre {
  151.         color: lightgreen;
  152.     }
  153. </style>
  154. <body>
  155.     <ul>
  156.         <li>item1</li>
  157.         <li>item2</li>
  158.         <li>item3</li>
  159.         <li>item4</li>
  160.         <li>item5</li>
  161.     </ul>
  162.     <script>
  163.         // 同比于jQuery的addClass
  164.         $('li')[3].classList.add('cur');
  165.         $('li:nth-of-type(2)').addClass('pre');
  166.     </script>
  167. </body>
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post