sdre

1. 没写window.onload，xxx.getElementByTagName会报错， xxx必须有ID或者为document。

2.jQuery.noConfict() :  

①先导其他库：

~

jQuery(function(){...用jQuery(" ").xxx...})

$(" ")..其他库

~

jQuery(function($){...用$(" ").xxx...})

$(" ")..其他库

var $j = ~

$j(function(){...用$j(" ").xxx...})

$(" ")..其他库

~

(function($){

$(function(){ ...用$(" ")})

});

$(" ")..其他库

②先导jQuery:

jQuery(function(){ 直接用jquery})

$(" ")..其他库

3.选择器

(1). 基本选择器

(# ) (. ) (  ) (*) ( , , , )  ： id / class / 标签 / 多种标签

(2). 层次选择器（xxOyy）

( )(>)(+)(~): xx所有的后代yy / xx的子元素yy /  xx后的弟弟yy / xx后的所有弟弟yy

(3). 基本过滤选择器 （div: xx    索引从0开始）

:first/last : 组内第一个 / 最后一个元素

:not(selector) : 不为selector的div

:even/odd   :组内偶数 / 奇数

:eq / gt / lt (index) :组内等于 / 大于 / 小于index的

:header / animated / focus ： 标题/动画/获取焦点

 (4). 内容选择过滤器

:contains("string") ：文本包括string的

:empty / parent  : 不含 / 含有子元素或文本的

:has(selector)  ：后代有selector的父

(5). 可见性过滤选择器

:hidden ： 不可见得: input type="hidden"  /  div style="display:none / visibility:hidden"

:visible  ：  可见

(6). 属性过滤选择器 

[attr]   ： 有attr属性的

[attr = / != value]  ：attr值为 / 不为value的；

[attr ^= / $= value ]    ：attr值以value开始 / 结束

.. *= ..  ： 含有

... |= ..   ： 等于value 或前缀为前缀（value-xxx）

... ~= ...  ：值为以空格分隔的数组且数组中包含value字符串

[attr1][attr2][attr3] : 多个

(7).子元素过滤选择器（索引从1开始，：前加空格）选子元素

：nth-child( index / even / odd / 3n / 3n+1) ： 每个父亲索引为  index / 偶 / 奇 / 3倍数 / 3倍加一 的子元素

：first /last /only -child  ：  每个父亲 第一个 / 最后一个 / 唯一 的子元素

(8). 表单对象属性过滤选择器

：enable / disable ： 可用 / 不可用元素

：checked     ： 被选中的（单选框 复选框）

：selected     ： 被选中的（下拉列表）

(9).表单选择器

：input   : 所有（input textarea select button）

：text     : 单行文本框

：password / radio / checkbox :  密码框 / 单选框 / 多选框

：submit / image / reset / button   ：提交按钮 / 图像按钮 / 重置按钮 / 所有按钮

：file   ：上传域

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

4.选择器中. # ( ] 等特殊字符需要转义  ：    \\[1\\]

5.伪类清除浮动

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{zoom:1} //兼容ie67

7.text-decoration:none;

8. 给宽；  margin : 上空高 auto；

 9.fontsize可%

三。dom

1.创建节点：

元素文本属性 var $xx = $("<li tittle='香蕉'>香蕉</li>")

2.插入节点(可用作移动：2插到3后)

$("p").append("xx")  : <p>啊啊啊xx<p>

$("xx").appendTo("p")    :<p>啊啊啊xx<p>                          （都是插在本标签的最后，区别：主被动）

$("p").prepend("xx")    :<p>xx啊啊啊<p>

$("xx").prependTo("p")     :<p>xx啊啊啊<p>                         （都是插在本标签的最前，区别：主被动）

$("p").after("xx")       :<p>啊啊啊<p>xx

$("xx").insertAfter("p")           :<p>啊啊啊<p>xx                     （都是插在标签外的后，区别：主被动）

$("p").before("xx")       :xx<p>啊啊啊<p>

$("xx").insertBefore("p")           :xx<p>啊啊啊<p>                     （都是插在标签外的前，区别：主被动）

3.删除节点

    detach：  同remove但再用后绑定事件还有效

   empty： 清空的意思 不返回

  remove :返回被删除的节点（可留以后用：绑定事件无效）

4.复制节点

 clone(boolean)  : 默然false， true意为同时复制元素中所绑定的事件。

5.替换节点

$(a).replaceWith（b） = $(b).replaceAll(a)  :用b替换a 绑定事件会消失。

6.包裹节点

$(a).wrap(b) :用b标签（"<b></b>"）把a包裹起来

$(a).wrapAll(b) :所有a合并到第一个a后,用b包裹所有a

$(a).wrapInner: a内加b包裹所有子元素

7.获取设置删除属性

获取 .attr("属性名")；

设置 .attr("属性名”，"属性值"）  /  .attr("名1":"值1" ，"名2":"值2"）；

删除 .removeAttr("属性名")；

1.6：prop():获取或设置匹配集里第一个元素的属性，removeProp删除

8.样式操作

可以class为属性名用attr获取更改 也可用 。addClass（“class名”）添加新类。（attr是覆盖，addClass是添加）

removeClass("类名1 类名2 类名3...")

toggleClass("类名1")：切换类名1（有/无）

hasClass("类名2")：有无类名2(true / false)

9.html 、文本、值

获取设置标签里所有内容（包括标签）：.html()

获取设置标签里所有文本（不包括标签） ：text()

值: 获取设置值。 

.defaultValue 默认值;

选中select checkbox radio的选项：

$(select).val("option里的内容")；多选数组：(["op1","op2","op3"]);

$(":checkbox").val(["value1","value2","value3"]);

$(":radio").val(["value2"]);

也可用attr将要选中的选项的selected/checked属性设置为true

10.遍历节点

.children() ：子元素

.next():紧接着的弟弟

.prev() ： 紧接着的哥哥

.siblings() ：所有兄弟

.closest()  ：从自身开始向上匹配，匹配到就返回，若一直没找到 返回空的jQuery对象 区别parent(父亲) 和 parents（众祖先）

11.CSS-DOM

    .css() ： 可获取设置，用法同attr.多个： （{"background-color":"#666", ...}）不加引号需要用驼峰式 。.height/.width 取得直接宽高，css方法取得auto

    .offset() ：元素在当前视窗的偏移 ：.left / .top

    .position ：元素相对于最近的一个为relative或absolute的祖先节点的偏移 ： .left / .top

 获取和设置滚动条的位置  ：.scrollTop() 距离顶端  .scrollLeft() 距离左侧。

四。事件和动画

1.widow.onload 和 $(document).ready()区别

1)执行时机

window.onload = function(){//..} 在所有元素加载完后执行 == $(window).load(function(){//...})，$(document).ready()在DOM节点加载完后执行 ；

2)执行次数

window.onload = one会覆盖前面的函数，只能写成window.onload=function(){one();two();..}; ready可以写很多次；

3）ready可简写

$(document).ready(function(){//..})  == $(function(){ //..}) == $().ready(function(){ //...})  $()不写默认document

2.事件

1）绑定 ：

.bind（/事件类型["click"]/, /event.data[可选]/，/绑定函数[fn]/） click、mouseover等经常用的可简写 .click(function(){});

2)合成 ：

hover(fn1,fun2); 悬停 / 离开 替代mouseenter / mouseleave；  toggle(fn1,fn2,fn3...)第n次点击

3）冒泡（从下到上）：

事件对象：绑定事件function（event）{}里的event在事件响应后被创建只对该函数有效，函数执行完后销毁。

停止事件冒泡： event.stopPropagation()

阻止默认行为：event.preventDefault()

同时阻止冒泡事件和默认行为： return false;

利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。ul e.target比li this更好：少遍历、新增li不用重新绑定。

4）捕获（从上到下）：

原生。       .addEventListener("click",function(e){ alert("parent事件被触发，"+e.target.id);},true) :第三个参数false为冒泡，true为捕获，默认false

5)对象属性：

event.type: 事件属性[click]

event.preventDefault() :阻止默认事件

event.stopPropagation()：阻止事件冒泡

event.target ：获取出发事件的元素

event.relatedTarget ：存在过渡的事件的相关主体之一，对于mouseout：event.relatedtarget指向将进入的页面元素==event.toElement；而mouseover, 指向的是刚掠过的页面元素 == event.fromElement。

event.pageX/Y ：鼠标当前相对于页面的坐标

event.which ：在鼠标事件中获取鼠标左1、中2、右3键；在键盘事件中获取键盘的按键。

event.metaKey：键盘事件中获取<ctrl>键。

6）移除：

unbind（）： 1）无参数，全删2）事件类型，删该类型["click"] 3）事件类型+处理函数，则只删该函数。

one（）：一次性，用法同bind。

7）模拟操作： 

$(a).trigger(b) ：模拟用户触发a的b操作。b可为浏览器支持操作也可为自定义操作；还可传参给响应函数  ： .trigger("myclick", ["aaa","ooo"]); 此方法不仅会触发事件还会执行默认操作，例：focus不仅触发绑定事件也会让目标元素获得焦点。 如果不想触发默认操作可用triggerHandler() 。

8） 其他

write less, do more:  .bind("mouseover moueseout",function(){$(this).toggleClass("over");});

命名空间： .bind("click.plugin",function...)  。。。.unbind(".plugin")

同事不同名： .bind("click",..) 。。。.bind("click.plugin") 。。。.trigger("click!") ：有！ ：只触发click。 无！：都触发

3.动画    

显示/隐藏 ：

show/hide(可选毫秒单位「1000」，可选回调函数) ：同时减少内容的宽度高度不透明度。

淡入/淡出 ：

fadeIn/fadeOut(可选毫秒单位「1000」，可选回调函数) ：只改变透明度。

伸/缩： 

 slideUp / slideDown（可选毫秒单位「1000」，可选回调函数） ：只改变高度。

自定义动画方法：

 animate（params：属性名：”属性值”「left:"10px",height:"50px",opacity:"1"」,speed可选：速度「3000」，callback可选: 动画完成时执行的函数）               

停止元素动画 ： 

stop（「clearQueue」，「gotoEnd」） true/false; stop()：结束正在进行的动画执行下一阶段 ；clearQueue1:结束正在执行的动画并清空队列；gotoEnd：直接达到结束状态。

判断元素是否处于动画状态： 

.is(":animated")

延迟动画：

.animate(..).delay(1000);

切换隐现：

toggle()

切换伸缩：

slideToggle()

变不透明度：

fadeTo(speed,0.2);

切换不透明度：

fadeToggle();

                                                                                                                                                                                                                                                                                        

五 表单表格：

1.表单

$("[name=items]:checkbox") 

.each(function(){   //遍历选中集})

反选：原生DOM: this.checked = !this,checked;

1.6 prop()方法：只添加属性名称该属性就会生效； 只存在true/false的属性

$("option:selected",this);

e-mail：!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value)

2.表格

$("tbody>tr:odd").

$("tr:contains('王五')").

$(this).addClass(。。).siblings().removeClass(。。).end().find(。。。).attr(。。。) : 加end：当前对象是this，siblings后对象变了，加end后返回this  ;可先写完同对象的所有操作

$(this)[hasSelected?"removeClass":"addClass"]('leiming').find(':checkbox').attr('checked',!hasSelected) ;用boolean值和三目运算符简写