jquery基础知识
文章目录
- 简介
- 功能
- 语法
- 基础语法
- 实例
- 文档就绪事件
- 目的
- 简洁写法
- 选择器
- 元素选择器
- 实例
- id选择器
- 实例
- class选择器
- 实例
- 更多实例
- 独立文件中使用jQuery函数
- 事件
- 常见DOM事件
- 常用的事件方法
- $(document).ready()
- click()
- dblclick()
- mouseenter()
- mouseleave()
- mousedown()
- mouseup()
- hover()
简介
jQuery库可以通过一行简单的标记被添加到网页中，是一个js文件，可以直接用script标签引用
jQuery是一个js函数库
功能
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
js特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
除此之外，jQuery还提供了大量插件
语法
jQuery语法是通过选取HTML元素，并对选取的某些元素执行某些操作
基础语法
$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action()执行对元素的操作
实例
$(this).hide() //隐藏当前元素
$("p").hide() //隐藏所有p元素
$("p.test").hide() //隐藏所有类名为test的p元素
$("#test").hide() //隐藏id名为test的元素
文档就绪事件
目的
为了防止文档在完全加载之前运行jQuery代码，即在DOM加载完成之后才可以对DOM进行操作
$(document).ready(function(){})
简洁写法
$(function(){})
选择器
jQuery中所有选择器都以$()开头
元素选择器
基于元素名选取元素
实例
$(document).ready(function(){$("button").click(function(){$("p").hide()})
})
//点击按钮后，所有p元素都隐藏
id选择器
通HTML的id元素属性选取指定元素
实例
//$("#test")
$(document).ready(function(){$("button").click(function(){$("#test").hide();})
})
//点击按钮后，有 id="test" 属性的元素将被隐藏
class选择器
类选择器可以通过指定的类名来查找元素
实例
$(document).ready(function(){$("button").click(function(){$(".test").hide();})
})
更多实例
独立文件中使用jQuery函数
如果网站包含许多页面，并且使jQuery函数易于维护，那么要把jQuery函数放在一个单独的js文件中
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
事件
页面对不同访问者的响应叫做事件，事件处理程序是指当HTML中发生某些事件时所调用的方法
常见DOM事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | hover |
jQuery事件方法语法
点击事件
//单纯点击一个元素
$("p").click()
//点击后触发某一事件
$("button").click(function(){})
常用的事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数
click()
click() 方法是当按钮点击事件被触发时会调用一个函数
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数
$("p").dblclick(function(){$(this).hide();
});
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数
$("#p1").mouseenter(function(){alert('您的鼠标移到了 id="p1" 的元素上!');
});
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数
$("#p1").mouseleave(function(){alert("再见，您的鼠标离开了该段落。");
});
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数
$("#p1").mousedown(function(){alert("鼠标在该段落上按下！");
});
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数
$("#p1").mouseup(function(){alert("鼠标在段落上松开。");
});
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)