Java 之 JavaScript

Posted 2020-08-30 晨M风

1.DOM

　　a.作用：通过 html DOM，可访问 javascript HTML 文档的所有元素

　　b.功能：

　　　　①JavaScript 能够改变页面中的所有 HTML 元素

　　　　②JavaScript 能够改变页面中的所有 HTML 属性

　　　　③JavaScript 能够改变页面中的所有 CSS 样式

　　　　④JavaScript 能够对页面中的所有事件做出反应

 

2.获取与更改

　　a.获取元素：

var x=document.getElementById("intro");    //通过id获取元素

var x=document.getElementByName("gender");    //通过name获取元素

var x=document.getElementsByClassName("test1");    //通过 类名 获取元素

var x=document.getElementsByTagName("input");    //通过 标签名 获取元素

 

　　b.获取与改变属性：

var userName=document.getElementById("userName");

//方法一    .属性
userName.style.display = "block";

//方法二    get/setAttribute()
userName.getAttribute("value");
userName.setAttribute("value","test");

//特殊方法——修改文本    .innerTest
document.getElementById("id").innerTest= "hello word";

//特殊方法——修改HTML语句    .innerHTML
document.getElementById("id").innerHTML= "<option>四川</option>";

　　　　注：在IE9之前的版本中， .innerHTML不能在<option>及<table>中的<tr>、<td>中使用

 

 

3.事件绑定

　　a.传统方法

var userName=document.getElementById("userName");

userName.onclick=function(){
});

 

　　b.现代方法

var userName=document.getElementById("userName");

userName.addEventListener("click",function(){
});    //添加事件

userName.addEventListener("click",test /*方法名*/);    //删除事件

 

　　c.在IE8及以下版本无法使用.addEventListener，而使用：

var userName=document.getElementById("userName");

userName.attachEvent("click",function(){    
});    //添加事件

userName.attachEvent("click",test /*方法名*/);    //删除事件

 

 

4.节点

　　a.方法：

var myUl = document.getElementById("myUl")

var el = document.createElement("li");    //创建新的元素
myUl.appendChild(el);    //添加子元素
myUl.removeChild(el);    //添加子元素

　　b.属性：

myUl.parentNode    //获取父级元素
myUl.childNodes    //获取子级元素
myUl.firstChild    //第一个子元素
myUl.lastChild    //最后一个子元素

 

 

5.BOM

　　a.window 对象：浏览器中打开的窗口

　　b.方法：

alert();    //显示带有一段消息和一个确认按钮的警告框
var flag =confirm("你确定要删除这条数据吗");    //显示带有一段消息以及确认按钮和取消按钮的对话框，返回值为 true 或 false
prompt("请输入一个数字");    //显示可提示用户输入的对话框
focusTest.focus();    //把键盘焦点给予一个窗口
focusTest.blur();    //把键盘焦点从顶层窗口移开
open("http://www.baidu.com");    //打开一个新的浏览器窗口或查找一个已命名的窗口

setInterval(function(){},1000);    //按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout(function(){},1000);    //在指定的毫秒数后调用函数或计算表达式
clearInterval(idForInterval);    //取消由 setInterval() 设置的 timeout
clearTimeout(idForTimeout);    //取消由 setTimeout() 方法设置的 timeout

　　c.属性：

　　　　①location

location.reload();    //刷新
location.assign();    //加载新文档（能返回）
location.replace();    //加载新文档（不能返回）

location.href = "http://www.baidu.com"    //加载新文档（建议使用）

　　　　②history

history.back();    //返回
history.forward();    //前进
history.go(2);    //跳转多少页