CSDN话题挑战赛第2期
参赛话题:Java技术分享
目录
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 案例
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
//on事件绑定
$(".d1").on("click",function(){
$(this).css("background-color","red");
})
//简写
$(".d2").click(function(){
$(this).css("background-color","yellow");
})
//传参
$("p").on("click",{id:1},function(e){
console.log(e.data.id);
});
})
</script>
</head>
<body>
<div class="d1">1</div>
<div class="d1">2</div>
<div class="d1">3</div>
<div class="d2">1</div>
<div class="d2">2</div>
<div class="d2">3</div>
<div class="d3">1</div>
<div class="d3">2</div>
<div class="d3">3</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>
效果:
点击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.鼠标事件类型