jquery 基本用法

文章目录

• 1. 引入CDN
• 2. 检测是否引入成功
• 3. 隐藏元素(.hide)，显示元素(.show)
• 4. 入口函数
• 5. jq 对象 和 DOM 对象转换
• 6. jq 选择器
• 7. 修改css样式
• 8. 筛选选择器
• 9. 鼠标事件
• 10. 类属性的添加，删除，切换

1. 引入CDN

链接地址

2. 检测是否引入成功

3. 隐藏元素(.hide)，显示元素(.show)

隐藏p标签

4. 入口函数

作用： 等待DOM加载完成后执行

 $(function() {
     // jq代码
 })

5. jq 对象 和 DOM 对象转换

   // DOM 对象
   var p1 = document.getElementsByTagName('p');
   
   // jq 对象
   var p2 = $('p');

   // DOM ==> jq
   var p3 = $(p1);

   // jq ==> DOM 通过取索引的方式
   var p4 = p2[0];

6. jq 选择器

7. 修改css样式

隐式迭代：jq默认会将所有匹配到的对象执行相同的操作
如下：会将所有匹配到的li标签字体改为24px
单个样式

多个样式

   $('div').css({
       width: '500px',
       height: '500px'
   })

8. 筛选选择器

9. 鼠标事件

   $('div').mouseover(function() {
       $('div').css('background-color', '#ccc');
   })
   $('div').mouseout(function() {
       $('div').css('background-color', 'pink');
   })

10. 类属性的添加，删除，切换

 .box {
     width: 300px;
     height: 300px;
 }

  // $('div').click(function() {
  //     $('div').addClass('box');
  // })
  // $('div').click(function() {
  //     $('div').removeClass('box');
  // })
  $('div').click(function() {
      $('div').toggleClass('box');
  })

来源：CSDN

作者：玩爬虫的小朋友

链接：https://blog.csdn.net/gklcsdn/article/details/103851764