jQuery总结
第一章 JavaScript基础
--1、JavaScript是一种基于对象和事件驱动的，并具有安全性能的脚本语言。
--2、JavaScript的特点:
-1、JavaScript主要用来在HTML页面中添加交互行为
-2、JavaScript是一种脚本语言，语法和Java类似
-3、JavaScript一般用来编写客户端的脚本
--3、JavaScript的基本结构
语法:
<script type="text/javascript">
JavaScript 语句;
document.write("");
<script>
--4、网页中引用JavaScript的方式
-1、使用<script>标签
-2、使用外部JavaStript文件
<script src="export.js" type="text/javascript"></script>
-3、直接在HTML标签中引用
--5、JavaScript声明变量的语法格式
var 合法的变量名;
--6、数据类型
undefined 未定义类型
null 空类型
number 数值类型
String 字符串类型
boolean 布尔类型
--7、typeof
ECMAScript提供了typeof运算符来判断一个值或变量究竟属于哪种数据类型。
语法:
typeof(变量或值)
--8、undefined类型
undefined类型只有一个值,即undefined。当声明的变量未初始化时,改变量的默认值是undefined。例如:
var width;
这行代码声明了变量width,且此变量没有初始值,将被赋予值undefined。
--9、number类型
JavaScript中定义的最特殊的类型是number类型，这种类型既可以表示32位的整数,也可以表示64位的浮点数。
--10、字符的属性和方法
JavaScript语言中的String也是一种对象,和Java中的String对象相似。它也有一个length属性，表示字符串的长度9(包括空格等),调用length的语法格式如下。
语法:
字符串对象.length;
var str="this is JavaStript";
var strLength=str.length;
最后,strLength返回的str字符串的长度是18。
同Java一样，在JavaScript中关于字符串对象的使用语法格式如下。
语法:
字符串对象.方法名( );
--11、JavaScript语言中的String对象也有许多方法用来处理和操作字符串，常用的方法如下:
indexOf(str,index):查找某个指定的字符串在字符串中首次出现的位置
charAt(index):返回在指定位置的字符
toLowerCase():把字符串转化为小写
toUpperCase():把字符串转化为大写
substring(index1,index2):返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str):将字符串分割为字符串数组
--12、boolean类型
boolean类型数据称为布尔型数据或逻辑型数据，boolean类型是ECMAScript中常用的类型之一,它只有两个值:true和false。
--13、数组
-1.创建数组
在JavaScript中创建数组的语法格式如下。
语法:
var 数组名称 = new Array(size);
其中，new是用来创建数组的关键字，Array表示数组的关键字,而size表示数组中可存放的原始总称,因此size用整数来表示
-2.为数值元素赋值
在声明数组时，可以直接为数组元素赋值。语法格式为:
语法:
var fruit = new Array("apple","orange","peach","banana");
也可以写成:
var arr=new Array(4);
arr[0]="apple";
arr[1]="orange";
arr[2]="peach";
arr[3]="banana";
--14、数组的常用方法和属性
length:设置或符合数组中的元素的目录
join():把数组的所有元素放入一个字符串，通过一个分隔符进行分割
sort():对数组排序
push():向设置末尾添加一个或多个元素，并返回新的长度
--15、中断循环
break:可以立即退出整个循环
continue:只能退出当前的循环，根据判断条件决定是否进行下一次循环
--16、常用的输入、输出
-1.警告(alert)
alert()方法前面已经使用过，此方法会创建一个特殊的小窗体，该对话框带有一个字符串和一个"确定"按钮
alert()方法的基本语法格式如下.
语法:
alert("提示信息");
-2、提示(prompt)
prompt()方法会弹出一个提示对话框,等待用户输入一行数据
prompt()方法的基本语法格式如下.
语法:
prompt("提示信息","输入框的默认信息");
该方法的返回值也可以被引用或存储到变量中,如:
var color=prompt("请输入你喜欢的颜色","红色");
--17、常用系统函数
-1.parseInt()
parseInt()函数可解析一个字符串,并返回一个整数，语法格式如下。
语法:
parseInt("字符串");
-2.parseFloat()
parseFloat()函数可解析一个字符串,并返回一个浮点数,语法格式如下。
语法:
parseFloat("字符串");
-3.isNaN()
isNaN()函数用于检查其参数是否是非数字,语法格式如下。
语法:
isNaN(x)
如果x是特殊的非数字值,则返回值是true;否则返回false。
--18、自定义函数
-1.定义函数
在JavaScript中,自定义函数由关键字function、函数名、一组参数及置于括号中的待执行的JavaScript语句组成，语法格式如下。
语法:
function 函数名(参数1,参数2,参数3,……){
//JavaScript语句
[return 返回值]
}
-2.调用函数
要执行一个函数,必须先调用这个函数,当调用函数时,必须指定函数名及其后面的参数(如果有参数)。函数的调用一般和元素的结合使用,语法格式如下。
语法:
事件名="函数名()";
-3、注释
study()是创建的无参函数,onclick表示按钮的单机事件,当单击事件按钮时调用函数study()。
count表示传递的参数,不需要定义数据类型,将prompt()方法返回的值作为参数传递给函数study(count)。
--19、变量的作用域
-1.JavaScript中的全局变量，是在所有函数之外的脚本中的声明的变量，作用范围是该变量定义后的所有语句，包括其后定义的函数中的代码，以及其后的<script></script>标签中的代码。
-2.JavaScript中的局部变量，是在函数内声明的变量。
-3.onload事件会在页面加载完成时立即发送。
--20、常见的事件
onload:一个页面或一副图像完成加载
onlick:鼠标单击某个对象
onmouseover:鼠标指导移到某元素上
onkeydown:某个键盘按键被按下
onchange:域的内容被改变
--21、JavaScript由三大部分组成ECMAScript、DOM、BOM。
---------------------------------------------------------------------------------------------------------
第二章 JavaScript操作DOM对象
--1、浏览器对象模型(BOM)是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。Windows对象是整个BOM的核心，在浏览器中打开网页后，首先看到的是浏览器窗口，即顶层是window的对象；其次是网页文档的内容。
--2、使用BOM通常可以实现如下内容:
-1.弹出新的浏览器窗口
-2.移动、关闭浏览器窗口及调整窗口的大小
-3.在浏览器窗口中实现页面的前进，后退功能。
--3、常用的属性
-1.window对象的常用属性
history:有关客户访问过的URL的信息
location:有关当前URL的信息
screen:只读属性，包含有关客户端显示屏的信息
-2.在JavaScript中，属性的语法格式如下。
语法:
window.属性名="属性值";
--4、常用的方法
-1.window对象的常用方法
prompt():显示可提示用户输入的对话标准
alert():显示一个带有提示信息和一个"确定"按钮的警示对话框
confirm():显示一个带有提示信息、"确定"和"取消"按钮的对话框
close():关闭浏览器窗口
open():打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout():在指定的毫秒数后调用函数或计算表达式
setInterval():按照指定的周期(以毫秒计)来调用函数或表达式
-2.在JavaScript中，方法的使用格式如下。
语法:
window.方法名();
-3.confirm()
confirm()将弹出一个确定对话框，语法格式如下。
语法:
window.confirm("对话框中显示的纯文本");
在confirm()弹出的确认对话框中，有一条提示信息，一个"确定"，一个"取消"按钮。如果用户单击"确定"按钮。则confirm()返回true；如果单击"取消"按钮，则confirm()返回false。
-4.prompt()方法和alert()方法的用法，与confirm()方法作用的不同之处
alert()只有一个参数. 仅显示警告对话框的消息，无返回值不能对脚本产生任何改变。
prompt()有两个参数. 是输入对话框用来提示用户输入一些信息，单击“取消”按钮则返回null单击确定按钮则返回用户输入的值常用于收集用户关于特定问题而反馈的信息。
confirm()只有一个参数 是确认对话框。显示提示对话框的消息"确定" 按钮和"取消"按钮返回true，单击"取消"按钮返回false，因此与if-else语句搭配使用。
-5、close()
close()方法用于关闭浏览器窗口，语法格式如下。
语法:
window.close();
-6、open()
在页面上弹出一个新的浏览器窗口，弹出窗口的语法格式如下。
语法:
window.open("弹出窗口的url","窗口名称","窗口特征")
open()方法通常用在打开一个网页弹出广告页面或网站的信息声明页面等。
--5、窗口的特征属性
height、width:窗口文档显示区的高度、宽度，以像素计
left、top:窗口的x坐标、y坐标，以像素计
toolbar=yes | no| 1 | 0 :是否显示浏览器的工具栏，默认是yes
scrollbars=yes | no|1 | 0 :是否显示滚动条，默认是yes
location=yes | no|1 | 0 :是否显示地址栏，默认是yes
status=yes | no|1 | 0 :是否显示状态栏，默认是yes
menubar=yes | no|1 | 0 :是否显示菜单栏，默认是yes
resizable=yes | no|1 | 0 :窗口是否可以调节尺寸，默认是yes
titlebar=yes | no|1 | 0 :是否显示标题栏，默认是yes
fullscreen=yes | no|1 | 0 :是否使用全屏模式显示浏览器，默认是no
--6、hiarory
-1.history对象提供用户最近浏览过的URL列表。但出于隐私方面的原因，history对象不再允许脚本访问已经访问过的实际URL，可以使用history对象提供的、逐个返回访问后的页面的方法
-2.history对象的方法
back():加载history对象列表中的前一个URL
forward():加载history对象列表中的后一个URL
go():加载history对象列表中的某个URL
--7、location对象
location对象提供当前页面的URL信息，并且可以重新装载当前页面或装载新页面
--8、location对象的属性
host:设置或返回主机名和当前URL的端口号
hostname:设置或返回URL和主机名
href:设置或返回完整的URL
--9、location对象的方法
reload():重新加载当前文档
replace():用新的文档替换当前文档
--10、document对象
-1.document对象的常用属性
referrer:返回载入当前文档的URL
URL:返回当前文档的RUL
-2.referrer的语法格式如下。
语法:
document.referrer
当前文档如果不是通过超链接访问，则document.referrer的值为null。
-3.URL的语法格式如下。
语法:
document.URL
--11、document对象的常用方法
getElementById():返回对拥有id的第一个对象的引用
getElementsByName():返回带有指定名称的对象的集合
getElementsByTagName():返回带有指定标签名的对象的集合
write():向文档写文本、HTML表达式后JavaScript代码
--12、JavaScript内置对象
-1.date:用于操作日期和时间
语法:
var 时间示例 = new Date(参数);
getDate():天数
getDay():星期
getHours():小时
getMinutes():分钟
getSeconds():秒数
getMonth():月份
getFullYear():年份
getTime():返回自某一时刻(1970年1月1日)以来的毫秒数
--13、定时函数
-1.setTimeout()
setTimeout()用于在指定的毫秒后调用函数或计算表达式。语法格式如下。
语法:
setTimeout("调用的函数名称",等待的毫秒数);
-2.setInterval()
setInterval()可按照指定的周期(以毫秒计)来调用函数或计算表达式。语法格式如下。
语法:
setInterval("调用的函数名称",周期性调用函数用函数之间间隔的毫秒性)
-3.clearTimeout()
clearTimeout()函数用来清除由setTimeout()函数设置的定时器，语法格式如下。
语法:
clearTimeout(setTimeout()返回的ID值);
clearInterval()函数用来清除由SetInterval()函数设置的定时器，语法格式如下。
语法:
clearInterval(setInterval()返回的ID值);
-------------------------------------------------------------------------------------------------------------------------------------------
第三章 JavaScript操作DOM对象
--1、DOM操作
-1.DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1938年,W3C发布了第一级的DOM模范,这个范围允许访问和操作HTML页面中的每个单独元素,如网页的表格、图片、文本、表单元素等。
-2.使用JavaScript操作的DOM是分为三个方面:DOM Core(核心)、HTML—DOM和CSS—DOM。
--2、HTML文档在DOM中是这样规定的。
1.整个文档是一个文档节点。
2.每个HTML标签时一个元素节点。
3.包含在HTML元素中的文本是文本节点
4.每个HTML属性是一个属性节点
5.注释属于注释节点。
--3、使用getElement序列方法访问指定节点
-1.在HTML文档中，访问节点的标准方法就是我们之前学习的getElement系列方法，即getElementByld( )、getElementsByName( )和getElementsByTagName( ),只是它们查找的方法略有不同。
-2.查找方法
getElementByld( ):返回按id属性查找的第个对象的引用。
getElementsByName( ):返回按带有指定名称name 查找的对象的集合，由于一个文档中可能会有多个同名节点(如复选框、 单选按钮),因此返回的是元素数组
getElementsByTagName( ):返回带有指定标签名TagName 查找的对象的集合，由于一个文档中可能会有多个同类型的标签节点(如图片组、 文本输入框)，因此返回元素数组。
--4、根据层次关系访问节点
-1.通过getElementById()、getElementsByName()和getElementsByTagName()这三种方法可查证看HTML文档的中的任何元素，但是这三种方法都会忽略文档的结构,因此在HTML DOM中提供了节点属性,这些属性可遵守文档的结构,在文档的布局进行"短距离地查找元素"。
-2.节点属性
parentNode:返回节点的父节点
childNodes:返回子节点集合,childNodes[i]
firstChild:返回节点的第一个子节点,最普通的用法是访问该元素的文本节点
lastChild:返回节点的最后一个子节点
nextSibling:下一个节点
previousSibling:上一个节点
--5、element属性
-1.在JavaScript中给大家提供一组可兼容不同浏览器的element属性,可以消除这种因空行,换行等出现的无法确定访问到节点的情况。
-2.element属性
firstElementChild:返回节点的第一个子节点,最普遍的用法是访问该元素的文本节点
lastElementChild:返回节点的最后一个子节点
nextElementSibling:下一个节点
previousElementSibling:上一个节点
--6、节点信息
-1.节点是DOM层次结构中的任何类型的对象的通用名称,每个节点都拥有包含着关于节点信息某些信息的属性,这些属性如下。
nodeName(节点名称)属性包含某个节点的名称,元素节点的nodeName是标签名称,属性节点dnodeName是属性名称,文本节点的nodeName永远是#text,文档节点的noedName永远是#document。
nodeValue(节点值),对于文本节点，nodeValue属性包含文本，对于属性节点，nodeValue属性包含属性值;nodeVlue属性对于文档节点和元素节点是不可用的。
nodeType(节点类型)属性可返回节点的类型，一个只读属性，如返回的元素节点、文本节点、注释节点等。
-2.节点类型
元素element的NodeType值是1
属性attr的NodeType值是2
文本text的NodeType值是2
注释comments的NodeType值是8
文档document的NodeType值是9
--7、操作节点的属性
-1.HTML DOM提供了获取及改变点属性值的标准方法，如下所示。
getAttention("属性名"):用来获取属性的值。
setAttribute("属性名","属性值"):用来设置属性的值。
--8、创建和插入节点
-1.使用JavaScript操作DOM有很多方法可以创建或增加一个新节点。主要方法如下。
-2.创建节点
createElement(tagName):创建一个标签名为tagName的新元素节点
A.appendChild(B):把B节点追加至A节点的末尾
insertBefore(A,B):把A节点插入B节点之前
cloneNode(deep):复制某个指定的节点
--9、删除和替换节点
使用Core HTML 删除节点的方法如下。
removeChild(node):删除指定的节点
replaceChild(newNode,oldNode):用其他的节点替换指定的节点,newNode是替换的新节点,oldNode是要被替换的节点。
--10、操作节点样式
-1.style属性
在HTML DOM中，style是一个对象，一个代表独立的样式声明，可通过应用样式的文档或元素访问style对象，使用style属性改变样式的语法如下。
语法:
HTML元素.style.样式属性="值";
-2.style对象的常用属性
background(背景):
backgroundColor:设置元素的背景颜色
backgroundImage:设置元素的背景图像
backgroundRepeat:设置是否及如何重复背景图像
text(文本):
fontSize:设置元素的字体大小
fontWeight:设置字体的粗细
textAlign:排列文本
textDecoration:设置文本的修饰
font:设置同一行字体的属性
color:设置文本的颜色
padding(边距):
padding:设置元素的填充
paddingTop:设置元素的上填充
paddingBottom:设置元素的下填充
paddingLeft:设置元素的左填充
paddingRight:设置元素的右填充
border(边框):
border:设置四个边框的属性
borderTop:设置上边框的属性
borderBottom:设置下边框的属性
borderLeft:设置左边框的属性
borderRight:设置右边框的属性
-3.常用事件
onclick:当用户单击某个对象时调用事件
onmouseover:鼠标移到某元素之上
onmouseout:鼠标从某元素移开
onmousedown:鼠标按钮被按下
-4.className属性
在HTML DOM中，className属性可设置或返回元素的class样式，语法如下。
语法:
HTML元素.className="样式名称"
--11、获取元素位置
-1.HTML中元素的属性
offsetLeft:返回当前元素左边界的距离，只读属性
offsetTop:返回当前元素上边界的距离，只读属性
offsetHeight:返回元素的高度
offsetWidth:返回元素的宽度
offsetParent:返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop:返回匹配元素的滚动条的垂直位置
scrollLeft:返回匹配元素的滚动条的水平位置
clientWidth:返回元素的可见宽度
clientHeight:返回元素的可见高度
-------------------------------------------------------------------------------------------------------------------------------------------
第四章 JavaScript对象及初识面向对象
--1、JavaScript中提供了常用的基本数据类型,这些数据类型如下所示。
number(数值类型)
string(字符串类型)
boolean(布尔类型)
null(空类型)
nudefined(未定义类型)
object:一种复杂的数据类型，该类型实例化的对象是一组数据和功能的集合
--2、创建对象
-1.自定义对象
与java中创建对象语言,创建自定义对象的最简单的方式就是使用操作符new创建一个object的示例,然后通过"."为其添加属性和方法,创建对象的语法如下所示。
语法:
var 对象名称=new Object();
-2.内置对象
JavaScript的内置对象是一种特殊的数据,常见的内置对象如下所示。
String(字符串)对象。
Date(日期)对象:用于处理日期和事间。
Array(数组)对象。
Boolean(逻辑)对象:用于将非逻辑值转换为逻辑(true或者false),在JavaScript中的布尔值是一种基本的数据类型，Boolean对象是一个将布尔值打包的布尔对象。
Math(算数)对象:是执行常用的算数任务。
RegExp对象:是怎则表达式的缩写,当需要检索某个文本时可以使用一种模式来描述要检索的内容,RegExp就是这种模式
--3、构造函数
-1.构造函数可用来创建特定类型的对象，像Object和Array这样的原生构造函数，在运行时会自动出现在执行环境中，此外，也可以创建自定义的构造函数。由此可知，所谓的"构造函数"就是一个普通函数,但是内部使用内部使用了this变量，对构造函数使用new操作符,就能生成实例,并且this变量会绑定在实例对象上，从而定义自定义类型的属性和方法。
-2.使用构造函数创建新实例，必须使用new操作符的四个步骤
1.创建一个新对象
2.将构造函数的作用域赋予给新对象(this就指向了这个新对象)
3.执行构造函数中的代码
4.返回新对象
--4、原型对象
在JavaScript中创建的每个函数都有一个prototype属性，这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以有特点类型的所有实例的共享的属性和方法。按照字面意思理解,prototype就是通过调用构造函数而创建的那个对象实例的原型对象,使用原型对象的好处就是可以让所有对象实例共享它所有的属性和方法,也就是说不必在构造函数中定义对象实例的信息
-------------------------------------------------------------------------------------------------------------------------------------------
第五章 初始jQuery
--1、介绍
-1.jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装。
-2.JavaScript是一种面向Web的脚本语言。大部分网站都使用了JavaScript,并且现有浏览器(基于桌面系统、平板电脑、智能手机和游戏机的浏览器)都包含了JavaScript解释器。它的出现使得网页与用户之间实现了实时、动态的交互,使网页包含了更多活泼的元素,使用户的操作变得更加简单便捷。
-3.JavaScript的弊端:一个是复杂的文档对象模型,另一个是不一致的浏览器实现。
-4.目前流行的JavaScript库:jQuery、Bootstrap、Zepto、Ext、YUI
-5.jQuery的用途:
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件的处理
4.方便地使用JQuery插件
5.与Ajax技术的完美结合
-5.JQuery的优势:
1.轻量级
2.强大的选择器
3.出色的DOM封装
4.可靠的事件处理机制
5.出色的浏览器兼容性
6.隐式迭代
7.丰富的插件支持
--2、配置jQuery环境
-1.jQuery的官方网站:http://jquery.com中下载jQuery库文件
-2.jQuery库的类型分为两种,分别是开发版(未压缩版)和发布版(压缩版),它门的对比如jQuery库的类型对比
jquery-1.版本号.js(开发版):完整无压缩版本,主要用于测试、学习和开发
jquery-1.版本号.js(发布版):经过工具压缩或经过服务器开启GZIP压缩,主要应用于发布的产品和项目
-3.jquery不用安装，想要在某个页面使用jQuery时,只需要在相关的HTML文档中引入该库文件的位置即可。
-4.在页面中引入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在body标签中引入jQuery库文件-->
<script src="js/jquery-1.版本号.js" type="text/javascript"></script>
</body>
</html>
--3、window.onload与$(document).ready()的对比
window.onload:
执行时机:
必须等待网页中所有的内容加载完毕后(包括图片,Flash、视频等)才能执行
编写个数:
同一时间不能编写多个
执行以下代码:
window.onload=function(){
alert("小明学习不好");
}
window.onload=function(){
alert("小明学习不好");
}
结果只会输出一个"小明学习不好"
简写方法:
无
$(document).ready():
执行时机:
网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完
编写个数:
同一时间能同时编写多个
执行以下代码:
$(document).ready(function(){
alert("小明学习不好");
});
$(document).ready(function(){
alert("小明学习不好");
});
结果会输出两次"小明学习不好"
简化写法:
$(document).ready(function(){
//执行代码
});
可以简写成:
$(function(){
//执行代码
});
--4、jQuery语法结构
-1.通过语句$(document).ready(function(){});不难发现,这条jQuery语句主要包含三大部分:$()、document和ready()。这三大部分在jQuery中分别称为工厂函数、选择器函数和方法,将其语法化后,结构如下。
语法:
$(selector).action();
-2.工厂函数$()
在jQuery中,美元符号"$"等价于jQuery,即$()=jQuery()。$()作用是将DOM对象转化为jQuery对象,只有将DOM对象转化为jQuery对象后,才能使用jQuery的方法
-3.选择器selector
jQuery支持CSS 1.0到CSS 3.0规则中几乎所有的选择器,如标签选择器、类选择器、ID选择器和后代选择器和后代选择器等,使用jQuery选择器和$()工厂函数可以非常方便地获取操作的DOM元素,语法如下。
语法:
$(selector)
ID选择器、标签选择器、类选择器的用法如下所示。
$("#userName") //获取DOM中id为userName的元素
$("div") //获取DOM中所有的div的元素
$(".content"); //获取DOM中class为content的元素
-3.方法action()
jQuery中提供了一系列方法。在这些方法中,一类重要的方法就是事件处理方法,主要用来绑定DOM元素的事件和事件处理方法。
1.addClass()方法是jQuery中用于进行CSS操作的方法之一,它的作用是被向被选元素添加一个或多个类样式,它的语法格式如下。
语法:
jQuery 对象.addClass([样式名])
2.$(this)的一个jQuery对象,指向鼠标指针当前移向的一菜单级
3.css()方法是jQuery中用于进行CSS操作的另一种方法,它的作用是为匹配的元素添加CSS样式,它的语法格式如下。
4.show()、hide()在jQuery中经常用到,分别用来显示、隐藏HTML元素,简单的语法格式如下。
语法:
$(selector).show();
$(selector).hide();
5.获取当前元素的下一个元素
next();
--5、jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象,他能够使用jQuery中的方法
--6、DOM对象和jQuery对象互转
-1.dom对象转成jquery对象
获取dom对象:var title = document.getElementById("title");
把dom对象转成jquery对象 var $title=$(title)括号中的是dom对象
-2.jquery对象转成dom对象
获取jquery对象 var $title=$("#title");
把jquery对象转成dom对象 var title = $title.get(0);
-------------------------------------------------------------------------------------------------------------------------------------------
第六章 jQuery选择器
--1、介绍
-1.Query选择器的优势
1.简介的语法
2.完善的处理机制
-2.属性选择器就是通过HTML元素的属性选择元素的选择器,它与CSS中的属性选择器语法构成完全一致。
-3.过滤选择器主要通过特定的过滤规则来筛选出需的DOM元素,过滤规则与CSS中的伪类语法相同,即选择器都一一个冒号(:)开头,冒号前是需要过滤的元素。
-4.过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。
-5.编写选择器时需要注意特殊符号和空格
--2、属性选择器
语法 描述
[attribute] 选取包含指定属性的元素
[attribute = value] 选取指定等于属性的某个元素
[attribute != value] 选取不是指定属性的某个元素
[attribute ^= value] 选取指定属性是以某个特定值开始的元素
[attribute $= value] 选取指定属性是以某个特定值结束的元素
[attribute *= value] 选取包含某个属性的元素
--3、基本过滤选择器
语法 描述
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 选取去除所有与给定选择器匹配的元素
:even 选取索引是偶数的元素
:odd 选取索引是基数的元素
:eq(index) 选取索引等于index的元素
:gt(index) 选取索引大于index的元素
:lt(index) 选取索引小于index的元素
:header 选取索引标题元素如h1、h2等
:focus 选取当前获取焦点的元素
:animated 选择所有动画元素
--4、可见性过滤选择器
选择器 描述
:visible 选取所有可见元素
:hidden 选取所有隐藏元素
--5、层次选择器
后代选择器 div p 中间加空格 {意思是div里面全部带p标签的全部选择}
子选择器 div>p 中间大于号{意思是div相当于爷爷 下面第一个p标签相当于他的儿子 被选中}
相邻选择器 div+p 中间加好 {和div平级也就是邻居 而第一家邻居被选择}
通用邻居选择器 div~p 中间波浪号{和div的平级是邻居 而此选择器选择的适合他的全部同级邻居}
-------------------------------------------------------------------------------------------------------------------------------------------
第七章 jQuery中的事件与动画
--1、在JavaScript中,常用的基础事件有鼠标事件、键盘事件、window事件、表单事件。事件绑定和处理函数的语法格式如下。
语法:
事件名 = "函数名()";
或者
DOM 对象.事件名=函数;
在事件绑定处理函数后,可以通过DOM对象.事件名()的方法显示调用处理函数。在jQuery中基础事件和JavaScript中的事件一致,它提供了特有的事件方法和处理函数绑定
--2、载入事件
window事件有文档载入事件,它对应的方法是ready()
--3、鼠标事件
-1.鼠标事件顾名思义就是当用户名在文档上移动时而产生的事件
-2.常用的鼠标事件的方法
方法 描述 执行时机
click() 触发或将函数绑定到指定元素的click事件 鼠标单击时
mouseover() 触发或将函数绑定到指定元素的mouseover事件 鼠标指针移过时
mouseout() 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时
mouseenter() 触发或将函数绑定到指定元素的mouseenter事件 鼠标指针进入时
mouseleave() 触发或将函数绑定到指定元素的mouseleave事件 键盘事件鼠标指针离开时
-3.语法:
$("标签名").鼠标事件的方法(function(){
//JavaScript代码
})
--4、键盘事件
-1.键盘样式指当键盘聚焦到Web浏览器,用户每次按下或者释放按键是就会产生事件。
-2.常用键盘事件的方法
方法 描述 执行时机
keydown() 触发或将函数绑定到指定元素的keydown事件 按下按键时
keyup() 触发或将函数绑定到指定元素的keyup事件 释放按键时
keypress() 触发或将函数绑定到指定元素的keypress事件 产生可打印的字符时
-3.键盘事件的执行顺序依次是keydown、keypress或keyup
--5、绑定事件
-1.在jquery中,如果需要为匹配的元素同时绑定一个或多个事件,则可以使用bind()方法,其语法格式如下。
语法:
bind(type,[data],fn)
-2.bind()方法有三个参数,其中参数data不是必须的
-3.bind()方法的参数
参数类型 参数含义 描述
type 事件类型 主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件
[data] 可选参数 作为event.data属性值传递给事件对象的额外数据对象,该参数不是必需的
fn 处理函数 用来绑定处理函数
--6、移除事件
-1.有时候事件执行完了,需要把绑定的事件通过一定的办法取消,在jQuery中,提供了移除事件的方法,在绑定事件时,可以为匹配元素绑定一个或多个事件,那么同样可以为之匹配的元素移除单个或多个事件,可以使用unbind()方法,其语法格式如下。
语法:
unbind([type],[fn])
unbind()方法有两个参数,这两个参数不是必须的,当unbind()不带参数时,表示移除所绑定的全部事件。
-2.unbind()方法的参数说明
参数类型 参数含义 描述
[type] 事件类型 主要包括click、mouseover、mouseout等基础事件,此外,还可以是自定义事件
[fn] 处理函数 用来解除绑定的处理函数
--7、复合事件
-1.在jQuery中有两个复合事件————hover()和toggle()方法,这两个方法与ready()类似,都是jQuery自定义的方法
-2.hover()方法
在jQuery中,hover()事件用于模拟鼠标指针移入和移出事件。当鼠标指针移至元素上时,会触发指定的第一个函数(enter);当鼠标指标移除这个元素时,会触发第二个函数(leave),该方法相当于mouseenter和mouseleave事件的组合。其语法格式如下。
语法:
hover(enter,leave);
-3.toggle()方法
1.在jQuery中,toggle分为带参数的方法和不带参数的方法;带参数的方法用于模拟的方法用于模拟鼠标连接click事件。第一次点击元素,触发指定的第一个函数(fn1);当再次单击同一个元素时,则触发指定的第二个函数(fn2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数轮番调用,toggle()方法的语法格式如下。
语法:
toggle(fn1,fn2,.....fnN);
2.toggle()不带参数时,与show()和hide()方法的作用一样,切换元素的可见状态,如果元素是可见性,则切换为隐藏状态;如果元素是隐藏的,则切换为可见状态;语法格式如下。
语法:
toggle();
3.与jQuery中的toggle()方法一样,toggleClass()可以对样式切换,实现事件触发时某元素在"加载某个样式"和"移除某个样式"之间切换,语法格式如下。
语法:
toggleClass(className);
--8、jQuery中的动画
-1.控制元素显示
1.在jQuery中,可以使用show()方法控制元素的显示,还能定义显示元素是的效果。show()的语法格式如下。
2.语法:
$(selector).show([speed],[callback])
3.show()的参数说明
speed:
可选。规定元素从隐藏到完全可见的速度。默认为"0"。
可能值:毫秒(如1000)、slow、normal、fast。
在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐改变高度、宽度、外边距、内边距和透明度
callback:
可选。show函数执行完之后,要执行的函数。
-2、控制元素隐藏
1.在jQuery中,可以使用hide()方法控制元素的隐藏,还能定义隐藏元素时的效果。hide()语法格式如下。
2.语法:
$(selector).hide([speed],[callback])
-3、控制元素淡入
1.在jQuery中,可以使用fadeln()方法控制元素的淡入,fadeln()方法的语法格式如下。
2.语法:
$(selector).fadeIn([speed],[callback])
3.fadeln方法的参数
speed:
可选。规定元素从隐藏到完全可见的速度。默认为"0"。
可能值:毫秒(如1000)、slow、normal、fast。
在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐第改变其透明度,给视觉以淡入的效果。
callback:
可选。fadeIn函数执行完之后,要执行的函数。
除非设置了speed参数,否则不能设置该参数
-4、控制元素淡出
1.在jQuery中,fadeOut()方法可以控制元素淡出,还能定义显示元素时的效果。fadeOut()方法的语法格式如下。
2.语法:
$(selector).fadeOut([speed],[callback])
-5、改变元素高度
1.在jQuery中,用于改变元素高度的方法是slideUp()和slideDown()。若元素的display属性值为none,当调用slideDown()方法时,这个元素会从上向下衍伸显示,而slideUp()方法正好相反,元素从上到下缩短直至隐藏,slideUp()和slideDown()方法的语法格式如下。
2.语法:
$(selector).slideUp([speed],[callback])
$(selector).slideDown([speed],[callback])
3.参数说明:
speed为可选参数,用来规定改变元素高度的时长,它的取值也是slow、fast或毫秒
callback为可选参数,表示改变元素高度完成后执行的函数名称。
-6、自定义动画
1.语法:
$(selector).animate({params},speed,callback)
2.animate()的参数说明:
params:必须,定义形成动画的CSS属性。
speed:可选,规定效果时长,取值:毫秒、fast、slow.
callback:可选,滑动完成后执行的函数名称。
-------------------------------------------------------------------------------------------------------------------------------------------
第八章 使用jQuery操作DOM
--1、jQuery中的DOM操作说明
jQuery中的DOM操作主要分为样式操作、文本和value属性值操作、节点操作，节点操作中又包含属性操作、节点遍历和CSS-DOM操作。其中,最核型的部分是节点操作和节点遍历。
--2、设置和获取样式值
-1.在jQuery中,使用css()方法为指定的元素设置样式值,其语法格式如下。
语法:
$(selector).css(name,value) //设置单个属性
或者:
$(selector).css({name:value,name:value,name:value}) //同时设置多个属性
-2.css()方法的参数说明
name:
必须。规定CSS属性的名称。该属性可以是任何CSS属性。
例如,font-size、background等
value:
必须。规定CSS属性的值。该参数可以是任何CSS属性值。
例如,#000000、24px等
-3.获取CSS属性值的方法很简单,语法格式如下。
语法:
$(selector).css(name); 获取属性
--3、追加样式和移除样式
-1.追加样式
1.除了使用css()方法可以元素添加样式外,还能使用addClass()方法为元素追加式。其语法如下。
语法:
$(selector).addClass(class)
2.class为类样式的名称，也可以增加多个类样式,各个类样式之间以空格隔开即可。其语法如下。
语法:
$(selector).addClass(class1,class2,class3......ClassN)
-2.移除样式
在jQuery中,与addClass()方法相对应的方法是移除样式的方法removeClass(),其语法格式如下。
语法:
$(selector).removeClass(Class) //移除单个样式
或者
$(selector).removeClass(class1,class2,class3......ClassN)
-3.切换样式
在jQuery中,使用toggle()方法可以切换元素的可见状态,使用toggleClass()方法可以切换不同元素的类样式,其语法格式如下。
语法:
$(selector).roggleClass(Class)
-4.判断是否含指定的样式
在jQuery中,提供了hasClass()方法来判断是否包含指定的样式,其语法如下所示。
语法:
$(selector).hasClass(class);
参数class是类名,该名称是必须的,规定指定元素中查找的类名,返回值为布尔值,如果包含查找的类则返回true,否则返回false。
--4、内容操作
-1.jQuery提供了对元素内容操作的方法,即对HTML代码(包括标签和标签内容)、标签内容和属性值内容三者的操作
-2.HTML代码操作
1.在jquery中,可以使用html()方法对HTML代码进行操作,该方法类似于传统JavaScript中的innerHTML,通常用于动态的新增页面内容。其语法如下。
语法:
html([content])
2.html()方法的参数说明
content:
可选。规定被选元素的新内容。给参数可以包括HTML标签。
无参数时,表示获取被选元素的文本内容
3.标签内容操作
1.在jQuery中,可以使用text()方法获取或设置元素的文本内容,不含HTML标签。其语法格式如下。
语法:
text([content])
1.text()方法的参数说明
content:
可选。规定被选元素的新文本内容。注释:特殊字符会被编码。
无参数时,表示获取被选元素的文本内容
4.html()方法和text()方法的区别
语法格式 参数说明 功能描述
html() 无参数 用于获取第一个匹配元素的HTML内容或文本内容
html(content) content参数为元素的HTML内容 用于设置所有匹配元素的HTML内容或文本内容
text() 无参数 用于获取所有匹配元素的文本内容
text(content) content参数为元素的文本内容 用于设置所有匹配元素的文本内容
-3.属性值操作
1.在jQuery中,除了可以使用html()方法和text()方法获取与设置元素内容外,还提供了获取元素value属性值的方法val()。该方法非常常用多用于操作表单的<input>元素。val()方法的语法格式如下。
语法:
val([value])
2.val()方法的参数说明
value:
可选。规定被选元素的新内容。
无参数时,返回值为第一个被选元素的value属性的值
--5、操作节点
-1.在jQuery中,节点操作主要分为查找、创建、插入、删除、替换和复制六种操作方法。
-2.创建节点
语法:
$(selector)
或者
$(element)
或者
$(html)
-3.$()的参数说明
selector:选择器。使用jQuery选择器匹配元素
element:DOM元素。以DOM元素来创建jQuery对象
html:HTML代码。使用HTML字符串创建jQuery对象
-4.插入节点方法
内部插入:
append(content):向所选择的元素内部
appendTo(content):把所选择的元素追加到另一个指定的元素集合中
prepend(content):向每个选择的元素内部前置内容
prependTo(content):将所有匹配元素前置到指定的元素中
外部插入:
after(content):在每个匹配的元素之后插入内容
insertAfter(content):将所有匹配元素插入指定元素后面。
before(content):向所选择的元素外部前面插入内容
insertBefore(content):将所匹配的元素插入指定元素的前面
-5.插入节点
1.remove()方法
语法:
$(selector).remove([expr])
其参数expr为可选项,如果接收参数,则该参数为筛选元素的jQuery表达式,通过该表达式获取指定元素,并进行删除。
2.empty()方法
语法:
$(selector).empty()
-6.替换节点
replaceWith()
replaceAll()
-7.复制节点
语法:
$(selector).clone([includeEvents])
--6、属性操作
-1.获取与设置元素属性
语法:
$(selector).attr([name]) //获取属性值
或者
$(selector).attr({[name1:value1],[name2:value2].....[nameN:valueN]}) //设置多个属性值
其参数name表示属性名称,value表示属性值
-2.删除元素属性
语法:
$(selector).removeAttr(name)
--7、节点遍历
-1.遍历子元素
在jQuery中,遍历子元素的方法只有一个,即children()方法。如果想获取某元素的子元素,并对其进行操作,可以使用jQuery中提供的children()方法。该方法可以用来获取元素的所有子元素的所有子元素,而不考虑其他后代元素。其语法格式如下。
语法:
$(selector).children([expr])
其参数expr为可选,用于过滤子元素的表达式。
-2.遍历同辈元素的说明方法
next([expr]):用于获取紧邻匹配元素之后的元素
prev([expr]):用于获取紧邻匹配元素之前的元素
siblings([expr]):用于获取位于匹配元素前面和后面的所有同辈元素
-3.遍历前辈元素
语法:
参数可选。获取当前匹配元素集合中每个元素的父级元素
$(selector).parent([selector])
参数可选。获取当前匹配元素集合中每个元素的祖先元素
$(selector).parents([selector])
-4.其他遍历方法
1.each()方法
each()方法规定为每个匹配元素规定运行的函数,语法格式如下。
语法:
$(selector).each(function(index,element))
2.end()方法
end()方法结束当前链条中最近的筛选操作,并将匹配元素集还原为之前的状态,语法如下所示。
语法:
.end();
--8、CSS-DOM相关操作方法说明
css():设置或返回匹配元素的样式属性
height([value]):参数可选。设置或返回匹配元素的高度。如果没有规定长度单位,则使用默认的px作为单位
width(value):参数可选。设置或返回匹配元素的宽度。如果没有规定长度单位,则使用默认的px作为单位
offset([value]):返回以像素为单位的top和left坐标。此方法仅对可见元素有效
offseParent():使用最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed元素
postiton():返回第一个匹配元素相对于父元素的位置
scrollLeft([postiton]):参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([postiton]):参数可选。设置或返回匹配元素相对滚动条顶部的偏移
-------------------------------------------------------------------------------------------------------------------------------------------
第九章 表单校验
--1、表单选择器
语法 描述
:input 匹配所有input、textarea、select和button元素
:text 匹配所有单行文本框
:password 匹配所有密码框
:radio 匹配所有单项按钮
:checkbox 匹配所有复选框
:submit 匹配所有提交按钮
:image 匹配所有图像域
:reset 匹配所有重置按钮
:button 匹配所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素,或者type为hidden的元素
--2、表单属性过滤器
语法 描述
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有被选中元素(复选框、单项按钮、select中的option)
:selected 匹配所有选中的option元素
--3、表单验证常用的方法和事件
事件:
onblur:失去焦点,当光标离开某个文本框时触发
onfocus:获取焦点,当光标进入某个文本框时触发
方法:
blur():从文本域中移开焦点
focus():在文本域中设置焦点,即获得光标
select():选取文本域中的内容,突出显示输入区域的内容
--4、正则表达式
-1.正则表达式是一个描述字符模式的对象,它是由一些特殊的符号组成的,这些符号和在SQL Server中学过的通配符一样,其组成的字符模式用来匹配各种表达式。
-2.定义正则表达式
1.普通方式
语法:
var reg=/表达式/附加参数
表达式:一个字符串代表了某种规则,其中可以使用某些特殊字符来代表特殊的规则
附件参数:用来扩展表达式的含义,主要有以下三个参数。
g:代表可以进行全局匹配
i:代表不区分大小写匹配
m:代表可以进行多行匹配
2.构造函数
语法:
var reg=new RegExp("表达式","附加参数");
3.表达式的模式
1.简单模式
简单模式是指通过普通字符的组合来表达的模式。例如:
var reg=/china/;
var reg=/abc8/;
2.复合模式
复合模式是指含有通配符来表达的模式,这里的通配符与SQL Server中的通配符相似。例如:
var reg=/^\w+$/;
4.RegExp对象
方法 描述
exec() 检索字符中是正则表达式的匹配,返回找到的值,并确定其位置
test() 检索字符串中指定的值,返回true后false
5.test()方法用于检测一个字符串是否匹配某个模式,语法格式如下。
语法:
正则表达式对象实例.test(字符串)
6.String对象的方法
方法 描述
match() 在字符串内检索指定的值,找到一个或多个正则表达式的匹配
search() 检索与正则表达式相匹配的值
replace() 替换与正则表达式匹配的字符串
split() 把字符串分割为字符串数组
7.方法
1.match()方法:在字符串内检索指定的值,找到一个或多个正则表达式的匹配
语法:
字符串对象.match(searchString或regexpObject)
searchString是检索的字符串的值,regexpObject是规定要匹配模式的RegExp对象。
2.replace()方法
语法:
字符串对象.replace(RegExp对象或字符串,"替换的字符串")
3.split()方法
语法:
字符串对象.split(分隔符,n)
8.RegExp对象的属性
属性 描述
global RegExp对象是否具有标志g
ignoreCase RegExp对象是否具有标志i
multiline RegExp对象是否具有标志m
9.正则表达式的常用符号
符号 描述
/.../ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\s 任何空白字符
\S 任何非空白字符
\d 匹配一个数字字符,等价于[0~9]
\D 除了数字之外的任何字符,等价于[^0~9]
\w 匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9]
\W 任何非单字字符,等价于[^a-zA-Z0-9_]
. 除了换行符之外的任意字符
10.正则表达式的重复字符
符号 描述
{n} 匹配前一项n次
{n,} 匹配前一项n次,或者多次
{n,m} 匹配前一项至少n次,但是不能超过m次
* 匹配前一项0次或多次,等价于{0,}
+ 匹配前一项1次或多次,等价于{1,}
？ 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}
--5、HTML5新增加验证属性
属性 描述
placeholder 提供一种提示(hint),输入域为空时显示,获得焦点输入内容后消失
required 规定输入域不能为空
pattern 规定验证input域的模式(正则表达式)
--6、validityState对象
valueMissing:表单样式设置了required特征,则为必填项。如果必填项的值为空,就无法通过表单验证,valueMissing属性会返回true,否则返回false
typeMismatch:输入值与type类型不匹配。HTML5新增的表单类型如email、number、url等,都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合,则typeMismatch属性将返回true,否则返回false
patternMismatch:输入值与pattern特征的正则表达式不匹配。如果输入的内容不符合pattern验证模式的规则,则patternMismatch属性将发回true,否则返回false。
tooLong:输入的内容超过了表单元素的maxLength 特性限定的字符长度。
rangeUnderflow:输入的值小于min特性的值。
rangeOverflow:输入的值大于max特性的值。
stepMismatch:输入的值不符合step特征所推算出的规则。
customError:使用自定义的验证错误提示信息。
