zoukankan      html  css  js  c++  java
  • 【转载】jQuery学习笔记

    1 基础
    HTML  :一个人的裸体,是一个人的物质基础,是一个结构。
    CSS  :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人。
    JavaScript :一个人的灵魂,使一个人具备了生命,让它动起来了。
    
    2 jQuery的基础
    2.1 jQuery对象引用
    jQuery = window.jQuery = window.$ = function( selector, context ) {...}
    在jQuery库内还有两个_$和_jQuery用来备份原先导入的库,备以后使用noConflict()交还使用权。
    
    2.2 jQuery的prototype引用
    jQuery.fn = jQuery.prototype = {init:function(){...}, ...}
    jQuery.fn.init.prototype = jQuery.fn;
    
    2.3 继承:目标对象是当前对象this。
    jQuery.extend = jQuery.fn.extend = function() {...}
    
    2.4 插件机制:主要是扩展jQuery的对象的prototype。
    利用jQuery.extend和jQuery.fn.extend来进行扩展。
    // 用于扩展jQuery对象本身,相当于静态方法。
    jQuery.extend();
    // 用于扩展jQuery的对象,相当于为每一个jQuery对象多扩展了。
    jQuery.fn.extend();
    
    3 选择器
    jQuery使用CSS和XPATH的选择器。
    3.1 基本
    #id                                 // 通过ID选择
    element                             // 通过标签选择
    .class                              // 通过class选择
    *                                   // 选择所有元素
    selector1, selector2, selectorN     // 多个选择的合并
    
    3.2 层级
    ancestor descendant                 // 父元素下匹配所有后代元素
    parent > child                      // 父元素下匹配所有子元素(下一层)
    prev + next                         // 匹配所有紧接在prev元素后的next元素
    prev ~ siblings                     // 匹配prev元素之后的所有siblings元素
    
    3.3 简单
    :first                              // 匹配找到的第一个元素
    :last                               // 匹配找到的最后一个元素
    :not(selector)                      // 从选中的集合中去除selector的集合
    :even                               // 匹配所有索引值为偶数的元素,从0开始计数。
    :odd                                // 匹配所有索引值为奇数的元素,从0开始计数。
    :eq(index)                          // 匹配一个给定索引值的元素,从0开始计数。
    :gt(index)                          // 匹配大于给定索引值的所有元素
    :lt(index)                          // 匹配小于给定索引值的所有元素
    :header                             // 匹配如h1,h2,h3的标题元素
    :animated                           // 匹配所有正在执行动画效果的元素
    
    3.4 内容
    :contains(text)                     // 匹配包含给定文本的元素
    :empty                              // 匹配不包含子元素或者文本的空元素
    :has(selector)                      // 匹配的集合中含有selector的集合
    :parent                             // 匹配含有子元素或者文本的元素
    可见性
    :hidden                             // 匹配所有不可见的元素(hidden或者"display:none")
    :visible                            // 匹配所有可见的元素
    
    3.5 属性
                                        // 注意:jQuery1.3废弃的前导符@。
    [attribute]                         // 匹配包含属性attribute的元素
    [attribute=value]                   // 匹配包含属性attribute=value的元素
    [attribute!=value]                  // 匹配属性值attribute不等于value的元素
    [attribute^=value]                  // 匹配属性值是以value开始的元素
    [attribute$=value]                  // 匹配属性值是以value结束的元素
    [attribute*=value]                  // 匹配属性值包含value的元素
    [selector1][selector2][selectorN]   // 指多个属性匹配多满足的元素
    
    3.6 子元素
    :nth-child(index/even/odd/equation) // 匹配其父元素下的第N个子或奇偶子元素,从1开始计数。
    :first-child                        // 匹配第一个子元素
    :last-child                         // 匹配最后一个子元素
    :only-child                         // 匹配只含有一个子元素的子元素
    
    3.7 表单
    :input                              // 匹配所有input, textarea, select, button元素
    :text                               // 匹配所有text
    :password                           // 匹配所有password
    :radio                              // 匹配所有radio
    :checkbox                           // 匹配所有checkbox
    :submit                             // 匹配所有submit按钮
    :image                              // 匹配所有image
    :reset                              // 匹配所有reset
    :button                             // 匹配所有button
    :file                               // 匹配所有file
    :hidden                             // 匹配所有hidden或者"display:none"
    
    3.8 表单对象属性
    :enabled                            // 匹配所有可用的元素
    :disabled                           // 匹配所有不可用的元素
    :checked                            // 匹配所有选中的元素(复选框、单选框、不包含select)
    :selected                           // 匹配所有选中的option元素
    
    4 核心
    4.1 jQuery核心函数
    jQuery(expression, [context])      // 在全局范围或者context范围(Dom或jQuery)内选择
    jQuery(html, [lownerDocument])     // 根据HTML创建jQuery对象
    jQuery(elements)                   // 将Dom对象创建为jQuery对象
    jQuery(callback)                   // $(document).ready()的缩写
    
    4.2 jQuery对象访问
    each(callback)                     // 遍历jQuery选择的对象
                                       // callback参数有两个,1是下标,2是DOM对象(就是this对象
    
    )。使用$this的话,是jQuery对象。
    size()                             // 返回jQuery对象中元素个数。
    length                             // 同size()
    selector                           // 返回jQuery对象的selector
    context                            // 返回jQuery对象的context
    get()                              // 返回所选中的jQuery对象的DOM数组
    get(index)                         // 返回一个DOM元素,可以写成类似$("div")[0]。jQuery具有
    
    数组特性。
    index(subject)                     // 返回DOM对象的位置
    
    4.3 数据缓存
    data(name)                         // 返回在jQuery对象上缓存的数据
    data(name, value)                  // 在jQuery对象上设置缓存数据
    removeData(name)                   // 在元素上移除存放的数据
    queue([name])                      // 返回在jQuery对象上的队列(一个函数数组)
    queue([name, callback])            // 在队列后面加入一个函数
    dequeue([name], queue)             // 用新的函数数组代替原先的函数数组
    dequeue([name])                    // 从队列最前端移除一个队列函数,并执行他。
    
    4.4 多库共存
    jQuery.noConflict()                // 将$使用权交还给原先的库
    jQuery.noConflict(extreme)         // 将$和jQuery使用权交还给原先的库
    
    5 属性
    5.1 属性
    attr(name)                         // 取得属性值
    attr(properties)                   // properties是一个键值对对象,设置属性。
    attr(key, value)                   // 设置属性
    attr(key, fn)                      // 设置属性,由函数fn返回值。
    removeAttr(name)                   // 删除一个属性
    
    5.2 CSS类
    addClass(class)                    // 使用CSS的类选择器添加CSS
    removeClass(class)                 // 删除CSS样式
    toggleClass(class)                 // 若存在(不存在),则删除(添加)。
    toggleClass(class, switch)         // 若switch为true,则加上对应的class,否则删除。
    
    5.3 HTML代码
    html()                             // 取第一个元素的innerHtml
    html(val)                          // 设置每一个元素的innerHtml
    
    5.4 文本
    text()                             // 取得所有匹配元素的innerText
    text(val)                          // 设置所有匹配元素的innerText
    
    5.5 值
    val()                              // 获得第一个匹配元素的value属性值
    val(val)                           // 设置每一个匹配元素的value属性值
                                       // val可以是一个值,也可以是多个值(一个数组)
    
  • 相关阅读:
    git 合并两个仓库
    git 合并两个仓库
    操作系统
    域名
    域名
    .NET Framework基本概念
    .NET Framework基本概念
    拓扑排序
    PHP 数组
    PHP Switch 语句
  • 原文地址:https://www.cnblogs.com/fx2008/p/2298679.html
Copyright © 2011-2022 走看看