Learn jQuery in y seconds

【兼容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){}) 遍历所有

…………………………………………………………………………………………………………………………………………

事件