JQuery 笔记

JQurey复习笔记

常用选择器

  -  $("#id")    通过id选择  -  $(".class")  通过类选择  -  $("element")  通过元素选择  -  $(":firet")  选择第一个元素  -  $(":last")  选择最后一个元素  -  $(":even")  选择偶数元素，常用于表格中的tr选择  -  $(":odd")   选择奇数元素，常用于表格中的tr选择  - $("[attribute]")  选择 带有attribute属性 的元素  - $("[attribute==value]")  选择带有attribute属性且 等于value 的元素  -  $("[attribute!=value]")  选择带有 attribute 属性且不等于value的元素  - \$("[attribute\$==value]")  选择带有attribute属性且 属性值以value结尾 的元素  - $(":input")  选择所有 input 元素  - \$(":text")、\$(":password")、\$(":radio")、\$(":checkbox")、\$(":submit")、\$(":button")等，所有type等于对应属性的 input 元素

常用事件

 - bind() 为选中元素绑定事件，可以同时绑定多个事件     - 语法：$(selector).bind(event,data,function)     - 绑定多个事件：$(selector).bind({event:function, event:function, ...})  - unbind() 移除被选元素的绑定事件 - live() 为选中元素绑定事件，可以同时绑定多个事件 - delegate() 为选中元素绑定事件，可以同时绑定多个事件     -  on() 在被选元素及子元素上添加一个或多个事件，同样可以绑定多个事件   (*推荐*)     -例

<!-- html -->    <ul>        <li>111</li>        <li>222</li>        <li>333</li>    </ul><!-- js -->     $(function () {    $('ul').on('click','li',function(){        //事件委托        点击ul中的每个li都会在后面动态生成一个li        var newLi = document.createElement('li')        newLi.innerHTML = 'after 动态添加';         $(this).after(newLi);})

     - 语法： $(selector).on(event,childSelector,data,function)      - 与bind方法不同之处：  on()可以在用js生成新的子元素的时候，同样给新生成的子元素绑定方法，即事件委托；而bind()不能给未来新增的元素绑定事件 -  off() 移除用on()绑定的事件  - click() 单击 - dblclick() 双击  -  focus()  被选中元素获得焦点时，会触发事件 - keydown()   当键盘或按钮被按下时，发生 keydown 事件 - keypress()  与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件 - keyup() 当按钮被松开时，发生 keyup 事件 - mousedown() - mouseenter()  只有在鼠标指针穿过被选元素时，才会触发事件 - mouseleave()  只有在鼠标指针离开被选元素时，才会触发事件 - mousemove() - mouseout()如果鼠标指针离开任何子元素，同样会触发事件 - mouseover() 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 - mouseup() 

常用基础DOM 和 CSS操作

 - html() 返回一个HTML字符串，如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取 - html(val) 替换html内容为val，有html元素会自动解析 - text() 取得所有匹配元素的内容，并返回由所有匹配元素包含的文本内容组合起来的文本（html元素会自动被清理掉） - text(val)   替换text内容为val，有html元素会自动转义 - val()  获取表单中的文本内容 - val(value)  替换表单中的文本内容为value，当参数是 数组时，即为设定一个select和一个多选的select的值 - attr() 设置或返回被选元素的属性值     -参数可以是一个属性名 | 作为属性的“名/值对”对象 | 属性名称，函数(第一个参数为当前元素的索引值，第二个参数为原先的属性值) - removeAttr() 从每一个匹配的元素中删除一个属性 - css()  访问匹配元素的样式属性     -参数可以是一个要访问的属性名称 |  一个或多个CSS属性组成的一个数组 | 要设置为样式属性的名/值对 - addClass()  为每个匹配的元素添加指定的类名，多个类名请用空格分开 - rmmoveClass() 从所有匹配的元素中删除全部或者指定的类，多个类名请用空格分开 - width()  直接取得第一个匹配元素当前计算的宽度值（px）的数值 - height()  - innerWidth() 获取第一个匹配元素内部区域宽度（包括padding、不包括边框） - innerHeight() - outerWidth() 获取第一个匹配元素外部高度（默认包括补白和边框）；参数设为true时，计算边距(margin)在内 - outerHeight() - offset() 相对于视口的偏移 - position() 相对于父元素的偏移 

常用工具函数

 - $.each(对象数组, function(index索引，val属性值){}) 遍历js原生态对象数组 - $().each(function(index索引,elementDOM元素){})  遍历JQuery对象的数组   - $.map(arr|obj,function(element,index){}) 回调函数会被每个数组元素调用 - $.grep(array, function(element,index){}, [invert]) 过滤数组，invert为false，返回true的元素，否则返回false的元素 - $.inArray(value,array,[fromIndex]) 确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 ) -  $.merge(first,second) 合并两个数组 -  $.isFunction(obj) - $.isEmptyObject(obj)  - $.contains(container,contained) 判断一个DOM节点是否包含另一个DOM节点 - $.proxy(function,context) 改变函数作用域(改变 this 指向)     - function:将要被改变作用域的函数     - context:一个object，那个函数的作用域会被设置到这个object上

事件属性

 - event.target 返回触发事件的DOM元素 -  event.type  返回触发的事件类型 - event.currentTarget：事件绑定的元素 - event.which 返回发生的键盘和鼠标事件的keycode - event.stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数 - event.preventDefault() 阻止默认事件行为的触发

<!-- 例：阻止表单提交 -->    $('form').submit(function(){        e.preventDefault();        // return false //同时阻止冒泡和默认事件})  

常用DOM节点操作

 - append() 向每个匹配的元素内部追加内容 - appendTo()     与上面相反 - prepend() 向每个匹配的元素内部前置内容 - prependTo() 与上面相反 - after() 在每个匹配的元素之后插入内容，可以直接插入DOM元素或者字符串(html元素可以解析) - before() 在每个匹配的元素之前插入内容，可以直接插入DOM元素或者字符串(html元素可以解析)

常用动画操作

 - show([speed,[easing],[fn]]) 显示隐藏的匹配元素，必须用在隐藏元素上     - speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)     - easing:(Optional) 指定切换效果，默认是"swing"，可用参数"linear"     - fn:在动画完成时执行的函数，每个元素执行一次。  - hide([speed,[easing],[fn]])    与上面相反 - toggle([speed],[easing],[fn]) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的 - slideDown([speed],[easing],[fn]) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数，动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来 - slideUp([speed,[easing],[fn]]) 与上面相反 - slideToggle([speed],[easing],[fn]) -fadeIn([speed],[easing],[fn]) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数，这个动画只调整元素的不透明度  - fadeOut([speed],[easing],[fn]) - fadeToggle([speed,[easing],[fn]])- animate(params,[speed],[easing],[fn]) 创建自定义动画- stop([clearQueue],[jumpToEnd]) 停止所有在指定元素上正在运行的动画- delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目，既可以推迟动画队列的执行，也可以用于自定义队列

<!-- html -->    <p style="display: none;">我先slideDown下来，然后再淡入</p><!-- js -->    $('p').slideDown(600).delay(1500).fadeOut(400);

- finish([queue])  停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

持续更新..