Javascipt 代码暂存
index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js1.js"></script>
<script>
</script>
</head>
<body>
<!--js对大小写十分敏感-->
<script>
document.write("<h1>在js语句体内中也可以输出标签~</h1>"+"<br>")
// 在输出语句中用+号表示连接
</script>
<p id="pid">Hello</p>
<script>
document.getElementById("pid").innerHTML="用这里的内容来替代pid里的内容"
document.getElementById("pid").innerHTML="哈哈哈哈哈哈哈***"
document.getElementById("pid").innerHTML="可以覆盖之前的内容 因为这里为最后所显示的内容"
//声明数组
var arr = ["hello","I","am","sb"];
var arr = new Array("hello","I","am","sb");
var arr = new Array();
a[0]= null;
a[1]= null;
a[2]= null;//输出null
</script>
<!--点击反馈-->
<p id="sumid"></p>
<script>
function mysum(){
var i=5;
var j="5";
var m=i+j;
//*********任何数和字符串相操作都会转化成字符串
//*********10==10（√） "10"==10（√） "10"===10（×）三等号要完全相等
document.getElementById("sumid").innerHTML=m;//当前界面直接输出
// document.write(m);//新的界面输出
}
function sum(a,b){
var res=a+b;
return res;
}
//alert(sum(10,"10"));//alert对话框弹出 在script内直接调用函数
// sum(10,10);
</script>
<button οnclick="mysum()">调用函数测试</button><!--在script体外调用函数-->
<script>
function Demo(){
alert("执行吗");
return "sb";
}
function demo(){
var s1=Demo()+"11";
var s2=Demo()+"22";
alert(s1);
alert(s2);
}
</script>
<button οnclick="demo()">return语句测试</button>
<input type="text" id="input">
<input type="button" id="submit" οnclick="error()" value="确认提交">
<script>
function error(){
try{
var e = document.getElementById("input").value;
document.getElementById("input").style.color="blue";
if(e==""){
throw ("输入内容不能为空");
}
}
catch(err){
alert(err);
}
}
</script>
<div class="div" οnmοuseοut="onOver(this)" οnmοuseοver="onOut(this)" style="background-color: lawngreen;width: 100px;height: 100px"></div>
<script>
function onOver(ooj){
ooj.innerHTML = "Before";
}
function onOut(ooj){
ooj.innerHTML = "Now";
}
</script>
<form>
<input type="text" οnchange="changeDemo(this);alert('Content has changed.')" style="background-color: burlywood">
<input type="text" οnselect="changeDemo(this)" οnfοcus="changeDemo(this)">
</form>
<script>
function changeDemo(bg){
bg.style.background="yellow";
}
</script>
<!--DOM EventListener事件句柄 addEventListener、removeEventlistener-->
<!--IE的事件处理句柄-->
<button id="btn1">句柄测试</button>
<script>
var btn1 = document.getElementById("btn1");
btn1.addEventListener("mouseover", function () {
alert("句柄测试1");
})
</script>
<!--事件的冒泡 以及禁止冒泡-->
<div id="buttonfather">
<button id="btn2">句柄测试</button>
</div>
<script>
document.getElementById("btn2").addEventListener("click",function(event){
alert(event.type);
event.stopPropagation();//阻止事件冒泡
event.preventDefault();//阻止事件默认事件
})
document.getElementById("buttonfather").addEventListener("click",function(event){
alert(event.target);
})
</script>
<!--JS的面向对象-->
<script>
// <!-- 方式1 -->
people = new Object();
people.name="zy";
people.age="18";
document.write("name:"+people.name+",age:"+people.age);
people = {name:"zyy",age:"18"}
// <!-- 方式2 -->
function people1(name,age){
this.name=name;
this.age=age;
}
son=new people1("zyyy",18);
document.write("name:"+son.name+",age:"+son.age+"</br>");
// <!-- String -->
var str = "hello world"
// str.length str.indexOf("xxx") str.match("xxx") str.replace("目标串","要替换成为的串")
// str.toUpperCase()/str.toLowerCase()
var str1 = "hello,jike,xueyuan"
var s = str1.split(",");
for(var i=0;i<3;i++){
document.write(s[i]);
}
// <!-- Date -->
var date = new Date();
// date.getFullYear() date.getTime() date.setFullYear()
// date,getTime() 距离时间戳1970.1.1的毫秒数
// <!-- Array -->
// concat()合并数组 sort()排序 push()末尾追加元素 reverse()数组元素反转
// <!-- Math --->
// round()四舍五入 random()随机数 max() min() abs()
</script>
<p name="pn">Hello</p>
<p name="pn">Hello</p>
<p name="pn">Hello</p>
<p name="pn">Hello</p>
<p name="pn">Hello</p>
<a id="aid" title="得到了a标签的title" href="demo.html">hello</a><br>
<a id="aid2">aid2</a><br>
<button οnclick="getName()">获取name</button>
<button οnclick="getAttr()">获取元素</button>
<button οnclick="getSize()">获取尺寸</button>
<script>
// <!--getElementsByName 获取name-->
// <!--getElementsByTagName(p、a) 获取元素-->
// <!--getAttribute 获取元素属性-->
// <!--setAttribute 设置元素属性-->
function getName(){
var count = document.getElementsByName("pn");
alert(count.length);
var p = count[2];
p.innerHTML="World";
}
function getAttr(){
var anode = document.getElementById("aid");
var attr = anode.getAttribute("title");
alert(attr);
}
function setAttr(){
var anode = document.getElementById("aid2");
anode.setAttribute("title","动态设置a的title属性");
var attr = anode.getAttribute("title");
alert(attr);
}
function addNode(){
var div = document.getElementById("div");
var node = document.getElementById("pid");
var newnode = document.createElement("p");
newnode.innerHTML = "动态添加第一个p元素";
div.insertBefore(newnode,node);
}
function removeNode(){
var div = document.getElementById("div");
var p = div.removeChild(div.childNodes[1]);
}
function getSize(){
var width = document.body.offsetWidth||document.documentElement.offsetWidth;
var height = document.body.offsetHeight;
alert(width+"*"+height);
}
</script>
<!--内置window对象-->
<br><button οnclick="openwindow()">打开窗口</button>
<script>
function openwindow(){
// window.innerWidth+window.innerHeight
window.open("demo.html","windowname","height=200,width=200,top=100,left=100,toolbar=no,menubar=no");
window.close();
}
</script>
<!--内置计时器对象-->
<p id="ptime"></p>
<button id="btn3" οnclick="stopTime()">停止时间</button>
<script>
var mytime = setInterval(function(){
getTime();
})
// setInterval() 间隔指定的毫秒数不停地执行指定代码
function getTime(){
var d= new Date();
var t= d.toLocaleTimeString();
document.getElementById("ptime").innerHTML=t;
}
// 也可以一直getTime里面一直调用自己来不断获取时间
function stopTime(){
clearInterval(mytime);
// setTimeout() 暂停指定的毫秒数后执行指定的代码
}
</script>
<!--内置History对象-->
<button id="btn4" οnclick="goHistory()">浏览记录</button>
<script>
function goHistory(){
// history.back();返回上一级
// history.forward();前进下一级
history.go(1);//需要从别的界面过来 才能进入那个页面 假定本页面为0
}
</script>
<!--内置Location对象
location.hostname 返回web主机域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocol 返回所使用的web协议
location.href 属性返回当前页面的url
location.assig() 方法加载新的文档
-->
<!--内置Screen对象-->
<script>
document.write("可用高度："+screen.availHeight+",可用宽度："+screen.availWidth);
document.write("高度"+screen.height+",高度："+screen.width);
</script>
<br><button id="btn5" οnclick="fuyong()">面向对象继承、复用和调用父类</button>
</body>
</html>js1.js
/**
* Created by Vodka on 2017/3/14.
*/
document.write("开始学习JavaScript啦！！");
(function(){
var n ="将Js类封装";//该n不能在类外被调用
function Person(name){
this.name=name;
}
Person.prototype={
name:"vodka",
age:18,
eat:function(){
alert(this.name+"吃东西");
}
}
window.Person = Person;
}());
var p = new Person();
function Student(name){
this.name=name;
}
//继承复用时 先继承，再重写函数
Student.prototype = new Person();
var superEat = Student.prototype.eat;
Student.prototype.eat= function () {
alert(this.name+"子类复用吃东西");
superEat.call(this);//调用父类的方法 通过call调用父类的元素
}
var ss = new Student("Vodka ");
function fuyong(){
p.eat();
ss.eat();
}
//Js当中所有东西都是对象
//function Person(){
// var _this = {};
// _this.sayHello = function () {
// alert("Hello");
// }
// return _this;
//}//创建对象方式+1 所有东西都通过_this充当对象重载
//function Teacher(){
// var _this = Person;
// return _this;
//}
//var t=Teacher();
//t.sayHello();
//惰性函数
//函数柯里化
//正则表达式
var pat1="hello world";
var pat2=/world/; //双斜杠中间加东西 表示是一个正则表达式
投递众安保险等公司10个岗位 >
