【1.0】jQuery引入

【1.0】jQuery引入

【一】jQuery基本介绍

【1】概述

• 【优点】
  • jQuery是一个流行的JavaScript库，它提供了便捷的方法来选择和操作HTML元素
  • jQuery内部封装了原生的js代码，所以我们可以更少的书写代码实现操作

【2】使用

• 【使用方法】
  • 首先下载jquery到本地
    • 打开官网网站https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js
    • 打开是一堆乱码，将乱码复制到本地的js文件中
  • 再html中的head标签— <script> 的scr属性中
    • src=jquery.js
  • 接下来就可以在scr的属性中使用了

【二】jQuery基本语法

【0】学习内容

• 选择器
• 筛选器
• 样式操作
• 文本操作
• 属性操作
• 文档处理
• 事件
• 动画效果
• 插件
• each\data\Ajax

【1】基本语法

• jQuery(选择器).action()
  

• 我们将jQury简写成$ （$符号就代表着引用jQury）

• jQuery(选择器) ----> $(选择器)
  

【2】基本选择器

（1）元素选择器

• 【概念】用元素的名称作为选择器，选取所有匹配该元素名称的元素

• 【示例】

  //匹配我们的段落p
  $('p');
  

（2）ID选择器

• 【概念】使用属性值作为选择器，选取具有相同ID的唯一元素

• 【示例】

  //id相关是#
  //class类相关是 .
  $('#myElement');
  

• //注：我们拿到是一堆信息，如果想拿到标签对象，可以通过索引取值，其他的选择器也类似
  //jQuery对象转标签对象
  $("#d1")[0]
  // <div id="d1">…</div>
  

（3）类选择器

• 【概念】使用类名作为选择器，选取具有相同类名的元素

• 【用法】

  $('.myClass');
  

（4）属性选择器

• 【概念】使用元素的属性和属性值进行选择

• 【示例】

  //找到具有target属性的元素
  $('[target]');
  //选择具有herf属性并且以“https://”开头的所有链接
  $('a[herf^="hettp://"]');
  

（5）选择器组合

• 【概念】通过逗号分隔多个选择器，同时选择多个元素

• 【用法】

  //同时选择p段落标签，和myclass这个类
  $('p, .myClass');
  

（6）后代选择器

• 【概念】选择某个元素的后代元素（子，孙子…)

• 【示例】

  //选择id为myElement 下的段落元素
  $('#myElement p');
  

（7）子元素选择器

• 【概念】选择某个元素的直接子元素

  $('#myElement > p');
  

（8）下一个兄弟元素选择器

• 【概念】选择紧接着在指定元素后的下一个兄弟元素

• 【示例】

  //选择紧接在 "myElement" 元素后的下一个兄弟元素
  $('#myElement + div');
  

（9）后续所有兄弟元素选择器

• 【概念】选择指定元素之后的所有兄弟元素

• 【示例】

  //选择紧接在 "myElement" 元素后的所有兄弟元素中具有 "myClass" 类的元素
  $('#myElement ~ .myClass');
  

【3】组合选择器

• 【概念】通过使用多个选择器来选择元素的方法，通过组合不同的选择器，可以更精准地选取需要的元素

（1）并集选择器

• 【概念】有多个条件，找到这些条件都满足的选择器所匹配的元素

• 【示例】

  $("selector1, selector2")
  

（2）后代选择器

• 【概念】某个元素的后代元素（某一个标签的下一级标签以及下下代）

• 【示例】

  $("parent descendant")
  

（3）子元素选择器

• 【概念】某一个元素的直接子元素

• 【示例】

  $("parent > child")
  

（4）相邻兄弟选择器

• 【概念】选择某个元素的下一个相邻兄弟元素

• 【示例】

  $("element + sibling")