【兼容IE8以下没办法】【虽不是Modern Web（不建议直接操作DOM）但也是一大利器】
个人推荐书【CSS 网站实录】【JavaScript Dom 编程艺术】【刚开始学不能太纠结机制机理原理因为工具是被设计出来用的】【保持简单简洁简约的心把活干出来】
seconds 是一种极限追求，在实际开发当中 需要迅速找到自己需要的内容。(用chm手册找就好了，用的熟自然快)
………………………………………………
padding 上下
padding 上右下左 正好顺时针
…………………………………………………………
浏览器中的 js 很关键的事件 =》 windows.onload = function(){/* code here */}
jQ 让我们不需要 在上面那个事件上纠结 =》 $(document).ready(function(){})
$('无论嘛选择器').html('内容').css('样式'); // 【幸福 o(*￣▽￣*)o 人生从此开始】
………………………………………………………………………………………………
jQ 对象和 DOM 对象 转换 =》 $('div').get(0);
DOM 对象和 jQ 对象 转换 =》 $(div); //包装进来即可。
………………………………………………………………………………………………
选择器基本和 CSS 通用。
就是注意一下，
> 直接子元素
+ 相邻元素
~ 相邻或者不相邻 强调同级元素
……………………………………………………………………………………………………
jQ筛选器
:first
:last
:even offset 0
:odd
:eq offset 0
:gt
:lt offset 0 右边是开区间的
input:not(checked) 不太明白。
内容筛选器
:contains('text')
:has('selector')
:empty 没有子元素（属性节点、文本节点）的空节点
:parent 包含子元素的节点 a:parent 先选a再筛选。
可见性筛选器
:hidden 界定 display:none type="hidden"（隐藏域）
:visible 界定 width=0;height=0（要除了:hidden以外这样去理解）、visibility:hidden;opacity:0（因为仍占据空间）
属性筛选器
[attr]
[attr='val']
[attr|='val'] 匹配val 比如要匹配 - 那么匹配结果也包含这种 ------------
[attr~='val'] 匹配以空格为分隔符的部分 比如要匹配 a_b （以_下划线代表a和b之间有空格）那么通过~=就可以匹配 a部分或者b部分，只要是空格分隔的。
[attr^='val']
[attr$='val']
[attr*='val']
[attr!='val']
子元素筛选器 这种筛选器实际都是往父级去匹配 （自下而上），元素后面的筛选器就是一种修饰。
:first-child 可以为每个父级元素（区别于:first只匹配一次）匹配第一个 a:first-child 这得理解为以a作为第一个孩子的元素都给匹配上。
:last-child
:only-child 按照每个父级元素匹配一个 a:only-child 理解为 只有以a作为唯一的孩子。
:nth-child(nValue) 按照每个父级元素匹配 从上往下数n个 offset=1
:nth-last-child(nValue) 从下往上数n个
表单元素选择器
:input 选的所有表单控件（特别包括textarea、select、button）
:text
:password
:radio $(":radio").attr("checked",true)
:checkbox
:submit
:reset
:file 文件上传
:button
表单元素筛选器
:enabled
:disabled 禁用的元素
:checked
:selected
对象上下文 this
$(this)
选择器最佳实践
// 实际上用文本去找不太好，内容选择器效率是最差的
// 按照结构 胜过 硬编码 ， id是最好的。
// $("h3:contains('男装')+.tag p:first-child:contains('第一类')")
$("#menu_con div.tag dd > p:first-child").css('color','#9932CC');
……………………………………………………………………………………………………
jQ工具箱
jQ attr() 和 removeAttr()
获得值 attr('属性')
通过设置回调函数把原来的值和新的值联系起来 attr(‘属性’,function(i,val){/* code */})
text() 单纯获取内容文本 合集
text(func(i,newVal){}) 拼接原来的值和新的值。
html() 获取内容包含结构（像块级 block）
val() 专门用在表单元素 获取value | 修改value
addClass() 添加样式
removeClass() 删除样式
toggleClass() 第一次等于 addClass 第二次等于 removeClass ，以此来实现隔行变换。
// index 匹配集合的索引
$('div').addClass(function(index,className){ if (-1 !== className.indexOf("oldclass")){
$(this).addClass('newClass')
}
});
css() 获取样式 / addClass的优先级较低。
细节1 background-color:blue; => rgb(0, 0, 255)
细节2 //字体大小都会转化成统px大小 em=>px
css(['width','height']) 传入数组获取宽度和高度。
// 以旧值作参考，修改旧值
css("width",function(index,value){
//value带单位，先分解
value = value.split('px');
//返回一个新的值，在原有的值上，增加50px
return (Number(value[0]) + 50) + value[1];
})
// 设置多个样式
css({
'font-size' :"15px",
"background-color" :"#40E0D0",
"border" :"1px solid red"
})
………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
元素数据存储
$.data(element,key,value)
element.data(key,value) //官方推荐
………………………………………………………………………………………………………………………………………………………………
DOM
$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
prepend() 插入前置内容
prependTo() 前置内容插入到
append() 插入追加内容
appendTo() 追加内容插入到
before() 批量往前插入元素
after() 批量往后插入元素
insertAfter() 元素往后插入到
insertBefore() 元素往前插入到
empty() 清空内容 除了自己
remove() 把自己从页面清掉 但绑定的事件丢失。
remove(":contains('3')") == filter(":contains('3')").remove()
detach() 仅从页面移除元素 而不是内存中移除 ，所以绑定的事件、元素内容都将得以保留。
clone() 浅拷贝节点 不拷贝事件
clone(true) 深拷贝节点 拷贝事件
Selector replaceWith()
Content replaceAll()
wrap() 外部包裹
unwrap
wrapAll() 粗暴包裹
wrapAll(func) 逐一批量包裹
wrapInner() 内部包裹
…………………………………………………………………………………………………………………………………………………………
children() 不含祖辈关系 只找父子
children(筛选)
find(筛选)
parent(筛选)
parents() 所有长辈 然后可以二次筛选
closest() 按条件查找至多一个长辈
next(筛选)
prev(筛选)
siblings() 同辈
add()
each(function(index,element){}) 遍历所有
…………………………………………………………………………………………………………………………………………
事件