jQuery学习笔记

1

$(document)

//选择整个文档对象

2

3

$(

'#myId'

)

//选择ID为myId的网页元素

4

5

$(

'div.myClass'

)

// 选择class为myClass的div元素

6

7

$(

'input[name=first]'

)

// 选择name属性等于first的input元素

01

$(

'a:first'

)

//选择网页中第一个a元素

02

03

$(

'tr:odd'

)

//选择表格的奇数行

04

05

$(

'#myForm :input'

)

// 选择表单中的input元素

06

07

$(

'div:visible'

)

//选择可见的div元素

08

09

$(

'div:gt(2)'

)

// 选择所有的div元素，除了前三个

10

11

$(

'div:animated'

)

// 选择当前处于动画状态的div元素

1

$(

'div'

).has(

'p'

);

// 选择包含p元素的div元素

2

$(

'div'

).not(

'.myClass'

);

//选择class不等于myClass的div元素

3

$(

'div'

).filter(

'.myClass'

);

//选择class等于myClass的div元素

4

$(

'div'

).first();

//选择第1个div元素

5

$(

'div'

).eq(5);

//选择第6个div元素

1

$(

'div'

).next(

'p'

);

//选择div元素后面的第一个p元素

2

$(

'div'

).parent();

//选择div元素的父元素

3

$(

'div'

).closest(

'form'

);

//选择离div最近的那个form父元素

4

$(

'div'

).children();

//选择div的所有子元素

5

$(

'div'

).siblings();

//选择div的同级元素

1

$(

'div'

).find(

'h3'

).eq(2).html(

'Hello'

);

1

$(

'div'

)

//找到div元素

2

　.find(

'h3'

)

//选择其中的h3元素

3

　.eq(2)

//选择第3个h3元素

4

　.html(

'Hello'

);

//将它的内容改为Hello

1

$(

'div'

)

2

.find(

'h3'

)

3

.eq(2)

4

.html(

'Hello'

)

5

.end()

//退回到选中所有的h3元素的那一步

6

.eq(0)

//选中第一个h3元素

7

.html(

'World'

);

//将它的内容改为World

1

$(

'h1'

).html();

//html()没有参数，表示取出h1的值

2

$(

'h1'

).html(

'Hello'

);

//html()有参数Hello，表示对h1进行赋值

1

.html()取出或设置html内容

2

.text()取出或设置text内容

3

.attr()取出或设置某个属性的值

4

.width()取出或设置某个元素的宽度

5

.height()取出或设置某个元素的高度

6

.val()取出某个表单元素的值

1

$(

'div'

).insertAfter(

'p'

);

1

$(

'p'

).after(

'div'

);

1

.insertAfter()和.after()：在现存元素的外部，从后面插入元素

2

.insertBefore()和.before()：在现存元素的外部，从前面插入元素

3

.appendTo()和.append()：在现存元素的内部，从后面插入元素

4

.prependTo()和.prepend()：在现存元素的内部，从前面插入元素

1

$(

'<p>Hello</p>'

);

2

$(

'<li class="new">new list item</li>'

);

3

$(

'ul'

).append(

'<li>list item</li>'

);

01

$.trim()去除字符串两端的空格。

02

$.each()遍历一个数组或对象。

03

$.inArray()返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。

04

$.grep()返回数组中符合某种标准的元素。

05

$.extend()将多个对象，合并到第一个对象。

06

$.makeArray()将对象转化为数组。

07

$.type()判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

08

$.isArray()判断某个参数是否为数组。

09

$.isEmptyObject()判断某个对象是否为空（不含有任何属性）。

10

$.isFunction()判断某个参数是否为函数。

11

$.isPlainObject()判断某个参数是否为用

"{}"

或

"new Object"

建立的对象。

12

$.support()判断浏览器是否支持某个特性。

1

$(

'p'

).click(

function

(){

2

　　alert(

'Hello'

);

3

});

01

<span style=

"color:#111111;"

>　　.blur()表单元素失去焦点。

02

　　.change()表单元素的值发生变化

03

　　.click()鼠标单击

04

　　.dblclick()鼠标双击

05

　　.focus()表单元素获得焦点

06

　　.focusin()子元素获得焦点

07

　　.focusout()子元素失去焦点

08

　　.hover()同时为mouseenter和mouseleave事件指定处理函数

09

　　.keydown()按下键盘（长时间按键，只返回一个事件）

10

　　.keypress()按下键盘（长时间按键，将返回多个事件）

11

　　.keyup()松开键盘

12

　　.load()元素加载完毕

13

　　.mousedown()按下鼠标

14

　　.</span><span style=

"color:#ff0000;"

>mouseenter()鼠标进入（进入子元素不触发）

15

　　.mouseleave()鼠标离开（离开子元素不触发）

16

　　.mousemove()鼠标在元素内部移动

17

　　.mouseout()鼠标离开（离开子元素也触发）

18

　　.mouseover()鼠标进入（进入子元素也触发）</span><span style=

"color:#111111;"

> 　　.mouseup()松开鼠标

19

　　.ready()DOM加载完成

20

　　.resize()浏览器窗口的大小发生改变

21

　　.scroll()滚动条的位置发生变化

22

　　.select()用户选中文本框中的内容

23

　　.submit()用户递交表单

24

　　.toggle()根据鼠标点击的次数，依次运行多个函数

25

　　.unload()用户离开页面</span>

1

$(

'input'

).bind(

2

'click change'

,

//同时绑定click和change事件

3

function

(){

4

　　　　alert(

'Hello'

);

5

　　}

6

);

1

$(

"p"

).one(

"click"

,

function

(){

2

　　alert(

"Hello"

);

//只运行一次，以后的点击不会运行

3

});

1

$(

'p'

).unbind(

'click'

);

1

$(

"p"

).click(

function

(e){

2

　　alert(e.type);

// "click"

3

});

1

event.pageX 事件发生时，鼠标距离网页左上角的水平距离

2

event.pageY 事件发生时，鼠标距离网页左上角的垂直距离

3

event.type 事件的类型（比如click）

4

event.which 按下了哪一个键

5

event.data 在事件对象上绑定数据，然后传入事件处理函数

6

event.target 事件针对的网页元素

7

event.preventDefault()阻止事件的默认行为（比如点击链接，会自动打开新页面）

8

event.stopPropagation()停止事件向上层元素冒泡

1

$(

'a'

).click(

function

(e){

2

3

if

($(

this

).attr(

'href'

).match(

'evil'

)){ 

//如果确认为有害链接

4

　　　　e.preventDefault();

//阻止打开

5

　　　　$(

this

).addClass(

'evil'

);

//加上表示有害的class

6

　　}

7

});

1

$(

'a'

).click();

2

$(

'a'

).trigger(

'click'

);

1

$(

'h1'

).show();

//展现一个h1标题

1

.fadeIn()淡入

2

.fadeOut()淡出

3

.fadeTo()调整透明度

4

.hide()隐藏元素

5

.show()显示元素

6

.slideDown()向下展开

7

.slideUp()向上卷起

8

.slideToggle()依次展开或卷起某个元素

9

.toggle()依次展示或隐藏某个元素

1

$(

'h1'

).fadeIn(300);

// 300毫秒内淡入

2

$(

'h1'

).fadeOut(

'slow'

);

// 缓慢地淡出

1

$(

'p'

).fadeOut(300,

function

(){ $(

this

).remove();});

1

$(

'div'

).animate(

2

　　{

3

　　　　left :

"+=50"

,

//不断右移

4

　　　　opacity : 0.25

//指定透明度

5

　　},

6

　　300,

// 持续时间

7

function

(){ alert(

'done!'

);} 

//回调函数

8

);