JavaWeb基础之Javascript

Javascript

js和html的结合方式

• script标签

  <script type ="text/javascript">
  	js代码
  </script>
  

• 使用script标签，引入外部js文件 src

js的原始类型和声明变量

• string：字符串
• number：数字类型
• boolean：true和false
• null：占位符
• undefined：无赋值

typeof()；查看当前变量的数据类型

声明变量：var

js的数组

定义方式

• 第一种：var arr=[1,2,3,4]；

• 第二种：使用内置对象 Arrar对象

  ​ var arr1= new Array (5); 定义一个数组，数组长度是5

  ​ arr1 [0] = “1”;

• 第三种：使用内置对象 Array对象

  ​ var arr2 = new Array(3,4,5); 定义一个数组，数组里面元素是3 4 5

属性 length ：获取数组的长度 arr.length

js的函数

定义函数（方法）有三种方式

• 第一种方式：

  ​ 使用关键字 function

  		function 方法名（参数列表）{
              方法体；
              返回值可有可无（根据实际需要）；
          }
  
  		//实现两个数的相加
  		function add(a,b){
              sum = a+b;
              alert(sum);
          }
  		add(2,3);
  

• 第二种方式：

  ​ 匿名函数

  		var 命名 = function (参数列表){
              方法体和返回值；
          }
  
  		var add = function (a,b){
              sum = a+b;
              alert(sum);
          }
          add(2,3);
  

• 第三种方式：

  ​ 动态函数

  ​ 使用到js里面的一个内置对象 Function

  	var 命名 = new Function("参数列表"，"方法体和返回值");
  
  	var add = new Function("a,b","var sum;sum=x+y;return sum;");
  	alert(add(2,3));
  

js的全局变量和局部变量

• 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
• 局部变量：在方法内部定义一个变量，只能在方法内部使用

js的string对象

与html相关的方法

方法	描述
bold()	加粗
fontcolor()	颜色
fontsize()	字体大小
link()	超链接
sub()	下标
sup()	上标

与java相似的方法

方法	描述
concat	连接字符串
charAt	返回指定位置的字符串
indexOf	返回字符位置
split	切分字符串成数组
replace	替换
substr	截取字符
substring	截取字符

js的Array对象

方法	描述
concat	数组的连接
join	指定字符分割数组
push	向数组末尾添加元素，并返回数组新的长度
pop	删除并放回数组的最后一个元素
reverse	颠倒元素顺序

js的Date对象

获取当前时间

var date = new Date();
document.write(dat);

方法	描述
toLocaleString	转化习惯格式
getFullYear	获取年份
getMonth	获取月份(0-11)
getDay	获取星期(0-6)
getDate	获取日
getHours	获取小时
getMinutes	获取分钟
getSeconds	获取秒
getTime	1970.1.1至今的毫秒数

js的Math对象

方法	描述
ceil	向上舍入
floor	向下舍入
round	四舍五入
random	随机数(0-1)

js的全局函数

方法	描述
eval	直接执行js代码
encodeURI	对字符进行编码
decodeURI	对字符进行解码
isNaN	判断是否数字
parseInt	字符串转化为整数

js的bom对象

对象	描述
navigator	获取浏览器的信息
screen	获取屏幕信息
location	请求url地址
history	请求url的历史记录

history属性：

• 到访问的上一个页面

		history.back();
		history.go(-1);

• 到访问的下一个页面

		histoy.forward();
		history.go(1);

window

方法	描述	例子
alert	页面弹出框	alert()
confirm	确认框	window.confirm(“显示的内容”)
prompt	输入的对话框	window.prompt(“显示的内容”，“输入框里面的默认值”)
open	打开新窗口	window.open(“新窗口地址”,"",“窗口特征”)
close	关闭窗口	window.close()
setInterval	在毫秒数后多次执行js代码	window.setInterval(“js代码”,毫秒数)
setTimeout	在毫秒数后只执行一次js代码	window.setTimeout(“js代码”,毫秒数)
clearInterval	清除setInterval	通过setInterval返回值清除
clearTimeout	清除setTimeout	通过setTimeout返回值清除

js的dom对象

Document对象

方法	描述
write	输出变量或html代码
getElementById	通过id得到元素(标签)
getElementsByName	通过标签的name属性得到标签，返回一个集合(数组)
getElementsByTagName	通过标签名称得到元素
createElement	创建标签
createTextNode	创建文本

元素对象(Element对象)

方法	描述
getAttribute	获取属性里的值
setAttribute	设置属性
removeAttribute	删除属性

removeAttribute不能删除value

获取标签下面的子标签

• 使用属性 chiIdNode (兼容性差)
• 唯一有效方法， 使用getElementByTagName方法

Node对象属性

属性	标签节点对应的值	属性节点对应的值	文本节点对应的值
nodeName	1	大写标签名称	null
nodeType	2	属性名称	属性的值
nodeValue	3	#text	文本内容

• 父节点 parentNode

• 子节点

  • 第一个子节点 firstElementChild

  • 最后一个子节点 lastElementChild

• 同辈节点

  • nextElementSibling：返回一个给定节点的下一个兄弟节点
  • previousElementSibling：返回一个给定节点的上一个兄弟节点

操作dom树

• appendChild方法

  添加子节点到末尾

  类似于剪切粘贴的效果

• insertBefore(newNode,oldNode)方法

  在某个节点之前插入一个新的节点

• removeChild方法：删除节点

  通过父节点删除

• replaceChild(newNode,oldNode)方法：替换节点

  通过父节点替换

• cloneNode(boolean)方法：复制节点

innerHTML属性

• 获取标签内文本
• 向标签里面设置内容

表单提交方式

onclick:鼠标点击
onchange:改变内容(与select一起使用)
onfoucus：得到焦点
onblur：失去焦点