【书】锋利的Jquery笔记

1、jQuery对象转成DOM对象两种方法：［index］和get (index)，如：$('#test')[0]或$('#test').get(0)
2、DOM对象转成jQuery对象一种方法：$(dom)，如：$(document.getElementById('test'))

3、调用jQuery.noConflict()来将变量$ 的控制权移交给其他JavaScript库。var $J = jQuery.noConflict()

JQ选择器

$('.name')获取的永远是对象。要判断是否存在，使用$('.name')[0]

层级选择器

.next():类似.one+p，用法：$('.one').next('p')
.nextAll():类似.one~p，用法：$('.one').nextAll('p')
.siblings():所有同辈的元素

过滤选择器

:first
:last
:not(selector)：去除所有与给定选择器匹配的元素
:even：选取索引为偶数的元素
:odd：选取索引为奇数的元素
:eq(index)：索引等同index的元素
:gt(index)：索引大于index的元素
:lt(index)：索引小于index的元素
:header：所有标题元素
:animated：正在执行动画的元素
:focus：获取焦点的元素

内容过滤选择器

:contains(text) 选取含有文本内容为“text”的元素
:empty 选取不包含子元素或者文本的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或者文本的元素

可见性过滤选择器

:hidden 选取所有不可见的兀素
:visible 选取所有可见的元素。包含样式属性display为“none”的元素，文本隐藏域(<input type="hidden"/>)和visibility:hidden之类的元素。

属性过滤器

[attribute] 选取拥冇此属性的元素
[attribute=value] 选取属性的值为value的儿糸
[attribute!=value] 选取属性的值不等于value的元素
[attribute^=value] 选取属性的值以value开始的元素
[attributeS^value] 选取属性的值以value结束的儿素
[attribute*=value] 选取属性的值含有value的元素
[attribute|=value] 选取属性等于给定字符串或以该 字符串为前缀(该字符串后跟一个 连字符“・")的元素
[attribute-=value] 选取属性用空格分隔的值中包含 一个给定值的元素
[attribute 1] [attribute?] [attributeN] 用属性选择器合并成一个复合属 性选择器，满足多个条件。每选择 一次，缩小一次范围

子元素过滤选择器

:nth-child (index/even/ odd/equation) 选取每个父元素下的第index个子元 素或者奇偶元素.(index从1算起)
:first-child 选取每个父元素的第1个子元素
:Iast-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素中惟一的 子元素，那么将会被匹配。如果父元 素中含有其他元素，则不会被匹配

表单对象属性过滤选择器

:enabled 选取所有可用兀素
:disabled 选取所有不可用兀素
:checked 选取所有被选中的元素(单选框， 复选框)
:selected 选取所有被选中的选项元素(下拉 列表)

表单过滤器

:input 选取所有的 <input> > <textarea> > <select> 和<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见兀素

选择器注意事项

1、选择器有特殊符号的，如test#a，需要使用转义字符$('.test\\#a')
2、选择器含有空格，如$('.test :hidden')选择的元素类名是"test "

JQ的DOM操作

1、查找节点

• 查找元素节点：使用选择器，.test()
• 查找属性节点：.attr()

2、创建节点

• 创建元素节点：1.创建新元素$(html)；2.添加到对应的地方append()
• 创建文本节点：创建元素节点的时候，添加文本，就是创建文本节点
• 创建属性节点：与创建文本节点类似

3、插入节点

• append()：向元素内容追加后者，，添加的是子元素
• appendTo()：把元素追加到后者内容里，添加的是子元素
• prepend()：向元素内容前置后者，添加的是子元素
• prependTo()：把元素前置到后者内容里，添加的是子元素
• after()：在元素后面添加后者，两者是兄弟节点
• insertAfter()：把元素添加到后者后面，两者是兄弟节点
• befbre()：在元素前面添加后者，两者是兄弟节点
• insertBefbre()：把元素添加到后者前面，两者是兄弟节点

4、删除节点

• remove()：从DOM中删除所有匹配的元素。$("ul li:eq(1)").remove()//删除第二个li节点，返回值是被删除节点的引用，可再后续再使用这些元素
  也可以通过传递参数来选择性地删除元素。$("ul li").remove('li[title=苹果]')
• detach()：从DOM中去掉所有匹配的元素，但不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
  绑定的事件会依旧可用，remove()删除的元素之前绑定的事件将失效
• empty()：清空节点。清空获取的元素里的内容，是元素里，而不是自身

5、复制节点

• clone()：可传可不传参数，一个参数true，表示复制元素的同时复制元素中绑定的事件

6、替换节点

• replaceWith()：将所有匹配的元素都替换成指定的HTML或者DOM元素。
• replaceAll()：与replaceWith()的操作反过来，前者替换后者。
• 替换前为元素绑定的事件，替换后要会消失，需要重新绑定

7、包裹节点

• wrap()：将某个节点用其他标记包裹起来，将所有元素进行单独包裹。$("span").wrap('<p></p>')//用p标签把span标签包裹起来
• wrapAll()：将所有元素用一个元素包裹
• wraplnner()：将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

8、属性操作

• attr()方法来获取和设置元素属性，
• removeAttr()方法来删除元素属性。

9、样式操作

• 获取设置样式：attr('class')，attr('class','high')
• 追加样式：addClass('')
• 移除样式：removeClass('')
• 切换样式：toggle(function(){},function(){})，交替执行两个函数中的代码，主要是控制行为上的重复切换。
  toggleClass()控制样式上的重复切换，类名存在就删除，不存在就添加
• 判断是否含有某个样式：hasCLass()，返回布尔值。$("p").hasClass("another");等同于$("p").is(".another")；

10、设置和获取HTML、文本和值

• html()
• text()
• val()

11、遍历节点

• children()：用于取得匹配元素的子元素集合。只考虑子元素不考虑其他后代元素
• next()：用于取得匹配元素后面紧邻的同辈元素。
• prev()：用于取得匹配元素前面紧邻的同辈元素。
• siblings()：用于取得匹配元素前后所有的同辈元素。
• closest()：用于取得最近的匹配元素。自身匹配就放回本身，不匹配则向父辈查找，如果父辈也没有则返回空的JQ对象
• parent(), parents()与 closest()的区别
  parent() 获得集合中每个匹配元素的父级元素
  parents() 获得集合中每个匹配元素的祖先元素
  closest() 从元素本身开始，逐级向上级元素匹配，并 返回最先匹配的祖先元素
• 别的遍历节点的看官方文档

12、CSSS-DOM操作

• css():获取样式或设置样式
• height()：获取元素的高度，获取匹配元素当前计算的高度值，默认单位是px
• offset():获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left, 它只对可见元素有效
• position():获取元素relative或absolute的时与定位父元素的相对偏移，它返回的对象也包括两个属性，即top和left
• scrollTop()、scrollLeft()：获取元素的滚动条距顶端的距离和距左侧的距离。传入参数设置滚动到指定位置。

focus()方法相当于JavaScript中的onfocus()方法，作用是处理获得焦点时的事件。
blur()方法相当于JavaScript中的onblur()方法，作用是处理失去焦点时的事件。

JQ中的事件

1、加载DOM

• window.onload():网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行。重复使用会覆盖
• $(document).ready():DOM加载完毕执行。可多次使用
• load():绑定在元素上，则会在元素的内容加载完毕后触发。绑在window上则在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发

2、事件绑定

• bind():对匹配元素进行特定事件的绑定。bind( type [, data] , fn)；
  type:blur、focus、load、resizescroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、selectsubmit、keydown、keypress、keyup 和 error 等
• 简写方法：click、mouseover和mouseout
• 可一次性版绑定多个事件

3、合成事件

• hover(enter,leave)：用于模拟光标悬停事件。hover时会触发指定的第1个函数(enter)；移开时会触发指定的第2个函数(leave)。
  hover()方法准确来说是替代的是bind("mouseenter")和 bind("mouseleave")
• toggle(fn1,fn2,...fnN)：用于模拟鼠标连续单击事件，每次点击依次触发参数中的函数，执行完毕一轮后，重复执行

4、事件冒泡

• 事件对象:$("element").bind("click", function(event)({});event是事件对象，函数执行时可以访问，执行完毕后被销毁
• 停止事件冒泡：event.stopPropagation();可用return false;代替
• 阻止默认行为：event.preventDefault();可用return false;代替
• 事件捕获：不是所有的主流浏览器都支持，所以JQ不支持事件捕获，如要使用，用原生的js写

5、事件对象的属性

• event.type：可以获取到事件的类型
• event.preventDefault()
• event.stopPropagation()
• event.target：获取到触发事件的元素
• event.relatedTarget
• event.pageX和event.pageY：获取到光标相对于页面的x坐标和y坐标
• event.which：在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键。比如，获取鼠标的左、中、右键:
• event.metaKey：为键盘事件中获取＜ctrl＞按键。

6、移除事件

• unbind([type],[data]):移除以前注册的事件，默认type是click，可不传;
• one():绑定一次性事件

7、模拟操作

• trigger()：模拟操作。如模拟用户点击操作，不需要用户点击就执行点击事件。$('#btn').trigger("click")；
• trigger(type,[data]):第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。
• trigger()方法触发事件后，会执行浏览器默认操作
• triggerHandler():触发后不会执行浏览器默认操作

JQ动画

1、show()和 hide()

• 可指定一个速度参数，速度关键字或者一个时间数字，单位是毫秒

2、fadeln()和fadeOut()
3、slideUp()和 slideDown()
4、自定义动画animate()

• animate(params, speed , callback)；
• params: 一个包含样式属性及值的映射，比如{property1:"value1",property2:"value2",...}
• speed：速度参数，可选。
• callback：在动画完成时执行的函数，可选。
• 累加累减动画：如animate({left:"+=500px",300})
• 同时执行多个动画，则给params传多个属性变化
• 按顺序执行多个动画，写多个animate
• 判断元素是否处于动画状态：$(element).is(":animated")
• delay(): 延迟动画,在链式动画的操作中

5、stop()

• 停止匹配元素正在进行的动画
• stop([clearQueue],[gotoEnd]);参数都是布尔值
• clearQueue代表是否要清空未执行完的动画队列
• gotoEnd代表是否直接将正在执行的动画跳转到末状态

6、其他动画

• toggle( speed, [callback])。切换元素的可见状态
• slideToggle( speed, [ easing ], [callback])。通过高度变化来切换匹配元素的可见性
• fadeTo( speed, opacity, [callback])。把元素的不透明度以渐进方式调整到指定的值
• fadeToggle ( speed, [ easing ], [callback])。通过不透明度变化来切换匹配元素的可见性

7、动画队列

• 一组元素上的动画效果
  当在一个animate。方法中应用多个属性时，动画是同时发生的。
  当以链式的写法应用动画方法时，动画是按照顺序发生的。
• 多组元素上的动画效果
  默认情况下，动画都是同时发生的。
  当以回调的形式应用动画方式时，动画是按照回调顺序发生的。