第一章 JQuery概述

1.JQuery的作用：
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的JQuery插件
与Ajax技术完美结合
注：JQuery能完成的效果js都能完成，但是JQuery的开发效率更高，代码更少，
效果更炫。

2.JQuery的优势：
体积小，压缩后只有100kb左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持

3.JQuery的版本：
jquery-1.版本号.js（开发版）
jquery-1.版本号.min.js（发布版）

4.引入JQuery：
<script language="javascript" src="路径"></script>

5.$(document).ready()与window.onload的区别：
（1）执行时机
（2）编写个数
（3）简化写法

6.节点类型：
元素节点
属性节点
文本节点

7.DOM对象和JQuery对象：
（1）DOM对象：直接使用JavaScript获取的节点对象
（2）JQuery对象：使用JQuery包装DOM对象后产生的对象，它能够使用JQuery中
的方法
注：DOM对象和JQuery对象各自有自己独立的属性和方法

8.html()方法：
如果有参数：参数内容就是修改后的内容
如果没有参数:那就是获取到元素的内容

9.JQuery语法结构：
$(selector).action();
工厂函数$():将ＤＯＭ对象转化为JQuery对象选择器
selector：获取需要操作的DOM元素
方法action();JQuery中提供的方法，其中包括绑定事件处理的方法

10.JQuery的常用方法：
css（“属性”“属性值”） 为元素设置css样式的值
addClass（） 为元素添加样式
next（） 获得元素其后紧邻的同辈元素

11.DOM对象转化为JQuery对象：
var $对象名=$(DOM对象)

12.JQuery对象转化为DOM对象:
var 对象名=jquery对象[下标];
var 对象名=jquery对象.get(下标);

JQuery总览

1、JQuery→JS库：前人写的很多方法很多函数封装成的外部JS。

2、JavaScript与JQuery有什么关系

3、使用JQuery需要导入什么文件，与导入外部JS方式一模一样。

4、DOM对象和JQuery对象有什么关系*

DOM对象和JQuery对象可以相互转换【各自拥有的属性和方法不一样】

相应的对象相应的方法和函数，虽然可以互相转换，但是不能直接调用。

1、JQuery简介

jQuery由美国人John Resig于2006年创建，它的设计思想是write less,do more写的更少，做的更多。

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

2、初识JQuery

实现隔行变色效果，只需一句关键代码。

$("tr:even").css("background-color","#ccc");

↓

选择器：从0行开始数：even偶数行、odd奇数行

3、JQuery能做什么？

访问和操作DOM元素、控制页面样式、对页面事件进行处理、扩展新的jQuery插件【jQuery插件：在JQuery基础上进行再开发，网上很多，如漂亮的复选框】、与Ajax技术完美结合。【Ajax:异步刷新，页面跳转只更改页面部分内容。目前只能大概的讲一下，Ajax要与服务器打交道】

注：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率使用。JQuery开发效率高，开发方便。

4、JQuery的优势

体积小，压缩后只有100KB左右（网页加载速度更快）、强大的选择器、出色的DOM封装、可靠的事件处理机制、出色的浏览器兼容性、使用隐式迭代简化编程（隐式迭代:看不到的循环）、丰富的插件支持（在有JQuery的前提下，下载JQuery插件来使用）。

5、JQuery库文件

（1）jQuery库文件【相同的两个JS库，min迷你的是经过压缩，删除空格和换行的】

jquery-1.版本号.js（开发版） 约268KB 完整无压缩版本，主要用于测试、学习和开发

jquery-1.版本号.min.js（发布版） 约91KB 经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

（2）获取JQuery：进入jQuery官网：http://jquery.com点击可以下载最新版本的JQuery

（3）在页面中引入jQuery：<script src="js/jquery-1.8.3.js" type="text/javascript"></script>

6、JQuery基本语法：

<script>

$(document).ready(function() {

alert("我欲奔赴沙场征战jQuery，势必攻克之！");

});

</script>

注： $(document)对文档进行封装，当文档加载完成时运行函数function，书写时注意封口。

7、$(document).ready()与window.onload类似，但也有区别

（1）window.onload 同一页面不能同时编写多个，只执行最后一个

必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行

（2）$(document).ready() 同一页面能同时编写多个，多个都会执行

网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完 【简写$()】

8、DOM模型：浏览器可以把HTML文档显示成可视图形，浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构——DOM模型。

（1）节点对象：节点对象就被称为DOM对象，以对象描述文档的方式就是DOM

9、节点类型

（1）元素节点：文档中的所有元素

（2）文本节点：元素节点内的文本内容

（3）属性节点：元素节点的子节点

10、DOM对象和JQuery对象： DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

（1）DOM对象：直接使用JavaScript获取的节点对象

（2）JQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法

//文档准备完成以后执行function匿名函数

$(document).ready(

function(){

alert("这是我的第一个JQuery!");

}

);

$().ready(

function(){

var myDiv=document.getElementById("MyDiv");

//使用原始的JS取DOM对象

var my=$("#myDiv");//使用JQuery对象取JQuery封装后的DOM对象

alert(my.html());

my.html("O(∩_∩)O哈哈哈~");

//my.innerHTML无法取值，my是JQuery对象，不能使用DOM对象的属性

}

);

11、JQuery语法结构 $(selector).action() ;

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

12、JQuery常见方法

（1）css("属性","属性值") 为元素设置CSS样式的值

（2）addClass() 为元素添加类样式

（3）next() 获得元素其后紧邻的同辈元素

13、DOM对象和JQuery对象的互相转化

（1） 使用$()函数进行转化：$(DOM对象)

注：jQuery对象命名一般约定以$开头；在事件中经常使用$(this)，this是触发该事件的对象。

var txtName =document.getElementById("txtName"); //DOM对象

var $txtName =$(txtName);   //jQuery对象

（2） jQuery对象转DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$ ("#txtName");      //jQuery对象

var txtName =$txtName[0];            //DOM对象

通过get(index)方法得到相应的DOM对象

var $txtName =$("#txtName");        //jQuery对象

var txtName =$txtName.get(0);       //DOM对象

14、JQuery强大的选择器

15、JQuery常见事件和动画

16、JQuery和JS对比记忆

a) DOM操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()

HTML-DOM：用于处理HTML文档，如document.forms

XML-DOM：用于操作XML

b) jQuery中的DOM操作【jQuery对JavaScript中的DOM操作进行了封装，使用起来也更简便】

l 样式操作

css(name,value) 或css({name:value, name:value,name:value…})

追加样式addClass(class)或addClass(class1 class2 … classN)

移除样式removeClass(“style2 ”)或removeClass("style1 style2 ")

切换样式toggleClass(class)模拟了addClass()与removeClass()实现样式切换的过程

l HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

文本操作

l text()可以获取或设置元素的文本内容

语法	参数	功能
html()	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content参数为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text()	无参数	用于获取所有匹配元素的文本内容
text (content)	content参数为元素的文本内容	用于设置所有匹配元素的文本内容

l 内容及Value属性值操作

val()可以获取或设置元素的value属性值

$(this).val();或 $(this).val("");

l 节点操作jQuery中节点操作主要分为：

n 查找节点（第4章已讲）

通过选择器查找节点

n 创建节点

工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

n 插入节点

append(content) $(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

appendTo(content) $(A).appendTo(B)表示把A追加到B中

如：$newNode1.appendTo("ul");

prepend(content) $(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

prependTo(content) $(A). prependTo (B)表示将A前置插入到B中

如：$newNode1. prependTo ("ul");

n 删除节点：jQuery提供了三种删除节点的方法

remove()：删除整个节点

detach()：删除整个节点，保留元素的绑定事件、附加的数据

empty()：清空节点内容

n 替换节点

replaceWith()和replaceAll()用于替换某个节点

n 复制节点

clone()用于复制某个节点，可以使用clone()实现输出DOM元素本身的HTML

l 节点属性操作

attr()用来获取与设置元素属性

removeAttr()用来删除元素的属性 $newNode2.removeAttr("title");删除元素的title属性

l 节点遍历

children()方法可以用来获取元素的所有子元素，获取元素的子元素，但不包含子元素的子元素

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法 功能

next([expr]) 用于获取紧邻匹配元素之后的元素，

如：$("li:eq(1)").next().css("background-color","#F06");

prev([expr]) 用于获取紧邻匹配元素之前的元素，

如：$("li:eq(1)").prev().css("background-color","#F06");

slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素，

如：$("li:eq(1)").siblings().css("background-color","#F06");

jQuery中可以遍历前辈元素，方法如下：

parent()：获取元素的父级元素

parents()：获取元素的祖先元素

l CSS-DOM操作

语法 功能

css()           设置或返回匹配元素的样式属性

height([value])       设置或返回匹配元素的高度

width([value])       设置或返回匹配元素的宽度

offset([value])       返回以像素为单位的top和left坐标。此方法仅对可见元素有效

17、JQuery实现表单验证和正则表达式

1) 字符串方式验证表单

a) 非空验证 mail==”” “”表示空

b) 长度验证 pwd.length length是属性

c) 出现位置 indexOf() 查找字符在字符串中第一次出现的位置，-1表示找不到

d) 截取字符串 subString subString()

2) 正则表达式验证表单

3) Post和get的提交区别

Get:file:///E:/web_program/success.html?username=人都挺好&pwd=yjytrj+&pwd2=hedyfjty&phone=航天员的附件同样&email=如何推进&submit=注册

Post:file:///E:/web_program/success.html

注：表单使用name进行值的传递，name属性很重要