JavaScript

基本使用

JavaScript的3种使用方式

1.html标签中引用

<a href="javaScript:alert('欢迎使用js')">电击</a>

2.<script> 标签使用

 <script> alert("再次欢迎"); </script>

3.通过外部js文件引用  注意点：在引入的script标签里不能写js代码  写了无效

<script src="al.js"> </script>

常用的三种输出语句

1.alert("输出的语句")   弹出警示框   【用户体验】
2.console.log("")  控制台输出语句  【开发人员的调试】
  console.warn("")  控制台输出警示
  console.error("") 控制台输出错误提示
3.document.writer("");  直接在页面显示
js的内置对象 【相当于java里面已经声明好的工具类】

提供我们直接使用的功能

变量的申明

命名规则
1.变量的命必须是以字母或_或$开头
2.变量的长度不能超过255个字符
3.变量名中 不允许出现空格
4.不能使用关键字/标签名作为变量名
4.变量名区分大小写

变量的作用域 【java？】
全局变量
局部变量
注意：1局部优先于全局

      2没有声明var的变量也是全局变量

js函数 【java的方法】

js函数的申明方式
1. function fun_name(参数){ //函数体 }

2. var fun=function fun_name(参数){ //函数体 }

  /*function add(name,type){
            alert(name+type);
        }
        add("chaunceny",1);*/

        function  add(){
            return 1;
        }
        var num=add();
        alert(num+1);

事件 【去做某件事】

事件三要素
事件源   事件   事件的处理

语法  事件源.事件=事件处理
      触发事件的元素.事件=function(){ 事件的处理 }

事件有哪些？
onclick   鼠标单击
ondbclick  鼠标双击
onkeyup    按下并释放键盘上某个键
onchange   下拉框选项发生变化
onfocus    获得焦点
onblur     失去焦点
onmouseover  鼠标悬停
onmouseout   鼠标移出
onload       网页文档加载
onunload     关闭页面
onsubmit     表单提交事件
onreset     重置事件

隐藏的样式
     隐藏                显示
display:none         display:block
visibility:hidden    visibility:visible
overflow:hidden  隐藏超出的部分


visibility 隐藏占位置

display 隐藏不占位置

入口函数
window.onload=function(){
  //js代码
}

等待页面中的元素全部[结构/样式]加载完毕执行的事情

js数据类型

undefined  未定义或定义未赋值
null       跟undefined
number     数值类型 包括整数/小数
boolean    true/false
String     字符串类型  单引号/双引号都属于字符串类型
function   函数方法
Object     对象类型(数组)

转换函数
parseInt();  字符串转换为整数
parseFloat();  字符串转换为浮点数
toString();  返回字符串

强制转换函数
Boolean()   强任意类型转换为Boolean     结果为false的情况：“”   0   nudefined  null   NaN  false
Number()    转换为数字       如果转换的值里面只要存在一个无法转换的字符，就是NaN
String()    转换为字符串

判断函数

isNaN()    是数字返回false  不是数字返回true

在web的使用
控制结构，控制样式

<script type="text/javascript">
    var doc=document.getElementById("one");
    doc.style.backgroundColor="red";
    doc.style.width="300px";
    doc.style.height="300px";
</script>

js基本逻辑

运算符

算数运算符 +  -  *  /  %  ++  --
赋值运算符 =  +=  -=  *=  /= %=
比较运算符 >  <  >=  <= ==  !=  ===【值和类型都想同】
逻辑运算符 &&   ||    ！

三元运算符 条件?值1:值2

条件控制语句

if(){
}

if(){
}else{
}

if(){
}else if(){
}else if(){
}else{
}

switch(){
  case :
  break;
  default:
}

循环语句

for(表达式){
}

while(){
}

do{
}while();

控制循环流程【break  continue】

数组的2种申明方式

var arr=[1,2,3];               int [] arr={1,2,3};

jsDOM节点

数组的常见方法

push()  在数组的末尾添加一个或多个元素 返回数组的长度
unshift()   在数组的开头添加一个或多个元素 返回数组的长度
pop()  删除并返回最后一个元素
shift()  删除并返回第一个元素
concat()  连接两个或多个数组，它不会改变原来的数组，仅仅返回连接之后的数组副本
join()  将数组的各个元素 通过指定的字符进行连接成一个字符串 不会改变原来的数组

split() 将字符串按照指定的字符拆分成数组

DOM 的定义

DOM为文档提供了结构化表示。
通过脚本来访问文档结构，目的就是为了让js来操作html元素而制定的规范
DOM树/DOM文档模型
节点：

在js中所有的东西都成之为节点

访问节点的方法

getElementById()     通过id访问节点
getElementsByTagName()  通过标签名访问节点
getElementsByClassName()  通过类名来访问节点【兼容性问题  IE6,7,8 不支持 】

 <script>
        window.onload=function(){
            var clas=document.getElementsByClassName("cla");
            alert(clas.length);
        }
    </script>

节点关系

父节点                 兄弟节点                                子节点
parentNode   nextSibling                               firstChild
                     nextElementSibling                   firstElementchild
                     previousSibling                          lastChild
                     previousElementSibling             lastElementChild
                                                                        childNodes
                                                                         children

父节点 parentNode
兄弟节点
nextSibling  获得相邻的下一个兄弟节点 （只支持IE 6  7  8）
nextElementSibling  获得相邻的下一个兄弟节点(支持IE9以上版本 和高版本的火狐/谷歌)
[正常的浏览器版本 必须写在前面   IE6 7 8 支持的写在后面]

previousSilling  获得相邻的上一个兄弟节点 （只支持IE 6  7  8）
previousElementSilling  获得相邻的上一个兄弟节点 (支持IE9以上版本 和高版本的火狐/谷歌)

子节点
firstChild    获取第一个子节点  （只支持IE 6  7  8）
firstElementchild  获取第一个子节点  (支持IE9以上版本 和高版本的火狐/谷歌)
lastChild  获取最后一个子节点  （只支持IE 6  7  8）
lastElementChild  获取最后一个子节点  (支持IE9以上版本 和高版本的火狐/谷歌)

childNodes  选取全部的子节点
在IE9 火狐/谷歌 把换行也当做一个子节点
使用 nodeType==1 代表当前这个节点是一个元素

children 选取全部子节点不包括换行

节点的属性

getAttributer(name)   获取节点指定属性的值
setAttributer(name,value)  设置一个节点的属性和对应的值 /如果name属性在标签中已存在 将修改原属性的值

<script>
    var di=document.getElementById("tr");
    var str=di.setAttribute("bgcolor","red");
</script>

增加节点   插入节点   删除节点   克隆节点

增加节点：
1.创建一个新的节点
createElement("标签")  创建一个新的节点  指定标签
2.追加
appendChild(newNode)  追加一个newNode节点
insertBefore(newNode,reNode)    将newnNode插入到reNode之前   如果参照节点为null插入在末尾

删除节点
removeChild(node)  删除node节点

克隆
cloneNode(boolean)  复制某个节点/ boolean的取值为true 复制该节点和该节点下的子节点
                                                 false复制本节点

<script>
    /*
    增加 插入

    //创建新的节点
     var newNode=document.createElement("li");
     //给新的节点添加文本节点
     newNode.innerHTML="6";
     //给新的节点添加属性节点
     newNode.setAttribute("name","刘升东");
     //获取ul节点
     var uls=document.getElementById("uls");
     //insertBefore(newNode,reNode)
     uls.insertBefore(newNode,null);
     */

    //删除
    //获取ul节点
//    var uls=document.getElementById("uls");
//    uls.removeChild(uls.children[2]);

    //克隆
    //获取ul节点
    var uls=document.getElementById("uls");
    //复制ul节点以及ul下的子节点
    var newuls=uls.cloneNode(false);
    //获取div节点
    var ma=document.getElementById("main");
    //把复制的节点追加到div里
    ma.appendChild(newuls);
</script>

常用类

日期对象

Date
创建对象  var noday=new Date();  获取当前的日期
          var noday=new Date("2017/4/5 12:50:50"); 参数的日期
方法：
getDate()    获取日 1-31
getDay()     获取星期 0-6
getMonth()   获取月 0-11
getFullYear()  获取年
getHours()    获取小时0-23
getMinutes()  获取分钟 0-59
getSeconds()   获取秒 0-59
getMilliseconds()  获取当前的毫秒
getTime()      返回累计的毫秒数【从1970/1/1午夜】

<script>
    var noday=new Date();
    //年
   var year= noday.getFullYear();
    //月
    var month=noday.getMonth();
    //日
    var day=noday.getDate();
    //时
    var hours=noday.getHours();
    document.getElementsByTagName("div")[0].innerHTML=year+"-"+(month+1)+"-"+day+"-"+hours;
</script>

定时器

定时器分类：
指定毫秒数   每间隔规定的毫秒数执行一次    setInterval(fun,ms)
停止计时器  clearInterval(定时器);
指定毫秒数   指定毫秒数后执行              setTimeout(fun,ms)
停止定时器  clearTimeout(定时器)

<script>
    var i=1;
    function writeNum(){
        i++;
        document.getElementById("main").innerHTML=i;
    }

    var times=setTimeout(writeNum,3000);


    function stop(){
        clearTimeout(times);
    }
</script>

String类

length  获得字符串长度
charAt(index); 返回指定位置的字符串
indexOf（str）  查找str在字符串中第一次出现的位置
indexOf(str,index) 从index位置开始查找str第一次出现的位置
lastIndexOf(str) 查找str最后一次出现的位置
lastIndexOf(str,index) 从index查找str最后一次出现的位置
subString(index) 截取index往后的字符
subString(index1，index2) 截取index1到index2之间的字符串 不包括index2
split(str) 将字符串以str分割为数组

json数组

json数组一种轻量级的数据交互格式
语法：var json={"名称":"值","名称":"值",...................}

    <script>
//        var stu={"id":1,"name":"a","age":18};
//        console.log(stu.name);

        var stus={"s":[{"id":1,"name":"a"},{"id":2,"name":"b"}]};
        console.log(stus.s[0].name);
    </script>

window对象

window对象表示浏览器打开的窗口
window对象是全局对象，可以直接调用其方法和属性
如： window.document=document
     window.alert() =alert()

属性名称                     说明
history                     用户访问过的url
location                    用于窗口或框架的location对象
document                    对Document对象的引用

History

history 属性就是History对象的引用
方法：
back()  加载上一个浏览器对象
forward()   加载下一个浏览器对象
go(n)   n为整数 跳转到第n个浏览过的页面
n==0 当前页面
n>0  向前跳转到第n个页面
n<0  向后跳转到第n个页面

<h2>第一页</h2>
<a href="history2.html">前进</a>
<a href="javaScript:history.forward()">前进</a>
<a href="javaScript:history.go(1)">前进</a>

<h2>第二页</h2>
<a href="history.html">后退</a>
<a href="javaScript:history.back()">后退</a>
<a href="javaScript:history.go(-1)">后退</a>

location

属性        作用
host       设置或返回主机名和当前URL额端口号
hostname  设置或返回当前URL的主机名
href      设置或返回完整的URL之地
hash      设置货返回从# 开始的URL信息
search    设置并返回从？开始的URL信息

方法名   作用
reload()    刷新页面

replace()   新的页面替换旧的页面

<script>
    function selectcon(){
        console.log(location.href)
    }
    function  baidu(){
        location.href="http://www.baidu.com";
    }

</script>
<p onclick="selectcon()">查看url</p>
<p onclick="baidu()">跳转到百度</p
><a href="javaScript:location.reload()">刷新</a>
<a href="javaScript:location.replace('http://www.baidu.com')">替换为百度页</a>

document

每个载入浏览器的html文档 都会成为document对象，利用他可以对html中的元素进行访问
常见的属性
title     返回或设置标题

常见的方法
write();  向文档写html表达式或js代码
getElementById()
getElementsByTagName()
getElementsByClassName()  //兼容问题

Window常用方法

alert()
confirm();
open();  打开新的窗口
close(); 关闭指定的窗口
setTimeout();
setIntervla();

    <script>
//        var rs=confirm("是否退出");
//        if(rs){
//            //删除
//        }

    </script>

open的属性

height width  指定窗口的宽高
left，top 指定窗口的x/y轴
//默认yes
toolbar=yes|no    1|0     是否显示工具栏
scrollbars=yes|no  1|0    是否显示滚动条
location=yes|no   1|0     是否显示地址栏
status=yes|no  1|o        是否添加状态栏
menubar=yes|no  1|0       是否显示菜单栏
resizeble=yes|no  1|0     是否允许调节尺寸
titlebar=yes|no  1|0      是否显示标题栏
//默认no
fullscreen=yes|no  1|0    是否使用全屏显示

<script>
    var win=null;
    function opens(){
        //参数           打开的页面    标题     页面样式参数
       win= window.open("window.html","广告","height=200,width=200,top=200,left=200,fullscreen=yes");
       win.document.write("打广告了");
    }
    function closes(){
        win.close();
    }

    function  seclose(){
        self.close();
    }
</script>

正则表达式

被称为正则表示法，常规表示法
一个描述字符模式的对象  由一些特殊的符号组成，其组成的字符模式用来匹配各种表达式

RegExp  正则对象

对象常用符号
符号         描述
/.../       表示第一个模式的开始和结束
^           匹配字符串的开始
$           匹配字符串的结束
\s          任何空白字符
\S          任何非空白字符
\d          匹配任何数字字符 等价于0-9
\D          除了数字以外的任何字符
\w          匹配一个数字或下划线或字符
.           除了换行符之外的任意字符

对象方括号
符号                 描述
[abc]               查找方括号之间的任意字符
[^abc]              查找任何除方括号内的任意字符
[0-9]               查找任何从0-9的数字
[a-z]               查找任何小写的字母
[A-Z]               查找任何大写的字母
[a-zA-z]            查找任何字母
[red|blue|green]    查找指定的选项

对象的重复字符
符号               描述
{n}               匹配前一项n次
{n,}              匹配前一项n次，或多于n次
{n,m}             匹配前一项至少n次，但不能超过m次
*                 匹配前一项0次或多次 =  {0,}
+                 匹配前一项1次或多次 =  {1,}
?                 匹配前一下0次或1次  =  {0,1}

<script>
    var ph="1333333333";
    /*手机必须为13/18/15开头的11位手机号*/
    var reg=/^(13|15|18)\d{9}$/;
    /*var regobj=new RegExp("^[13|15|18]\d{9}$");*/

    //如何验证
    /*验证方式1   ph.match(reg)==null  匹配成功返回匹配对象 */
    /*验证方式2   reg.test(ph)==false  匹配成功返回true*/
    if(ph.match(reg)==null){
        console.log("验证失败");
    }else{
        console.log("成功");
    }
</script>