jQuery学习笔记（二）

CSDN话题挑战赛第2期
参赛话题：Java技术分享

---

目录

1.函数

1.1 onload事件

1.2 赋值

1.3 text，html，val方法

1.3.1 简介

1.3.2 案例

2.on方法使用

2.1 定义

2.2 语法

2.2 案例

3.off方法使用

3.1 定义

3.2 语法

3.3 案例

4.窗口事件类型函数

5.文档加载事件类型函数

5.1 区分

5.2 详细

6.表单事件类型

7.按键事件类型

8.鼠标事件类型 

---

1.函数

1.1 onload事件

onload事件，当页面加载资源的时候会触发的事件。

onload和$(document).ready()的区别

1.onload绑定在body上的，而且一个页面只能 有一个onload事件

2.$(document).ready()无需绑定，属于监听，可以写多个

3.$(document).ready()可以简写

1.2 赋值

1.2.1 简介

• text：是直接将写的字符串，复制导指定标签中间
• html：如果字符串中有html标签，在赋值的时候会让html标签生效

1.2.2 案例

text：

 html:

 

 我们发现同样的语句，text函数是把所有的字符串当成文本展示出来，html函数是先转换标签，然后再展示文本。

1.3 text，html，val方法

1.3.1 简介

相同点：text(),html(),val()三个方法用于html元素的存值和取值。

区别：

• text（）：用于html元素文本内容的存取
• html（）：不但可以用于html元素文本内容的存取，还可以用于html内容的存取
• val（）：用于input元素内容的存取

自我理解：

相同点：

• 赋值：给相应元素赋值
• 不赋值：获得相应元素的内容

不同点：

• val：页面元素当中的value属性
• html：对于标签中间的内容
• text：对于标签中间的内容

1.3.2 案例

代码：

效果： 

2.on方法使用

2.1 定义

on方法绑定事件和处理函数

2.2 语法

$(‘outerSelector’).on(‘eventType’,’childSelector’,data,fun);

•  outSelector：外层区域选择器
• eventType：事件类型    eg: click，字符类型
• childSelector：内部元素选择器（缺省为外部选择器）
• data：传递给执行函数的参数，封装在event.data 中（json）类型
• fun：事件处理函数

2.2 案例

代码

	
		
		
		
		
	
	
	
        
1
        
2
        
3
        
1
        
2
        
3
        
1
        
2
        
3
       
p1
       
p2
       
p3
   
       
	

效果：

 点击div区域，它会发生相应的变化。

3.off方法使用

3.1 定义

off 方法用于解除事件和处理函数

3.2 语法

$(‘outerSelector’).off(‘eventType’,’childSelector’,fun);

• outerSelector：外层区域选择器
• eventType：事件类型  eg:click，字符类型
• childSelector：内部元素选择器（缺省就是外部选择器）
• fun：需要解除的事件处理函数

3.3 案例

使用方法同on（代码有时间再补啦）

4.窗口事件类型函数

5.文档加载事件类型函数

5.1 区分

• window.onload 和 body.onload 为同一事件绑定方式，同时绑定时只调用一个。
• 唯一的区别是， 可以在 body 标签上声明处理函数。
• 这两个事件对应的是整个文 档(包含文档上的 css、js、html、图片信息)加载完成后调用。只能写一次
• document.ready：当 html 文档解析后就调用事件处理函数。图片、css 等此时有可能没有加 载，不兼容。

5.2 详细

文档加载事件函数：

• load：用于window、图片等。在文档或图片加载完成后执行处理函数。
• ready：用于document对象，当文档加载后执行处理函数，相当于document.onload，可以写多次。

6.表单事件类型

7.按键事件类型

8.鼠标事件类型