一、什么是jQuery及如何使用
1.1 jQuery 简介
jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。)，核心理念是write less,do more(写得更少,做得更多)
1.2 jQuery 和 Js 的区别
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库（框架），包含多个可重用的函数，用来辅助我们简化javascript开发。
注意：jQuery能做的javascipt都能做到，而javascript能做的事情，jQuer不一定能做到。
二、jQuery 的基本使用
2.1 jQuery 的入口函数
- 入口方式一
$(document).ready(function() { }); - 入口方式二
$(function() { }); 2.2 $(document).ready和window.onload 区别
windows.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即Javascript此时才可以访问网页中的任何元素。jQuery中的$（document）.ready（）方法注册的事件处理程序， 在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。
2.3 事件处理程序
- 事件源
JS方式：document.getElementById(“id”);
jQuery方式：$(“#id”);
- 事件
Js方式 :document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
事件区别：jQuery 事件不带on
- 事件处理程序
JS的书写方式：
document.getElementById(“id”).onclick = function(){ // 语句 } jQuery 的书写方式：
$(“#id”).click(function(){ // 语句 }); 2.4 jQuery 初探
jQuery 语法是主要为 HTML元素的选取编制的，可以对元素执行某些操作。
基本语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择器（selector）“查询”和“查找” HTML 元素
- jQuery的action() 执行对元素的操作
三、DOM对象与jQuery对象的转换
3.1 DOM原生对象转换为jQuery对象
3.2 jQuery对象转换为DOM原生对象
有两种方式
- jQuery提供get(index)方法
hello world!
- jQuery对象是类数组对象($(selector)[index])
hello world!
四、jQuery 选择器
4.1 CSS基本选择器
用法见下面的小例子：
HelloHiGood
World!Haha
4.2 层级选择器
hello world!
- Hi
- Ha
- God
I
LOVE
YOU
4.3 表单域选择器
表单域指网页中的input textarea select button元素。 jQuery中表单域选择器专门用于从文档中选择表单域
这里呢，小编就挑几个重要的选择器给大家演示一下就行了，其实，掌握前两种的选择器就够用了
Hello World！
4.4 表单域属性过滤选择器
eg：
我的爱好是:
游泳 画画 敲代码喜欢的城市：
4.5 伪类过滤选择器
根据索引值对元素进行筛选，类似于CSS的伪类选择器，以冒号(:)开头；并且和另外一个选择器一起使用（header animated除外）
hello
hi
good
- 11111
- 22222
- 33333
- 44444
你好
我好
大家好
4.6 内容过滤选择器
html文档中，元素的内容可以是文本或子元素
hehello
hehe
123我爱你
4.7 简单属性过滤选择器
helloworld小周末
123我爱你
老男孩明人不说暗话
4.8 子元素过滤选择器
注意：子元素过滤选择器必须某个选择器一起使用
- 悟空
- Alone
- 满满
- 黑白情书
五、小案例
5.1 实现多标签页效果
*{margin:0;padding:0;} ul li{float: left; list-style: none; width: 80px;height: 40px;line-height: 40px;cursor: pointer;text-align: center;} #container{position:relative;} #content1,#content2,#content3{position:absolute;top:40px;left: 0;width:300px;height:200px;padding:30px;} #tab1,#content1{background:pink;} #tab2,#content2{background:skyblue;} #tab3,#content3{background:orange;} 实现多页标签切换
- 关于我
- 个人经历
- 教育背景
六、dom的操作、事件
6.1 dom基本操作方法
html()，text()，val()，attr()，removeAttr()
6.1.1 html()
html() 方法返回或设置被选元素的内容 (inner HTML)
- 从前从前
- 因为爱所以爱
- 两颗不再相遇的行星
- 恋爱啦
6.1.2 text()
text()方法是取得或设置所有匹配元素的文本内容
- 从前从前
- 因为爱所以爱
- 两颗不再相遇的行星
- 恋爱啦
6.1.3 text（）方法和html（）方法区别:
text()用来设置dom节点的文本内容时（不识别标签元素，按照文本显示）; html()用来设置dom节点内容时（识别标签元素）。
6.1.4 val()
val()方法是设置或返回表单字段的值
- $(selector).val(value)
为标签元素添加值，如果标签元素有值，则修改相应的值
eg：- $(selector).val()
查找标签元素的value值
6.1.5 attr()
设置或返回被选元素的属性值，会覆盖原有属性
- $(selector).attr(attribute)
查找该属性所对应的属性值
eg：- $(selector).attr(attribute,value) 设置被选元素的属性和值
可以为该元素设置样式或者增加属性
eg：
6.1.6 removeAttr()
从字面意思解释就是 移除相应属性
eg：
helloworld
.box{width: 100px;height:100px;background:pink;} 七、jQuery的操作样式
7.1 $(selector).attr(attribute,value)
小编寄语：attr() 可以改变元素的现有样式，看下面的小例子
.one{width: 100px;height:100px;background:pink;} .two{width:200px;height:200px;background:orange;} 
7.2 $(selector).addClass(class)
小编寄语：这个意思就是在原有的基础上再添加一些其他的类，看例子：
.one{width: 100px;height:100px;background:pink;} /* 添加边框 */ .two{border:5px solid red;} /* 添加阴影 */ .three{box-shadow:5px 5px orange;} 
7.3 $(selector).removeClass(class)
注意: 移除一个或多个类
- 不传参 - 删除所有样式
eg：
hello world！
- 传参 - 删除指定样式
看例子：
eg:hello world！
7.4 $(selector).toggleClass(class)
给大家一个简单的记法： 有这个东西就删掉，没有就加上
这里就不举例子了，有心的你可以把 7.3 7.2 的东西 糅合一下就行了7.5 $(selector).hasClass(class)
这个比较简单，意思就是，检查有没有这个类，如果有返回true，没有返回false，这个就不举例子，你们可以尝试一下，这个不经常用.
7.6 css() 方法
设置或返回被选元素的一个或多个样式属性.前面小编也经常用这个方法来设置元素的属性，这里给出具体详解.
- css("propertyname"); // 获取样式的属性值
- css("propertyname", "value"); //设置单个样式
- css({"propertyname":"value","propertyname":"value",...}); // 设置多个样式
综合上面三条的例子：
八、jQuery遍历节点
8.1 parent() 方法
返回被选元素的直接父元素
hello world!
8.2 parents() 方法
返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
hello world!
8.3 children() 方法
返回被选元素的所有直接子元素
hello world!你好，世界！
8.4 find(elem) 方法
返回被选元素的后代元素，一路向下直到最后一个后代
- hello
- world
- hello world
- 你好，世界！
8.5 prev() 方法
返回被选元素的上一个同胞元素
- hello
- world
- hello world
- 你好，世界！
8.6 next() 方法
返回被选元素的下一个同胞元素
- hello
- world
- hello world
- 你好，世界！
8.7 siblings() 方法
返回被选元素的所有同胞元素
- hello
- world
- hello world
- 你好，世界！
九、操作DOM节点
9.1 DOM内部插入(或追加)数据
- append(content) -向每个匹配的元素内部追加内容或追加子节点
- appendTo(content)把所有匹配的元素追加到另一个指定的元素集合中
- prepend(content) 在被选元素的开头插入内容
- prependTo(content) 把所有匹配的元素前置到指定的元素集合中
以上四种情况的例子：
good！
9.2 jQuery外部插入
- after(content) 在每个匹配的元素之后作为兄弟节点插入内容
- before(content) 方法在被选元素之前作为兄弟节点插入内容
- insertAfter(content) 把元素插入到所有匹配的元素的后面
- insertBefore(content) 把元素插入到所有匹配的元素的后面
前两个例子：
- 水果
- 香蕉
- 葡萄
- 运动
- 跑步
- 打篮球
- 方向
- 东南
- 西北
- 水果
- 香蕉
- 葡萄
- 运动
- 跑步
- 打篮球
- 方向
- 东南
- 西北
9.3 jQuery删除元素
remove() - 删除被选元素（及其后代） empty() - 从被选元素中删除子元素，清空内容
- 水果
- 香蕉
- 葡萄
- 运动
- 跑步
- 打篮球
- 方向
- 东南
- 西北
小编分析：乍一看两张照片没什么区别，其实是不一样滴，remove 删除的比较彻底，而empty 删除的不是很彻底，第一张是remove删除后的结果，而另一张是empty删除的结果
9.4 jQuery替换元素
- replaceWith(content) 将匹配元素替换成指定的HTML或DOM元素
前面的元素是被替换元素,后面的元素是替换元素
- replaceAll(selector) 将元素替换掉 selector匹配到的元素
前面的元素是替换元素,后面的元素是被替换元素
eg：
HiGood！
9.5 jQuery克隆元素
- 语法： clone([Even1], [Even2])
- 解释一：无参数，只复制元素，不复制该元素的事件处理函数，
- 用法：$("p").clone().appendTo('.box1');
- 解释二： 有一个参数，true，复制元素及其本身的事件处理函数
- 用法：$("p").clone(true).appendTo('.box1');
- 解释三：有两个参数，true（第二个默认为true）不仅复制元素及其本身的事件处理函数而且会复制子元素
- 用法：$("p").clone(true, true).appendTo('.box1');
无参的例子：
Hello 
一个参数的例子：
Hello 
两个参数的例子：
Hello 你是我的小可爱
十、小案例
10.1 实现开关门效果
树形列表<<内容的主体
十一、总结
确实有点多，不过没关系，慢慢来！相信自己！