js_note

首页 > 代码库 > js_note

2024-09-20 09:52:37 215人阅读

一、js简介

1.js是？js可以嵌入到HTML中，是基于对象和事件驱动的脚本语言

　　特点：交互性，安全性(js不能访问本地磁盘)，跨平台(浏览器中都具备js解析器)

2.js做？(1)动态修改HTML和css代码，增删 (2)能动态的校验数据

3.js组成 BOM浏览器对象模型 DOM文档对象模型

4.js引入方式

(1)内嵌脚本 <input type="button" value="http://www.mamicode.com/button" onclick="alert(‘xxx‘)"/>

(2)内部脚本 <script type="text/javascript">

　　　　　　　　alert("xxx")

　　　　　　</script>

(3)外部脚本首先先创建一个js文件，其次在HTML中引入 <script type="text/javascript" src="http://www.mamicode.com/demo1.js"></script>

js代码放在哪里？放在哪里都可以，但是在不影响HTML功能的前提下，越晚加载越好

二、js基本语法

1.变量弱类型

(1)var x=5; x=‘javascript‘;

var y="hello";

var b=true;

(2)x=5;

2.原始数据类型

(1)number 数字类型

(2)string 字符串类型

(3)boolean 布尔类型

(4)null 空类型

(5)undefined 未定义

number/boolean/string 伪对象

类型转换：

number、boolean转成string toString();

转成number：parseInt(), parseFloar() boolean不能转，string可以将数字字符串转成number，如‘123a3sd5‘,转成123

强制转换 Boolean() 数字强转成布尔，非零就是true，零就是false

　　　　　　　　　　字符串强转成布尔，非“”就是true

Number() 布尔转数字，true转成1 false转成0

　　　　　　　　　　字符串转数字，不能强转

3.引用数据类型

var obj=new Object();

var num=new Number();

4.运算符

(1)赋值运算符 =

(2)算术运算符 + -* /% +遇到字符串变成连接 -先把字符串转成数字

(3)逻辑运算符 && ||

(4)比较运算符>,<,===全等

(5)三元运算符

(6)void运算符 <a href="javascript:void(0);">xxxx</a>

(7)类型运算符 typeof() 判断数据类型，返回数据类型 instanceof()判断是否是某种数据类型

5.逻辑语句

(1)if else

(2)for

(3)switch

(4)for in

三、js内置对象

1.Number

　　创建方式：var myNum=new Number(value);

　　　　　　　 var myNum=Number(value);

属性和方法：toString()转成字符串

　　　　　　valueof() 返回一个Number对象的基本数字值

2.Boolean

创建方式：var bool=new Boolean(value);

属性和方法：toString(),valueOf(),

3.String

属性和方法：length，charAt(),charCodeAt(),indexOf(),split()

4.Array

创建方式：var arr=new Array();//空数组

　　　　　var arr=new Array(size);//创建一个指定长度的数组

　　　　　var arr=new Array(e1,e2...en);

属性和方法：length,join(把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔一个元素)，pop(删除并返回最后)，push(向数组的末尾添加一个元素，并返回新的长度)，sort()(按照字符串字典顺序进行排序)

5.Date

属性和方法：getFullYear(),getMonth()(0-11),getDate(),getDay(),getTime()

6.Math

7.RegExp

创建方式：var reg=new RegExp(pattern);

　　　　　var reg=/^正则规则$/

规则写法：[0-9] \d代表数字 [A-Z]大写字母 [a-z]小写字母 [A-z]所有字母 \w查找单词字符\W查找非单词字符 \s查找空白字符 \S查找非空白字符 n+出现至少一次 n*出现0次或多次 n?出现零次或一次 {5}出现5 {2,8}2到8次

方法：test(str) 检索字符串中指定的值返回true和false

var reg=/^[A-z]+[A-z0-9_-]*@[A-z0-9]+\.[A-z]+$/

var email=haohao_33@126.com

reg.test(email)

四、js函数

封装功能

1.js函数定义的方式

(1)function 函数名（参数列表）{函数体}

(2)匿名函数 function(参数列表){函数体}

var method=function(){

　　alert(‘yyy‘);

};

method();

(3)对象函数

new Function(参数1，参数2，...函数体)

注：参数名称必须使用字符串形式，最后一个参数为函数体

var fn=new Function{"a","b","alert(a+b)"}

2.函数参数

(1)形参没有var修饰

(2)形参和实参个数不一定相等

(3)argumens是个数组，会对传递的实参进行封装

3.返回值

(1)定义函数时候不必表明是否具有返回值

(2)返回值通过关键字return

4.js的全局函数

(1)编码和解码

encodeURI() decodeURI()

encodeURIComponent() decodeURIComponent()

escape() unescape()

三者区别：进行编码的符号范围不同，实际开发中常使用第一种

(2)强制转换 Number() String() Boolean()

(3)转成数字 parseInt()

(4)eval()方法把字符串当作脚本进行解析运行

五、js事件

事件、事件源、响应行为

1.事件

onclick点击事件 onchange域内容被改变的事件 onfocus获得焦点的事件 onblur失去焦点的事件 onm ouseover鼠标悬浮的事件 onl oad加载完毕的事件

2.事件的绑定方式

(1)将事件和响应行为都嵌入到HTML标签中

(2)将事件内嵌到HTML中而响应行为用函数进行封装

　　function fn(){

　　　　alert("uuu");

　　}

</script>

(3)将事件和响应行为完全封装在函数中

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

　　btn.onclick = function(){

　　　　alert("zzz");

　　}

</script>

***this关键字 this经过事件的函数进行传递的是HTML标签对象

　　function fn(obj){

　　　　alert(obj.name);

　　}

</script>

onchange：域内容被改变的事件需求：实现二级联动

　　var select = document.getElementById("city");
　　select.onchange = function(){
　　　　var optionVal = select.value;
　　　　switch(optionVal){
　　　　　　case ‘bj‘:
　　　　　　　　var area = document.getElementById("area");
　　　　　　　　area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
　　　　　　　　break;
　　　　　　case ‘tj‘:
　　　　　　　　var area = document.getElementById("area");
　　　　　　　　area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
　　　　　　　　break;
　　　　　　case ‘sh‘:
　　　　　　　　var area = document.getElementById("area");
　　　　　　　　area.innerHTML = "<option>浦东</option><option>杨浦</option>";
　　　　　　　　break;
　　　　　　default:
　　　　　　　　alert("error");
　　　　　　}
　　};
</script>

onfocus:获得焦点的事件

onblur：失去焦点的事件

需求：当输入框获得焦点的时候，提示输入的内容格式；当输入框失去焦点的时候，提示输入有误

<body>

</body>

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

　　txt.onfocus=function(){

　　　　//友好提示

　　　　span.InnerHTML="用户名格式最小八位"；

　　　　span.style.color="green";

　　};

　　txt.onblur=function(){

　　　　var span=document.getElementById("action");

　　　　span.innerHTML="对不起，格式不正确"；

　　　　span.style.color="green";　　

　　};

</script>

onmouseover:鼠标悬浮的事件

onmouseout：鼠标离开的事件

需求：div元素，鼠标移入变为绿色，移出恢复原色

onload加载完毕的事件

等到页面加载完毕再执行onload事件所指向的函数

　　window.onload=function(){

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

　　　　alert(span);

　　　　span.innerHTML="hello.js";

　　}

</script>

3.阻止事件的默认行为

IE：window.event.returnValue = http://www.mamicode.com/false;
W3c: 传递过来的事件对象.preventDefault();
//ie：window.event.returnValue = http://www.mamicode.com/false;
//W3c：传递过来的事件对象.preventDefault();
//W3c标准
if(e&&e.preventDefault){
　　alert("w3c");
　　e.preventDefault();
//IE标签
}else{
　　alert("ie");
　　window.event.returnValue = http://www.mamicode.com/false;
}

//通过事件返回false也可以阻止事件的默认行为
<a href="http://www.mamicode.com/demo11.html" onclick="return false">点击我吧</a>

4.阻止事件的传播

IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
　　alert("w3c");
　　e.stopPropagation();
//IE标签
}else{
　　alert("ie");
　　window.event.cancelBubble = true;
}

六、js的bom

(1)window对象

弹框的方法：
提示框：alert("提示信息");
确认框：confirm("确认信息");
　　有返回值：如果点击确认返回true 如果点击取消返回false
　　var res = confirm("您确认要删除吗？");
　　alert(res);
输入框：prompt("提示信息");
　　有返回值：如果点击确认返回输入框的文本点击取消返回null
　　var res = prompt("请输入密码？");
　　alert(res);

open方法：
　　window.open("url地址");
　　open("../jsCore/demo10.html");

定时器：
setTimeout(函数,毫秒值);
　　setTimeout( 3秒之后执行这个函数
　　　　function(){
　　　　alert("xx");
　　　　},
　　　　3000
　　);

clearTimeout(定时器的名称);
　　var timer;
　　var fn = function(){
　　　　alert("x");
　　　　timer = setTimeout(fn,2000);
　　};
　　var closer = function(){
　　　　clearTimeout(timer);
　　};
　　fn();

setInterval(函数,毫秒值);
clearInterval(定时器的名称)
　　var timer = setInterval(
　　　　function(){
　　　　alert("nihao");
　　},
　　2000
　　);
　　var closer = function(){
　　　　clearInterval(timer);
　　};

需求：注册后5秒钟跳转首页
恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳转到首页，如果不跳转请<a href="http://www.mamicode.com/jsCore/demo10.html">点击这里</a>
<script type="text/javascript">
　　var time = 5;
　　var timer;
　　timer = setInterval(
　　　　function(){
　　　　　　var second = document.getElementById("second");
　　　　　　if(time>=1){
　　　　　　　　second.innerHTML = time;
　　　　　　　　time--;
　　　　　　}else{
　　　　　　　　clearInterval(timer);
　　　　　　　　location.href="http://www.mamicode.com/jsCore/demo10.html";
　　　　　　}
　　},
　　1000
);
</script>

(2)location

location.href="http://www.mamicode.com/url地址"；

(3)history
back();
forward();
go();
<a href="http://www.mamicode.com/demo7.html">后一页</a>
<input type="button" value="http://www.mamicode.com/上一页" onclick="history.back()">
<input type="button" value="http://www.mamicode.com/下一页" onclick="history.forward()">

<input type="button" value="http://www.mamicode.com/上一页" onclick="history.go(-1)">
<input type="button" value="http://www.mamicode.com/下一页" onclick="history.go(1)">

七、js的dom

1.理解文档对象模型

HTML文件加载到内存之后会形成一棵dom树，根据这些节点对象可以进行脚本代码的动态修改

在dom树当中，一切皆为节点对象元素节点属性节点文本节点

2.dom方法和属性

getElementById

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>通过id获得元素节点对象</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
         <form name="form1" action="test.html" method="post" >
               <input type="text" name="username" value="hello"  id="tid"  onchange="" >
          <input type="button" name="ok" value="保存1"/>
         </form>
  </body>

  
  <script type="text/javascript">
  
    //输出 <input type="text" name="username" value="http://www.mamicode.com/hello"  id="tid" >标签value属性的值
    var inputNode = document.getElementById("tid");
    //alert(inputNode.value);
    
    
    //输出 <input type="text" name="username" value="http://www.mamicode.com/hello"  id="tid" >标签type属性的值
    var inputNode = document.getElementById("tid");
    alert(inputNode.type);


  </script>
  
  
</html>

getElementsByName

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>通过name获得节点对象集合</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  
  <body>
         <form name="form1" action="test.html" method="post" >
               <input type="text" name="tname" value="hello1"  id="tid_1"  ><br>
          <input type="text" name="tname" value="hello2"  id="tid_2"  ><br>
          <input type="text" name="tname" value="hello3"  id="tid_3"  ><br>
          <input type="button" name="ok" value="保存1"/>
         </form>
  </body>
  
  <script type="text/javascript">
  
   //通过元素的name属性获取所有元素的引用
   var inputNodes = document.getElementsByName("tname");
   //测试该数据的长度
   //alert(inputNodes.length);
   //遍历元素,输出所有value属性的值
   /* for(var i=0;i<inputNodes.length;i++){
           var inputNode = inputNodes[i];
           alert(inputNode.value);
   } */
   //为每个文本框(<input type="text">)增加chanage事件,当值改变时,输出改变的值
   for(var i=0;i<inputNodes.length;i++){
           var inputNode = inputNodes[i];
           inputNode.onchange = function(){
               alert(this.value);
           };
   } 
   
  </script>

</html>

getElementsByTagName

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>通过标签名称获得元素节点的集合</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
  <body>
       <form name="form1" action="test.html" method="post" >
               <input type="text" name="tname" value="hello_1"  id="tid_1"  ><br>
          <input type="text" name="tname" value="hello_2"  id="tid_2"  ><br>
          <input type="text" name="tname" value="hello_3"  id="tid_3"  ><br>
          <input type="button" name="ok" value="保存1"/>
         </form>
       
       <select name="edu" id="edu">
             <option value="博士">博士^^^^^</option>
          <option value="硕士" selected="selected">硕士^^^^^</option>
          <option value="本科"  >本科^^^^^</option>
          <option value="幼儿园">幼儿园^^^^^</option>
       </select>
       
       <select name="job" id="job" >
             <option value="美容">美容^^^^^</option>
          <option value="IT">IT^^^^^</option>
          <option value="程序员">程序员^^^^^</option>
          <option value="建筑师">建筑师^^^^^</option>
       </select>
       
       <br/>
       <input id="btn" type="button" value="输出select被选中的值" />
  </body>
  
  <script type="text/javascript">
    
    //获取所有的input元素,返回值是数组
    var inputNodes = document.getElementsByTagName("input");
    //测试长度
    //alert(inputNodes.length);
    //遍历value的值
       /* for(var i=0;i<inputNodes.length;i++){
           var inputNode = inputNodes[i];
           alert(inputNode.value);
   }  */
    //输出type="text"中 value属性的值 不包含按钮(button)
    /* for(var i=0;i<inputNodes.length;i++){
           var inputNode = inputNodes[i];
           if(inputNode.type=="text"){
               alert(inputNode.value);
           }
    } */
    
    //输出所有下拉选select的option标签中value的值
    /* var optionNodes = document.getElementsByTagName("option");
    for(var i=0;i<optionNodes.length;i++){
           var optionNode = optionNodes[i];
           alert(optionNode.value);
   } */
    
    //输出所有下拉选 id="edu"中option标签中 value属性的值
    /* var edu = document.getElementById("edu");
    var optionNodes = edu.getElementsByTagName("option");
    for(var i=0;i<optionNodes.length;i++){
           var optionNode = optionNodes[i];
           alert(optionNode.value);
   } */
       
      //点击按钮输出下拉框中被选中的值
      /* var btn = document.getElementById("btn");
      btn.onclick = function(){
          var optionNodes = document.getElementsByTagName("option");
        　for(var i=0;i<optionNodes.length;i++){
               var optionNode = optionNodes[i];
               if(optionNode.selected){
                   alert(optionNode.value);
          　　　}
          }
      }; */
  
  </script>
  
</html>

hasChildNodes

  <script type="text/javascript">
  
   //查看id="edu"的节点是否含有子节点
   var edu = document.getElementById("edu");
   //alert(edu.hasChildNodes());

   //查看id="tid_1"的节点是否含有子节点
   var tid_1 = document.getElementById("tid_1");
   alert(tid_1.hasChildNodes());
   
  </script>

NodeNameValueType

  <script type="text/javascript">
  
    //元素节点  id="tid_1"  输出nodeName nodeType nodeValue
    //var node = document.getElementById("tid_1");
    /* alert(node.nodeName);//input
    alert(node.nodeType);//1
    alert(node.nodeValue);//null */
    
    //文本节点 id="pid"  输出nodeName nodeType nodeValue
    /* var node = document.getElementById("pid");
    var textNode = node.firstChild;
    alert(textNode.nodeName);//#text
    alert(textNode.nodeType);//3
    alert(textNode.nodeValue);//明天上课 */
    
    //属性节点  id="pid"   输出nodeName nodeType nodeValue
    /* var node = document.getElementById("pid");
    var p = node.getAttributeNode("id");
    alert(p.nodeName);//id
    alert(p.nodeType);//2
    alert(p.nodeValue);//pid */

  </script>

replaceNode 父节点替换子节点

  <body>
      您喜欢的城市:<br> 
       <ul>
            <li id="bj" value="beijing">北京</li>
         <li id="sh" value="shanghai">上海</li>
         <li id="cq" value="chongqing"> 重庆</li>
       </ul>
      
      您喜欢的游戏:<br> 
       <ul>
            <li id="fk" value="fangkong">反恐<p>精英</p></li>
         <li id="ms" value="moshou">魔兽</li>
         <li id="cq" value="chuanqi">传奇</li>
       </ul>   
  </body>
  
  <script type="text/javascript">
  
     //点击北京节点， 将被反恐节点替换
    var bj = document.getElementById("bj");
    var fk = document.getElementById("fk");
    bj.onclick = function(){
        var parentNode = this.parentNode;
        parentNode.replaceChild(fk,this);
    };
    
  </script>

getAttribute 查找属性节点

  <script type="text/javascript">
  
	  //<li id="xj" value="http://www.mamicode.com/xingji">星际争霸</li>节点的value属性的值
	  var xj = document.getElementById("xj");
	  alert(xj.getAttribute("value"));
	  
  </script>

setAttribute 设置属性值

  <script type="text/javascript">
  
      //<li id="xj" value="http://www.mamicode.com/xingji">星际争霸</li>节点的value属性的值
      var xj = document.getElementById("xj");
      alert(xj.getAttribute("value"));
      
  </script>

createElement 创建节点

<script type="text/javascript">
  
     //增加城市节点 <li id="tj" v="tianjin">天津</li>放置到city下
     var li = document.createElement("li");
     li.setAttribute("id","tj");
     li.setAttribute("v","tianjin");
     
     var txt = document.createTextNode("天津");
     li.appendChild(txt);
     
     var city = document.getElementById("city");
     
     city.appendChild(li);
     
     
  </script>

insertBefore 将元素插入到元素前面

  <script type="text/javascript">
  
      // 创建新的节点 <li id="tj" name="tianjin">天津</li>
       var li = document.createElement("li");
     li.setAttribute("id","tj");
     li.setAttribute("v","tianjin");
     
     var txt = document.createTextNode("天津");
     li.appendChild(txt);
    // 在 <li id="cq" name="chongqing">重庆</li>的前面
    var ul = document.getElementsByTagName("ul");
    var cq = document.getElementById("cq");
    ul[0].insertBefore(li,cq);

  </script>

没有提供insertAfter方法

  <script type="text/javascript">
      
    // 在 上海节点的后面 插入天津节点<li id="tj" name="tianjin">天津</li>
    var li = document.createElement("li");
     li.setAttribute("id","tj");
     li.setAttribute("v","tianjin");
     
     var txt = document.createTextNode("天津");
     li.appendChild(txt);
     
     var ul = document.getElementsByTagName("ul");
     var sh = document.getElementById("sh");
     var cq = sh.nextSibling;
     
     ul[0].insertBefore(li,cq);
    
  </script>

removeChild 删除节点

  <script type="text/javascript">
  
     //删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
     var city = document.getElementById("city");
     var bj = document.getElementById("bj");
     city.removeChild(bj);
     
  </script>

js_note

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > js_note

js_note

看完仍有疑问？有类似问题直接问程序猿