jQuery基础


jQuery-JS 快捷键

jQuery语法 write less do more.

概述, js的代码库之一, 等于的真身,基础语法是:(selector).action(),美元符号定义jQuery 选择符(selector)查询和查找html元素,jQuery的action()执行对元素的操作, action就对应jQuery提供的各种操作API。

核心语法:

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

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

jQuery(callback): 文档就绪函数 的简写。(function(){...}()) 为了防止文档在未加载完裕兴jQuery代码。

jQuery对象访问 each(callback) size length selector context get index 数据缓存 data removeData

jQuery 的多种选择器

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

层级选择器:ancestor descendant; parent>child; prev+next; prev~siblings

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

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

可见性 :hidden :visible

属性选择器:[attribute] ;[attribute=value]; [attribute!=value]; [attribute^=value]; [attribute$=value];[attribute*=value]; [attrSel1[attrSelN]

子元素选择器 :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+

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

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

混淆选择器 $.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

事件

事件处理

on(eve,[sel],[data],fn)1.7+

off(eve,[sel],[fn])1.7+

one(type,[data],fn)

trigger(type,[data])

triggerHandler(type, [data])

事件切换

hover([over,]out)

toggle([spe],[eas],[fn])1

事件

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])

文档处理

内部插入

append(content|fn)

appendTo(content)

prepend(content|fn)

prependTo(content)

外部插入

after(content|fn)

before(content|fn)

insertAfter(content)

insertBefore(content)

包裹

wrap(html|ele|fn)

unwrap()

wrapAll(html|ele)

wrapInner(html|ele|fn)

替换

replaceWith(content|fn)

replaceAll(selector)

删除

empty()

remove([expr])

detach([expr])

复制

clone([Even[,deepEven]])

属性和样式

属性

attr(name|pro|key,val|fn)

removeAttr(name) prop(n|p|k,v|f)

removeProp(name)

CSS 类

addClass(class|fn)

removeClass([class|fn])

toggleClass(class|fn[,sw])

HTML代码/文本/值

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

val([val|fn|arr])

CSS

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

位置

offset([coordinates])

position()

scrollTop([val])

scrollLeft([val])

尺寸

height([val|fn])

width([val|fn])

innerHeight()

innerWidth()

outerHeight([soptions])

outerWidth([options])

效果

基本

show([s,[e],[fn]])

hide([s,[e],[fn]])

toggle([s],[e],[fn])

滑动

slideDown([s],[e],[fn])

slideUp([s,[e],[fn]])

slideToggle([s],[e],[fn])

淡入淡出

fadeIn([s],[e],[fn])

fadeOut([s],[e],[fn])

fadeTo([[s],o,[e],[fn]])

fadeToggle([s,[e],[fn]])

自定义

animate(p,[s],[e],[fn])1.8*

stop(,[j])1.7*

delay(d,[q])

finish([queue])1.9+

筛选函数

过滤

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])

查找

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])

串联

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')
        }
    })
)

最后更新于:2019-01-04 11:23:06