-java Siege Lion Learning route-I. JavaScript base output
- Use the Window.alert () pop-up warning box.
- Use the document.write () method to write content to an HTML document.
- Writes to an HTML element using InnerHTML.
- Use Console.log () to write to the browser's console.
Function
function definition
//无参函数function functionname(){执行代码}//带参函数function myFunction(var1,var2){代码}//带返回值函数function myFunction(){var x=5;return x;}
function access
//访问无参函数functionname();//访问带参函数myFunction(var1,var2);//访问带返回值函数var a=myFunction();
Object
Object definition
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" };
Object Properties
// 访问对象的两种方式person.lastName;person["lastName"];
Object methods
//定义对象方法methodName : function() { code lines }//访问对象方法objectName.methodName()
Javascript:void (0)
The key in Javascript:void (0) is the Void keyword, which is a very important keyword in JavaScript, which specifies that an expression is evaluated but does not return a value.
Two. JavaScript HTML DOM
- The entire document is a document node
- Each HTML element is an element node
- Text within an HTML element is a text node
- Each HTML attribute is an attribute node
- Comment is a comment node
Change HTML
Access
//通过ID获取var id = document.getElementById("thisId");//通过标签获取(获取为一个数组)var tags = document.getElementsByTagName("div");//通过类名获取(也为数组)var class = document.getElementsByClassName("className");
Modify
1.修改HTML内容document.getElementById(id).innerHTML = "HelloWorld";2.修改属性//获取属性element.getAttribute("属性名");//设置属性element.attribute=新属性值;element.setAttribute("属性名","修改值");img.src = "img.jpg"; //设置img的srca.href = "www.baidu.com"; //设置a的链接
Change CSS
document.getElementById(id).style.property=新样式;document.getElementById("p2").style.color="blue"; //改变p2的字体颜色为蓝色
Event
Event Composition: element + action + reaction process
//事件属性
DOM node
Adding nodes
//添加前需要新键节点var p = document.createElement("p"); //新建元素pvar word = document.createTextNode("文本内容"); //添加文本内容p.appendChild(word);//作为父元素最后一个子元素添加
Inserting nodes
element.insertBefore(para,child); //插入指定位置
Replace node
parent.replaceChild(para,child);
Delete a node
div.removeChild(p);
Three. JavaScript Browser BOMBrowser object Model (BOM)
WindowRepresents a browser window. All JavaScript global objects, functions, and variables automatically become members of the Window object.
Window screenThe Window.screen object contains information about the user's screen.
Window LocationThe Window.location object is used to obtain the address (URL) of the current page and redirect the browser to a new page.
Window historyWindow.history object contains the history of the browser
- History.back ()-Same as clicking Back button in browser
- History.forward ()-Same as clicking the Forward button in the browser
- History.go ()-Jump to the specified page
JavaScript Pop-up window
Warning Box
//用于确保用户可以得到某些信息alert("sometext");
Confirmation box
//用于验证是否接受用户操作//返回true或falsevar a = confirm("sometext");
Prompt box
//用于提示用户在进入页面前输入某个值//如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 nullvar a = prompt("sometext","defaultvalue");
JavaScript Timing Events
SetInterval () method
//间隔指定的毫秒数不停地执行指定的代码。var timer = setInterval("javascript function",milliseconds);
Clearinterval () method
//用于停止 setInterval() 方法执行的函数代码clearInterval(timer);
SetTimeout () method
//在指定的毫秒数后执行指定代码var timer= setTimeout("javascript function", milliseconds);
Cleartimeout () method
//停止执行setTimeout()方法的函数代码clearTimeout(timer);
JavaScript operation Html&css Easy to get started