一、jQuery基础

0）jQuery概念

一个JavaScript库，用以简化JS开发

  • jQuery封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
  • jQuery本质上就是一些JS文件，封装了JavaScript常用的原生功能代码
1）jQuery快速入门

使用步骤

  • 下载jQuery

    目前jQuery有三个大版本

    • 1.x：兼容ie678，使用广泛，官方BUG维护，不新增功能【最终版1.12.4(2016.5.20)】
    • 2.x：兼容ie678。官方BUG维护，不新增功能【最终版2.2.4(2016.5.20)】
    • 3.x：不兼容ie678，仅支持最新的浏览器，官方主要更新维护版本。很多古老的jQuery插件不支持【最新版3.4.1(20202.4.10)】

    jquery-3.4.1.js 与 jquery-3.4.1.min.js文件的区别

    • jquery-3.4.1.js：开发版本。给程序员阅读的，有良好的缩进与注释==【读源码学习用】==
    • jquery-3.4.1.min.js：生产版本、程序中使用的，没有缩进，体积小。程序加载更快==【程序中使用】==

  • 导入jQuery的相关JS文件

    • 导入jquery-3.4.1.js文件到js目录中

  • 进行使用

2）jQuery对象与JS对象的区别与转换

  • JavaScript对象 ->> jQuery对象

    • $(JavaScript对象)

  • jQuery对象 ->> JavaScript对象

    • jQuery对象[索引]

    • jQuery对象.get(索引)

3）jQuery核心知识-选择器

选择器：用以筛选/获取具有相似特征的元素（标签）。jQuery中$("字符串")字符串就是通过选择器来获取元素对象的

基本语法

  1. 事件绑定【事件注册】
  2. 入口函数【类似JS中的页面加载完成后的onload()方法】
  3. 样式控制

选择器分类

  1. 基本选择器
  2. 层级选择器
  3. 属性选择器
  4. 过滤选择器
  5. 表单过滤选择器
4）DOM操作
  1. 内容操作
  2. 属性操作
  3. CRUD操作
5）案例

二、jQuery选择器

1）基本选择器

  1. 标签选择器（元素选择器）

    语法：$("html标签名")：获得所有匹配标签名的元素

  2. id选择器

    语法：$("#id值")：获得与指定id值匹配的元素

  3. 类选择器

    语法：$(".class属性值")：获得与指定的class属性值匹配的元素

  4. 并集选择器

    语法：$("选择器1, 选择器2...")：获得多个选择器匹配的元素

2）层级选择器

  1. 后代选择器（选择子孙中符合匹配的元素）

    语法：$("选择器1 选择器2")：获得与选择器1匹配的元素内部下的所有与选择器2匹配的元素【子代的、孙代的。。。】

  2. 子选择器（仅选择一级子代中符合匹配的元素）

    语法：$("选择器1 > 选择器2")：获得与选择器1匹配的元素内部的的所有的与选择器2匹配的元素【仅直接子代】

3）属性选择器

  1. 属性名称选择器

    语法：$("标签A[属性名]")：获得包含指定属性的选择器

    • //选择属性名为title的元素
$("div[title]").css("backgroundColor", "#f0932b");

  2. 属性选择器

    语法：$("标签A[属性名 = '值']")：获得包含指定属性匹配指定值的选择器

    • // 属性名称选择器选择属性名为title、其值为test的div标签
$("div[title = 'test']").css("backgroundColor", "#f6e58d");

// 属性名称选择器选择属性名为title、其值不为test的div标签
    // [attribute!=value]匹配属性值不是指定值的元素
$("div[title != 'test']").css("backgroundColor", "#eb4d4b");

b4").click(function () {
// 属性名称选择器选择属性名为title、以'te'作为属性值开始的div标签
    // [attribute^=value]匹配以某些属性值开始的元素
$("div[title ^= 'te']").css("backgroundColor", "#4834d4");

b5").click(function () {
// 属性名称选择器选择属性名为title、以'est'作为属性值结束的div标签
    // [attribute$=value]匹配以某些属性值结尾的的元素
$("div[title $= 'est']").css("backgroundColor", "#6ab04c");

b6").click(function () {
// 属性名称选择器选择属性名为title、含有es属性值的div标签
    // [attribute*=value]匹配含有某些属性值的元素
$("div[title *= 'es']").css("backgroundColor", "#22a6b3");

  3. 复合属性选择器

    语法：$("标签A[属性名1 = '值1'][属性名2 = '值2']")：获得多个属性条件的选择器

    • //选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色
$("div[id][title *= 'es']").css("backgroundColor", "#c7ecee");
4）过滤选择器

  1. 首元素选择器

    语法：:first —>>获得选择的元素中的第一个子元素

  2. 尾元素选择器

    语法：:last —>>获得选择的元素中的最后一个子元素

  3. 非元素选择器

    语法：:not(selector) —>>不选择指定内容的元素

  4. 偶数选择器

    语法：:even： 偶数02468…从0开始计数，获得第偶数个元素

  5. 奇数选择器

    语法：:odd： 奇数13579…从0开始计数，获得第奇数个元素

  6. 等于索引选择器

    语法：:eq(index)：获得指定索引的元素

  7. 大于索引选择器

    语法：:gt(index)：获得大于指定索引的元素 great than

  8. 小于索引选择器

    语法：:lt(index)：获得小于指定索引的元素 less than

  9. 标题选择器

    语法：:header：获得指定标题的元素（h1~h6）。固定写法

5）表单过滤选择器

  1. 可用元素选择器

    语法：enabled：获得可用元素

  2. 不可用元素选择器

    语法：disabled：获得不可用元素

  3. 选中选择器

    语法：:checked：获得单选/复选框中的元素

  4. 选中选择器

    语法：:selected：获得下拉框中的元素

三、jQueryDOM操作

1）内容操作
  1. html()方法：获得/设置元素对象的标签体内容【类似于JS对象的innerHTML属性】
    • 如<a id = "a1"><font>内容</font></a> 则 $("#a1").html()获取的是<font>内容</font>
  2. text()方法：获得/设置元素对象的标签体纯文本内容
    • 如<a id = "a1"><font>内容</font></a> 则 $("#a1").text()获取的是纯文本内容，不会获取到标签
  3. val()方法：获得/设置元素的value属性值
2）属性操作

  1. 通用属性操作

    • attr()方法：获取/设置元素对象的属性值

    • removeAttr()方法：删除属性

    • prop()方法：获取/设置元素对象的属性值

    • removeProp()方法：删除属性

      attr系列与prop系列的区别

      • 如果操作的是标签已经预定义的固有的属性，建议使用prop系列方法【如果是用attr系列的方法可能获取不到】
      • 如果操作的是标签自定义的属性，建议使用attr系列方法

  2. 特殊的属性操作---对class属性操作【class属性非常常用，所以用下面是哪个方法来进行简化】

    • addClass()方法：添加class属性值

    • removeClass()方法：删除class属性值

    • toggleClass()方法：切换class属性

      描述：toggleClass("one")：进行判断，如果元素对象存在属性class = "one"，则删除此条属性。如果不存在，则添加此条属性键值对

    • css()方法：获取/设置属性以及其值

3）CRUD操作

  1. clone()方法：复制该元素

    • 对象.clone(对象2)：将对象2复制到对象内部，追加在最后面

  2. append()方法：父元素将子元素追加到末尾

    • 对象1.append(对象2)将对象2添加到对象1内部，并且在末尾

  3. perpend()方法：父元素将子元素添加到开头

    • 对象1.perpend(对象2)将对象2添加到对象1内部，并且在开头

  4. appendTo()方法：父元素将子元素追加到末尾

    • 对象1.appendTo(对象2)将对象1添加到对象2内部，并且在末尾。与append方法相反

  1. after()方法：添加参数元素到指定元素的后边

    • 对象1.after(对象2)：将对象2添加到对象1的后边，他们俩是兄弟关系

  2. before()方法：添加参数元素到指定元素的前边

    • 对象1.before(对象2)：将对象2添加到对象1的前边，他们俩是兄弟关系

  3. insertAfter()方法：

    • 对象1.insertAfter(对象2)：将对象1添加到对象2对象后边，兄弟关系

  4. insertBefore()方法：

    • 对象1.insertBefore(对象2)：将对象1添加到对象2对象前边，兄弟关系

  1. remove()方法：移除对象

    • 对象.remove()：将对象删除

  2. empty()方法：清空掉该元素下的所有的后代元素

    • 对象.empty()：将该元素的所有后代元素清空。==保留该对象以及其属性节点==