jQuery笔记

js与jQuery入口函数

代码：

js

1
2
3
windos.onload=function(){
 //代码
}

jQuery

1
2
3
$(document).ready(function(){
 //代码
});

或

1
2
3
$(function(){
 //代码
});

区别:

  • jQuery的入口函数是在html所有标签(DOM)都加载之后就会执行，可以执行多次，不会出现覆盖
  • JS的windows.onload是等到所有内容都加载完毕后才会执行，只执行一次，如果有新的js入口函数会将前一次的覆盖

jQuery选择器

定义

jQuery选择器可以让我们对html中的元素进行操作

1
2
//语法
$()

元素选择器

对html标签进行操作

获取所有div标签的元素

1
$("div")

获取所有元素

1
$("*")

#id选择器

对定义了id的元素进行操作: #

获取id为a的元素

1
$("#a")

.class选择器

对定义了class的元素进行操作

获取class为b的元素

1
$(".b")

jQuery事件

基础事件

鼠标 键盘 表格 文档/窗口
click 单击 keydown 键被按下时触发 submit form提交表单 load 当指定的对象加载完毕后触发
dbclick 双击 keyup 键松开时触发 change input中的文本被改变时触发事件 resize 调整窗口时触发
mouseenter 鼠标移入 keypress 按一个键触发一次 focus 当点击进input输入框(获取到焦点)时触发 scroll 滚动计数
mouseleave 鼠标移出 blur 当input失去焦点时触发 unload 关闭窗口时触发
hover 需要两个函数(移入，移出)

显示与隐藏

hide/show

还可以添加参数

hide(消失速度,消失后执行的函数)

hide(消失速度,消失动画,消失后执行的函数)

消失动画默认有两种”linear” 和 “swing”

toggle

toggle可以切换隐藏和显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
	<div id="a">123</div>
	<div class="b">lalala</div>
	<button>按钮</button>
</body>
<script>
	$(function(){
		$("#a").click(function(){
			$(this).hide(1000)
		});
		
		$(".b").click(function(){
			$(this).hide(1000,"swing",function(){
				alert("执行完毕")
			})
		});
		
		$("button").click(function(){
			$("div").toggle();
		});
	});
	
</script>