jQuery

dong021103

已于 2022-01-27 13:39:05 修改

阅读量1.4k

点赞数 1

文章标签：前端 jquery

于 2022-01-27 13:35:41 首次发布

本文链接：https://blog.csdn.net/dong021103/article/details/122716296

版权

一，什么是javaScript

1.JavaScript的特点

JavaScript 主要用来在 HTML页面中添加交互行为
JavaScript 是一种脚本语言，语法和Java 相似
JavaScript 一般用来编写客户端的脚本
JacaScript 是一种解释性语言，边执行边解释

2.Javascript的组成

ECMAScript标准

语法；变量和数据类型；运算符；逻辑控制语句；关键字、保留字；对象
浏览器对象模型（BOM）
文档对象模型（DOM）

注释

/**/ 多行注释
// 单行注释

3.数据类型

undefined（未定义类型）
null（空类型）
number（数值类型）
String（字符型类型）
boolean（布尔类型）
基本数据类型：String、boolean、Number、Undefined、Null,
引用数据类型：Object(Array、Date、RegExp、Function)。

4.变量名

JavaScript变量命名与Java变量命名规则相同，即可以由数字、字母、下划线和“$”字符组成，但首字母不能是数字，并且不能使用关键字命名

JavaScript是一种弱类型语言，因此允许不声明变量而不直接使用，系统会自动声明该变量

5.typeof（）

typeof（变量或值）

用来判断数据类型

方法	描述
indexOf（str,index）	查找某个指定的字符串类型在字符串中首次出现的位置
charAt（index）	返回指定位置的字符
toLowerCase	把字符转出为小写
toUpperCase	把字符转化为大写
substring（index1，index2）	返回index1和index2之间的字符包括index1 不包括index2
split（str）	将字符进行分割成数组

6.数组

1.创建数组

var 数组名称 =Array（size）；

eg： var se=new Array（10）;

2.为数组赋值

var fruit=new Array("apple","dasda","qwe");

3.访问数组元素

数组名平 [下标]；

4，数组常用的属性和方法

类别	名称	描述
属性	length	设置返回数组中元素的数目
方法	join（）	把数组所有元素放进一个字符串，通过一个分隔符分割
	sort（）	对数组进行排序
	push（）	向数组末尾添加一个或多个元素

1）数组用法，长度

var studentArrays=new Array(3); //设置了长度
var studentArrays=["张三"，21,]; //var是弱类型，可添加任意类型
studentArrays.length;   //数组的长度

2）数组排序 sort()

var num=[1111212,6,3,4,1,2,1];
num.sort(); //1111212太大，排序错误
//使用方法
num.sort(function(a,b){
    return a-b;  //从小到大
    return b-a;  //从大到小
});

3）数组连接 join()

var arr=[1,2,3,4,5];
arr.join("www");//把数组每一项用“www”连接起来，形成一个字符串

4）数组末尾添加并返回新的长度 push()

var arr=[1,2,3,4,5];
arr.push(6);  //添加一个
arr.push(7,8);  //添加多个
//返回新的长度

7.运算符号

类别	运算符
算术运算符	+， -， *， /， %，++，--
比较运算符	>, < , >= ,<=, ==, !=, ===, !==
逻辑运算符	&&, \|\|. !
赋值运算符	=, +=, -=

8.逻辑控制语句

t条件结构

if（）结构 switch（）结构
循环结构

for （初始化；条件；增量或减量）{//JavaScript 语句}

9.常用的输入/输出

1）.警告（alert）

alert(“提示信息”)；

2）.提示（prompt）

prompt("提示信息"，“输入框默认信息”)；

10.Javascript 常用语法—函数

常用的系统函数

parselnt（“字符串”） eg ： var num1=parseInt("21.23"); // 返回21
parseFloat（“字符拆 "） eg: var num2=parseFloat(”12.51“)； //返回12.51
isNAN（x） eg：var num3=isNAN（"12.5"）; 返回false 检查其是否是数字是数字返回 false 不是数字返回true

自定义函数

定义函数

function 函数名（参数1，参数2，参数3，....）{

//JavaScript语句；

}

调用函数

事件名=“函数名（）”；

11.事件

名称	说明
inload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
onmouseover	鼠标指导移动到某个元素上
onmouseout	鼠标从某元素移开
onkeydown	某个键盘按键被按下
onchange	域的内容被改变
onFocus	当输入获得焦点后，产生该事件。
onblur	失去焦点事件
window.οnscrοll=move	滚动事件

12.弹框

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

prompt() 方法用于显示可提示用户进行输入的对话框。

alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框

二 . JavaScript操作BOM对象

1.window对象。

Window对象包括常用的属性

location，history，document。open（）是其方法

常用属性

window.location="http://bdqn.cn";

名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息
screen	只读属性，包含有关客户端显示屏幕信息

常用方法

名称	说明
prompt（）	显示可提示用户输入的对话框
aleart（）	显示一个带有提示信息和一个确定按钮的警示对话框
cinfirm（）	显示一个带有提示信息确定和取消按钮的对话框
close（）	关闭浏览器窗口
open（）	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout（）	在指定的毫秒数后调用函数或计算表达式
setInterval（）	按照指定的周期（以毫秒计）来调用函数或表达式

window.方法名（）；

1）. confirm（）

将弹出一个确认对话框；

widow.confirm(“对话框中显示的文本”)

eg： widow.confirm(“确定删除吗？”);

2）.close（）

用于关闭浏览器窗口

widow.close（）；

3）. open（）

在页面上弹出一个新的浏览器窗口

window.open（“弹出窗口的url”，“窗口名称”，“窗口特征”）；

2.history 对象与location对象

history 对象

名称	描述
back（）	加载history对象列表中的前一个URL
forward（）	加载history对象列表中的后一个URL history.go(1);
go（）	加载history对象列表中的某个具体URL

back（） history.back（）等效于浏览器中的后退按钮
forward（） history.forward（）等效于浏览器中的前进按钮

location对象

location对象的属性

名称	描述
host	设置或返回主机名和当前URL的端口号
hostname	设置返回当前URL的主机名
href	设置或返回完整的URL

location 对象的方法

名称	描述
reload（）	重新加载当前文档
replace（）	用新的文旦替换当前文档
assign

3.document对象

document 对象的常用属性

属性	描述
referrer	返回载入当前文档的URL
URL	返回当前文档的URL`

referrer 语法格式

document.referrer

URl语法格式

document.URL

document 对象的常用方法

方法	描述
getElementById（）	返回对拥有指定id的第一个对象的引用
getElementsByName（）	返回带有指定名称的对象的集合
getElementsByTagName（）	返回带有指定标签名的对象集合
write（）	向文档写文本，HTML表达式或JavaScript代码

4.JavaScript对象

Date对象

var 日期实例 =new Date（参数）

方法	说明
getFullYear（）	返回年份
getMonth（）	返回月份
getDate（）	返回日
getHours（）	返回小时
getMinutes（）	返回分钟
getSeconds（）	返回秒
getDay（）	返回星期
getTime（）	返回

Math 对象

方法	说明	示例
ceil（）	向上取舍	`math.ceil(25.5)`返回26 `Math.ceil(-25.5)` 返回-25
floor（）	向下取舍	`Math.floor(25.5)`返回`25Math.floor(-25.5)` 返回-26
round（）	四舍五入为最近的数	math.found(25.5)`返回26`Math.found(-25.5)` 返回-26
random（）	返回0~1之间的随机数	math.random（）；返回随机数

5.定时函数

常用定时函数

1）. setTimeout（1000）延长1秒执行

2）. serInterval（1000）每隔1秒执行

6.状态栏

Location=0无地址栏 menubar表示菜单栏 statusbars=0无状态栏 toolbars=1有工具栏 scrollbars=1 有滚动条 resizable=0设置浏览器不能改变大小

第三章 JavaScript操作DOM对象

DO操作分类

定义了访问HTML文档的一套

属性方法事件

1.访问节点

文档对象模型（Document Object Model，简称DOM）

documentElement属性来获取HTML文件的根节点

属性名称	描述
parentNide	返回节点父节点
childNodes	返回子节点集合
firstchild	返回节点的第一个子节点最普遍的用法是访问钙元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

element属性

属性名称	描述
firstElementChild	返回节点的第一个子节点
lastElementChid	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibing	上一个节点

2.节点信息

nodoName 节点名称
nodeValue 节点值
nodeType 节点类型

节点类型

节点类型	ModeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

3.操作节点的属性

Dom提供了湖区即改变节点属性值的标准方法

getAttribute (“属性名”) 用来获取属性的值
setAttribute(“属性名"，”属性值“)用来设置属性的值

4.创建和插入节点

名称	描述
createElement（tagName）	创建一个名称喂tagName的新元素节点
A.appendChild（B）	把B节点追加至A节点的末尾
insertBore（A,B）	把A节点插入B节点之前
cloneNode（deep）	复制某个指定的节点参数deep为布尔值

5.删除和替换节点

名称	描述
remove（node）	删除指定节点
repaceChild（newNode，oldNode）	将其它的节点替换成指定节点

6.操作节点样式

1). style 属性

docment.getElementById（“id”）。style.样式属性=“值”

类别属性文本 fontSize、fontWright、textAligh、color...... 边距 padding、paddingTop、paddingBottom、paddingRight、paddingLeft 背景 backgroundColor、backgroundImage...... 边框 border......

常用事件

名称	描述
onclick	当用户单击某个对象是调用事件
onmouseover	鼠标移动到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

7.获取与设置元素内容

获取元素内容

var ul=document.getElementsByTagName("ul")[0] ;

var neirong=ul.firstElementChild.innerHTML

var neirong=ul.firstElementChild.innerText
改变内容

ul.firstElementChild.innerHTML="内容"；

ul.firstElementChild.innerText="内容"；
innerHTML与innerText的区别

innerHTML可以在里面识别标签，innerText会把当成内容
表单内容的获取和改变

var input=document.getElementById("inp") ;

var neirong=inp.value；

inp.value="内容"；
属性的获取和改变（例：图片——图片的属性）

var imgs=document.getElementById("gyy") ;

imgs.getAttribute("src") //获取路径

imgs.getAttribute("alt") //获取alt)(图片没加载显示)

imgs.setAttribute("src","路径" ) //改变路径
style属性获取设置样式

var div=document.getElementsByTagName("div")[0];

div.style.color="red"; //赋值设置，不赋值获取

div.className="classha"; //className的值为< style >中的. .classha
className属性获取样式

HTML元素.className="样式名称" //获取的是class样式

第四章，JavaScript对象及初识面向对象

数据类型

number（数值类型）；

string（字符串类型）；

boolean（布尔类型）；

null（空类型）；

undefined（未定义类型）；

object（复杂的数据类型）；

1.自定义对象

//一
var 对象名称=new Object();
对象名称.属性=“属性值”;
对象名称.方法名=function(){
    //方法
}

//二
var 对象名称={
    属性：”属性值“;
    方法名：function(){
        //方法
    }
}

//调用方法（一样）
对象名称.方法名();

2.内置对象

设定好的对象，如：

String（字符串）对象
Date（日期）对象
Array（数组）对象
Boolean（逻辑）对象
Math（算数）对象
RegExp 对象

3.构造函数

function Flower(name){   //构造函数首字母大写  可有参、可无参
    this.name=name;  //前一个name是构造教案函数里的属性，后一个为传的参数
    this.showName=function(){ //方法
        alter(this.name);
    }
}

//调用
var f1=new Flower("name");
fl.showName();

4.原型对象

prototype属性

prototype 就是通过调用构造函数而创建的那个对象实例的原型对象，使用原型对象的好处就是可以让所有对象实例共享它所有的属性和方法，也就是说不必在构造函数中定义对象实例的信息，可以将这些信息直接添加到原型对象中

function Flower(){

}
Flower.prototype.name="name";
Flower.prototype.showName=function(){ //方法
        alter(this.name);
}
//调用
var f1=new Flower("name");
fl.showName();   //若在它本身的函数中没有找到，就用它原型对象里的属性或方法，有则用自己的

5.对象继承

//用prototype属性继承
function Human(){

}

Flower.prototypt=new Human()  //继承了Human  
//Flower的原型对象为Human()     相当于Human为Flower父类

借用构造函数

//借用了父类的构造函数
apply([thisObj[,argArray]]) 
call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 
//两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

组成继承

将原型链（prototype）和借用构造函数（call / apply）的技术组合到一块

使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

6.jQuery 语法简介

<script src="./jquery-3.6.0.js"></script> 
//js是从官网复制来的，直接调用
<scrip>
    //语句1
    $(document).ready(function(){
    
	})
	//语句2
	$(function(){
        
    })
</script>

第五章.初始jQuery

jQuery文档处理包括：包裹、赋值、替换、删除、内部和外部插入

$("#id名").css("color","red");  //字体颜色换位红色;
$("#id名").css("font-size","30px");  //字体大小改为30px
//合写
$("#id名").css({"color":"red",
               "font-size":"30px"});


//隔行操作
$("li:even").css("color","red");  //偶数行设置 行下标从0开始
$("li:odd").css("color","red");   //奇数行设置


//显示与隐藏 的两种方法
$("#id名").css("display","none");  //隐藏
$("#id名").hide();
$("#id名").css("display","block")  //显示
$("#id名").show();


//addClass方法
$("div").addClass("con");  //"con"为style中的.class(类) 
//把.con中的样式添加到div标签
//removeClass方法
$("div").removeClass("con");
//把.con中的样式从div标签中移出

1.将DOM对象转换为jQuery对象

var li1=document.getElementById("li1");   //后加引号的li1为id名   //DOM对象
$(li1).css("color","red")  //li1为上面的变量  //加个$()包起来就是jQuery对象

2.将jQuery对象转换为DOM对象

var $txtName=$("#txtName");  //jQuery对象
var txtName=$txtName[0]; 或  var txtName=$txtName.get(0);  //DOM对象

第六章 jQuery 选择器

1.基本选择器

名称	语法	描述	示例
标签选择器	div	匹配指定的标签名元素	$（“div”）选取所有div 元素
类选择器	.class	匹配指定的class元素	$（“.div”）选取所有clss为 div元素
id选择器	#id	匹配指定的id元素	$（“#id'”）选取所有id为id的元素
并集选择器	div，#p，.title	将每个选择器匹配的元素合并后到一起	$（“div，#p，.title”）选取所有以div标题 id为p，class为title的元素
全局选择器	*	匹配所有元素	$（*）选取所有元素

2.层次选择器

名称	语法构成	描述	示例
后代选择器	div p	选取div元素里所有p 元素	$（“div p”）选取<div> 下所有<p>标签
子选择器	div>p	选取div元素下的p（子）元素（第一个p标签）	$（“div>p”）选取<div> 下第一个<p>标签
相邻元素选择器	div+p	选取相邻div元素之后的p标签	$（“div+p”）选取相邻<div> 之后的同辈<p>标签
同辈选择器	div~p	选取<div>元素之后所有<p>同辈元素	$（“div~p”）选取相邻<div> 之后的所有同辈<p>标签

3.属性选择器

语法	描述	示例
"[id]"	选取包含指定属性的元素	$（“[id']”）选取含有id属性的元素
“[id='div']”	选取等于指定属性是某个指定值的元素	$（“[id='div']”）选取含有id属性值为div的元素
“[id!=div]”	选取不等于指定属性是某个特定值得的元素	$（“[id!='div']”）选取id属性值不等于div的元素
“["id^div"]”	选取指定属性是以某些特定值开始的元素	$（“[id^'div']”）选取id属性值以div开头的元素
“["id$=div"]”	选取指定属性是以某些特定值结束的元素	$（“[id!$=div']”）选取id属性值div结尾的元素
“["id*=div"]”	选取指定属性值包含某些值的元素	$（“[id!*=div']”）选取id属性值包含div的元素

4.基本过滤选择器

语法	描述	示例
：first	选取第一个元素	$（"li:first"）选取所有<li>元素中第一个元素
：last	选取最后一个元素	$（"li:last"）选取所有<li>元素中最后一个元素
：not（div）	选取去除所有与给指定选择器匹配的元素	$（"li:not（div）"）选取不是<div>的标签
：even	选取索引是偶数的所有元素（从0开始）	$（"li:even"）选取索引是偶数的所有<li>元素
：odd	选取索引是奇数的所有元素（从0开始）	$（"li:odd"）选取索引是奇数的所有<li>元素
：eq（index）	选取索引等于index的元素（从0开始）	$（"li:eq（1）"）选取索引等于1的<li>元素
：gt（index）	选取索引大于index的元素（从0开始）	$（"li:ge（1）"）选取索引大于1的<li>元素（大于1，不包括1）
：lt（index）	选取索引小于index的元素（从0开始）	$（"li:lt（1）"）选取随意小于1的<li>元素（小于1，不包括1）
：header	选取索引标题元素 h1~h2	$（"li:header"）选取网页中的所有标题元素
：focus	选取当前获取焦点的元素	$（"li:focus"）选取当前获取焦点的元素
：animated	选取所有动画元素	$（"li:animated"）选取当前所有动画元素

5.可见性过滤元素

选择器	描述	示例
: visible	选取所有可见的元素	$(":visible")选取所有可见的元素
: hidden	选取所有隐藏的元素	$(":hidden")选取所有隐藏的元素

第七章.jQuery中的事件与动画

jQuery中的事件

js中的事件：鼠标事件，键盘事件，window事件，表单事件

1.基础事件

鼠标事件

click(),鼠标单击事件

mouseover(),鼠标指针移过时

mouseout()，鼠标指针移除时

mouseenter()，鼠标指针进入时

mouseleave()，鼠标指针移除时

键盘事件

回车键 13 Tab键 9

keydown()，按下键盘时

keyup()，释放键盘时

keypress()，产生可打印的字符

获取当前按键的键值：keyCode，识别按下了哪个键

例：$(document).keydown(function(**event**){
					if(event.**keyCode**=='13'){
						alter("确认提交吗？");
}})；

载入事件：ready（）
浏览器事件

调整浏览器的大小：$(selector).resize();

在方法内部，this指调用这个方法的DOM对象

2.绑定事件

js：事件名=“函数名（）”/DOM对象.事件名=函数。

jQuery：bind ( type , [data] , fn);

例：$("li"),bind("mouseover",function(){
});
同时绑定多个事件
$("li"),bind({
	mouseover：function(){	  }，//逗号分隔

	mouseover：function(){	  }
});

参数类型	参数含义	描述
type	事件类型	基础事件、自定义事件
[data]	可选参数	作为event.data属性值传递给事件对象的额外数据对象，该参数不是必须的
fn	处理函数	用来绑定处理函数

3.移除事件

unbind（[type],[fn]）

仅移除一个事件：

var  con=function(){  };

$("li").unbind("mouseover",con);

移除多个事件

$("li").unbind();

4.复合事件

hover()方法

hover(enter,leave)

模拟鼠标指针移入移出，鼠标移入处罚第一个函数，移除时触发第二个函数

$("li").hover(function(){
	$("li:eq("+$("li").index(this)+") div").show()
},function(){$("li:eq("+$("li").index(this)+") div").hide()}
  );

toggle()方法

toggle(fn1,fn2......fnnN)

相当于连续单击事件，第一次点击触发第一个函数，第二次触发第二个……

toggle()

切换元素的可见状态，如果是可见的切换为隐藏，隐藏的切换为可见的

toggleClass()

事件触发对象在加载某个样式和移除某个样式之间的切换

jQuery中的动画

5.控制元素显示与隐藏

显示

$(selector).show([speed],[callback]);
隐藏

$(selector).hide([speed],[callback]);
改变元素透明度(淡入淡出)

$(selector).fadeIn([speed],[callback])；//控制元素淡入

$(selector).fadeOut([speed],[callback])；//控制元素淡出

参数类型	描述
speed	可选，从隐藏到完全可见的速度，默认’0‘，可能值：毫秒，slow，normal，fast
callback	可选，show执行完之后，要执行的函数

6.改变元素的高度

$(selector).slideDown([speed],[callback]);//该元素隐藏时，从上向下延伸显示

$(selector).slideUp([speed],[callback]);//该元素显示时，从下到上缩短隐藏

7.自定义动画

$(selector).animate({params},speed,callback);

第八章，使用jQuery操作DOM

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"

注：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

jQuery对JavaScript中的DOM操作进行了封装： jQuery中的DOM操作：

1.样式操作

①使用css()为指定的元素设置样式值或获取样式值

语法：

css(name,value) ; 【设置单个属性】

或

示例：

$(this).css("border","5px solid #f5f5f5");

或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"}); 【opacity：设置透明度】

②追加样式

语法：

$(selector).addClass(.one);

或

$(selector).addClass(class1 class2 … classN);

示例：""

.text{ padding:10px;}

.content {background-color:#FFFF00; }

.border {border:1px dashed #333; }

$("h2").mouseover(function() { $("p").addClass("content border"); });

【使用addClass为P添加content和border】

③移除样式

语法：

$(selector).removeClass("class") ;

或

$(selector).removeClass("class1 class2 … classN ") ;

示例：

$("h2").mouseout(function() { $("p").removeClass("text content"); });

【使用removeClass为P移除content和text】

④切换样式

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

语法：$(selector).toggleClass(class) ;

示例：$("h2").click(function() { $("p").toggleClass("content border"); });

⑤判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法：$(selector). hasClass(class);

示例：

   $(docment).ready(function(){
        $("div").mouseout(function(){
            if(!$("p:eq(1)").hasClass("three")){
         $("p:eq(2)").addClass("three");
     }
    })
    $("div").mouseout(function(){
        if($("p").hasClass("three")){
         $("p").removeClass("three");
     }
    })
});

    【鼠标移入,增加样式content,鼠标离开时移除content】

2.内容及Value值操作

attr()用于获取或设置属性值，

html用于获取HTML内容的方法

text()用于获取或设置元素文本内容不包含HTML标签，

val()用于获取元素value属性值，

①HTML代码操作

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

语法：

$("div.left").html(); 【获取元素中的html代码】

或

$("div.left").html("<div class='content'>…</div>"); 【设置元素中的html代码】

示例：

$("div.left").html("");

【清空需要添加引号，如果html方法括号中不添加任何内容，是获取html代码】

②标签内容操作

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

语法：

$("div.left").text(); 【获取元素中的文本内容】

或

$("div.left").text("<div class='content'>…</div>"); 【设置元素中的文本内容】

示例：

$("div.left"). text ("");

【清空需要添加引号，如果text方法括号中不添加任何内容，是获取文本内容】

注：html( ) 和text( )方法的区别：

语法格式

参数说明

功能描述

html( )

无参数

用于获取第一个匹配元素的HTML内容或文本内容

html(content)

content为元素的HTML内容

用于设置所有匹配元素的HTML内容或文本内容

text( )

无参数

用于获取所有匹配元素的文本内容

text (content)

content为元素的文本内容

用于设置所有匹配元素的文本内容

③属性值操作

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

语法：

$(this).val(); 【获取元素的value属性值】

或

$(this).val(value); 【设置元素的value属性值】

$( this). val ("");

【清空需要添加引号，如果val方法括号中不添加任何内容，是获取val值】

$(#search). focus ( );

【获得焦点的事件】

$(#search). blur ( );

【失去焦点的事件】

3.节点操作

①查找节点（前面章节已讲）

使用选择器来查找节点

②创建节点元素

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

$(selector)：通过选择器获取节点 $(element)：把DOM节点转化成jQuery节点 $(html)：使用HTML字符串创建jQuery节点例如：

var $newNode=$("<li></li>");

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

【创建含文本与属性<li>元素节点】

③元素内部插入子节点

insertAfter()：将匹配的元素插入指定元素后面 append():向选择的元素内部插入内容 after();在每个匹配的元素之后插入内容

语法

功能

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");

④元素外部插入同辈节点

语法

功能

after(content)

$(A).after (B) 表示将B插入到A之后

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

insertAfter(content)

$(A). insertAfter (B) 表示将A插入到B之后

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

before(content)

$(A). before (B) 表示将B插入至A之前

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

insertBefore(content)

$(A). insertBefore (B) 表示将A插入到B之前

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

⑤删除节点

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

a. remove( )：删除整个节点：$(selector).remove([expr]);

【remove( )删除之后不保留原有位置】

b. empty( )：清空节点内容：$(selector).empty( );

【empty( )只删除内容，但是保留原有位置】

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

⑥替换节点

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

示例：

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

$(".gameList li:e q(2)").replaceWith($newNode1);

$($newNode1).replaceAll(".gameList li:eq(2)");

replaceWith( )和replaceAll( )两者的关系类似于append( )和appendTo( )

⑦复制节点

clone()用于复制某个节点：

语法：$(selector).clone([includeEvents]) ;

includeEvents：参数ture或flase, true复制事件处理，flase时只能复制节点不能复制事件处理

示例：

$(".gameList li:eq(1)").click(function(){ $(this).clone(true).appendTo(".gameList"); })

【复制了第2个li并且复制了事件处理】

$(".gameList li:eq(2)").click(function(){ $(this).clone(false).appendTo(".gameList"); })

【复制了第3个li但是没有复制事件处理】

4.属性操作

①获取与设置元素属性

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

语法：

$(selector).attr([name]) ; 【获取属性值】

或

$(selector).attr({[name1:value1]…[nameN:valueN]}) ; 【设置多个属性的值】

示例：

$(".contain img").attr({width:"200",height:"80"}); 【使用attr方法设置了多个属性的值】

②删除元素属性

removeAttr()用来删除元素的属性

语法：

$(selector).removeAttr(name) ;

示例：

$(".contain img").removeAttr("alt"); 【删除元素的alt属性】

5.节点遍历

①子元素遍历

children( )方法可以用来获取元素的所有子元素

语法：

$(selector).children([expr]);

示例：

var $section =$("section").children();

【获取<section>的子元素，但不包含子元素的子元素】

alert($section.length);

②同辈元素遍历

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

语法

功能

next([expr])

用于获取紧邻匹配元素之后的元素

$("li:eq(1)").next().addClass("orange");

prev([expr])

用于获取紧邻匹配元素之前的元素

$("li:eq(1)").prev().addClass("orange");

slibings([expr])

用于获取位于匹配元素前面和后面的所有同辈元素

$("li:eq(1)").siblings().addClass("orange");

示例：

$("li:eq(1)"). next ().addClass("orange"); 【遍历获得同辈节点】

$("li:eq(1)"). prev ().addClass("orange");

$("li:eq(1)"). slibings ().addClass("orange");

jQuery中可以遍历前辈元素

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

parents()：元素的祖先元素

示例：

$("li:eq(1)").parent().addClass("orange"); 【获取前辈节点】

$("li:eq(1)").parents().addClass("orange");

④其他遍历方法

a. each( ) ：规定为每个匹配元素规定运行的函数

语法：$(selector).each(function(index,element)) ;

Index：选择器的位置

Element：当前的元素

示例：

$("img").click(function(){ 【给图片添加点击事件】

   $("li").each(function(){   【遍历每一个li元素】

       var str=$(this).text()+"<br>";   【获取当前li元素中的内容】

       $("section").append(str);   【把内容追加到section后面】   
                          
    })   });

b. end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

示例：

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});

$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5"); 【使用链式操作，检索第一个元素，并且把颜色设置成蓝色；end()方法将对象还原为调用first()之前的状态，之后的last()方法调用的是.gameList li中的元素，而不是调用了first()之后的元素】

$(".gameList li:last").css("border","none");

6.CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

语法

功能

css()

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

height([value])

设置或返回匹配元素的高度

width([value])

设置或返回匹配元素的宽度

offset([value])

返回以像素为单位的top和left坐标。仅对可见元素有效

offsetParent( )

返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素

position( )

返回第一个匹配元素相对于父元素的位置

scrollLeft([position])

参数可选。设置或返回匹配元素相对滚动条左侧的偏移

scrollTop([position])

参数可选。设置或返回匹配元素相对滚动条顶

方法描述示例 css() 设置或返回匹配元素的样式属性 $("#box").css("background-color","green") height([value]) 参数可选。设置或返回匹配元素的高度。如果没 $("#box").heigh(180)有规定长度单位，则使用默认的px作为单位 width([value]) 参数可选。设置或返回匹配元素的宽度。如果没 $("#box").width(180)有规定长度单位，则使用默认的px作为单位返回以像素为单位的top和left坐标。此方法仅 offset([value]) 对可见元素有效 $("#box").offset() 返回最近的已定位祖先元素。定位元素指的是元 offsetParent( ) 素的 CSS position值被设置为relative、absolute$（"#box").offsetParent() 或fixed的元素 position( ) 返回第一个匹配元素相对于父元素的位置 $("#box").position()参数可选。设置或返回匹配元素相对滚动条左 scrollLeft([position]) 侧的偏移 $（"#box").scrollLeft(20)参数可选。设置或返回匹配元素相对滚动条顶 scrollTop([position]) 部的偏移 $("#box").scrollTop (180)亡土甘获取高月

第九章表单校验

1.为什么要表单验证

1.减轻服务器的压力；

2.保证输入的数据符合要求。

2.常用的表单内容

1.日期格式

2.表单元素是否为空

3.用户名和密码

4.E-mail地址

5.身份证号码

注册表单验证的内容：

3.表单选择器：

1.表单属性选择：

语法	描述	示例
:input	匹配所有input、text area、select 和button 元素	$("#myform :input")选取表单中所有的input、select和button元素
:text	匹配所有单行元素	$("#myform :text")选取email 和姓名两个input 元素
:password	匹配所有密码框	$("#myform :password" )选取所有 <input type="password" />元素
:radio	匹配所有单项按钮	$("#myform :radio")选取<input type="radio" />元素
:checkbox	匹配所有复选框	$(" #myform :checkbox " )选取 <input type="checkbox " />元素
:submit	匹配所有提交按钮	$("#myform :submit " )选取 <input type="submit " />元素
:image	匹配所有图像域	$("#myform :image" )选取 <input type=" image" />元素
:reset	匹配所有重置按钮	$(" #myform :reset " )选取 <input type=" reset " />元素
:button	匹配所有按钮	$("#myform :button" )选取button 元素
:file	匹配所有文件域	$(" #myform :file" )选取 <input type=" file " />元素
:hidden	匹配所有不可见元素，或者type为hidden的元素	$("#myform :hidden" )选取<input type="hidden " />、style="display: none"等元素

2.表单属性过滤器

语法	描述	示例
:enabled	匹配所有可用元素	$(" #userform :enabled" )匹配form内部除编号输入框外的所有元素
:disabled	匹配所有不可用元素	$(" #userform :disabled" )匹配编号输入框
:checked	匹配所有被选中元素（复选框、单选按钮、select中的option）	$(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项
:selected	匹配所有选中的option元素	$(" #userform :checked" )匹配“性别”中的“男”选项和“爱好”中的“编程”选项

4.验证表单内容

1.使用string方法验证表单

就是使用string的各种方式去验证表单的value属性值

使用indexOf( ) , substring()之类的方法和javascript里面的 isNaN() 去验证表单内容

5.校验提升特效

1.表单验证常用的方法和事件

类别	名称	描述
	onblur	失去焦点，当光标离开某个文本框是触发
事件	onfocus	获得焦点，当光标进入某个文本框是触发
方法	blur()	从文本域中移开焦点
	focus()	在文本域中设置焦点，即获得光标
	select()	选取文本域中的内容，突出显示输入区域的内容

2.制作文本输入提示特效

由于错误心事是动态显示的，可以把错误信息动态地显示在 < s p a n> 中使用html方法。

6.正则表达式

1.什么是正则表达式：

正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的，其组成的字符模式用来匹配各种表达式。

2.正则表达式的语法：

1.普通方法

var reg = /表达式/附加参数; / / 附加参数用来扩展表达式的含义也可以不加。

附加参数:

    1. g :  代表可以进行全局匹配。
    2. i :  代表不区分大小写匹配。
    3. m：代表可以进行多行匹配。

2.构造方法

var reg = new RegExp("表达式","附加参数"); / / 此处附加参数与上面的一样。

RegExp对象

方法	描述
exec()	检索字符中是正则表达式的匹配，返回找到的值，并确定其位置
test()	检索字符串中指定的值，返回true或false

语法

正则表达式对象实例.test(字符串)； // 返回值为 boolean值。

String 对象的方法

方法	描述
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的值
replace()	替换与正则表达式匹配的字符串
split()	把字符串分割为字符串数组

各方法的语法：

match(): 字符串对象.match(searchString 或 regexpObject)

replace(): 字符串对象.replace(RegExp对象或字符串,"替换的字符串");

split(): 字符串对象.split(分隔符,n) / / n为数组个数。

RegExp对象的属性

属性	描述
global	RegExp对象是否具有标志g
ignoreCase	RegExp对象是否具有标志i
multiline	RegExp对象是否具有标志m

正则表达式的常用符号：

符号	描述
/.../	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白的符号
\S	任何非空白字符
\d	匹配一个数字字符，等价与[0-9]
\D	除了数字之外的任何字符，等价于0-9
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W	任何非单子字符，等价于a-zA-z0-9_
.	除了换行符之外的任意字符

正则表达式打的重复字符

符号	描述
{n}	匹配前一项n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但是不能超过m次
*	匹配前一项0次或者多次，等价于{0，}
+	匹配前一项1次或者多次，等价于{1，}
？	匹配前一项0次或者1次，也就是说前一项是可选的，等价于{0，1}

正则表达式中有()、[ ]、和{ }区别：

（）是为了提取的字符串，表达式中有几个（）就有几个相应的匹配字符串。

[ ] 是定义匹配的字符串，如[A-za-z0-9]表示字符串要匹配英文字符和数字。

{ } 用匹配长度，如\s{3}表示三个空格。

HTML5新增验证属性:

属性	描述
placeholder	提供一种提示(html)，输入域为空时显示，获取焦点输入内容后消失
required	规定输入域不能为空
pattern	规定验证input域的模式（正则表达式）

validity属性可以获取表单元素的validityState对象

语法： var validityState = document.getElementById("DOM").validity ;

validityState对象

属性	描述
valueMissing	表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。
typeMismatch	输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。
patternMismatch	输入值与pattern特性的正则表达式不匹配。如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true，否则返回false。
tooLong	输入的内容超过了表单元素的maxLength特性限定的字符长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，入通过程序设置，还是会超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false
rangeUnderflow	输入的值小于min特性的值。如果输入的数值小于最小值，则rangeUnderflow属性返回true,否则返回false
rangeOverflow	输入的值大于max特性的值。如果输入的数值大于最大值，则rangeOverflow属性返回true,否则返回false
stepMismatch	输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false
customError	使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。。