jQuery学习

概述

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

基础语法

$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作
• action对应 jQuery 提供的各种操作函数API

核心语法

1. jQuery([selector,[context]])
   接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

2. jQuery(html,[ownerDocument])
   根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

3. jQuery(callback)：$(document).ready()的简写。

• $(function(){ // 文档就绪 }); 文档就绪函数 ready
• 为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
• 如果在文档没有完全加载之前就运行函数，操作可能失败
• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

4. jQuery 对象访问

• each(callback)
• size()
• length
• selector
• context
• get([index])
• index([selector|element])

5. 数据缓存

• data([key],[value])
• removeData([name|list])1.7*

jQuery的多种选择器

1. 基本选择器：#id; element; .class; *; selector1, selector2....

2. 层级选择器：ancestor descendant； parent>child； prev+next; prev~siblings

3. 基本筛选器： :first :not(selector) :even :odd :eq(index) :gt(index) :lang1.9+ :last :lt(index) :header :animated :focus :root1.9+ :target1.9+

4. 内容选择器： :contains(text) :empty :has(selector) :parent

5. 可见性 :hidden :visible

6. 属性选择器：[attribute] ；[attribute=value]； [attribute!=value]； [attribute^=value]； [attribute$=value]；[attribute*=value]； [attrSel1[attrSelN]

7. 子元素选择器 :first-child :first-of-type1.9+ :last-child :last-of-type1.9+ :nth-child :nth-last-child()1.9+ :nth-last-of-type()1.9+ :nth-of-type()1.9+ :only-child :only-of-type1.9+

8. 表单 :input :text :password :radio :checkbox :submit :image :reset :button :file

9. 表单对象属性 :enabled :disabled :checked :selected

10. 混淆选择器 $.escapeSelector(selector)3.0+

//基本选择器
​
$(
    function(){
        console.log($('.box')); //选择类
        console.log($('#name')); // 选择ID
        console.log($('div'));  // 选择标签
        console.log($('h2, p'));  // 选择多个
    }()
)
​
// 层级选择器
​
$(
    function(){
        console.log($('.midd .test')); // 层级
        console.log($('.midd>p')); // 父子
        console.log($('.box+ #name'));  // 同级下一个 只能连续
        console.log($('.box~.test'));  // 兄弟节点
    }()
)
​
// 基本筛选
​
$(function () {
    console.log($('li:first'));
    console.log($('input:not(:checked)'));
    console.log($('tr:even')); // 选中1,3,5 索引是0,2,4...
    console.log($('tr:odd')); // 选中2,4,6...
    console.log($('tr:eq(1)'));
}())
​
// 内容选择器
​
$(function(){
    console.log($('div:contains("John")')); // 包含
    console.log($('td:empty'));
}()
)
​
// 属性选择器
​
$(
    function (){
        console.log($('input[name^=app]')); // = != ^= $= *= 包含某个部分
    }()
)
​
// 子元素选择器
​
$(
    function (){
        console.log($('ul li:first-child'));
        console.log($('h2:nth-of-type(2)')); // 同一级别 同一元素第几个
        console.log($('.test:nth-child(6)'))  // 找同一级别第几个元素 2n 取倍数
    }()
)
​
// 表单选择器
​
$(
    function(){
        console.log($(':input'));
    }()
)
​
// 混淆选择器
$(
    function(){
        console.log($('.'+$.escapeSelector('.test')));
    }()
)

jQuery操作DOM

事件

1. 事件处理

• on(eve,[sel],[data],fn)1.7+
• off(eve,[sel],[fn])1.7+
• one(type,[data],fn)
• trigger(type,[data])
• triggerHandler(type, [data])

2. 事件切换

• hover([over,]out)
• toggle([spe],[eas],[fn])1

3. 事件

• blur([[data],fn])
• change([[data],fn])
• click([[data],fn])
• dblclick([[data],fn])
• error([[data],fn])
• focus([[data],fn])
• focusin([data],fn)
• focusout([data],fn)
• keydown([[data],fn])
• keypress([[data],fn])
• keyup([[data],fn])
• mousedown([[data],fn])
• mouseenter([[data],fn])
• mouseleave([[data],fn])
• mousemove([[data],fn])
• mouseout([[data],fn])
• mouseover([[data],fn])
• mouseup([[data],fn])
• resize([[data],fn])
• scroll([[data],fn])
• select([[data],fn])
• submit([[data],fn])
• unload([[data],fn])

文档处理

1. 内部插入

• append(content|fn)
• appendTo(content)
• prepend(content|fn)
• prependTo(content)

2. 外部插入

• after(content|fn)
• before(content|fn)
• insertAfter(content)
• insertBefore(content)

3. 包裹

• wrap(html|ele|fn)
• unwrap()
• wrapAll(html|ele)
• wrapInner(html|ele|fn)

4. 替换

• replaceWith(content|fn)
• replaceAll(selector)

5. 删除

• empty()
• remove([expr])
• detach([expr])

6. 复制

• clone([Even[,deepEven]])

属性和样式

1. 属性

• attr(name|pro|key,val|fn)
• removeAttr(name) prop(n|p|k,v|f)
• removeProp(name)

2. CSS 类

• addClass(class|fn)
• removeClass([class|fn])
• toggleClass(class|fn[,sw])

3. HTML代码/文本/值

• html([val|fn]) text([val|fn])
• val([val|fn|arr])

4. CSS

• css(name|pro|[,val|fn])1.9*

5. 位置

• offset([coordinates])
• position()
• scrollTop([val])
• scrollLeft([val])

6. 尺寸

• height([val|fn])
• width([val|fn])
• innerHeight()
• innerWidth()
• outerHeight([soptions])
• outerWidth([options])

效果

1. 基本

• show([s,[e],[fn]])
• hide([s,[e],[fn]])
• toggle([s],[e],[fn])

2. 滑动

• slideDown([s],[e],[fn])
• slideUp([s,[e],[fn]])
• slideToggle([s],[e],[fn])

3. 淡入淡出

• fadeIn([s],[e],[fn])
• fadeOut([s],[e],[fn])
• fadeTo([[s],o,[e],[fn]])
• fadeToggle([s,[e],[fn]])

4. 自定义

• animate(p,[s],[e],[fn])1.8*
• stop(,[j])1.7*
• delay(d,[q])
• finish([queue])1.9+

筛选函数

1. 过滤

• eq(index|-index)
• first() last()
• hasClass(class)
• filter(expr|obj|ele|fn)
• is(expr|obj|ele|fn)
• map(callback)
• has(expr|ele)
• not(expr|ele|fn)
• slice(start,[end])

2. 查找

• children([expr])
• closest(e|o|e)1.7*
• find(e|o|e)
• next([expr])
• nextAll([expr])
• nextUntil(e|e)
• offsetParent()
• parent([expr])
• parents([expr])
• parentsUntil(e|e)
• prev([expr])
• prevall([expr])
• prevUntil(e|e)
• siblings([expr])

3. 串联

• add(e|e|h|o[,c])1.9*
• andSelf()1.8-
• addBack()1.9+
• contents()
• end()

$(
    $('.box').on('click', function(){
        $('p').toggleClass('red')  // 添加样式
    }),
​
    $('.switch').on('click', function(){
        $('p').slideToggle();  // 下滑出现
    }),
​
    $('#move').on('click', function(){
        $('ul li').appendTo('.show')  // 添加文本
    }),
​
    $('ul li:even').hover(function(){  // 鼠标悬浮效果
        $(this).css('background','yellow')
    }, function(){
        $(this).css('background','')
    }),
​
    $('ul li:odd').on('mouseover', function(){
        $(this).css('background', 'blue')
        console.log($(this).text('modify...'));
    }).on('mouseout', function(){
        $(this).css('background', '')
    }),
​
    $('#modify').on('click', function(){  //修改文本
        let text = $(this).val()
        $('li').each(function(i){
            $(this).text(text+(i+1))
        })
    }),
​
    $('#username').on('click', function(){
        let username = $('input[name="username"]').val()
        console.log(username);
        $('.username').text(username)
​
    }), 
​
    $('input[placeholder]').focus(function(){  // 鼠标聚焦
        $(this).removeClass('red-bor')
    }).blur(function(){
        // $(this).addClass('done')
        if($(this).val()==''){
            $(this).addClass('red-bor')
        }else{
            $(this).addClass('done')
        }
    })
)

具体操作学习于：

http://jquery.cuishifeng.cn/