JQuery笔记一 ：选择器和事件【蓝鸥HTML5出品】

JQuery笔记一 ：选择器和事件【蓝鸥HTML5出品】

【HTML5教程】微信小程序全方位深度解析优快云学院观看地址：http://edu.youkuaiyun.com/lecturer/992

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

文档就绪事件

``` // 原生JS window.onload = function () { // JS CODE }

// JQ $(document).ready(function () { // JS CODE });

// JQ简单写法 $(function () { // JS CODE }); ```

选择器

获取所有元素

// 获取页面中的所有元素 var allElements = $("*");

元素选择器

// 获取所有的p标签 var ps = $("p");

id选择器

// 获取id值为test的标签 var p = $("#test");

class选择器

// 获取class值为test的标签 var div = $(".test");

事件

常见的dom事件

| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|:---------:|:---------:|:---------:|:---------:| | click | keypress | submit | load | | dblclick | keydown | change | resize | | mouseenter | keyup | focus | scroll | | mouseleave | | blur | unload |

常用JS事件

单击事件

// 给id是login的标签绑定点击事件 $('#login').click(function () { // JS CODE });

双击事件

// 给id是login的标签绑定双击事件 $("#login").dblclick(function () { // JS CODE });

当鼠标略过元素时

// 当鼠标略过p标签的时候，执行函数 $("p").mouseenter(function () { // JS CODE });

当鼠标离开元素时

$("p").mouseleave(function () { // JS CODE });

当鼠标在元素上按下的时

$("#div").mousedown(function () { // JS CODE });

当鼠标在元素上抬起的时

$("#div").mouseup(function () { // JS CODE });

当鼠标略过元素时

$('p').hover(function () { // 当鼠标略过p标签时执行 }, function () { // 当鼠标离开p标签后执行 });

当元素获取焦点时

// 当input元素获取焦点的之后，执行此函数 $("input").focus(function () { // JS CODE });

当元素失去焦点时

// 当input元素失去焦点之后，执行此函数 $("input").blur(function () { // JS CODE });