一、JS的介绍?
JS是一门基于对象和事件的用于客户端的安全解析性脚本语言?
二、基础介绍?
好吧,我不知道现在市场上介绍JS的为什么会这么乱,因此把自己的基础给整理出来,同时也是给自己一个整理!!!!
开始~~~
JS是一门脚本脚本语言,用于跟html或者JSP结合使用,让html由原来死板和固定的静态页面 变得 动作和交互!大白话就是它让HMTL或者JSP具备了动态和向后端交互数据的能力,单独的jsp或者html只是静态页面!
其生命周期,JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。
(1):引入?
---------------------------在<script></script>标签中使用
---------------------------使用代码引入外部js文件:<script type="text/javascript" src="public.js"></script>
---------------------------单独引入document.write "<script src='public.js'></script>";写入代码
注意:J浏览器对js与css的加载一般情况下从页面往下,为了方便渲染,一般css的引入在页面开头,JS的引入在页面尾部
(2):基本写法与代码细节;
---------------------------变量声明统一使用var a=xxx; 数据类型会自己包括在内部,靠程序员自己去识别,可并行命名,逗号隔开
---------------------------变量名以字母,下划线或者美元符号开头,数字不开头,大小写敏感,不要使用关键字和保留字;
---------------------------数据类型:Strimg(字符串类型),Boolean(布尔类型),function()函数类型,object(对象类型),number(数据)
---------------------------对象类型:Object,Date,Array类型都是
---------------------------空白类型:undefinded(未定义类型),Null(空白类型)
---------------------------字符串的使用:indexof(str,index),toString,toLower,toupperCase,chatAt(index),substring(),split(str),="xxx";
---------------------------数组与赋值:=('1','2')或=['1','2']或=new Array(4)或=new Array()
---------------------------算数运算符号:与java一致,加减乘除
---------------------------赋值运算符号:与java一致,递增递减,取余数,取模,字符串加号空格号组合等
---------------------------比较运算符:与java一致,大于小于等于不等于,绝对等于,不绝对等于(值和类型)
---------------------------逻辑运算符:与java一致,或与非
---------------------------判断语句:与java一致,if,if-else,if-ifelse-else
---------------------------选择语句:switch (d) {case:"";break;default:xxx;}
---------------------------循环语句:for (var i=0;i<cars.length;i++){document.write(cars[i] + "<br>");},或者do/while{}语句
---------------------------终止语句:break语句,continue语句
---------------------------操作符号:typeof xxxx
(3):JS函数页面;
每个JS文件在写之前要统一调用的逻辑,也即是js文件本身就是一个大function()函数,与java类相似,都有一个main入口。有以下三种模式可以供选择:(此处或许是你们理解一个JS文件结构的开始)
------------------------------$(function(){加载页面里面的其他函数和参数,数组,变量等})
------------------------------window.onload=function(???){加载了页面}
------------------------------$(document).ready(function(params){加载页面})
------------------------------$(window).on(“load”,function() {}) 全部加载完成后在执行
注意:数组或者其他变量的初始化可以放在该函数文件之外,此处函数只是用于同一场景,目的是防止函数各自分散调用,避免因管理不当导致的逻辑混乱或失效
(4) :JS的高频参数?
------------------------------正则表达式?
var str = "Visit Runoob!"; var n = str.search(/Runoob/i);
或者
<p id="demo">请访问 Microsoft!</p>
var str = document.getElementById("demo").innerHTML; var txt = str.replace(/microsoft/i,"Runoob");
其中:/runoob/i 是一个正则表达式。runoob 是一个正则表达式主体 (用于检索)。i 是一个修饰符 (搜索不区分大小写)。
------------------------------正则表达式? /正则主体/.test("xxxxxxxx ")。如果测试中包含正则主体则返回true,否则我false
------------------------------正则表达式? /正则主体/.exec("xxxxxxxx ")。该函数返回一个数组,如果未找到匹配,则返回值为 null
常用的一些表达式如下:
/*是否带有小数*/
function isDecimal(strValue ) {
var objRegExp= /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
/*校验是否中文名称组成 */
function ischina(str) {
var reg=/^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验是否全由8位数字组成 */
function isStudentNo(str) {
var reg=/^[0-9]{8}$/; /*定义验证表达式*/
return reg.test(str); /*进行验证*/
}
/*校验电话码格式 */
function isTelCode(str) {
var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
return reg.test(str);
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
function fun1(){
if(!isStudentNo(document.getElementById("sno").value)){
alert("学生编号是8位数字");
document.getElementById("sno").focus();
return false;
}
if(!ischina(document.getElementById("username").value)){
alert("学生姓名必须填写中文");
document.getElementById("username").focus();
return false;
}
if(!IsEmail(document.getElementById("email").value)){
alert("邮箱地址错误");
document.getElementById("email").focus();
return false;
}
if(!isTelCode(document.getElementById("tel").value)){
alert("电话号码不对");
document.getElementById("tel").focus();
return false;
}
/*运行到这里说明验证通过返回true submit提交按钮起作用提交表单*/
alert("提交成功")
return false; // 这边设置禁止提交,实际项目需要改为 true
}
------------------------------选择器使用?==>类选择器(可绑定多个:$(".xxx")),ID选择器(唯一:$("#xxx"))
------------------------------function()函数的使用?
<1>赋值与书写(在页面中的使用参考标题JS页面函数,页面使用基本都是如此模式,此处主要讲解方法调用,节点调用)
====>function functionname(){xxx} 和 <button onclick="myFunction()">点击这里</button> :函数设置;
====>关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
====>var myVar=myFunction();其中myvar就是函数的返回值
====>document.getElementById("demo").innerHTML=myFunction();将数值赋予到demo的代码中
====>自调用(function () {document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";})(); 加了括号
(5):节点使用?
1、document.getElementsByName(name) 通过name拿到对象数组,name为标签里面的属性
2、document.getElementsByTagName(TagName)通过标签名拿到对象数组,返回元素的顺序是他们在文档中的顺序,标签名举例子,如input;
3、elementNode.getAttribute(name)元素的节点,可以使用该方法获取到属性的值,name为属性的名字,其中elementNode为使用 “1”或者选择器获取到的对象节点。getAttribute()用于获取的是标签代码中的任何一个属性的值!
4、elementNode.setAttribute(name,value)元素的节点,可以使用该方法增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值
5、elementNode.childNodes获取到节点下的子节点的数组,注意:这里不同的浏览器计算子节点的方式不太一样
6、node.firstChild()属性,返回第一个子节点,如果没有返回null
7、node.lastChild()属性,返回最后一个子节点,如果没有返回null
8、elementNode.parentNode属性,访问父节点,父节点只能有一个,其中elementNode为选择器获取的对象
9、elementNode.nextSibling属性,返回某个节点之后紧跟的节点(处于同一树层级中),如果无此节点,返回null
10、elementNode.previousSibling属性,返回某个节点之前紧跟的节点(处于同一树层级中)如果无此节点,返回null
11、appendChild(newnode)在指定节点的最后一个子节点列表之后添加一个新的子节点,创建一个新节点使用document.createElement(),设置完相关属性后,添加到最后
12、insertBefore(newnode,node)在已有的子节点前插入一个新的子节点,例如otest.insertBefore(newnode,node)表示在otest节点下,在子节点node的前面,加入newnode节点
13、nodeObject.removeChild(node)从nodeObject的子节点列表中删除某个节点(node),如删除成功,此方法可返回被删除的节点,如失败,返回null
14、nodeObject.replaceChild(newnode,oldnode)实现子节点的替换,返回被替换的对象的引用
15、document.createElement(tagname)创建元素节点,返回一个元素对象,参数为需要创建的元素的类型
16、document.createTextNode(data)创建新的文本节点,返回新创建的Text节点,data是字符串值,可
17、document.getElementById(xxx)获取id名为xxx的对象
18、在所有的节点中还有一个节点标志,就是nodeName和nodeValue
(6):事件绑定?
-------------------------$("标签/ID").click(function(){参数})
-------------------------$("标签/ID").click("click",函数名) 和 function dddd(){}
-------------------------$("btn").bind("click",function(){})
-------------------------$("btn").bind("click",函数名)和function(){}