对jq能熟练运用后在回头发现，曾今的坑其实这两本书多多少少都能提到，当时知道有这两本好书，但是自己却没看，如今在回首，真的觉得挺好，作为读书笔记来分享给大家，也是复习总结查漏补缺。本文以JQ来简写JQuery，锋利的jq v1.3 jq权威指南v1.8 主要是由于现在更新太快，这两个结合讲2.0以下的jq应该还算ok，把这两本经典柔和一下，就我而言觉得初学者学习锋利的jq是个很好的选择，对初学者很友好

库和框架？？

JQ是一个JavaScript的类库，vue、angular这些是框架，

类库：类库可以解决一系列常见编程任务,封装了方法简便了操作的一个工具集合
框架： 框框嘛。。简而言之就是大神写的东西，你要按照他们的规则，约束就能实现相对应的功能，也是一个类库的集合体

JQ有什么优势？

本书说道：
JQ强调的理念是写得少，做的多（write less，do more）这句话简直是缩影

• [x] 轻量级 ：v3.20 min版：85k
• [x] 强大的选择器：利用选择器可以拿到各种对象
• [x] 可靠的事件处理机制：处理事件时，在预留退路、循序渐进，和非侵入式的编程思想。
• [x] 出色的DOM封装：封装了方法让大家能够简单的使用
• [x] 完善的Ajax：在里面做了很多兼容和HMLHttpRequest的处理
• [x]** 不污染顶级变量** JQ只建立一个JQuery对象，所有函数方法都在这个对象之下，别名：$，可随时交出控制权，也就是个类库是用$可以快速让给别的类库
• [x] 出色的浏览器兼容性：用JQ从来不用担心什么火狐用getAttribute才能获取之类的
• [x] 隐式迭代： 这个意思就是$('div')它会返回所有的div的集合数组，这样就可以少去很多循环
• [x] 行为层与结构层的分离：HTML结构、CSS表现、JavaScript行为 方便维护
• [x] 丰富的插件库：遇到问题好多同学第一想到就是找个插件吧（哈哈）
• [x] 支持链式调用：要注意代码书写规范，好玩还很炫酷
• [x] 完善的文档丰富的插件库
• [x] 开源

这也就是为什么JQ久盛不衰的原因了

window.onload 与$(document).ready() 对比（重点：面试常客）

$(function(){}) 是$(document).ready()简写

为什么要有这什么onload 什么ready：如果要写代码在头部，dom还没被渲染，自然操作不了DOM，想要操作DOM就放在底下或者加这些，大致意思就是等待加载好了之后的意思

两者对比思维导图

链式操作书写规范

要好好的利用这个链式操作会简便很多，简单的原理就是每次操作返回了this然后可以进行下次操作
个人建议不要链太长，最好是每链一个就换个行,
注意分号的使用

$('.coderlfy').addClass('go')
.click(function(){...})
.hide();

JQ对象？？DOM对象？？

JQ 对象就是通过JQ包装DOM对象后产生的对象
DOM对象就是文档对象模型，可以想象成一棵树，树里有很多标签啥的，可以操作

JQ与DOM对象相互转换：通过$()这个工厂方法进行封装成JQ对象，只有JQ才能操作JQ的函数方法

var dx      //这是一个dom对象
var $dx     //这是一个JQ对象
//dom转JQ
$(dx)
//JQ转DOM
$dx[0]

JQ和其他库冲突时该怎么办？？

这个问题曾今笔者被问过，嘎嘎，印象深刻

1. 通过jq.noConflict() 改名

var $JQ = noConflict();// $被交出控制权。$JQ顶替$

2. 不想改名怎么办？还想不冲突？有两种方法

//第一种
JQuery.noConflict()// 首先，交出控制权
JQuery(fucntion($){
    //内部就能使用$了
})

//第二种 匿名函数
JQuery.noConflict()// 首先，交出控制权
(function($){
    //内部使用$
})(jQuery);

3. JQ先导入，不想冲突？
   如果是JQ比其他先导入，直接使用jQuery不用交出控制权

可靠的事件处理机制？？

在说优点的时候就已经说到了，简述一下：如果之前用JQ找到的一个对象被删除了，它在内部会先做一个判断是否存在，在运行代码，减少报错，增加执行效率

JQ选择器

这个选择器很多，大家选择着看

JQ选择器种类

css样式有多少，JQ就有多少应用也很简单

基本选择器：

层次选择器：

简单过滤选择器

内容过滤选择器：

tip：在 :contains(text) 内容过滤选择器中，如果是查找字母，则有大小写的区别

可见性过滤选择器：

属性过滤选择器：

子元素过滤选择器：

表单对象属性过滤选择器

表单选择器

打脸中

在这里想说：知识很重要，但是尊重别人的劳动成果更重要，总结后才发现没想到写这些表能这么累，写了一半，后来选择了无情的复制，这个表出自《jQuery权威指南（第二版）》我做了点修改，所有的东西都是从《锋利的jQuery（第二版）》《jQuery权威指南（第二版）》和自己的想法来做的读书笔记

JQ操作Dom

在原生js中,Dom操作分为三个方面，即DOM Core（核心）、HTML-DOM 和CSS—DOM

//通过锋利中的例子让大家了解，这些大家肯定都用过
//DOM Core 
var xx = document.getElementById('coderlfy');//获取DOM Core 对象
xx.getAttribute('src')//通过DOM Core 获取属性

//HTML-DOM
xx.src//就是提供了一些简明的几号来描述HTML元素的属性

//CSS-DOM
xx.style.color = 'red';//通过设置和获取style对象的各种属性来进行改变

++ 元素属性操作 ++：

1. 获取元素属性：通过Attr(name)来进行查找属性
2. 设置元素属性：设置单个属性：Attr(key,value) 设置多个属性 attr({key0:value0, key1:value1})
3. 删除元素属性：通过removeAttr(name)

说道这个Attr()，刚学习的时候总是把它和css()搞混,其实Attr就是弄这个元素上的属性，而css就只设置样式等等的![](zzzz)//属性就是标签上的id/src这些

++获取和设置元素++：

1. 获取和设置元素内容

// 没参数的时候是获取，有参数的时候是设置
html()//获取html内容
text()//获取文本内容

html()和text() 这个就像是原生中的innerHTML和innerText
html能识别标签，text不能

++元素样式操作++：

1. 直接设置元素样式值: 通过css()和Attr()用法一样
2. 增加元素类别：通过addClass(className className1...) $("html").addClass('coderlfy')
3. 切换元素 CSS 类别：使用 toggleClass(class)
4. 删除元素的css类别：removeClass([class]),可以删除多个，不加参数就是删除全部$("html").removeClass("coderlfy");

++页面元素操作++：

1. 创建节点

var $div = $("<div>sss</div>");
$("body").append($div)

2. 内部插入节点

append()：每个匹配的元素内追加内容
append(function(index,html){}) index是对象在这个集合中的索引值，html是要插入的html

//这部分本来想用图片但是画的太丑了还是用代码来展示更直观些

//html
<p>前端水好深 </p>

//JQ
$('p').append('<b>国足都赢了韩国，还不撸起袖子干</b>')
//结果：
<p>前端水好深 <b>国足都赢了韩国，还不撸起袖子干</b></p>

appendTo(): 把所有匹配的元素追加到指定的元素中

//html
<p>coder</p>

//JQ
$('<b>lfy</b>').append('p')
//结果：
<p>coder <b>lfy</b></p>

prepend(): 表示插入目标元素内部前面的
内容

prependTo(): 和appendTo()一样啊

prependTo(function(index, html){})

//这部分本来想用图片但是画的太丑了还是用代码来展示更直观些

//html
<p>和append使用方式一样 </p>

//JQ
$('p').prepend('<b>一样的使用方式</b>')
//结果：
<p><b>一样的使用方式</b> 和append使用方式一样 </p>

2. 内部插入节点

after()：在有每个匹配的元素之后插入内容

//html
<p> 外部插入</p>
//JQ 
$('p').after('<b>外部</b>')
//结果
<p>外部插入</p><b>外部</b>

insertAfter()：将所有匹配的的元素插入到指定的元素后面

//html
<p> 外部插入</p>
//JQ 
$('<b>外部</b>').insertAfter('p')
//结果
<p>外部插入</p><b>外部</b>

before()：在每个匹配的元素之前插入内容

//html
<p> 外部插入</p>
//JQ 
$('p').before('<b>外部</b>')
//结果
<b>外部</b><p>外部插入</p>

insertBefore()：将所有匹配的的元素插入到指定的元素前面

//html
<p> 外部插入</p>
//JQ 
$('<b>外部</b>').insertBefore('p')
//结果
<b>外部</b><p>外部插入</p>

3. 复制元素节点

clone();无参数是复制dom元素，参数为true时时把就可以复制元素的所有事件处理

4.替换元素节点

replaceWith(content)----该方法的功能是将所有选择的元素替换成指定的 HTML 或 DOM 元素，其中参数
content 为被所选择元素替换的内容

//html
<p>111</p>
//JQ
$('p').replaceWith('<b>替换</b>')
//结果
<b>替换</b>

replaceAll(selector)---该方法的功能是将所有选择的元素替换成指定 selector 的元素，其中参数 selector 为需要
被替换的元素

//html
<p>111</p>
//JQ
$('<b>替换</b>').replaceAll('p');
//结果
<b>替换</b>

5.包裹元素节点

wrap(html/elem/fn);参数为html：字符串代码，用与生成元素并包裹所选元素

unwrap():无参数,移除所选元素的父元素或包裹标记

//html 
<strong>包裹</strong>
//JQ
$('strong').wrap('<b></b>')
//结果
<b><strong>包裹</strong></b>

wrapAll(html/elem/fn)：把所有选择的元素用单个元素包裹起来

//html 
<strong>包裹</strong>
<strong>包裹</strong>
//JQ
$('strong').wrapAll('<b></b>')
//结果
<b>
    <strong>包裹</strong>
    <strong>包裹</strong>
</b>

wrapInner(html/elem/fn):把所有选择的元素的子内容 ( 包括文本节点 ) 用
字符串代码包裹起来

//html 
<strong>包裹</strong>
//JQ
$('strong').wrapInner('<b></b>')
//结果
<strong><b>包裹</b></strong>

6. 遍历元素

each(callback) 回调函数可以接受一个形参 index，从零开始

$('li').each(function(index){...});

7. 遍历节点

children() 取得匹配元素的子元素集合

next() 取得匹配元素后面紧邻的同辈元素

prev() 取得匹配元素前面紧邻的同辈元素

sibling() 取得匹配元素前后所有同辈元素

closest() 取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素，如果什么都没有则返回一个空的JQ对象（简单讲就是找最近的匹配的父级）

8. JQ的 CSS-DOM 操作

css() height()有参数设置无参数获取高度 width()

offset() 无参数，获取元素在当前视窗的相对偏移，返回对象top和left，他只对课件元素有效

var offset = $('div').offset; // divoffset
var left = offset.left; // 获取左偏移
var top = offset.top; // 获取右偏移

position() 无参数，作用是获取元素相对与最近的一个position样式属性设置为relative 或者absolute的祖父节点的相对偏移，和offset一样返回也是top和left用法一样

scrollTop()和scrollLeft有参数是设置滚动条到指定位置------- 两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。

$('textarea').scrollTop(300);//元素的垂直滚动条滚动到指定位置
$('textarea').scrollLeft(300);//元素的水平滚动条滚动到指定位置

The End

天哪，总结好累啊，感觉好像后没啥但是知识点也好多，学习前端要抱着秃头的精神去学习！！！