Js学习
Posted 浅滩浅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js学习相关的知识，希望对你有一定的参考价值。
Js的引入
由于单纯的html和css是没有动态的效果的，所以为了增加动画效果，当让js也可以做一些验证的工作。
实例
我就将我练习的简单例子列一下，方便日后查看。
test1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <p id="pid"> hello world </p> <script> //js的注释和java的注释是一样的 document.write("666"+"<br/>"); //var是宽松数据类型 var str="hello String"; var i = 10; var j = 10; //var arr = new Array(); var arr = [1,2,3,"string"]; arr[0]=1; document.write("数组长度："+arr.length+"<br>"); document.write("第四个数组元素是："+arr[3]+"<br>"); document.write(i+j); //弹出一个对话框(点击确定之后会显示下一个对话框) alert(arr[3]); function sum(a,b) { alert(a+b); var c = 10; } //var c= sum(10,"2"); //alert(c); <!-- 修改id中的内容(在js中)--> document.getElementById("pid").innerHTML="123"; </script> </head> <body> <!-- 调用函数一种方式 --> <!--<form>--> <!-- <input type="button" value="按键1" onclick="sum(10,20)">--> <!--</form>--> <!-- 调用函数的第二种方式 --> <!--<button onclick="sum(10,30)">按键2</button>--> </body> </html>
test2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <form> <!-- placeholder不用占位符--> <input type="text" id="txt" placeholder="信息"> <input type="button" id="byn" onclick="showUser()" value="按键"> </form> <script> function showUser() { try { var e = document.getElementById("txt").value; if (e == "") { throw "请输入信息"; } }catch(err){ alert(err); } } </script> </head> <body> </body> </html>
test3:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <button onclick="onc()" >按键1</button> <script> // 鼠标移到某个区域和移出某个区域 function onc() { alert("鼠标点击事件"); } function seOut(obj) { obj.innerHTML="hello"; } function seOver(obj){ obj.innerHTML="world"; } </script> <div class="did" onmouseout="seOut(this)" onmouseover="seOver(this)"> </div> <body onload=alert("资源加载完毕")> <form> <input type="text" onchange=alert("内容发生改变")> <!-- 选中文本框变为蓝色--> <input type="text" onselect=this.style.background="blue" onfocus=this.style.background="red"> </form> </body> </html>
test4:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>docObj</title> <button id="btn" >按键1</button> <script> //添加事务一样可以达到之前的效果 document.getElementById("btn").addEventListener("click",function () { alert("点击事件触发"); }); //可以添加多个事务（并且不覆盖之前的）DOM2级事件处理程序 var x=document.getElementById("btn"); x.addEventListener("click",a); x.removeEventListener("click",a); function a(){ alert("点击事件触发2"); } //方式3(第二次的会覆盖第一次的 x.onclick=function () DOM0级事件处理程序 x.onclick=function () { alert("添加click事件1") }; x.onclick=function(){alert("添加click事件2")} x.onclick=null; </script> </head> <body> <!--<p id="1"> hello1</p>--> <!--<p id="2"> hello2</p>--> <!--<p id="3"> hello3</p>--> <a id="aid" href="http://www.baidu.com">点击这里</a> <button onclick="onClick()">按键2</button> <script> // var arr[]= [document.getElementsByTagName("p").item(0)]; // document.write(arr[0]); function onClick() {//通过id修改属性 document.getElementById("aid").href = "http://www.blibli.com"; } </script> </body> </html>
test5:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象</title> </head> <div id="did"> <button id="btn">按键1</button> <a id="aid" href="http://www.baidu.com">百度一下</a> </div> <script> var x=document.getElementById("btn"); var y=document.getElementById("did"); var z=document.getElementById("aid"); x.addEventListener("click",show); y.addEventListener("click",showDid); z.addEventListener("click",A); function show(e) {//e是event的缩写 //事件类型 alert(e.type); e.stopPropagation();//阻止事件冒泡 //alert(e.target); } //只点击button也会触发，事件冒泡向上传递 function showDid() { alert("div触发"); } function A(e){ e.stopPropagation(); e.preventDefault();//阻止默认属性 } </script> <body> </body> </html>
test6:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象</title> <script> // 自定义对象 // people = new Object(); // people.name = "Alice"; // people.age = 15; // document.write("name:"+people.name+"<br>"+"age:"+people.age); // people = {name:"Alice",age:18}; // document.write("name:"+people.name+"<br>"+"age:"+people.age); // function people(name,age){//通过方法构造对象 // this.name=name; // this.age=age; // } // son = new people("Alice",18); // document.write("name:"+son.name+"<br>"+"age:"+son.age); </script> </head> <body> </body> </html>
test7:
<!DOCTYPE html> <html lang="en"> <head > <meta charset="UTF-8"> <title>自带对象</title> <script> var str = "Hello World"; document.write("字符串长度："+str.length+"<br>"); document.write("从头查找："+str.indexOf("Hello")+"<br>"); document.write("匹配"+str.match("Hello")+"<br>");//存在打印字符串不存在返回空 document.write("将World改为world："+str.replace("World","world")+"<br>"); document.write("转化为大写："+str.toUpperCase()+"<br>"); document.write("转化为小写："+str.toLowerCase()+"<br>"); var str1="hello wor,d"; document.write(str1.split(",")[0]+VSCode自定义代码片段9——JS中的面向对象编程