视频
1. 面试问题
1.1 美元符号$有什么作用？
1.2 正文中的()函数和正文中的.ready()有什么区别？
1.3 中有哪些类型的选择器？
2.上次内容审核
2.1 json概念：什么是json
Json( )js的对象表示是一种轻量级的数据交互格式，语法格式：'{"name1":,"name2":}'
数据以逗号分隔
大括号固定物体
方括号保存数组
2.2 JSON数据分析
JSON.parse(str)方法将json格式的字符串转换为js对象
JSON.(obj)方法将js对象转换为json格式的字符串；
三、本章内容
3.1 使用方法
3.2 选择器
3.2 公共选择器的应用
四、具体内容
4.1 简介
知道：
Query字面意思其实就是Query，是一个辅助开发的库。 它是继它之后又一个高质量的库，属于开源编程语言。 是数组包装
如果你想学得更快、更系统，最好采用边学边练（微课）的学习模式。
学完本教程后，进行实战练习将会有效：实战
Query使用户可以更方便地处理HTML（标准通用标记语言下的应用）、实现动画效果、方便地为网站提供AJAX交互。 还有一大优点就是它的文档非常全面，各种应用也有详细的描述，并且有很多成熟的插件可供选择。 它可以让用户的html页面保持代码和html内容分离，也就是说不需要在html中插入一堆js来调用命令，只需要定义id即可。
它是免费、开源的，并根据 MIT 许可证获得许可。 语法设计可以让开发更加方便，比如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等功能。 此外，还提供API供开发者编写插件。 它的模块化使用使开发人员可以轻松开发强大的静态或动态网页。
2006年1月，第一个版本发布，以其简洁、灵活的编程风格让人一见钟情。
开发以来，已经更新了十多个新版本，整理了《.js合集》供大家参考、下载和使用。
它已经成为一个非常流行的框架，并且具有良好的可扩展性，可以让你的工作变得更加轻松。
缺点：
1. 不向后兼容。 每个新版本都不与早期版本兼容。
2.插件兼容性不是很好，与上一点类似。
3.在同一个页面使用多个插件时，很容易遇到冲突，尤其是当这些插件依赖于同一个事件或者是明显的时候。
4.在大型框架中，核心代码库对动画和特效的支持相对较差。 但实际上这并不是问题。 目前有一个单独的 UI 项目和大量插件来弥补这一点。
源码框架图：
分析：
1、入口模块主要是创建对象。 这块其实比较绕，涉及到JS原型的概念。
2、底层模块 底层模块主要包括一些工具和方法，以及使用较多的比较底层的函数和方法。 比如()、()、()、()等，建议大家可以看看API手册。
3、功能模块
这应该是我们平时使用库比较多的方法。 比如aJax请求、动画、事件处理、样式设置和获取、属性设置和获取等，这些方法都依赖于底层模块和浏览器功能测试的工具和方法，主要用于浏览器检测和浏览器兼容性问题。 同时，功能模块的不同方法也取决于底层模块的不同方法。
4.2 使用方法
1.访问官网并下载新库。 目前的新版本是3.3.1。
（注意！-2.0以上版本不再支持IE 6/7/8）它不是新版本，而是根据您的项目需求选择合适的版本！下面说明我们使用1.8版本
介绍：
4.3 语法
语法是选择 HTML 元素并对所选元素执行某些操作。
基本语法：$().()
美元符号定义选择器 ( )“查询”和“查找”HTML 元素 () 对元素执行操作
4.4 选择器
选择器示例 解释 CSS 的示例
.class .intro 选择所有 class="intro"1 的元素
#id # 选择所有 id=""1 的元素
* * 选择所有元素2
p 全选
,div,p
选择所有元素并且
分区
选择范围内的所有元素
> div>p
选择所有其父元素是元素的
+div+p
选择紧随其后的所有元素
[][]选择所有属性为2的元素
[=值] [=] 使用 =""2 选择所有元素
[~=value] [title~=] 选择所有title属性包含单词“”2的元素
[|=] [lang|=en] 选择 lang 属性以 value="EN"2 开头的所有元素
:link a:link 选择所有未访问的链接 1
: a: 选择所有访问过的链接1
: a: 选择活动链接 1
:hover a:hover 当鼠标位于链接 1 上时选择
:focus input:focus 选择焦点为 2 的输入元素
::first- p::first- 选择每个
元素
元素
元素
元素
元素
元素的第一个字母
选择器示例 解释 CSS 的示例
::first-line p::first-line 选择每个
::first-child p::first-child 仅在以下情况下才指定
::p::在每个
::在p之后::在每个之后
::lang() p:lang(it) 选择一个lang属性的所有起始值=“it”
〜p〜ul选择
[^=value] a[src^="https"] 选择每个src属性值以“https”开头的元素3
[$=value] a[src$=".pdf"] 选择src属性值以“.pdf”结尾的每个元素3
[**=value*] a[src*="44lan"] 选择 src 属性值包含子字符串“44lan”3 的每个元素
:第一个类型 p:第一个类型
选择每个
:最后一个类型 p:最后一个类型
选择每个
:仅类型 p:仅类型
选择每个
:only-child p:only-child 选择每个
元素的第一行
该元素是其父元素的第一个子元素的样式。
在元素之前插入内容
在元素后面插入内容
元素
元素后面的每个 ul 元素
元素是其父元素的第一个
元素
该元素是其父元素之后的元素
元素
元素是其父元素的唯一元素
元素
元素是其父元素的唯一子元素
选择器示例 解释 CSS 的示例
:nth-child(n) p:nth-child(2) 选择每个
:第n个最后一个孩子(n)p:第n个最后一个孩子(2)
选择每个
:第 n 个类型 (n) p:第 n 个类型 (2)
选择每个
:第 n 个最后一个类型(n)p:第 n 个最后一个类型(2)
选择每个
:last-child p:last-child 选择每个
:root :root 选择文档的根元素 3
:empty p:empty 选择每个
：#news：选择当前活动的#news 元素（单击的 URL 包含该锚点名称）
:input: 选择每个启用的输入元素3
:input: 选择每个禁用的输入元素3
:input: 选择每个选定的输入元素3
:not() :not(p) 选择每个
:: :: 匹配用户选择或突出显示的元素3
:out-of-range :out-of-range 匹配指定范围之外的值
元素3
:in-range :in-range 匹配指定范围内的值
元素3
该元素是其父元素的第二个子元素
该元素是其父元素的第二个子元素，从下一个子元素开始计数
元素是其父元素的第二个
元素
该元素是其父元素的第二个
元素，从下一个子元素开始计数
元素是其父元素的下一个子元素。
元素（包括文本节点）
元素的元素
选择器示例 解释 CSS 的示例
:read-write :read-write 用于匹配可读可写元素3
:read-only :read-only 用于匹配具有“”（只读）属性 set3 的元素
: : 用于匹配可选输入元素3
: : 用于匹配具有“”属性set3的元素
:valid :valid 用于匹配输入值为 的元素
: : 用于匹配输入值非法的元素3
: ( txt ) 匹配并获取包含txt文本的元素
:empty 匹配并获取没有子元素或文本的元素
:has ( ) 匹配并获取包含选择器的元素
内容选择器：
案件：
我爱
百度
名称 描述
:first 获取第一个匹配的元素
:last 获取最后一个匹配的元素
:not ( ) 获取除匹配元素以外的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq (index) 匹配具有给定索引值的元素，从0开始计数
:gt (index) 匹配所有大于给定索引值的元素，从0开始计数
:lt (index) 匹配所有小于给定索引值的元素，从0开始计数
过滤器选择器：
案件：
0号线
1号线
2号线
3号线
4号线
5号线
名称 描述
:input 匹配并获取表单中所有的 input, , 和 元素
:text 匹配并获取所有文本框
：匹配并获取所有密码框
:radio 匹配并获取所有单选按钮
：匹配并获取所有复选框
: 匹配并获取所有提交按钮
:image 匹配并获取所有图像
:reset 匹配并获取所有重置按钮
：匹配并获取所有按钮
:file 匹配并获取所有文件域
：匹配并获取所有隐藏字段
名称 描述
：匹配并获取所有常用元素
：匹配并获取所有禁用元素
：匹配并获取所有选中的复选框
：匹配并获取下拉列表框的选中项
表单选择器：
表单属性选择器：
4.5 常用功能
层选择器说明
$(" ") 匹配并获取该元素中的所有后代元素
$(" > child") 匹配并获取元素中的子元素
$("prev + next") 匹配并获取紧接在 prev 元素之后的下一个元素
$("prev ~ ") 匹配并获取prev元素之后的所有元素
选择器的demo使用了三个常用的函数： val( )：用于获取或设置元素值属性的值 html( )：用于获取或设置元素标签中的所有信息，包括标签和文本，等价to DOM size( ): 用于获取集合/数组的长度
4.6 图层选择器
层次选择器层次选择器通过DOM对象之间的层次关系来获取并匹配元素，例如后代元素、子元素、相邻元素等。
4.7 文档就绪事件
以前我们使用文档时，执行顺序是从上到下执行的。 我们可以在执行完html后执行我们的js吗？ 通过这种方式，我们的js代码以后就可以放在任意位置了。 向上。 这是为了防止 (js) 代码在文档完全加载（准备好）之前运行。
如果在文档完全加载之前运行该函数，操作可能会失败
在第一个就绪函数中：
第二种简洁的写法（效果同上）：
4.8 与dom的转换
---->dom
提供两种将对象转换为DOM对象的方式，即[下标]和get(索引)
$().准备好((){
// 开始写代码...
});
$((){
// 开始写代码...
});
例2.7
例2.7
总结：
是数组包装，对象和DOM对象相互转换
1、使用对象的相关方法获取HTML元素，此时得到的就是DOM2。 该对象实际上是封装DOM对象生成的对象。 3. .("btn") 得到一个DOM对象，不能调用 中的 html() 和 val() 方法； 4. $("#btn") 获取的是一个对象，不能调用DOM中的 和 value 属性。 5、对象可以通过数组下标[index]和get(index)方法获取DOM对象。
4.9 案例总结
情况 4.8.1：功能，选择器测试：
例2.1
百度网易
影响：
4.()方法的使用
在js中，我们使用循环遍历的方式是for循环或者while循环，但是如果是通过来遍历dom对象，并且对对象的操作不是很方便，库就为我们考虑了这件事，并且每种方法都很方便的解决了这个问题
我们通过一个案例来看看各自的用法
案例4.10.1：淘宝导航栏的制作使用起来会非常方便
影响：
案例：提交前判断所有表单内容不能为空
影响：
5. 章节总结
5.1 使用方法
首先导入库，使用选择器找到目标标签，并对标签进行操作
3.2 选择器
大致可以分为基本选择器、层次选择器、过滤选择器
3.2 公共选择器的应用
6. 面试问题解答
6.1 美元符号$有什么作用？
答：其实美元符号$只是“”的别名，它是一个选择器，代码如下：
$().准备好((){
});
当然，你也可以用它来代替$，如下代码：
（）。准备好（（）{
});
正是通过这个美元符号，实现了各种灵活的DOM元素选择。 例如，$("#main") 选择 id 为 main 的元素。
6.2 body中的()函数和body中的.ready()有什么区别？
答：()和.ready()的区别有以下两点：
1.我们可以在页面中使用多个.ready()，但只能使用一次()。
2. .ready()函数会在页面DOM元素加载完成后调用，()函数会在所有关联资源（包括图片和音频）加载完成后调用。
6.3中有哪些类型的选择器？
答：从我的认知来看，选择器有3种类型，如下：
大致分为：基本选择器、分层选择器、表单选择器 基本选择器：id选择器、标签选择器、类选择器等 分层选择器：如：$("表单输入")选择所有表单元素 输入元素$("# main > *") 选择所有 id 为 main 过滤器选择器的子元素：例如： $(tr:first") 选择所有 tr 元素的第一个 $("tr:last") 选择器的最后一个表单选择器tr 元素：例如：$(":input") 选择所有表单输入元素 $(":text") 选择所有文本输入元素
7. 作业练习
7.1 使用实现判断表单内容为空不允许提交
7.2 对文档中的所有选择器实现测试
8.预览下一章
预览下一章属性和事件
第 1 章 - 选择器
5. 本章小结 6. 面试问题解答 7. 作业练习 8. 预览下一章内容
