Jquery

选择器

    元素选择器

$(‘p‘)

    id选择器

$(‘#test‘)

    class选择器

    $(‘.test‘)

事件

鼠标事件

click

dblclick

mouseenter

mouseleave

Mousedown

键盘事件

Keypress

Keydown

Keyup

表单事件

submit

Change

focus

blur

文档/窗口事件

load

Resize

Scroll

unload

hover() 用于模拟光标悬停,移上去触发mouseenter,离开触发mouseleave

$(selector).hover(fcuntion(),function())

focus()获得焦点,blur()失去焦点

效果

1. 隐藏和显示

    hide(),show()

    $(selector).hide(speed, callback)

    speed:可选,隐藏或显示速度,可以取以下值,‘slow‘,‘fast‘,‘normal‘或毫秒

    callback:可选,隐藏或显示完成后所执行的函数名

可用toggle()切换hide()show()方法

    callback三点说明

    1.$(selector)选中的元素个数为n个callback函数执行n次

    2.callback函数名后加括号会立刻执行而不是等到隐藏和显示后才执行

    3.callback既可以是函数也可以是匿名函数

2. 淡入淡出

    fadeIn(),fadeOut(),fadeToggle()

    $(selector).fadeIn(speed, callback)

    fadeTo(speed,opacity,callback)

    // speed和opacity(透明度,0~1之间)必须填

3. 滑动

    slideUp(),slideDown(),slideToggle()

    // 注意设置滑动元素的display:none

动画

    // animation()方法用于创建自定义动画

    $(selector).animation(styles, speed, easing, callback);

    // easing可选。规定在不同的动画点中设置动画速度的 easing 函数。swing,linear

    styles = {

      left: "250px",

      opacity: ‘0.5‘,

      height: "150px"

};

// key使用驼峰,如margin-left变为marginLeft

    // 对位置进行操作时,注意把元素的css position属性设置为relative,fixed或者absolute

    $(selector).animate(styles,options)

    // options可选。规定动画的额外选项。

$(selector).stop(stopAll,goToEnd)

操作HTML元素和属性

获取内容

$(selector).text():设置或返回所选元素的文本内容

$(selector).html():设置或返回所选元素的内容(包括html标记)

$(selector).val():设置或返回表单字段的值

获取属性

$(selector).attr()

添加元素

append()内部结尾插入

prepend()内部开头插入

after()外部之后插入

before()外部之前插入

删除元素

remove()删除被选元素及其子元素,可接受参数实现过滤

empty()删除选中元素的子元素

遍历

parent() 父元素

parents() 一路向上直到<html>

parentsUntil() 返回介于两个给定元素之间的所有祖先元素

children() 所有直接子元素

find() 找出所有满足条件的后代

siblings()返回所有同胞

next() 下一个同胞元素

nextAll()

nextUntil()

prev()

prevAll()

preUntil()

first()

last()

eq()

filter()

操作CSS

addClass()

removeClass()

toggleClass()

css()

尺寸

width()   content

innerWidth() content+padding

outerWidth()content+padding+border

outerWidth(true)content+padding+border+margin

height()

innerHeight()

outerWidth()

outerWidth(true)

AJAX

$(selector).load(url,data,callback)

$.get(url,callback)

$.post(url,data,callback)

相关推荐