学习笔记（初稿）《锋利的JQuery》

yehayeah

浏览: 71405 次
性别:

最近访客更多访客>>

火山来了

1237890

Feasea

mynumen

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

JQuery 学习笔记

开发工具：
                    Deamweaver
    插件：http://xtnd.us/dreamweaver/jquery
                    MyEclipse
    插件：http://spket.com/

JQuery对象与DOM对象

CSS选择器：
标签选择器
ID选择器 #
类选择器 E.className
群组选择器 E1，E2，E3
后代选择器 E F
通配符选择器 *

样式表：行间、内部、外部

JQuery选择器：
    基本选择器
    层次选择器
        $("ancestor descendant")
        $("parent > child")
        $('prev+next')等价于$('prev').next('next')
        $('prev~siblings')等价于$('prev').nextAll('siblings')
                siblings()方法不限制位置
    基本过滤选择器
        :first
        :last
        :not(selector)
        :even 偶数，从0开始

dd 奇数
        :eq(index)
        :gt(index)
        :lt(index)
        :header
        :animated
    内容过滤选择器
        :contains(text)
        :empty
        :has(selector)
        :parent
    可见性过滤选择器
        :hidden
        :visible
    属性过滤选择器
        [attribute]
        [attribute=value]
        [attribute!=value]
        [attribute^=value]以……开始
        [attribute$=value]以……结束
        [attribute*=value]
        [selector1][selector2][selectorN]
     子元素过滤选择器
        :nth-child(index/even/odd)index从1开始
        :first-child
        :last-child

nly-child
     表单对象属性过滤选择器
        :enabled
        :disabled
        :checked
        :selected
    表单选择器
        :input选择所有的<input><textarea><select><button>
        :text单行文本框
        :password
        :radio
        :checkbox
        :submit
        :image
        :reset
        :button
        :file
        :hidden
选择器中含有特殊字符，如“.”"#"等，怎么办？
    用转义符"\\"

JQuery中的DOM操作

DOM操作的分类：DOM Cor、HTML_DOM(只能用于处理Web文档)、CSS_DOM

查找节点
    查找元素节点
    查找属性节点
创建节点
    $(html)
插入节点
    append()
    appendTo()
    prepend
    prependTo()
    after()
    insertAfter()
    before()
    insertBefore()
删除节点
    remove()
    empty()
复制节点
    clone()
    clone(true)具有行为
替换节点
    replaceWith()
    replaceAll()
包裹节点
    wrap()
    wrapAll()
    wrapInner()
属性操作
     attr()
    removeAttr()
样式操作
    attr("class")
    addClass()
    removeClass()
    toggleClass()重复切换样式
    hasClass()等价于is()
设置和获取HTML、文本和值
    html()
    text()
    val()
遍历节点
    children()
    next()
    prev()
    siblings()
    closest()
CSS_DOM操作
    css()
    offset() top,left
    position()
    scrollTop()
    scrollLeft()

JQuery中的事件

$(document).ready(function(){})、$(function(){})、$().ready(function(){})三者一样

事件绑定
    bind(type[,data],fn)
合成事件
    hover(enter,leave)光标滑过效果
    toggle(fn1,fn2,fnN)
事件冒泡
    事件对象
    停止事件冒泡
        event.stopPropagation()或者return false
            propagation翻译为传播、蔓延
    阻止默认行为
        event.preventDefault()或者return false（同时调用停止事件冒泡、阻止默认行为的一种简写）
    事件捕获：与事件冒泡相反，从最顶端往下触发。
        JQuery不支持事件捕获

事件对象的属性
    event.type()
    event.stopPropagation()
    event.preventDefault()
    event.target()获取触发事件的元素
    event.relatedTarget()
    event.pageX()/event.pageY()
    event.which()
    event.metaKey()获取ctrl按键
    event.originalEvent()
移除事件
    unbind([type][,data])
one()与bind()

模拟操作
    trigger(type[,data])
    triggerHandler()
其他用法
    bind()还可以绑定多个事件类型
    添加事件命名空间，在所绑定的事件类型后加命名空间
    相同事件名，不同命名空间

JQuery中的动画

JQuery做动画效果要求在标准模式下，即在文件头部包含如下DTD:
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">

    show()和hide()
        slow(600毫秒)、normal(400毫秒)、fast(200毫秒)
    fadeOut()
    fadeIn()
    slideUp()
    slideDown()
     自定义动画方法animate(params,speed,callback)
        position:relative或absolute
        累加、累减动画：+=、-=
        多重动画
    动画回调函数
    停止动画和判断是否处于动画状态
        stop(clearQueue,gotoEnd)
    判断是否处于动画状态
        if(!$(element).is(":animated")){}
    其他动画方法
        toggle()切换动画的可见或隐藏状态
        slideToggle()通过改变元素的高度，相当于slideUp(),slideDown()
        fadeTo()
当一个animate（）中应用多个属性时，动画是同时发生的，而以链式的写法应用动画时，动画按顺序发生
多组元素上的动画效果，默认是同时发生，当以回调的形式应用动画时，动画按回调顺序发生。

删除和追加操作可直接用appendTo（）完成

trigger("blur")与triggerHandler("blur")的区别:
    trigger()不仅会触发元素绑定的blur事件，而且会触发浏览器默认的blur事件

end()方法：回到当前对象

thisEle=$("#para").css("font-size")返回数字和单位
textFontSize=parseFloat(thisEle,10)去掉单位，第二个参数表示10进制
unit=thisEle.slice(-2)
    slice()返回的是从指定的位置开始的一个子字符串，-2代表倒数第二个，这里的度量单位px是两字符

网页换肤技巧：将皮肤选择按钮<li>元素的id与皮肤的样式文件名称设置相同。
解决网页刷新后皮肤又被初始化的方法：引入JQuery的cookie插件：jquery.cookie.js

第六章 JQuery与Ajax的应用

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键---发送异步请求、接收响应及执行回调

在JQuery中，$.ajax()是最底层的方法，第二层(使用频率高)：load()、$.get()、$.post()，第三层：$.getScript()、$.getJSON()

load(url,data,callback),后两个参数可选，callback函数包含三个参数：responseText、textStatus、XMLHttpRequest
    传递方式：有data决定，有参数则是post方式，无参数是get方式
load（）方法主要是获取静态的数据文件

$.get(url[,data][,callback][,type])
    data:key/value会作为queryString附加到url请求中
    callback:只有成功返回才会调用，与load（）不同，只有两个参数：data，textStatus
        data：返回的内容，可以是HTML片段、xml（需要在服务器端添加设置：head（“Content-Type：text/xml；charset=utf-8”））、json
        textStatus：请求状态，success、error、notmodified、timeout

$.post()与$.get()的比较：
    传输数据大小限制
    浏览器数据缓存、安全问题
    服务器端获取方式
    请求参数

$.getScript(url[,callback])
    callback:成功载入后方才运行

$.getJSON(url[,callback])

$.each(data，function（commentIndex，comment）{})
    全局函数，用于遍历
    不同于JQuery对象的each（）方法，不操作JQuery对象

$.ajax(options)
    参数以key/value形式存在
    常用参数：url、type、timeout、data、dataType、beforeSend、complete、success、error、global

serialize（）
    作用于JQuery对象
    将DOM元素内容序列化为字符串

serializeArray（）
    返回JSON格式的数据

$.param()
    serialize（）方法的核心

JQuery中的Ajax全局事件

ajaxStart()
ajaxStop()
ajaxComplete()
ajaxError()
ajaxSuccess()
ajaxSend()

JQuery插件

表单插件
    ajaxForm（）
    ajaxSubmit（）
        都能接收0或1个参数（callback或options）
            options对象里的参数：
target:        '#output1',   // 用服务器返回的数据更新 id为output1的内容.
beforeSubmit(表单提交前的验证用到它): showRequest, // 提交前
        success:       showResponse, // 提交后
        //另外的一些属性:
        //url:       url         // 默认是form的action，如果写的话，会覆盖from的action.
        //type:      type        // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
        //dataType: null        // 'xml', 'script', or 'json' (接受服务端返回的类型.)
        //clearForm: true        // 成功提交后，清除所有的表单元素的值.
        resetForm: true        // 成功提交后，重置所有的表单元素的值.
        //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
        //当请求大于3秒后，跳出请求.
        //timeout:   3000

    beforeSumit：validate（formData，jqForm，options）
        可通过三种方式进行表单提交前的验证：第一种，通过formData参数（formData为数组类型，可通过遍历数组）；第二种，通过jqForm参数（jqForm为JQuery对象，故将其转换为DOM对象）；第三种，通过fieldValue（），可找出匹配元素的值，并返回一个集合。

livequery插件：
    动态绑定事件
    触发回调函数（实际应用中十分有用）

JQuery UI插件：
    交互、微件、效果库
    sortable（）拖动排序

cookie插件：
    $.cookie('cookie名','cookie值(为null时表示删除)',options)
        options包括：

编写插件：

目的：给已有的一系列方法或函数进行封装
种类：封装对象方法插件、封装全局函数插件、选择器插件

难点：闭包的概念

分享到：