热门标签
热门文章
- 1fftw_plan_dft_1d 函数原型
- 2EasyPusher：开源RTSP直播推流Android UVC外接摄像头推送源码_android uvc rtsp推流
- 3一步步带你解锁Stable Diffusion：SD 图生图功能保姆级入门指南「上」_sd图生图怎么与原图相似
- 4鸿蒙移动开发实战：UIAbility、页面及组件的生命周期
- 5【转】微软Azure Functions使用入门_azure functions 有几种模式
- 6宝塔面板mysql无法启动的问题_宝塔mysql启动不了
- 7第一个solidity程序_spdx license
- 8TCP网络编程最佳实践_net.ipv4.tcp_rto_min
- 9主控板 & 基带板_bbu主控板和基带板作用
- 10Unity关于Oculus Quest2开发环境配置_oculus quest2开发者版本
当前位置: article > 正文
javaScript和jQuery整合_ojixjq
作者：不正经 | 2024-02-18 21:51:15
赞
踩
ojixjq
####1.JavaScript基础####
##1.1什么是JavaScript##
JavaScript是一种描述性语言，也是一种基于对象(Object)和事件驱动的，并具有安全性能的脚本语言。
它与HTML一起，在一个Web页面中链接多个对象，与Web客户端实现交互。无论在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担
总结其特点如下：1）主要用来在HTML页面中添加交互行为。
2）是一种脚本语言，语法和java类似。
3）一般用来编写客户端的脚本。
4）是一种解释性语言，边执行边解释。
##1.2JavaScript的组成##
1.ECMAScript：语法，变量和数据类型，运算符，逻辑控制语句，关键字和保留字，对象。
ECMAScript是一个描述，规定了脚本语言的所有属性，方法和对象的标准，因此在使用Web客户端脚本语言编码时一定要遵守ECMAScritp标准。
2.浏览器对象模型
浏览器对象模型(Browser Object Model,BOM),提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。
3.文档对象模型
文档对象模型(Document Object Model,DOM),是HTML文档对象模型(HTML DOM)定义的一套标准方法，用来访问和操纵HTML文档。
##1.3JavaScript的基本结构##
<script type="text/javascript">
var num1=3;
var str1="aaa";
var bool=true;
document.write(num1);
document.write("初学javaScript");
document.write("<h1>Hello,javaScript</h1>");
document.write(typeof str1);
</script>
1.3.1JavaScript的执行原理
1)浏览器客户端向服务器发送请求；
2）数据处理；
3）发送请求。
1.3.2在网页中使用JavaScript的方式
1)内部JavaScript文件
2)外部JavaScript文件
3)直接在HTML标签中
##1.4JavaScript核心语法
1.4.1变量的声明和赋值
var 合法的变量名；
区分大小写，JavaScript是一种弱类型语言，允许不声明变量而直接使用，系统将会自动声明该变量。
1.4.2属戏剧类型
基本数据类型如下：
1）undefined（未定义类型）
2）null（空类型）；
3）number（数值类型）；
4）string（字符串类型）；
5）boolean（布尔类型）。
typeof（运算符来判断一个值或变量属于哪种数据类型。）语法：typeof 变量名 或者typeof(变量名)
==判断值是否相等，===判断值和数据类型是否相等。
字符串的方法：indexOf(str,index);charAt(index);toLowerCase();toUpperCase();substring(index1,index2);split(str);
定义数组：var num=new Array();
var num=[1,2,3,4];
数组的方法：join();sort();push()//向数组末尾添加一个或者多个元素，并返回新的长度
1.4.3循环
语法和java一致，
for-in循环
for(var i in fruit)
console.log(fruit[i]);
1.4.4常用的输入输出
1.警告arert();//带有一个字符串和一个“确定”按钮；没有返回值，默认返回undefined
2.提示prompt();//弹出一个提示对话框，等待用户输入一行数据。语法：prompt("提示信息","输入框的默认信息");
3.询问框 confirm();//弹出一个提示信息，一个确定按钮，一个取消按钮。
##1.5JavaScript的常用语法--函数
1.5.1常用的系统函数
1. parseInt()
var num1=parseInt("78.89");//返回值78
var num1=parseInt("4567aab");//返回值4567
var num1=parseInt("bbbba7878.89");//返回值NaN
（数值+undefined=NaN=not a number）
2.isNaN(x)
如果X是特殊的非数字值，则返回值是true，否则返回false。
3.parseFloat();
4.Number();
1.5.2自定义函数
语法：
1.定义函数
function 函数名(参数1，参数2,.....){
//JavaScript语句;
[return 返回值]
}
//声明式
function fun1(){}
//变量式-----把函数看成一种变量
var fun2=function(){}
2.调用函数
事件名=”函数名()“;
调用本函数的的关键字：arguments
匿名调用：(function(){alert("bbbbbbb")})();//匿名函数
函数值作为参数传递：
function fun2(method){
method();
}
function fun3(){
alert("ccccc");
}
fun2(fun3);
method是值，method()是调用方法(函数)
1.5.3事件
事件三要素：事件源，事件类型，事件效果
名称 说明
onload 一个页面或一幅图像完成加载
onlick 鼠标单击某个对象
onmouseover 鼠标指针移到某元素上
onkeydown 某个键盘按键被按下(event.keyCode获取)
<script>
var fun2=function(){
var code=event.keyCode;
console.log(event.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" οnkeydοwn="fun2()"/>
获取监听信息
监听
<body>
<script>
var fun2=function(){
var e=arguments.callee.caller.arguments[0] || event;
var code=e.keyCode;
console.log(e.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" οnkeydοwn="fun2()"/>
</body>
onchange 域的内容被改变(监听的是value的属性的值的改变)
####2.JavaScript操作BOM对象####
##2.1Window对象##
2.1.1常用的属性
名称 说明
history 有关客户访问过的URL信息
location 有关当前URL的信息
screen 只读属性，包含有关客户端显示屏幕的信息
2.1.2常用的方法
名称 说明
prompt() 显示可提示用户输入的对话框
alert() 显示一个带有信息和一个确定按钮的警示对话框
confirm() 显示一个带有提示信息，确定和取消按钮的对话框
close() 关闭浏览器窗口
open() 打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout() 在指定的毫秒数后调用函数或计算表达式
setInterval()按照指定的周期(以毫秒计)来调用函数或表达式
open()语法：
window.open("弹出窗口的URL","窗口名称","窗口特征");
窗口的特征属性如下：
名称 说明
height、width 窗口文档显示区的高度、宽度、以像素计
left、top 窗口的x坐标、y坐标，以像素计
toolbar=yes|no|0|1 是否显示浏览器的工具栏，默认是yes
scrollbars=yes|no|0|1 是否显示滚动条，默认是yes
location=yes|no|0|1 是否显示地址栏，默认是yes
status=yes|no|0|1 是否添加状态栏，默认是yes
menubar=yes|no|0|1 是否显示菜单栏，默认是yes
resizable=yes|no|0|1 窗口是否可调节尺寸，默认是yes
titlebar=yes|no|0|1 是否显示标题栏，默认是yes
fullscreen=yes|no|0|1 是否使用全屏模式显示浏览器，默认是no
##2.2history对象与location对象
2.2.1history对象
名称 描述
back() 加载history对象列表中的前一个URL
forward() 加载history对象列表中的后一个URL
go() 加载history对象列表中的某个具体URL
2.2.2location对象
名称(属性) 描述
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
名称(方法)
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
##2.3document对象##
2.3.1document对象的常用属性
属性 描述
referrer 返回载入当前文档的URL(返回的是源网页的url)
URL---统一资源定位符 URI---统一资源标记符(所有资源都有一个URI路径，如果这个资源被共享到网络上，那么这个资源就会用URL)
URL 返回当前文档的URL
2.3.2document对象的常用方法
方法 描述
getElementById() 返回对拥有指定id的第一个对象的引用
getElementByName() 返回带有指定名称的对象的集合
getElementByTagName() 返回带有指定标签名的对象的集合
getElementByClassName() 返回带有指定类名的对象的集合
write() 向文档写文本、HTML表达式或JavaScript代码(当页面加载完毕之后再调用这个方法就是清空内容再添加)
var aEle=document.getElementById("ID");
aEle.innerText="aaaa";//设置指定id为"ID"的对象的文本值为aaaa
aEle.innerText; //获取指定id为“ID”的对象的文本值
aEle。innerHTML=“<span>a<span/>” //获得指定id为“ID”的对象标签的全部内容(包括子标签)
##2.4JavaScript的内置对象
Date对象，Array对象，String对象，Math对象
2.4.1Date对象
语法：var 日期实例=new Date(参数);
参数可以是的字符串格式“MM DD,YYYY,HH:MM:SS”
常用方法 说明
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
2.4.2Math对象
常用方法 说明
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
random() 返回 0 ~ 1 之间的随机数。
##2.5定时函数##
2.5.1常用定时函数
1.setTimeout()
2.setInterval()
####3.JavaScript操作DOM对象
##3.1DOM操作##
3.1.1DOM操作分类
1.DOM Core
2.HTML-DOM
3.CSS-DOM
3.1.2节点与节点关系
父级节点，儿级节点，兄弟级节点
3.1.3访问节点
1.使用getElement系列方法访问指定节点
2.根据层次关系访问节点
属性名称 描述
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibliing 上一个节点
3.属性名称 描述
firstElementChild 返回节点的第一个节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
3.1.5节点信息
nodeName(节点名称) nodeValue(节点值) nodeType(节点值)
文本信息也是一个节点，需要用firstChild去调用
##3.2操作节点##
3.2.1操作节点的属性
getAttribute("属性名"):获取节点的属性的值
setAttribute("属性名","属性值"):用来设置属性的值。
3.2.2创建和插入节点
名称 描述
createElement(tagName) 创建一个标签名为tagName的新元素节点
A.appendChild(B) 把B节点追加到A节点的末尾
insertBefore(A,B) 把A节点插入B节点之前
cloneNode(deep) 复制某个指定的节点
都是父元素插入和追加
3.2.3删除和替换节点
名称 描述
removeChild(node) 删除指定节点
replaceChild(newNode,oldNode) 用其他的节点替换指定节点
都是父元素删除和替换节点
3.2.4操作节点样式
1.style属性
语法：HTML元素.style.样式属性=“值”;
2.className属性
3.2.5获取元素的样式
语法：HTML元素.currentStyle.样式属性；
##3.3获取元素位置
3.3.1元素属性的应用
属性 描述
offsetLeft 返回当前元素左边界到它上级元素左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回当前元素的高度
offsetWidth 返回当前元素的宽度
offsetParent 返回元素便宜容器，即对最近的动态定位的包含元素的引用
scrolTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
####5.初识jQuery####
##5.1目前流行的js库##
jQuery,Bootstrap,zepto,Ext,YUI
##5.2jQ的语法结构##
1.工厂函数$()=jQuery()
2.选择器selector
$(selector)
3.jQuery 对象.addClass([样式名])
css("属性","属性值");//设置一个css属性
css("属性1":"属性值","属性2":"属性值","属性3":"属性值"...)//设置多个css属性
常用的两个方法：$(selector).show();$(selector).hide();
##5.3jQ程序的代码风格
1."$"的使用
它是jQuery的标志
2.链式操作
jQuery代码中采用了一种链式编程模式，它可以对一个对象进行多重操作，并将操作对象作为结果返回给该对象，以便于将返回结果应用于该对象的下一次操作
3.隐式迭代
在传统对的JavaScript写法中，需要使用getElementTagName()来获取标签集合，然后只用for循环一个一个设置字体样式，而这个是用了jQuery就不一样了，它
不需要遍历所有元素，可以直接设置元素的样式
4.添加注释
开发阶段给代码添加注释，增加代码的可读性
维护阶段把关键的模块形成开发文档，便于后期维护
产品发布删除注释，减少文件大小，加快下载速度，提高用户体验
##5.4DOM对象和JQuery对象
5.4.1DOM对象
var objDOM=document.getElementById("id"); //获得DOM对象
var objHTML=objDOM.innerHTML; //使用JavaScript中的innerHTML属性
5.4.2jQuery对象
$("#title").html(); //获取id为title的元素内的html代码
等同于：document.getElementById("id").innerHTML;
5.4.3jQuery对象与DOM对象的相互转换
1.jQuery对象转换成DOM对象
var $textName=$("#textName");
var textName=$textName[0];//或者 var textName=$textName.get(0);
2.DOM对象转换成jQuery对象
var textName=document.getElementById("textName");
var $textName=$(textName);
DOM对象只能使用DOM中的方法，jQuery对象不可以直接使用DOM中的方法，相反也一样
####6.jQuery选择器####
##6.1j通过Query选择器选取元素##
6.1.1基本选择器
名称 语法构成
标签选择器 element
类选择器 .class
id选择器 #id
并集选择器 selector1，selector2
全局选择器 *
6.1.2层次选择器
名称 语法构成 描述
后代选择器 root offspring 选取root元素里的所有offspring(后代)元素
子选择器 parent>child 选取parent元素下的child(子)元素
相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素
同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings(同辈)元素
6.1.3属性选择器
名称 语法构成
[attribute] 选取包含指定属性的元素
[attribute=value] 选取等于指定属性是某个特定值的元素
[attribute!=value] 选取不等于指定属性是某个特定值的元素
[attribute^=value] 选取指定属性是以某些特定值开头的元素
[attribute$=value] 选取指定属性是以某些特定值结尾的元素
[attribute*=value] 选取指定属性包含某些特定值的元素
6.1.4基本过滤选择器
语法 描述
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 选取去除所有与给定选择器匹配的元素
:even 选取索引是偶数的所有元素(index从0开始)
:odd 选取索引是奇数的所有元素(index从0开始)
:eq(index) 选取索引等于index的元素(index从0开始)
:gt(index) 选取索引大于index的元素(index从0开始)
:lt(index) 选取索引小于index的元素(index从0开始)
:header 选取所有的表题元素，如h1~h6
:focus 选取当前获取焦点的元素
:animated 选取所有的动画元素
6.1.5可见性过滤选择器
语法 描述
:visible 选取所有可见的元素
:hidden 选取所有隐藏的元素
##6.2jQuery选择器的注意事项
1.选择器中含有特殊符号的注意
HTML代码如下：
<div id="id#a"></div>
<div id="id[2]"></div>
正确的获取元素如下：
$("#id//#a");
$("#id//[2//]");
2.选择器中含有空格的也要注意
sibings();//找该元素的兄弟元素
####7.jQuery中事件与动画####
##7.1jQuery中的事件##
7.1.1基础事件
事件名=“函数名()”;
或者DOM 对象.事件名=函数名();
1.载入事件
$("document).ready();
2.鼠标事件
名称 执行时机
clik() 鼠标单击时
mouseover() 鼠标指针移过时
mouseout() 鼠标指针移出时
mouseenter() 鼠标指针进入时
mouseleave() 鼠标指针离开时
mouseover():如果鼠标指针在其被选元素的子元素上来回进入时会触发事件
mouseenter():如果鼠标指针在其被选元素的子元素上来回进入时不会触发事件
3.键盘事件
名称 执行时机
keydown() 按下按键时
keyup() 释放按键时
keypress() 产生可打印的字符时
4.聚焦与失焦
名称 描述
focus() 聚焦
blus() 失焦
7.1.2绑定事件与移除事件
1.绑定事件
bind(type,[data],fn)
参数类型 参数含义 描述
type 事件类型 主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[data] 可选参数 作为even.data属性值传递给事件对象的额外数据对象，该参数不是必需的
fn 处理函数 用来绑定处理函数
(除了bind()方法之外，还有on(),live(),one()等事件的绑定方法)
2.移除事件
unbind([type],[fn])
7.1.3复合事件
1.hover()方法
hover(enter,leave);
2.toggle()方法
toggle(fn1,fn2,....,fnm);
toggle(),切换元素的可见状态
##7.2jQuery中的动画
7.2.1控制元素显示与隐藏
1.控制元素显示
$(selector).show([speed],[callback]);
参数 描述
speed 可能值：毫秒，slow，normal，fast
callback 可选，show函数执行完成之后，要执行的函数
2.控制元素隐藏
$(selector).hide([speed],[callback]);
7.2.2改变元素透明度
1.控制元素的淡入
$(selector).fadeIn([speed],[callback]);
2.控制元素的淡出
$(selector).fadeOut([speed],[callback]);
7.2.3改变元素的高度
$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[callback]);
7.2.4自定义动画
$(selector).animate([params],[speed],[callback]);
参数 描述
params 必须，定义形成动画的css属性
speed 可选，规定效果时长，取值：毫秒，fast，slow
callback 可选，滑动完成之后执行的函数名
$(this).find(selector);
清除之前未完成的动画，停止所有在指定元素上正在运行的动画。
$(selector).stop(true,true)
####8.使用jQuery操作DOM####
##8.1样式操作##
8.1.1设置和获取样式值
语法：
$(selector).css(name,value);
或者$(selector).css({name:value,name:value,name:value.....});
获取属性值$(selector).css(name);
1.追加样式
语法:
$(selector).addClass(class1,class2...);
或者$(selector).addClass(class)
2.移除样式
$(selector).removeClass(class);
或者$(selector).removeClass(class1,class2...);
3.切换样式
$(selector).toggleClass(class)
4.判断是否含有指定样式
$(selector).hasClass(class)
##8.2内容操作##
8.2.1HTML代码操作
html([content])
2.标签内容操作
text([content])
3.属性值操作
val([content])
##8.3节点和属性操作
8.3.1节点操作
1.查找节点
使用jQuery选取器
2.创建节点
$(selector)
或者$(element)
或者$(html)
3.插入节点
插入方式 方法 描述
内部插入 append(content) 向每个匹配的元素内部追加内容。
内部插入 appendTO(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。
内部插入 prepend(content) 向每个匹配的元素内部前置内容
内部插入 prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
外部插入 after(content) 在每个匹配的元素之后插入内容
外部插入 insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
外部插入 before(content) 在每个匹配的元素之前插入内容
外部插入 insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
4.删除节点
$(selector).remove([expr]):expr为可选项，如果接收参数，通过该表达式获取指定元素，并进行删除
清空元素中的所有后代节点
$(selector).empty()
5.替换节点
$(selector).replaceWith();//将所有匹配的元素都替换成指定的DOM元素或者HTML，旧的替换成新的
$(selector).replaceAll();//新的替换成旧的
6.复制节点
$(selector).clone([includeEvents])
includeEvents为可选值，为布尔值，规定是否复制元素的所有事件处理
8.3.2属性操作
1.获取与设置元素属性
$(selector).attr([name])//获取属性值
或者$(selector).attr({name1:value1,name2:value2});//设置多个属性值
2.删除元素属性
$(selector).removeAttr(name)
##8.4节点遍历##
8.4.1遍历子节点
$(selector).children([expr])//获取所有子元素，不考虑其他后代元素。expr为可选，用于过滤子元素的表达式
8.4.2遍历同辈元素
$(selector).next([expr]);//所选元素的下一同辈元素
$(selector).prev([expr]);//用于获取紧邻该元素的上一个元素
$(selector).siblings([expr]);//用于获取位于匹配元素前面和后面的所有同辈元素
8.4.3遍历前辈元素
$(selector).parent([selector])//参数可选，获取当前匹配元素集合中每个元素的父级元素
$(selector).parents([selector])//参数可选，获取当前匹配元素集合中每个元素的祖先元素
8.4.4其他遍历方法
$(selector).each(function(){})//为每个匹配元素规定运行的函数
$(selector).end()//用于结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态
还有find(),filter(),eq(),first(),last()
#8.5CSS-DOM操作
jQuery文档中css操作
####9. 表单验证请求####
##9.1表单基本验证技术
9.1.1表单选择器
语法 示例 描述
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:hidden $(":hidden") 所有不可见的元素，或者type="hidden"的元素
9.1.2表单属性过滤器
语法 示例 描述
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
submit事件,如果submit事件返回值是false可以阻止表单提交
##9.2正则表达式##
9.2.1语法：var reg=/表达式/附加参数
g:代表可以进行全局匹配
i:代表可以不区分大小写匹配
m:代表可以进行多行匹配
2.构造函数，语法：var reg=new RegExp("表达式","附加参数");
9.2.2RegExp对象的方法
方法 描述
exec() 检索字符串中是正则表达式的匹配，返回找到的值，并确定其位置
test() 检索字符串中指定的值，返回true或false
正则表达式对象实例.test(字符串);
9.2.3String对象的方法
方法 描述 语法
match() 找到一个或多个正则表达式的匹配 字符串对象.match(searchString或者regexpObject)
search() 检索与正则表达式相匹配的值
replace() 替换与正则表达式匹配的字符串 字符串对象.replace(RegExp对象或字符串,"替换的字符串")
split() 把字符串分割为字符串数组 字符串对象.split(分割符或者正则表达式，[n为可选项控制输出的字符串的长度])
9.2.2RegExp对象的属性
属性 描述
global RegExp对象是否具有标志g
ignoreCase RegExp对象是否具有标志i
multiline RegExp对象是否具有标志m
9.2.4正则表达式的常用符号在JQ文档上存在
##9.3使用HTML5的方式验证表单##
1.placeholder：提供给用户的一些提示信息
2.required：自动验证表单元素是否为空
2.pattern：匹配对应的正则表达式
##9.4validity属性##
validity属性可以获取表单元素的validityState对象，语法如下
var validityState=document.getElementById("nName").validity ;
它有8个属性，分别针对8个方面的错误验证
属性 描述
valueMissing 表单元素设置了required特性，为必填项，如果必填项的值为空，就无法通过表单验证，返回true，否则false
typeMismatch 输入值与type类型不匹配，如果不匹配则返回true,否则返回false
patternMismatch 输入值域pattern特性的正则表达式不匹配，如果不匹配则返回true,否则返回false
tooLong 输入的内容超过了表单元素的maxLength特性限定的长度，如果不匹配则返回true,否则返回false
rangeUnderflow 输入值小于min特性的值，如果不匹配则返回true,否则返回false
rangeOverflow 输入值大于max特性的值，如果输入的值大于最大值，返回true,否则返回false
stepMismatch 输入值不符合step特性所推算的规则，如果不匹配则返回true,否则返回false
customError 使用自定义的验证错误提示信息，使用setCustomValidity()方法自定义错误提示信息
实例：
var u=document.getElementById("nName");
if(u.validity.valueMissing==true){
u.setCustomValidity("昵称不能为空");
}
else if(u.validity.patternMismatch==true){
u.setCustomValidity("昵称不符合正则表达式的规则");
}
else{
u.setCustomValidity("");
}
采用sort()排序可以定义规则
sort(function(li1,li2){
var price1 = parseInt($(li1).find("span").text);
var price2 = parseInt($(li2).find("span").text);
return price1-price2;
})
$(function(){})//加载时运行
##1.1什么是JavaScript##
JavaScript是一种描述性语言，也是一种基于对象(Object)和事件驱动的，并具有安全性能的脚本语言。
它与HTML一起，在一个Web页面中链接多个对象，与Web客户端实现交互。无论在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担
总结其特点如下：1）主要用来在HTML页面中添加交互行为。
2）是一种脚本语言，语法和java类似。
3）一般用来编写客户端的脚本。
4）是一种解释性语言，边执行边解释。
##1.2JavaScript的组成##
1.ECMAScript：语法，变量和数据类型，运算符，逻辑控制语句，关键字和保留字，对象。
ECMAScript是一个描述，规定了脚本语言的所有属性，方法和对象的标准，因此在使用Web客户端脚本语言编码时一定要遵守ECMAScritp标准。
2.浏览器对象模型
浏览器对象模型(Browser Object Model,BOM),提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。
3.文档对象模型
文档对象模型(Document Object Model,DOM),是HTML文档对象模型(HTML DOM)定义的一套标准方法，用来访问和操纵HTML文档。
##1.3JavaScript的基本结构##
<script type="text/javascript">
var num1=3;
var str1="aaa";
var bool=true;
document.write(num1);
document.write("初学javaScript");
document.write("<h1>Hello,javaScript</h1>");
document.write(typeof str1);
</script>
1.3.1JavaScript的执行原理
1)浏览器客户端向服务器发送请求；
2）数据处理；
3）发送请求。
1.3.2在网页中使用JavaScript的方式
1)内部JavaScript文件
2)外部JavaScript文件
3)直接在HTML标签中
##1.4JavaScript核心语法
1.4.1变量的声明和赋值
var 合法的变量名；
区分大小写，JavaScript是一种弱类型语言，允许不声明变量而直接使用，系统将会自动声明该变量。
1.4.2属戏剧类型
基本数据类型如下：
1）undefined（未定义类型）
2）null（空类型）；
3）number（数值类型）；
4）string（字符串类型）；
5）boolean（布尔类型）。
typeof（运算符来判断一个值或变量属于哪种数据类型。）语法：typeof 变量名 或者typeof(变量名)
==判断值是否相等，===判断值和数据类型是否相等。
字符串的方法：indexOf(str,index);charAt(index);toLowerCase();toUpperCase();substring(index1,index2);split(str);
定义数组：var num=new Array();
var num=[1,2,3,4];
数组的方法：join();sort();push()//向数组末尾添加一个或者多个元素，并返回新的长度
1.4.3循环
语法和java一致，
for-in循环
for(var i in fruit)
console.log(fruit[i]);
1.4.4常用的输入输出
1.警告arert();//带有一个字符串和一个“确定”按钮；没有返回值，默认返回undefined
2.提示prompt();//弹出一个提示对话框，等待用户输入一行数据。语法：prompt("提示信息","输入框的默认信息");
3.询问框 confirm();//弹出一个提示信息，一个确定按钮，一个取消按钮。
##1.5JavaScript的常用语法--函数
1.5.1常用的系统函数
1. parseInt()
var num1=parseInt("78.89");//返回值78
var num1=parseInt("4567aab");//返回值4567
var num1=parseInt("bbbba7878.89");//返回值NaN
（数值+undefined=NaN=not a number）
2.isNaN(x)
如果X是特殊的非数字值，则返回值是true，否则返回false。
3.parseFloat();
4.Number();
1.5.2自定义函数
语法：
1.定义函数
function 函数名(参数1，参数2,.....){
//JavaScript语句;
[return 返回值]
}
//声明式
function fun1(){}
//变量式-----把函数看成一种变量
var fun2=function(){}
2.调用函数
事件名=”函数名()“;
调用本函数的的关键字：arguments
匿名调用：(function(){alert("bbbbbbb")})();//匿名函数
函数值作为参数传递：
function fun2(method){
method();
}
function fun3(){
alert("ccccc");
}
fun2(fun3);
method是值，method()是调用方法(函数)
1.5.3事件
事件三要素：事件源，事件类型，事件效果
名称 说明
onload 一个页面或一幅图像完成加载
onlick 鼠标单击某个对象
onmouseover 鼠标指针移到某元素上
onkeydown 某个键盘按键被按下(event.keyCode获取)
<script>
var fun2=function(){
var code=event.keyCode;
console.log(event.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" οnkeydοwn="fun2()"/>
获取监听信息
监听
<body>
<script>
var fun2=function(){
var e=arguments.callee.caller.arguments[0] || event;
var code=e.keyCode;
console.log(e.keyCode);
var result=String.fromCharCode(code);
console.log(result);
}
</script>
<input type="text" οnkeydοwn="fun2()"/>
</body>
onchange 域的内容被改变(监听的是value的属性的值的改变)
####2.JavaScript操作BOM对象####
##2.1Window对象##
2.1.1常用的属性
名称 说明
history 有关客户访问过的URL信息
location 有关当前URL的信息
screen 只读属性，包含有关客户端显示屏幕的信息
2.1.2常用的方法
名称 说明
prompt() 显示可提示用户输入的对话框
alert() 显示一个带有信息和一个确定按钮的警示对话框
confirm() 显示一个带有提示信息，确定和取消按钮的对话框
close() 关闭浏览器窗口
open() 打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout() 在指定的毫秒数后调用函数或计算表达式
setInterval()按照指定的周期(以毫秒计)来调用函数或表达式
open()语法：
window.open("弹出窗口的URL","窗口名称","窗口特征");
窗口的特征属性如下：
名称 说明
height、width 窗口文档显示区的高度、宽度、以像素计
left、top 窗口的x坐标、y坐标，以像素计
toolbar=yes|no|0|1 是否显示浏览器的工具栏，默认是yes
scrollbars=yes|no|0|1 是否显示滚动条，默认是yes
location=yes|no|0|1 是否显示地址栏，默认是yes
status=yes|no|0|1 是否添加状态栏，默认是yes
menubar=yes|no|0|1 是否显示菜单栏，默认是yes
resizable=yes|no|0|1 窗口是否可调节尺寸，默认是yes
titlebar=yes|no|0|1 是否显示标题栏，默认是yes
fullscreen=yes|no|0|1 是否使用全屏模式显示浏览器，默认是no
##2.2history对象与location对象
2.2.1history对象
名称 描述
back() 加载history对象列表中的前一个URL
forward() 加载history对象列表中的后一个URL
go() 加载history对象列表中的某个具体URL
2.2.2location对象
名称(属性) 描述
host 设置或返回主机名和当前URL的端口号
hostname 设置或返回当前URL的主机名
href 设置或返回完整的URL
名称(方法)
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
##2.3document对象##
2.3.1document对象的常用属性
属性 描述
referrer 返回载入当前文档的URL(返回的是源网页的url)
URL---统一资源定位符 URI---统一资源标记符(所有资源都有一个URI路径，如果这个资源被共享到网络上，那么这个资源就会用URL)
URL 返回当前文档的URL
2.3.2document对象的常用方法
方法 描述
getElementById() 返回对拥有指定id的第一个对象的引用
getElementByName() 返回带有指定名称的对象的集合
getElementByTagName() 返回带有指定标签名的对象的集合
getElementByClassName() 返回带有指定类名的对象的集合
write() 向文档写文本、HTML表达式或JavaScript代码(当页面加载完毕之后再调用这个方法就是清空内容再添加)
var aEle=document.getElementById("ID");
aEle.innerText="aaaa";//设置指定id为"ID"的对象的文本值为aaaa
aEle.innerText; //获取指定id为“ID”的对象的文本值
aEle。innerHTML=“<span>a<span/>” //获得指定id为“ID”的对象标签的全部内容(包括子标签)
##2.4JavaScript的内置对象
Date对象，Array对象，String对象，Math对象
2.4.1Date对象
语法：var 日期实例=new Date(参数);
参数可以是的字符串格式“MM DD,YYYY,HH:MM:SS”
常用方法 说明
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
2.4.2Math对象
常用方法 说明
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
random() 返回 0 ~ 1 之间的随机数。
##2.5定时函数##
2.5.1常用定时函数
1.setTimeout()
2.setInterval()
####3.JavaScript操作DOM对象
##3.1DOM操作##
3.1.1DOM操作分类
1.DOM Core
2.HTML-DOM
3.CSS-DOM
3.1.2节点与节点关系
父级节点，儿级节点，兄弟级节点
3.1.3访问节点
1.使用getElement系列方法访问指定节点
2.根据层次关系访问节点
属性名称 描述
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibliing 上一个节点
3.属性名称 描述
firstElementChild 返回节点的第一个节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
3.1.5节点信息
nodeName(节点名称) nodeValue(节点值) nodeType(节点值)
文本信息也是一个节点，需要用firstChild去调用
##3.2操作节点##
3.2.1操作节点的属性
getAttribute("属性名"):获取节点的属性的值
setAttribute("属性名","属性值"):用来设置属性的值。
3.2.2创建和插入节点
名称 描述
createElement(tagName) 创建一个标签名为tagName的新元素节点
A.appendChild(B) 把B节点追加到A节点的末尾
insertBefore(A,B) 把A节点插入B节点之前
cloneNode(deep) 复制某个指定的节点
都是父元素插入和追加
3.2.3删除和替换节点
名称 描述
removeChild(node) 删除指定节点
replaceChild(newNode,oldNode) 用其他的节点替换指定节点
都是父元素删除和替换节点
3.2.4操作节点样式
1.style属性
语法：HTML元素.style.样式属性=“值”;
2.className属性
3.2.5获取元素的样式
语法：HTML元素.currentStyle.样式属性；
##3.3获取元素位置
3.3.1元素属性的应用
属性 描述
offsetLeft 返回当前元素左边界到它上级元素左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回当前元素的高度
offsetWidth 返回当前元素的宽度
offsetParent 返回元素便宜容器，即对最近的动态定位的包含元素的引用
scrolTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
####5.初识jQuery####
##5.1目前流行的js库##
jQuery,Bootstrap,zepto,Ext,YUI
##5.2jQ的语法结构##
1.工厂函数$()=jQuery()
2.选择器selector
$(selector)
3.jQuery 对象.addClass([样式名])
css("属性","属性值");//设置一个css属性
css("属性1":"属性值","属性2":"属性值","属性3":"属性值"...)//设置多个css属性
常用的两个方法：$(selector).show();$(selector).hide();
##5.3jQ程序的代码风格
1."$"的使用
它是jQuery的标志
2.链式操作
jQuery代码中采用了一种链式编程模式，它可以对一个对象进行多重操作，并将操作对象作为结果返回给该对象，以便于将返回结果应用于该对象的下一次操作
3.隐式迭代
在传统对的JavaScript写法中，需要使用getElementTagName()来获取标签集合，然后只用for循环一个一个设置字体样式，而这个是用了jQuery就不一样了，它
不需要遍历所有元素，可以直接设置元素的样式
4.添加注释
开发阶段给代码添加注释，增加代码的可读性
维护阶段把关键的模块形成开发文档，便于后期维护
产品发布删除注释，减少文件大小，加快下载速度，提高用户体验
##5.4DOM对象和JQuery对象
5.4.1DOM对象
var objDOM=document.getElementById("id"); //获得DOM对象
var objHTML=objDOM.innerHTML; //使用JavaScript中的innerHTML属性
5.4.2jQuery对象
$("#title").html(); //获取id为title的元素内的html代码
等同于：document.getElementById("id").innerHTML;
5.4.3jQuery对象与DOM对象的相互转换
1.jQuery对象转换成DOM对象
var $textName=$("#textName");
var textName=$textName[0];//或者 var textName=$textName.get(0);
2.DOM对象转换成jQuery对象
var textName=document.getElementById("textName");
var $textName=$(textName);
DOM对象只能使用DOM中的方法，jQuery对象不可以直接使用DOM中的方法，相反也一样
####6.jQuery选择器####
##6.1j通过Query选择器选取元素##
6.1.1基本选择器
名称 语法构成
标签选择器 element
类选择器 .class
id选择器 #id
并集选择器 selector1，selector2
全局选择器 *
6.1.2层次选择器
名称 语法构成 描述
后代选择器 root offspring 选取root元素里的所有offspring(后代)元素
子选择器 parent>child 选取parent元素下的child(子)元素
相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素
同辈元素选择器 prev~sibings 选取prev元素之后的所有siblings(同辈)元素
6.1.3属性选择器
名称 语法构成
[attribute] 选取包含指定属性的元素
[attribute=value] 选取等于指定属性是某个特定值的元素
[attribute!=value] 选取不等于指定属性是某个特定值的元素
[attribute^=value] 选取指定属性是以某些特定值开头的元素
[attribute$=value] 选取指定属性是以某些特定值结尾的元素
[attribute*=value] 选取指定属性包含某些特定值的元素
6.1.4基本过滤选择器
语法 描述
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 选取去除所有与给定选择器匹配的元素
:even 选取索引是偶数的所有元素(index从0开始)
:odd 选取索引是奇数的所有元素(index从0开始)
:eq(index) 选取索引等于index的元素(index从0开始)
:gt(index) 选取索引大于index的元素(index从0开始)
:lt(index) 选取索引小于index的元素(index从0开始)
:header 选取所有的表题元素，如h1~h6
:focus 选取当前获取焦点的元素
:animated 选取所有的动画元素
6.1.5可见性过滤选择器
语法 描述
:visible 选取所有可见的元素
:hidden 选取所有隐藏的元素
##6.2jQuery选择器的注意事项
1.选择器中含有特殊符号的注意
HTML代码如下：
<div id="id#a"></div>
<div id="id[2]"></div>
正确的获取元素如下：
$("#id//#a");
$("#id//[2//]");
2.选择器中含有空格的也要注意
sibings();//找该元素的兄弟元素
####7.jQuery中事件与动画####
##7.1jQuery中的事件##
7.1.1基础事件
事件名=“函数名()”;
或者DOM 对象.事件名=函数名();
1.载入事件
$("document).ready();
2.鼠标事件
名称 执行时机
clik() 鼠标单击时
mouseover() 鼠标指针移过时
mouseout() 鼠标指针移出时
mouseenter() 鼠标指针进入时
mouseleave() 鼠标指针离开时
mouseover():如果鼠标指针在其被选元素的子元素上来回进入时会触发事件
mouseenter():如果鼠标指针在其被选元素的子元素上来回进入时不会触发事件
3.键盘事件
名称 执行时机
keydown() 按下按键时
keyup() 释放按键时
keypress() 产生可打印的字符时
4.聚焦与失焦
名称 描述
focus() 聚焦
blus() 失焦
7.1.2绑定事件与移除事件
1.绑定事件
bind(type,[data],fn)
参数类型 参数含义 描述
type 事件类型 主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
[data] 可选参数 作为even.data属性值传递给事件对象的额外数据对象，该参数不是必需的
fn 处理函数 用来绑定处理函数
(除了bind()方法之外，还有on(),live(),one()等事件的绑定方法)
2.移除事件
unbind([type],[fn])
7.1.3复合事件
1.hover()方法
hover(enter,leave);
2.toggle()方法
toggle(fn1,fn2,....,fnm);
toggle(),切换元素的可见状态
##7.2jQuery中的动画
7.2.1控制元素显示与隐藏
1.控制元素显示
$(selector).show([speed],[callback]);
参数 描述
speed 可能值：毫秒，slow，normal，fast
callback 可选，show函数执行完成之后，要执行的函数
2.控制元素隐藏
$(selector).hide([speed],[callback]);
7.2.2改变元素透明度
1.控制元素的淡入
$(selector).fadeIn([speed],[callback]);
2.控制元素的淡出
$(selector).fadeOut([speed],[callback]);
7.2.3改变元素的高度
$(selector).slideUp([speed],[callback]);
$(selector).slideDown([speed],[callback]);
7.2.4自定义动画
$(selector).animate([params],[speed],[callback]);
参数 描述
params 必须，定义形成动画的css属性
speed 可选，规定效果时长，取值：毫秒，fast，slow
callback 可选，滑动完成之后执行的函数名
$(this).find(selector);
清除之前未完成的动画，停止所有在指定元素上正在运行的动画。
$(selector).stop(true,true)
####8.使用jQuery操作DOM####
##8.1样式操作##
8.1.1设置和获取样式值
语法：
$(selector).css(name,value);
或者$(selector).css({name:value,name:value,name:value.....});
获取属性值$(selector).css(name);
1.追加样式
语法:
$(selector).addClass(class1,class2...);
或者$(selector).addClass(class)
2.移除样式
$(selector).removeClass(class);
或者$(selector).removeClass(class1,class2...);
3.切换样式
$(selector).toggleClass(class)
4.判断是否含有指定样式
$(selector).hasClass(class)
##8.2内容操作##
8.2.1HTML代码操作
html([content])
2.标签内容操作
text([content])
3.属性值操作
val([content])
##8.3节点和属性操作
8.3.1节点操作
1.查找节点
使用jQuery选取器
2.创建节点
$(selector)
或者$(element)
或者$(html)
3.插入节点
插入方式 方法 描述
内部插入 append(content) 向每个匹配的元素内部追加内容。
内部插入 appendTO(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。
内部插入 prepend(content) 向每个匹配的元素内部前置内容
内部插入 prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
外部插入 after(content) 在每个匹配的元素之后插入内容
外部插入 insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
外部插入 before(content) 在每个匹配的元素之前插入内容
外部插入 insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
4.删除节点
$(selector).remove([expr]):expr为可选项，如果接收参数，通过该表达式获取指定元素，并进行删除
清空元素中的所有后代节点
$(selector).empty()
5.替换节点
$(selector).replaceWith();//将所有匹配的元素都替换成指定的DOM元素或者HTML，旧的替换成新的
$(selector).replaceAll();//新的替换成旧的
6.复制节点
$(selector).clone([includeEvents])
includeEvents为可选值，为布尔值，规定是否复制元素的所有事件处理
8.3.2属性操作
1.获取与设置元素属性
$(selector).attr([name])//获取属性值
或者$(selector).attr({name1:value1,name2:value2});//设置多个属性值
2.删除元素属性
$(selector).removeAttr(name)
##8.4节点遍历##
8.4.1遍历子节点
$(selector).children([expr])//获取所有子元素，不考虑其他后代元素。expr为可选，用于过滤子元素的表达式
8.4.2遍历同辈元素
$(selector).next([expr]);//所选元素的下一同辈元素
$(selector).prev([expr]);//用于获取紧邻该元素的上一个元素
$(selector).siblings([expr]);//用于获取位于匹配元素前面和后面的所有同辈元素
8.4.3遍历前辈元素
$(selector).parent([selector])//参数可选，获取当前匹配元素集合中每个元素的父级元素
$(selector).parents([selector])//参数可选，获取当前匹配元素集合中每个元素的祖先元素
8.4.4其他遍历方法
$(selector).each(function(){})//为每个匹配元素规定运行的函数
$(selector).end()//用于结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态
还有find(),filter(),eq(),first(),last()
#8.5CSS-DOM操作
jQuery文档中css操作
####9. 表单验证请求####
##9.1表单基本验证技术
9.1.1表单选择器
语法 示例 描述
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:hidden $(":hidden") 所有不可见的元素，或者type="hidden"的元素
9.1.2表单属性过滤器
语法 示例 描述
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
submit事件,如果submit事件返回值是false可以阻止表单提交
##9.2正则表达式##
9.2.1语法：var reg=/表达式/附加参数
g:代表可以进行全局匹配
i:代表可以不区分大小写匹配
m:代表可以进行多行匹配
2.构造函数，语法：var reg=new RegExp("表达式","附加参数");
9.2.2RegExp对象的方法
方法 描述
exec() 检索字符串中是正则表达式的匹配，返回找到的值，并确定其位置
test() 检索字符串中指定的值，返回true或false
正则表达式对象实例.test(字符串);
9.2.3String对象的方法
方法 描述 语法
match() 找到一个或多个正则表达式的匹配 字符串对象.match(searchString或者regexpObject)
search() 检索与正则表达式相匹配的值
replace() 替换与正则表达式匹配的字符串 字符串对象.replace(RegExp对象或字符串,"替换的字符串")
split() 把字符串分割为字符串数组 字符串对象.split(分割符或者正则表达式，[n为可选项控制输出的字符串的长度])
9.2.2RegExp对象的属性
属性 描述
global RegExp对象是否具有标志g
ignoreCase RegExp对象是否具有标志i
multiline RegExp对象是否具有标志m
9.2.4正则表达式的常用符号在JQ文档上存在
##9.3使用HTML5的方式验证表单##
1.placeholder：提供给用户的一些提示信息
2.required：自动验证表单元素是否为空
2.pattern：匹配对应的正则表达式
##9.4validity属性##
validity属性可以获取表单元素的validityState对象，语法如下
var validityState=document.getElementById("nName").validity ;
它有8个属性，分别针对8个方面的错误验证
属性 描述
valueMissing 表单元素设置了required特性，为必填项，如果必填项的值为空，就无法通过表单验证，返回true，否则false
typeMismatch 输入值与type类型不匹配，如果不匹配则返回true,否则返回false
patternMismatch 输入值域pattern特性的正则表达式不匹配，如果不匹配则返回true,否则返回false
tooLong 输入的内容超过了表单元素的maxLength特性限定的长度，如果不匹配则返回true,否则返回false
rangeUnderflow 输入值小于min特性的值，如果不匹配则返回true,否则返回false
rangeOverflow 输入值大于max特性的值，如果输入的值大于最大值，返回true,否则返回false
stepMismatch 输入值不符合step特性所推算的规则，如果不匹配则返回true,否则返回false
customError 使用自定义的验证错误提示信息，使用setCustomValidity()方法自定义错误提示信息
实例：
var u=document.getElementById("nName");
if(u.validity.valueMissing==true){
u.setCustomValidity("昵称不能为空");
}
else if(u.validity.patternMismatch==true){
u.setCustomValidity("昵称不符合正则表达式的规则");
}
else{
u.setCustomValidity("");
}
采用sort()排序可以定义规则
sort(function(li1,li2){
var price1 = parseInt($(li1).find("span").text);
var price2 = parseInt($(li2).find("span").text);
return price1-price2;
})
$(function(){})//加载时运行
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/110782
推荐阅读
相关标签
