JS基础

最新推荐文章于 2023-10-20 15:14:13 发布

原创最新推荐文章于 2023-10-20 15:14:13 发布 · 160 阅读

CC 4.0 BY-SA版权

文章标签：

javascript
一.js简介
1.什么是js
js可以嵌套到HTML中（基于对象）和（事件触发）的（脚本语言）
特点：
1）交互性
2）安全性 js不能直接访问本地磁盘
3）跨平台浏览器只要具备js解析器
2.js能做什么
1）js可以动态修改（新增、删除）HTML和CSS的代码
2）js动态校验数据
3js的历史及组成
ECMAScript(基本语法和对象) BOM(浏览器对象模型) DOM(文档对象模型)
4.js的引用方式**
A.内嵌脚本
<input type="button" value="button" onclick="alert('XXX')"/>
B.内部脚本**
<input type="button" value="button" />
   <script type="text/javascript">
   alert("XXX");
   </script>
   C.外部脚本***
   1.创建一个js文件 .js
   2.在HTML中引入JS脚本文件
   <script type="text/javascript" src="demo1.js"></script>
   总结：
   1.JS往哪放？
       在不影响HTML加载效果的情况下越晚加载越好
   2.建议<script>标签因为外部js文件了标签中不建议写脚本内容
二.js的基本语法
1）变量
var a=5;
a='javascript';
a="哈哈";
var b=true;
2)原始数据类型
1）number :数字类型
2）string：字符串类型
3）boolean:布尔类型
4）null:空类型
5）undefined：未定义

注意点：
number string boolean:伪对象
数据类型转换
number boolean 转 string
toString();

string boolean 转 number
parseInt();
parseFloat();

boolean 类型不能转 number类型 NaN
string 类型转 number 能转如果"123哈哈789" 准换完 "123"

string number 转boolean
注意：
number类型能转布尔非0为true 0为false
string 类型能转布尔类型非空为true 空为false

string boolean 转 number
Number()
boolean类型可以转 number true为1 false 为0
string类型转 number 如果值为数字可以转如果"123哈哈" 转NaN

3).引用数据类型
java：Object obj=new Object();
js： var obj=new Object();
4)运算符
1.赋值运算符
=
var a=5;
2.算术运算符
+ - * / % ++ --
+:遇到字符串连接符（拼接作用）
-：遇到字符串转为数字再计算
*：遇到字符串转为数字再计算
/:遇到字符串转为数字再计算 7/2=3.5
3.逻辑运算符
&& ||
4.比较运算符
> < >= <= == !=
== :忽略数据类中比较比较值内容
===:全等比较值和类型
5.三目运算符
3>2?"大于":"小于"
6.void运算符
<a href="javascript:void(0)">点击我吧</a>
7.类运算符
typeof():判断数据类型返回类型
instanceof(): 判断类型返回 true or false
alert(typeof(obj));//object
alert(obj instanceof Object);//true
5逻辑语句
if:条件
number类型能转布尔非0为true 0为false
string 类型能转布尔类型非空为true 空为false
switch:
jdk1.7 string

for

for
for in
var arr=[1,2,3,4,5,"aa",true];
       for(index in arr){
       alert(arr[index]);
       }


三.js的内置对象****
1.Number
var myNum=new Number(value);
var myNum=Number(value);
方法：
toString 把数字转换为字符串，使用指定的基数。
valueOf 返回一个 Number 对象的基本数字值。

2.Boolean
var flag=new Boolean(value);   //构造函数
var flag=Boolean(value);       //转换函数
方法：
toString() 把逻辑值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。
3.String
new String(s);
String(s);

方法：
length 字符串的长度
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
split() 把字符串分割为字符串数组。
substring() 提取字符串中两个指定的索引号之间的字符。（2，3）【2，3）
substr() 从起始索引号提取字符串中指定数目的字符。（2，3）【2，3个
toUpperCase() 把字符串转换为大写。
4.Array
new Array();
   new Array(size);
   new Array(element0, element1, ..., elementn);

   var arr=[];
   var arr=[1,"a"];
   属性：
   length 设置或返回数组中元素的数目。
   方法：
   join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
   pop() 删除并返回数组的最后一个元素
   push() 向数组的末尾添加一个或更多元素，并返回新的长度。
   reverse() 颠倒数组中元素的顺序。
   sort() 对数组的元素进行排序


5.Date
var myDate=new Date();
方法：
getFullYear() 从 Date 对象以四位数字返回年份。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串

6.Math
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释：Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin()
这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
方法：
PI 返回圆周率（约等于3.14159）。
abs(x) 返回数的绝对值
ceil(x) 对数进行上舍入。
floor(x) 对数进行下舍入。
round(x) 把数四舍五入为最接近的整数。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。

7.RegExp
var reg=new RegExp(pattern);
//attributes可选参数
var reg=/^正则规则$/;
属性方法：
[0-9]:数字
[A-Z]:A-Z
[a-z]:a-z
[A-z]:所有字母（大小写字母）
\d:代表数值
\D：非数值
\w:单词字符
\W:非单词字符
\s:查找空白字符
\S:查找非空白字符
n+:至少一次
n*:出现0次或多次
n?:出现0次或1次
{5}：出现5次
{2，8}：出现2-8次
方法：
test 检索字符串中指定的值。返回 true 或 false。
四.js的函数
1.js中函数的定义方式**
A.普通函数
语法：
function 函数名(参数列表){函数}
实例
function method(){
       alert("XXX");
       }
       method();
B.匿名函数(闭包)****
语法：
var 函数名=function(){函数}
实例：
var method=function (){
           alert("YYY");
           }
           method();

C.对象函数（了解）
语法：
new Function(参数1，参数2，参数3);
注意点：
1.形参只能是String类型，最后一个只能是函数体
2.函数体也是字符串
var fn=new Function("a","b","alert(a+b)");

                    fn(2,22);
2.函数中的参数问题
1.形参不用var来修饰
2.形参与实参个数可以不一样(只多不能少)
案例：
function fn(a,b,c){
   var sum=a+b+c;
   alert(sum);
   //arguments 数组内部对参数进行封装
   /* for(var i=0;i<arguments.length;i++){
   alert(arguments[i]);
   } */
   }
   fn(1,2,3,4);
   3.函数中的返回值
   1.定义函数的时候不用表明返回值类型 var
   2.返回值可以通过return 体现
   案例：
   function fn( a, b){
       return a+b;
       }

       alert(fn(2,3));
   4.全局函数
   1）编码问题的（了解）
   decodeURI() 解码某个编码的 URI。
   encodeURI() 把字符串编码为 URI。

   decodeURIComponent() 解码一个编码的 URI 组件。
   encodeURIComponent() 把字符串编码为 URI 组件。

   unescape() 对由 escape() 编码的字符串进行解码。
   escape() 对字符串进行编码。
   2）强转

   Number()
   String()
   3)
   parseInt()
   parseFloat()

   4)******
   eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
   案例：
   var str="var a=2;var b=3;alert(a+b)";
       //alert(str);
       eval(str);
五.js的事件****
   事件
   事件源
   响应行为
   1)事件绑定方式
   A.将事件与响应行为内嵌到HTML代码中
   <input type="button" value="button" onclick="alert('XXX')"/>
   B.将事件内嵌到HTML代码中，将响应结果封装成函数
   <input type="button" value="button" onclick="fn()"/>
   <script type="text/javascript">
       function fn(){
       alert("YYY");
       }
       </script>
   C.事件与响应结果完全重HTML分离出来***
   <input type="button" value="button123" id="btn"/>
   <script type="text/javascript">

       var btn=document.getElementById("btn");
       //alert(btn.value);
       btn.onclick=function(){
       alert("YYY");
       }
       </script>
2)js中常见事件
A)onclick();点击事件

B)onchange();用户改变域的内容****
实现二级菜单联动
案例：

<body>
       <select id="city">
       <option value="bj">北京</option>
       <option value="sh">上海</option>
       <option value="tj">天津</option>
       </select>
       <select id="area">
       <option>海淀区</option>
           <option>昌平区</option>
           <option>朝阳区</option>
       </select>
       </body>
       <script type="text/javascript">
       var city=document.getElementById("city");
       city.onchange=function(){
       var option= city.value;
       //alert(option);
       switch(option){
       case 'bj':
       var area= document.getElementById("area");
       area.innerHTML="<option value='hd'>海淀区</option><option value='cp'>昌平区</option><option value='cy'>朝阳区</option>";
       break;
       case 'sh':
       var area= document.getElementById("area");
       area.innerHTML="<option value='pd'>浦东区</option>";
       break;
       case 'tj':
       var area= document.getElementById("area");
       area.innerHTML="<option value='tg'>塘沽区</option><option value='nk'>南开区</option>";
       break;

       }
       }
</script>
C)***
onblur();//鼠标失去焦点
onfocus();//鼠标获取焦点

案例：
<body>
       <label for="txt">用户名：</label>
       <input type="text" name="username" id="txt"/><span id="active"></span>
       </body>
       <script type="text/javascript">
       var txt=document.getElementById("txt");
       //元素获取焦点事件
       txt.onfocus=function(){
       //友好提示
       var span=document.getElementById("active");
       span.innerHTML="用户名最少长度是六位";
       span.style.color="green";
       }

       //元素失去焦点
       txt.onblur=function (){
       //友好提示
       var span=document.getElementById("active");
       //alert(txt.value);
       if(txt.value.length<6){
       span.innerHTML="对不起格式错误";
       span.style.color="red";
       }else{
       span.innerHTML="";
       }
       }
       </script>
D)
onmouseout();
onmouseover();

案例：
<body>
       <div id="d1">div</div>
       </body>
       <script type="text/javascript">
       var div=document.getElementById("d1");
       div.onmousemove=function(){
       this.style.backgroundColor="green";
       }

       div.onmouseout=function(){
       this.style.backgroundColor="red";
       }
       </script>

E)onload()
   某个图片或某个页面加载完之后
   等待页面元素加载完之后再执行onload事件里面的代码
   案例：
   <script type="text/javascript">
       window.onload=function(){
       var span=document.getElementById("s");
       span.innerHTML="HELLOJS";
       }
       </script>
       </head>
       <body>
       <span id="s"></span>
       </body>

3)阻止事件默认行为
IE:window.event.returnValue=false;(IE低版本)
w3c:传递过来的事件对象.preventDefault();
<body>
       
       
       <a href="demo3.html" onclick="return false">点击我吧</a>
       </body>
       <script type="text/javascript">
       function fn(e){
       //IE:window.event.returnValue=false;(IE低版本8)
       // w3c:传递过来的事件对象.preventDefault();
       if(e&&e.preventDefault){
       alert("w3c");
       e.preventDefault();
       }else{
       alert("ie");
       window.event.returnValue=false;
       }
       }
</script>
4)js的冒泡事件** 阻止事件传播
   IE:window.event.cancelBubble=true;//IE低版本
   w3c:传递过来的事件对象.stopPropagation();

   案例：
   <body>
           <div onclick="fn1()" style="width: 100px; height: 100px; background-color: blue; padding: 50px;">
           <div onclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;">
           XXX
           </div>
           </div>
           </body>
           <script type="text/javascript">
           function fn1(){
           window.alert("fn1");
           }
           function fn2(e){
           // window.alert("fn2");
           //IE:window.event.cancelBubble=true;//IE低版本
               //w3c:传递过来的事件对象.stopPropagation();
               if(e&&e.stopPropagation){
               alert("w3c");
               alert("fn2");
               e.stopPropagation();
               }else{
               alert("ie");
               alert("fn2");
               window.event.cancelBubble=true;
               }
           }
           </script>
六.js中BOM
BOM(浏览器对象模型)
alert();
window.alert();
1)window 对象
弹框方式
   提示弹框：alert();
   确认弹框：confirm();*****
   确认框有返回值点击确定：true 点击取消：false
   输入弹框：prompt();
   输入框有返回值点击确定返回框里输入的值点击取消：返回null
open(url); window.open("../jsCode/demo1.html");
定时器：
A.setTimeout(函数,毫秒值)：过多少毫秒值后调用该函数（只调用一次）
window.setTimeout(function() {
                   alert("XXX");
               }, 3000);
B.clearTimeout(参数);
window.clearTimeout(参数);
<body>
                   <input type="button" value="button" onclick="closer()"/>
                   </body>
                   <script type="text/javascript">
                   /* window.setTimeout(function() {
                       alert("XXX");
                   }, 3000); */

                   var timer;
                   var fn=function(){
                   alert("YYY");
                   timer=setTimeout(fn, 3000);
                   }
                   var closer=function(){
                   window.clearTimeout(timer);
                   }

                   fn();
                   </script>
   C.setInterval(函数,毫秒值);过多少毫秒值重复调用该函数
   案例：
   <body>
                   <input type="button" value="button" onclick="closer()"/>
                   </body>
                   <script type="text/javascript">
                   var timer=window.setInterval(function() {
                      alert("nihao");
                   },3000);
                   var closer=function(){
                   window.clearInterval(timer);
                   }
                   </script>
       需求：
       注册成功后，5秒钟跳转某个页面
       <body>
           恭喜您，终于注册成功了，<span id="second" style="color: red; font-size: 100px;">5</span>秒钟后页面自动跳转，如果不跳转<a href="../jsCode/demo1.html">请点击这里</a>
           </body>
           <script type="text/javascript">
           var time=5;
           var timer;
           timer=window.setInterval(function() {
               var span=document.getElementById("second");
               if(time>=1){
               span.innerHTML=time;
               time--;
               }else{
               //页面跳转事件结束
               window.clearInterval(timer);
               location.href="../jsCode/demo1.html";
               }
           }, 1000);

           </script>
   2.location:对象
   location.href="链接地址";
   location对象不能省
   window.location.reload();//让页面重新刷新
   3.history对象
   历史记录
   back();
   forward();
   go();正整数负整数
   

       <input type="button" value="上一页" onclick="history.go(-1)"/>
       <input type="button" value="下一页" onclick="history.go(1)"/>
七.js中DOM**
DOM(文档对象模型)
文档对象模型：操作页面元素
DOM:document节点
作用：通过他对页面元素进行定位和操作
NODE操作
1.NODE的类型
A.元素类型
B.文本类型
C.文档类型
D.属性类型
E.注释类型
2.NODE的获取方式：
1）通过元素获取
document.getElementById("elementid");****
document.getElementsByName("name");***
document.getElementsByTagName("tagname");***
document.getElementByClassName("classname");
2)通过NODE关系获取引用
document.parentNode;//获取该元素的父节点
document.childNode;//获取所有子节点
document.firstChild;//获取该元素第一个子节点
document.lastChild;//获取该元素最后一个子节点
document.nextSibing;//获取该元素的下一个兄弟节点
document.previousSibing;//获取该元素上一个兄弟节点
3)NODE属性
    节点中文 nodeType nodeName nodeValue
    元素 1 tagname null
    属性 2 attr 属性值
    文本 3 #text 文本值
    注释 8 #comment 注释的文字
    文档 9 #document null
4)NODE节点的增删改查
A.创建一个节点
1）创建一个元素节点：document.creatElement();
2)创建属性节点： object.attr=val;
object.setAttribute(attr,val);
3)创建一个文本节点：
object.innerHTML=val;
object.creatTextNode(text);
B.添加NODE
1.parentNode.appendChild(newNode);
   说明：
                       向节点子节点末尾追加一个新节点，如果文章中存在新节点，将其从文档中移除，重新插入节点
                       appendChild(newNode);
2.parentNode.insertBefore(newNode,exisingNode);
    说明：
                       文档已经存在新节点了，将其从文档中移除，重新插入节点
       3.parentNode.replaceChild(newNode,oldNode);
           说明：
                   文档已经存在新节点了，将其从文档中移除，重新插入节点
           4.parentNode.removeChild(node);
               说明：
                  从子节点表中删除某个节点
--------------------------------------------------------------------
总结：
1.定位页面
document.getElementById();
document.getElementsByName();**
document.getElementsByTagName();**
2.可以查看和修改属性
setAttribute(name,value);
getAttribute(name);
3.空格换行的处理
使用层析关系访问节点
document.parentNode;//获取该元素的父节点
document.childNode;//获取所有子节点
document.firstChild;//获取该元素第一个子节点
document.lastChild;//获取该元素最后一个子节点
document.nextSibing;//获取该元素的下一个兄弟节点
document.previousSibing;//获取该元素上一个兄弟节点去空白
4.节点操作
创建节点：createElement("节点名");
元素前添加新的节点：insertBefore("新节点","旧节点");
元素后拼接新节点：appendChild(新节点);
删除子节点：removeChild(节点);
克隆节点：cloneNode(boolean ) //false只克隆该标签 true 克隆包含的子标签
替换节点：replaceChild(新，旧);

dom可以操作表格
table对象中的属性方法
           属性：rows获取所有行
           方法：
           insertRow(行下标);
           deleteRow(行下标);
               tableRow属性和方法
               属性：
               cells:获取所有单元格
               rowIndex:获取行位置下标
               方法：
               insertCell(单元格下标);
               deleteCell(单元格下标);
               tableCell属性与方法
               属性：
               innerHTML:设置文本<a></a>
               innerText:设置文本
               className:类样式
       小结：
       js可以修改CSS样式
       1）元素对象。setAttribute("style","CSS样式");
       2）通过className绑定CSS样式