前端学习笔记（八）jQuery

（一） 1.认识jQuery JQ是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API，在开发时，以最少代码实现最多的功能。 于2006年开源，现在已经发展成为集JS、CSS、DOM、Ajax于一体的强大的框架体系。 宗旨：write less,do more!（写的少，做得多） 2.学习文档 中文文档：www.jquery123.com/ API学习或查询：jquery.cuishifeng.cn/ 3.JQ功能 1）控制页面样式 2）访问和操作DOM 3）事件处理 4）提供了大量的插件 5）Ajax技术的封装 6）提供了大量的动画处理 …… 4.使用JQ 1）本地引入 2）CDN引入

注意：JQ必须先引入，然后才能调它的API。可以在head标签中引入，也可以在最后引入，一般在最后引入。

5.选择器 1）基本选择器 id: #id class: .class element: element * 选择所有标签（项目开发时，不要用，因为它要匹配完所有的标签，性能差） , 选择多个DOM 2）层次选择器 选择器1 选择器2：选择选择器1的所有的后代元素（选择器2） 选择器1>选择器2：只选择选择器1的子元素 选择器1+选择器2：选择紧挨着选择器1的第一个相邻元素（兄弟元素） 选择器1~选择器2：选择选择器1的所有兄弟元素 3）过滤选择器 a.简单过滤选择器 :first或first() 第一个元素 :last或last() 最后一个元素 :not(selector) 除selector之外的元素 :even 偶数元素 :odd 奇数元素 :eq(index) 第n个元素 :gt(index) 大于第n个后的元素 :lt(index) 小于第n个后的元素 :header 选择h1-h6所有标题元素 b.内容过滤选择器 :contains(text) 获取包含指定文本内容的元素 :empty 获取不包含子元素或文本内容的元素 :has(selector) 获取含有选择器所匹配的元素 :parent 获取含有子元素或文本的元素 c.可见性过滤选择器 :hidden 选择display:none或隐藏文本域(hidden)的元素 :visible 选择display:block的元素 d.属性过滤选择器 [attr] 获取含有指定属性的元素 [attr=value] 获取属性值为value的元素 [attr!=value] 获取属性值不为value的元素 [attr^=value] 获取属性值以value开头的元素 [attr$=value] 获取属性值以value结尾的元素 [attr*=value] 获取属性值含有value的元素 [attr1][attr2][attr3] 获取含有指定多个属性的元素 4）表单选择器 :input :button :submit :text :password 6.DOM操作 1）属性操作 a.获取属性值 attr(属性名) b.设置属性 attr(属性名,属性值) c.删除属性 removeAttr(属性名) 2）文本内容操作 a.获取文本及表单组件内容 html() 可以操作标签 text() 只能操作文本内容，不操作标签 val() 只能用于表单组件 b.设置（修改）文本及表单组件内容 html(内容) text(内容) val(内容) c.删除文本及表单组件内容 html('') text('') val('') 3）元素样式操作 a.设置样式 css('属性名','属性值') 设置一个样式 css({'属性名1':'属性值1','属性名2':'属性值2',...}) 设置多个样式 b.操作类 i)添加类 addClass('类名') 添加一个类名 或： addClass('类名1 类名2 ....') 添加多个类名 ii)删除类 removeClass() 清空类名 或： removeClass('类名') 清除指定的类名 或： removeClass('类名1 类名2 ....') 清除指定的多个类名 4）页面元素操作 a.创建DOM节点$(dom节点内容) b.在内部添加DOM节点 append() 在内部的最后添加DOM appendTo() 将DOM添加到内部的最后 prepend() 在内部的最前面添加DOM prependTo() 将DOM添加到内部的最前面 c.在外部添加DOM节点 before() 在当前DOM前添加（同级添加） insertBefore() 把DOM添加到当前元素之前（同级添加） after() 在当前DOM之后添加（同级添加） insertAfter() 把DOM添加到当前元素之后（同级添加） d.复制DOM节点 clone() 只复制DOM元素 clone(true) 复制DOM及绑定在它上面的事件 e.删除DOM节点 remove() 删除当前DOM及子元素 remove(dom节点) 在同级DOM中删除指定的DOM empty() 删除当前DOM下的子元素，保留当前DOM （二） 1.尺寸相关 1）获取和设置元素的尺寸 $(dom).width()/height() 获取元素的宽度/高度$(dom).innerWidth()/innerHeight() 获取包括padding的宽度/高度 $(dom).outerWidth()/outerHeight() 获取包括padding和border的宽度/高度$(dom).outerWidth(true)/outerHeight(true) 获取包括padding、border和margin的宽度/高度 2）获取相对页面的绝对位置 offset() 3）获取浏览器可视区的宽高 $(window).width()$(window).height() 4）获取页面文档的宽高 $(document).width()$(document).height() 5）获取页面滚动距离 $(document).scrollTop()$(document).scrollLeft() 2.遍历DOM $(doms).each(function(index,dom){ // index为下标，dom为遍历的每一个DOM元素 .... } 3.事件 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） keydown() 按下键盘键 keyup() 松开键盘键 keypress() 从键盘输入字符 focus() 元素获得焦点 blur() 元素失去焦点 submit() 用户递交表单 hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 4.动画 1）显示/隐藏/切换 show()：显示 hide()：隐藏 toggle()：切换 2）上下滑动 slideDown()：向下滑动 slideUp()：向上滑动 3）淡入/淡出 fadeIn()：淡入 fadeOut()：淡出 fadeTo()：淡入到指定的不透明度 4）动画 animate()

    支持以下属性：
        backgroundPosition
        borderWidth
        borderBottomWidth
        borderLeftWidth
        borderRightWidth
        borderTopWidth
        borderSpacing
        margin
        marginBottom
        marginLeft
        marginRight
        marginTop
        outlineWidth
        padding
        paddingBottom
        paddingLeft
        paddingRight
        paddingTop
        height
        width
        maxHeight
        maxWidth
        minHeight
        maxWidth
        font
        fontSize
        bottom
        left
        right
        top
        letterSpacing
        wordSpacing
        lineHeight
        textIndent