JQuery笔记

JQuery入门

1. DOM编程

1.1 DOM概述

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

1.2 DOM树的节点层次

DOM树是由DOM元素和属性节点组成的层级结构整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点 注释是注释节点 通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

1.3 获得DOM节点

1.通过标签值获取DOM节点

/*

* 通过标签名来获取DOM节点

* */

var a = document.getElementsByTagName("p");

console.log(a);

1. 通过标签ID来获取DOM节点(最常用)

/*

* 通过标签的id来获取DOM节点

* */

var a = document.getElementById("p1");

1. 通过标签的class值来获取DOM节点

/*

* 通过标签的class属性来获取DOM节点

* */

var a = document.getElementsByClassName("p1");

1.4 更新节点

1.更新文本，即更新文本节点（标签内部的文本值）

方法一：修改innerHTML属性，这个方式非常强大，不仅是修改元素节点的文本节点，是修改的元素节点的DOM树结构(即修改元素节点内的Html代码)

方法二：修改innerText属性，这个方法只值修改该元素节点的文本节点，即修改标签内的文本值

注：修改.innerText或者.innerHTML时，如果该节点有子元素节点的话，子元素节点会被覆盖

1.5 删除节点

直接删除自身

通过id获取节点，使用remove()方法进行删除

var p = document.getElementById("div1");

p.remove();

JQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的

JavaScript代码库（框架）

2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡

导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简

便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的特点：

1. 轻量级

2. 富应用

3. DOM操作

4. 事件处理

5. 运动动画

6. AJAX

7. 跨浏览器（不再考虑浏览器兼容）

8. 链式调用

9. 隐式迭代

10. 丰富的插件库 .........

怎么使用JQuery

1.下载JQuery的js文件，在本地进行引用

2.使用公网url进行引用

$('button.show-details').click(function() {

$('div.details').show();

});

$(function () {

$("#btnShow").click(function () {

$("#msubject").hide("slow");

});

});

JQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

JQuery常用选择器

id 选择器

Class选择器

元素选择器

过滤选择器

过滤选择器是根据某类过滤规则进行元素的匹配，书写时都以(:)开头；简单过滤是

使用最广泛的一种。

JQuery事件

常见 DOM 事件：

1.$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数

2.click()

click() 方法是当按钮点击事件被触发时会调用一个函数

$("p").click(function(){

$(this).hide();

});

3.dblclick()

当双击元素时，会发生 dblclick 事件

$("p").dblclick(function(){

$(this).hide();

});

4.mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件

$("#p1").mouseenter(function(){

alert('您的鼠标移到了 id="p1" 的元素上!');

});

5.mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件

$("#p1").mouseleave(function(){

alert("再见，您的鼠标离开了该段落。");

});

6.mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件

$("#p1").mousedown(function(){

alert("鼠标在该段落上按下！");

});

7.mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件

$("#p1").mouseup(function(){

alert("鼠标在段落上松开。");

});

8.hover()

hover()方法用于模拟光标悬停事件当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个

元素时，会触发指定的第二个函数(mouseleave)

$("#p1").hover(

function(){

alert("你进入了 p1!");

},

function(){

alert("拜拜! 现在你离开了 p1!");

}

);

9.focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点

$("input").focus(function(){

$(this).css("background-color","#cccccc");

});

10.blur()

当元素失去焦点时，发生 blur 事件。

$("input").blur(function(){

$(this).css("background-color","#ffffff");

});​​​​​​​