JS的全称是javascript，是一门内嵌语言，是写在网页中以实现网页客户端交互。当然服务端JS也还是有的！一般是以<script language="javascript"></script>包括中的，也就是说以上还是一个HTML标签，但里边所写的内容却是javascript,浏览器会自动解释！当然这个语言就是为了网页的动态而出现的！
所以两者是有很大区别的！你可以这样理解：HTML是网页基础，而JAVASCIRPT是为了补充HTML的静态网页而出现的一个HTML或说浏览器内置语言！实现网页动态效果！
1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制2.:js判断汉字、判断是否汉字 、只能输入汉字
3:js判断是否输入英文、只能输入英文
4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字
5:只能输入英文字符和数字
6: js email验证 、js 判断email 、信箱/邮箱格式验证
7:js字符过滤,屏蔽关键字
8:js密码验证、判断密码
2.1: js 不为空、为空或不是对象 、判断为空 、判断不为空
2.2:比较两个表单项的值是否相同
2.3:表单只能为数字和”_”,
2.4:表单项输入数值/长度限定
2.5:中文/英文/数字/邮件地址合法性判断
2.6:限定表单项不能输入的字符
2.7表单的自符控制
2.8:form文本域的通用校验函数
1. 长度限制
<script>
function test()
{
if(document.a.b.value.length>50)
{
alert(”不能超过50个字符！”)
document.a.b.focus()
return false
}
}
</script>
<form name=a onsubmit=”return test()”>
<textarea name=”b” cols=”40″ wrap=”VIRTUAL” rows=”6″></textarea>
<input type=”submit” name=”Submit” value=”check”>
</form>
2. 只能是汉字
<input onkeyup=”value=”/oblog/value.replace(/[^\u4E00-\u9FA5]/g,”)”>
3.” 只能是英文
<script language=javascript>
function onlyEng()
{
if(!(event.keyCode>=65&&event.keyCode<=90))
event.returnvalue=false
}
</script>
<input onkeydown=”onlyEng()”>
4. 只能是数字
<script language=javascript>
function onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)))
//考虑小键盘上的数字键
event.returnvalue=false
}
</script>
<input onkeydown=”onlyNum()”>
5. 只能是英文字符和数字
<input onkeyup=”value=”/oblog/value.replace(/[\W]/g,””) “onbeforepaste=”clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,”))”>
6. 验证邮箱格式
<SCRIPT LANGUAGE=javascript RUNAT=Server>
function isEmail(strEmail) {
if (strEmail.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return true
else
alert(”oh”)
}
</SCRIPT>
<input type=text onblur=isEmail(this.value)>
7. 屏蔽关键字(这里屏蔽***和****)
<script language=”javascript1.2″>
function test() {
if((a.b.value.indexOf (”***”) == 0)||(a.b.value.indexOf (”****”) == 0)){
alert(”:)”)
a.b.focus()
return false}
}
</script>
<form name=a onsubmit=”return test()”>
<input type=text name=b>
<input type=”submit” name=”Submit” value=”check”>
</form>
8. 两次输入密码是否相同
<FORM METHOD=POST ACTION=”">
<input type=”password” id=”input1″>
<input type=”password” id=”input2″>
<input type=”button” value=”test” onclick=”check()”>
</FORM>
<script>
function check()
{
with(document.all){
if(input1.value!=input2.value)
{
alert(”false”)
input1.value = “”
input2.value = “”
}
else document.forms[0].submit()
}
}
</script>
够了吧 :)
屏蔽右键 很酷
oncontextmenu=”return false” ondragstart=”return false” onselectstart=”return false”
加在body中
二
2.1 表单项不能为空
<script language=”javascript”>
<!–
function CheckForm()
{
if (document.form.name.value.length == 0) {
alert(”请输入您姓名!”)
document.form.name.focus()
return false
}
return true
}
–>
</script>
2.2 比较两个表单项的值是否相同
<script language=”javascript”>
<!–
function CheckForm()
if (document.form.PWD.value != document.form.PWD_Again.value) {
alert(”您两次输入的密码不一样！请重新输入.”)
document.ADDUser.PWD.focus()
return false
}
return true
}
–>
</script>
2.3 表单项只能为数字和”_”,用于电话/银行帐号验证上,可扩展到域名注册等
<script language=”javascript”>
<!–
function isNumber(String)
{
var Letters = ”1234567890-” //可以自己增加可输入值
var i
var c
if(String.charAt( 0 )==’-')
return false
if( String.charAt( String.length - 1 ) == ’-’ )
return false
for( i = 0 i < String.length i ++ )
{
c = String.charAt( i )
if (Letters.indexOf( c ) < 0)
return false
}
return true
}
function CheckForm()
{
if(! isNumber(document.form.TEL.value)) {
alert(”您的电话号码不合法！”)
document.form.TEL.focus()
return false
}
return true
}
–>
</script>
2.4 表单项输入数值/长度限定
<script language=”javascript”>
<!–
function CheckForm()
{
if (document.form.count.value > 100 || document.form.count.value < 1)
{
alert(”输入数值不能小于零大于100!”)
document.form.count.focus()
return false
}
if (document.form.MESSAGE.value.length<10)
{
alert(”输入文字小于10!”)
document.form.MESSAGE.focus()
return false
}
return true
}
//–>
</script>
2.5 中文/英文/数字/邮件地址合法性判断
<SCRIPT LANGUAGE=”javascript”>
<!–
function isEnglish(name) //英文值检测
{
if(name.length == 0)
return false
for(i = 0 i < name.length i++) {
if(name.charCodeAt(i) > 128)
return false
}
return true
}
function isChinese(name) //中文值检测
{
if(name.length == 0)
return false
for(i = 0 i < name.length i++) {
if(name.charCodeAt(i) > 128)
return true
}
return false
}
function isMail(name) // E-mail值检测
{
if(! isEnglish(name))
return false
i = name.indexOf(” at ”)
j = name dot lastIndexOf(” at ”)
if(i == -1)
return false
if(i != j)
return false
if(i == name dot length)
return false
return true
}
function isNumber(name) //数值检测
{
if(name.length == 0)
return false
for(i = 0 i < name.length i++) {
if(name.charAt(i) < ”0″ || name.charAt(i) > ”9″)
return false
}
return true
}
function CheckForm()
{
if(! isMail(form.Email.value)) {
alert(”您的电子邮件不合法！”)
form.Email.focus()
return false
}
if(! isEnglish(form.name.value)) {
alert(”英文名不合法！”)
form.name.focus()
return false
}
if(! isChinese(form.cnname.value)) {
alert(”中文名不合法！”)
form.cnname.focus()
return false
}
if(! isNumber(form.PublicZipCode.value)) {
alert(”邮政编码不合法！”)
form.PublicZipCode.focus()
return false
}
return true
}
//–>
</SCRIPT>
2.6 限定表单项不能输入的字符
<script language=”javascript”>
<!–
function contain(str,charset)// 字符串包含测试函数
{
var i
for(i=0i<charset.lengthi++)
if(str.indexOf(charset.charAt(i))>=0)
return true
return false
}
function CheckForm()
{
if ((contain(document.form.NAME.value, ”%\(\)><”)) || (contain(document.form.MESSAGE.value, ”%\(\)><”)))
{
alert(”输入了非法字符”)
document.form.NAME.focus()
return false
}
return true
}
//–>
</script>
1. 检查一段字符串是否全由数字组成
—————————————
<script language=”Javascript”><!–
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum(”1232142141″))
alert(checkNum(”123214214a1″))
// –></script>
2. 怎么判断是否是字符
—————————————
if (/[^\x00-\xff]/g.test(s)) alert(”含有汉字”)
else alert(”全是字符”)
3. 怎么判断是否含有汉字
—————————————
if (escape(str).indexOf(”%u”)!=-1) alert(”含有汉字”)
else alert(”全是字符”)
4. 邮箱格式验证
—————————————
//函数名：chkemail
//功能介绍：检查是否为Email Address
//参数说明：要检查的字符串
//返回值：0：不是 1：是
function chkemail(a)
{ var i=a.length
var temp = a.indexOf(’@')
var tempd = a.indexOf(’.')
if (temp >1) {
if ((i-temp) >3){
if ((i-tempd)>0){
return 1
}
}
}
return 0
}
5. 数字格式验证
—————————————
//函数名：fucCheckNUM
//功能介绍：检查是否为数字
//参数说明：要检查的数字
//返回值：1为是数字，0为不是数字
function fucCheckNUM(NUM)
{
var i,j,strTemp
strTemp=”0123456789″
if ( NUM.length== 0)
return 0
for (i=0i<NUM.lengthi++)
{
j=strTemp.indexOf(NUM.charAt(i))
if (j==-1)
{
//说明有字符不是数字
return 0
}
}
//说明是数字
return 1
}
6. 电话号码格式验证
—————————————
//函数名：fucCheckTEL
//功能介绍：检查是否为电话号码
//参数说明：要检查的字符串
//返回值：1为是合法，0为不合法
function fucCheckTEL(TEL)
{
var i,j,strTemp
strTemp=”0123456789-()# “
for (i=0i<TEL.lengthi++)
{
j=strTemp.indexOf(TEL.charAt(i))
if (j==-1)
{
//说明有字符不合法
return 0
}
}
//说明合法
return 1
}
7. 判断输入是否为中文的函数
—————————————
function ischinese(s){
var ret=true
for(var i=0i<s.lengthi++)
ret=ret &&(s.charCodeAt(i)>=10000)
return ret
}
8. 综合的判断用户输入的合法性的函数
—————————————
<script language=”javascript”>
//限制输入字符的位数开始
//m是用户输入，n是要限制的位数
function issmall(m,n)
{
if ((m<n) &&(m>0))
{
return(false)
}
else
{return(true)}
}
9. 判断密码是否输入一致
—————————————
function issame(str1,str2)
{
if (str1==str2)
{return(true)}
else
{return(false)}
}
10. 判断用户名是否为数字字母下滑线
—————————————
function notchinese(str){
var reg=/[^A-Za-z0-9_]/g
if (reg.test(str)){
return (false)
}else{
return(true) }
}
2.8. form文本域的通用校验函数
—————————————
作用：检测所有必须非空的input文本，比如姓名，账号，邮件地址等等。
该校验现在只针对文本域，如果要针对form里面的其他域对象，可以改变判断条件。
使用方法：在要检测的文本域中加入title文字。文字是在提示信息，你要提示给用户的该字段的中文名。比如要检测用户名
html如下<input name=”txt_1″ title=”姓名”>,当然，最好用可视化工具比如dreamweaver什么的来编辑域。
如果要检测数字类型数据的话，再把域的id统一为sz.
javascript判断日期类型比较麻烦，所以就没有做日期类型校验的程序了.高手可以补充。
程序比较草，只是提供一个思路。抛砖引玉！ ：）
哦，对了，函数调用方法：
<form onsubmit=”return dovalidate()”>
function dovalidate()
{
fm=document.forms[0] //只检测一个form,如果是多个可以改变判断条件
for(i=0i<fm.lengthi++)
{
//检测判断条件，根据类型不同可以修改
if(fm[i].tagName.toUpperCase()==”INPUT” &&fm[i].type.toUpperCase()==”TEXT” &&(fm[i].title!=”"))
if(fm[i].value=”/blog/=”")//
{
str_warn1=fm[i].title+”不能为空!”
alert(str_warn1)
fm[i].focus()
return false
}
if(fm[i].id.toUpperCase()==”SZ”)//数字校验
{
if(isNaN(fm[i].value))
{ str_warn2=fm[i].title+”格式不对”
alert(str_warn2)
fm[i].focus()
return false
}
}
}
return true
}
数值number
字符串string
布尔型boolean
null空
undefined 没有值
typeof检测数据类型
Number（）转换数值
parseInt（）转换数字
parseFloat()转换小数
toString(进制数)
Boolean()转换布尔型
isNaN()是，不是一个数字
prompt输入框
alert弹出框
confirm询问框
if else 条件语句
switch case break default 分支语句
while 循环语句
do while 先执行
条件？成立执行：不成立执行 三元运算符
for 循环
break终止循环
continue结束本次循环
return 函数返回值
objname='Jack'添加对象成员
objname['name']='jack'点语法添加
delete obj.name删除对象成员
delete obj['name']删除对象成员 点语法
obj.name 对象查找
obj['jack']点语法对象查找
for in 循环 用来遍历对象
数组
push 添加放在最后
pop删除最后
unshift 添加最前
shift删除第0个
concat 拼接concat拼接字符串
reverse反转数组
splice截取多少个
slice截取的索引 slice 截取字符串
sort数组排序
indexof()内容索引的位置indexof查找字符位置索引
forEach遍历数组
reduce((prev//上一次结果,currect//当前值){return 结果},0//初始值)
for of循环 es6新增循环 不能遍历对象
map映射数组返回值新数组
filter把满足条件的筛选放到新数组
some遍历满足条件返回true
every所有满足才返回true
字符串操作
indexOf查找字符位置索引
charAt()对应索引的字符串
charCodeAt()Ascall编码
substring截取字符串开始0索引 结束索引
substr截取字符串 多少个
concat拼接字符串
slice 截取字符串结束索引
toUpperCase字符串该大写
toLowerCase改成小写
split（）用什么字符切割放在数组中
replace（把什么，替换成什么）
sort(function(a,b)){returna-b)}) 排序
join数组用字符连接成字符串
数字方法
Math.random随机数0-0.999
Math.round四舍五入
Math.ceil向上取整
Math.floor向下取整
Math.pow取幂
Math.sprt开平方根
Math.abs取绝对值
Math.max取最大值
Math.min取最小值
Math.PI取PI值
toFixed（保留几位小数）
时间
new Date 获取指定时间对象不填是当前
.getFullYear()获取年份
.getMonth月
.getDate日
.getHours小时
getMinutes分钟
getSeconds秒
getDay第几天
getTime时间戳
set设置年月日小时分钟秒钟时间戳
函数名.call()改变this指向
函数名.apply()改变this指向
函数名.bind()返回值改变好了的this指向函数
浏览器属性：
window.innerHeight浏览器高
window.innerWidth浏览器宽
document.documentElement.clientWidth不含滚动条的窗口宽
document.documentElement.clientHeight不含滚动条的窗口高
window.location.href跳转页面 读写
location.relod重新加载页面
location.open(新的页面地址)
location.close()关闭当前页面
history.back历史回退
histor.forward历史前进
history.go()进行历史记录跳转 数值
元素.addEventListener标准浏览器 绑定事件
元素.removeEventListener('事件类型',事件处理函数）移除绑定事件
attachEvent IE低版本浏览器
浏览器事件：
onload加载完毕后执行
onscroll滚动事件
onresize浏览器尺寸改变
docunmentElement(||body).scrollTop浏览器卷去的高度
鼠标事件
click 单机
dblclick 双击
mouseover 鼠标移入 自带事件传播
mouseout 鼠标移出
mouseenter 鼠标移入 阻止事件的传播
mouseleave 鼠标移出
mousemove 鼠标移动
mousedown 鼠标按下
mouseup 鼠标抬起
contextmenu 右键
键盘事件
keydown 键盘按下
keyup 键盘抬起
keypress 键盘按下再抬起
表单事件
blur 失去焦点
focus 获取焦点
change 文本框内容改变 脱离是改变
input 文本框内容改变
submit 表单提交 (专门给 form 标签使用的)
transitionend 过度结束的时候触发
animationend 动画结束的时候触发
selectstart选中事件
timeupdate 音乐视频播放事件 1S4次
视频元素.currentTime返回当前播放时间
触摸事件
touchstart开始触摸
touchmove触摸移动
touchend触摸结束
console.dir()打印详细信息
SetTimeout延时定时器
setInterval间隔定时器
clearTimeout()关闭定时器
获取页面元素
document.documentElenent获取html
document.head 获取head
document.body获取Body
getElementById通过Id获取元素 只有一个
getElementsByClassName通过class名获取元素 得到伪数组
getElementsByTagName通过标签名获取元素
getElementsByName通过元素name获取元素
querySelector通过书写方式获取元素
querySelectorAll获取满足条件的所有元素
元素.childNodes获取一个元素下的所有子节点
元素.children获取元素下所有的元素节点
元素.firstChild元素下第一个子节点
元素.firstElementChild获取第一个元素节点
元素.lastChild获取元素下最后一个子节点
元素.LastElementChild获取元素下最后一个元素节点
元素.previousSibling获取元素的上一个兄弟节点
元素.previousElementSibing获取元素的上一个兄弟元素节点
元素.nextSibling获取元素的下一个兄弟节点
元素.nexElementSibling获取元素的下一个兄弟的元素节点
元素.attributes获取元素的所有属性节点
.getAttribute(属性名)获取元素的属性值
.setAttribute('设置的属性名'，设置的属性值)
removeAttribute(删除的属性名)
innerHTML完全覆盖式替换内部结构
innerText替换文本内容
.style获取行内样式或对值进行增删改查
window.getComputedStyle(获取的元素)||元素.currentStyle获取非行内样式
class.name读取类名或者写入新的类名
document.createElement(创造标签)
父元素.appendChild(添加的子节点)
父元素.inserBefore(插入的元素，哪一个元素前)
父元素.replaceChild(新节点，旧节点)替换
父元素.removeChild(删除的节点)
元素.cloneNode(true)克隆节点
document.createDocumentFragment()文档碎片创建筐
clientWidth clientHeight边框内的区域
offsetwidth offsetheight含border的边框区域
offsettop offsetleft 定位父级的左上角距离
offsetX offsetY点击元素的左上角坐标点
clientX clientY 可视窗口的左上角坐标点
pageX pageY 文档流的左上角
event=event||window.event获取事件对象
var target=e.target||e.srcElement .tagName标签名 获取触发事件的元素
IE e.cancelBubble=ture ||e.stopPropagation 取消事件冒泡
IE e.returnValue=false ||e.PreventDefault() || return false 取消默认行为
//正则表达式
new RegExp('')创建正则
.非/n换行的任意字符
\转译
\s空格
\S需要非空格
\d数字
\B非数字
\w数字字母下划线
\W非数字字母下划线
^开始$结尾
+1到正无穷
*0到正无穷
？0或者1次
{n}n次
{n,}至少n次
{n,m}至少n次，最多m次
()集合可以单独捕获
[]任意选择的集合
[^]表示非任意选择集合
|占位一般和小括号一起使用
-一般和中括号一起用，a-b 必须ASCII挨着的
正则表达式.test(字符串)检测字符串
正则表达式.exec(捕获的字符串)
g标识全局 i不分大小写
var ze = new RegExp("^[0-9]+"+param+"[a-z]+$","g")动态添加正则
字符串.search(正则)找符合条件的
字符串.match(正则)有g的时候。捕获到每一个符合的内容
字符串.replace(正则,替换内容)
JSON.stringify(要转换的对象或数组）
JSON.parse(JSON格式的字符串)
let const 变量
prototype函数自带属性
protot
Object.prototype.toString.call()或constructor构造者 检测数据类型
面向对象 calss关键字 class类名
constructor(){}构造函数体
Es6继承
extends 继承
super( 参数)
Object.defineProperty(你要给谁添加，添加的key,配置项{get(){return 'jack'}set(接收一个参数){捕获你想改变的行为}}数据劫持
classList 每一个元素都有一个classList的属性
add（您要添加的类名）用来添加类名的
remove（你要移除的类名)用来移除类名的
replace(你要替换的类名，替换成什么)用来替换类名的
toggle（你要切换的类名）
数组去重set方法
new Set（）
size方法和属性
add(你要添加的成员)
delete（你要删除的成员)
clear()把数据集合中的所有内容全部删除
has(你要判断的数据)
forEach(function(){})
...展开
对象
1，set(成员的Key,成员的值）
2，get(获取的成员名称）
3，delete(你要删除的成员名称)
4，clear()用来清除该数据集合中的所有成员
5，forEach（）
item拿到的是所有的value
index拿到的是所有的key
arr原始的Map数据集合
6，has()判断该数据集合内有没有某一个数据成员
7，size
8，...展开
获取地址栏？后面部分window.location.search
获取地址栏#后面部分window.location.hash
ecodeURI解码中文
解构
