js

作者: 她与星河皆遗憾 | 来源:发表于2019-04-17 15:52 被阅读0次

JS操作属性、JS换肤、JS操作style属性、JS操作clas
2018-08-20
react-redux+react-thunk的一个小计数器
JavaScript 04 (do...while循环/for
Java EE之旅03-JS基础（上）
JAVA 之 JS知识框架
JavaScript八张思维导图
温故而知新，8张 Javascript 思维导图助你成长
webpack 学习总结
.min.js和.js文件的区别讲解

new Date()

在JS中获取当前时间对象和JAVA类似。都是先创建出一个时间对象，用变量进行接收。var myDate= new Date();

获取当前年份
var myYear=myDate.getFullYear();
获取当前月份,（java和js中）月份是从0开始的,所以要加1
var myMonth = myDate.getMonth()+1;
获取当前日期
var date =myDate.getDate();
获取当前是星期几,如果是周日则返回0.
var myDay=myDate.getDay();
获取当前小时
var hour =myDate.getHours();
获取当前分钟
var min =myDate.getMinutes();
获取当前秒
var sec =myDate.getSeconds();

动态显示时间

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var oBox =document.getElementById('box');
                var oP=document.getElementById('imgTime');
                
                function runTime(){
                    var myDate =new Date();
                    var year =myDate.getFullYear();
                    var mon =myDate.getMonth()+1;
                    var day =myDate.getDate();
                    var hour =myDate.getHours();
                    var min =myDate.getMinutes();
                    var sec =myDate.getSeconds();
                    
                    var strDate = formatTime(year)+'-'+formatTime(mon)+'-'+formatTime(day)+'    '+formatTime(hour)+':'+formatTime(min)+':'+formatTime(sec);
                    
                    var strDate1 = formatTime(hour)+':'+formatTime(min)+':'+formatTime(sec);
                    oBox.innerHTML = strDate;
                    
                    for(var i =0;i<strDate1.length;i++){
                        var num = strDate1.charAt(i);
                        if(i != 2 && i != 5){
                            var aImg=oP.getElementsByTagName('img');
                            aImg[i].src = 'img/'+num+'.JPG';
                        }
                    }
                }
                
                runTime();
                var timer = setInterval(function(){
                    runTime();
                },1000);
                
                function formatTime(date){
                    if(date<10){
                        date = '0'+date;
                    }
                    return date;
                }
                
            }
        </script>
    </head>
    <body>
        <div id="box">
            
        </div>
        <p id="imgTime">
            <img src="img/0.JPG">
            <img src="img/0.JPG">
            <img src="img/colon.JPG" >
            <img src="img/0.JPG">
            <img src="img/0.JPG">   
            <img src="img/colon.JPG" >
            <img src="img/0.JPG">
            <img src="img/0.JPG">
        </p>
    </body>
</html>

日期差的运用

var myDate1 = new Date(2019, 3, 16, 15, 22, 0);
var myDate2 = new Date();
var times = myDate1-myDate2;

日期相减为毫秒（myDate1-myDate2 值为毫秒）
天: Math.floor(times/86400);
时: Math.floor(times%86400/3600);
分: Math.floor(times%86400%3600/60);
秒: Math.floor(times%60);

倒计时

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="datetime">

        </div>
        <script type="text/javascript">
            function djs() {
                var myDate1 = new Date(2019, 3, 16, 15, 22, 0);
                var myDate2 = new Date();
                var times = Math.floor(myDate1 - myDate2) / 1000;

                document.getElementById('datetime').innerHTML = Math.floor(times / 86400) + '天' + Math.floor(times % 86400 / 3600) +
                    '时' + Math.floor(times % 86400 % 3600 / 60) + '分' + Math.floor(times % 60) + '秒';
            }
            djs();
            timer = setInterval(function() {
                djs();
            }, 1000);
        </script>
    </body>
</html>

字符串操作

    <script>
          var str = 'A前台技术';
//        alert(str.length);空格占长度
//        alert(str.charAt(2));//找不到的话什么也不显示
//        alert(str.charCodeAt());// 返回unicode码
//        alert(String.fromCharCode(22945)); 返回unicode码代表的字符
//        alert(str.charCodeAt());// 0-9 48-57
//        alert(str.charCodeAt());// a-z 97-122
//        alert(str.charCodeAt());// A-Z 65-90
    </script>

slice和substring都有截取字符串的意思，slice的应用更贴近于java。

slice 中参数是一个负数时,从倒数位数截取
substring 中参数是一个负数时 ,和0一样

indexOf(v,num)查看字符串v在索引num后出现的位置。如果返回值为-1则说明没有找到该字符串v。
lastIndexOf查看字符串出现的所有位置

split(a): var arrStr=str.split(a)将字符串str按照a拆分成数组。a没了。
arrStr.join();//将数组中的内容用逗号（,）进行拼接
arrStr.join(“”);//将数组中的内容无缝拼接。

展开/收缩文字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box {
                background: #0F7CBF;
                border: 10px solid red;
                padding: 10px;
                width: 500px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <!-- <span>
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
            </span>
            <a href="javascript:;">展开</a> -->
            <span>
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
                但我家的我阿囧的加我啊就掉进外景地挖机的加我啊降低，
            </span>
            <a href="javascript:;">收缩</a>
        </div>
        <script type="text/javascript">
            var oBox = document.getElementById('box');
            var oSpan = oBox.getElementsByTagName('span')[0];
            var oA = oBox.getElementsByTagName('a')[0];
            
            var text = oSpan.innerHTML;
            var onOff =true;
            oA.onclick = function() {
                if(onOff){
                    var html = oSpan.innerHTML.slice(0, 28);
                    oSpan.innerHTML = html;
                    oA.innerHTML='...展开';
                }else{
                    oSpan.innerHTML = text;
                    oA.innerHTML='收缩';
                }
                onOff = !onOff;
            }
        </script>
    </body>
</html>

数组

js中数组的长度是可变的，数组中可以存储各种数据类型。
var arr=[1,2,3,4,true,'hello'];
1.快速清空数组有两种方法。
①arr=[]；
②arr.length=0;
2.向数组中添加数据有两种方法。
①在原数组的末尾添加arr.push(5，6，7);
②在原数组的开始位置添加arr.unshift('新数组第一个元素'，'新数组第二个元素')。
3.从数组中删除数据有两种方法。
①删除数组中的最后一个元素，产生新数组，并返回最后一个元素的值。arr.pop();
②删除数组中的第一个元素，产生新数组，并返回第一个元素的值。arr.shift();
4.splice可对数组进行增删改
①增加数据：arr.splice(2,0,'e');
解释：在索引值为2的位置，增加e，其余元素位置后移。
②修改数据：arr.splice(2,3,'e');
解释：在索引值为2的位置，将从该位置的起的三个元素，替换成e。
③删除数据：arr.splice(1,1)；
解释：第一个参数为索引，第二各参数为个数。将索引值为1的元素开始，删除一个元素。

利用splice去重数组中的重复数据

<script type="text/javascript">
          var arr =[1,2,3,4,5,6,2,1,4,5,2];
          //选择排序
          for(var i=0;i<arr.length-1;i++){
                for(var j=i+1;i<arr.length;j++){
                        if(arr[i]==arr[j]){
                              arr.splice(j,1);
                              j--;
                        }
                }
          }
</script>

省市级联动（数组和DOM）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <select name="" id="province">
            <option value="省份" >省份</option>
        </select>
        <select name="" id="city">
            <option value="" >城市</option>
        </select>
        <script type="text/javascript">
            var oPro=document.getElementById('province');
            var oCity=document.getElementById('city');  
            var aPro=['辽宁','河北','湖北'];
            var aCity=[
                ['沈阳','大连','鞍山','抚顺','本溪','锦州'],
                ['石家庄','天津','廊坊','承德'],
                ['武汉','襄阳','宜昌','黄石','十堰']
            ];
            for(i in aPro){
                oPro.innerHTML +='<option value="'+aPro[i]+'">'+aPro[i]+'</option>';
            }
            
            // 触发改变事件
            oPro.onchange=function(){
                oCity.innerHTML = '<option value="">城市</option>';
                var provalue= oPro.value;
                for(i in aPro){
                    if(aPro[i]==provalue){
                        for(j in aCity[i]){
                            // 创建一个节点
                            var  oPtion =document.createElement('option');
                            oPtion.value=aCity[i][j];
                            oPtion.innerHTML=aCity[i][j];
                            // 追加一个节点
                            oCity.appendChild(oPtion);
                        }
                    }
                }
            }
        </script>
    </body>
</html>

json可以将起看成一个对象，该对象由键值对组成。（不准确）比较像Java中的map集合。

<script type="text/javascript">
            // json 类似map集合,不恰当的说他是一个类似于java的对象
            var json = {
                "name": "张三",
                "age": 16,
                "gender": "男"
            }

            console.log(json['name']);
            console.log(json['age']);
            console.log(json['gender']);

            // 遍历json,attr为key变量
            // json遍历写法类似于java foreach遍历,只不过摆放位置不一样,代表的意义不一样
            for (attr in json) {
                console.log(attr+":"+json[attr]);
            }
</script>

DOM操作（节点操作）（document object model 文档对象模型）

我们可以把每个标签都看作一个节点，标签兄弟标签，父级标签，子标签。即父节点、子节点、兄弟节点等，对他们的操作称为节点操作。
①获取节点：获取节点的方式有很多，常用的有通过ID、标签名、类名称、name属性获取。
通过ID：document.getElementByID()
通过标签名：document.getElementsByTagName()
通过类名称：document.getElementsByClassName()
通过name属性：document.getElementsByName()
②获取全部子节点：返回操作节点的所有子节点数组。
var oList = document.getElementById('list');
var aLi = oList.children；//获取子节点数组
③获取第一个子节点：
var oFlist=oList.firstElementChild;
④获取最后一个子节点：
var oLlist=oList.lastElementChild;
⑤获取某节点的下一个兄弟节点：
var oSlist=oList.firstElementChild.nextElementSibling;(获取第二个子节点：先获取第一个子节点，通过第一个子节点获取他的下一个节点)
⑥获取某节点的上一个兄弟节点：
var oTlist=oList.lastElementChild.previousElementSibling;(获取倒数第二个子节点：先获取倒数第一个子节点，通过倒数第一个子节点获取他的上一个节点)
⑦获取父节点
var oFther=oList.parentNode;
⑧获取有定位的父节点
oList.offsetParent
⑨距离有定位的父节点有多少距离
offsetLeft，offsetTop，offsetRight，offsetBottom

!!!!!创建节点和追加子节点
var oElement=document.createElement('li');//创建li标签的对象。li标签可以是任意标签div、a等等。
oLi.appendChild(oElement);//将创建的标签插入oLi对象所在标签的子标签中。

取消默认事件和confirm提示框

用Botton举例：创建一个表单，表单中输入内容，如果内容不为空，则跳转到链接地址，否则不跳转。
confirm和alert作用相似，但是会返回true或false。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="https://www.baidu.com" method="" id="form">
            <input type="text" id="" value="" name="username" />
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </form>
        <script type="text/javascript">
            var oForm = document.getElementById('form');
            var oBtn = oForm.getElementsByTagName('button')[0];

            oForm.onsubmit = function() {
                if (oForm.username.value != null && oForm.username.value != '') {
                    oForm.submit();
                } else {
                    return false; //取消默认事件
                }
            }

            oForm.onreset = function() {
                if (!confirm("确定重置？")) {
                    return false;
                }
            }
        </script>
    </body>
</html>

BOM操作（browser object model 浏览器对象模型）

说白了就是打开、跳转、关闭浏览器窗口

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button1">打开窗口1</button>
        <button type="button2">打开窗口2</button>
        <a href="https://www.baidu.com" target="_blank">打开窗口</a>
        <!-- 
            Bom browser object model 
                关闭窗口
                打开窗口
                跳转页面
         -->
         <script type="text/javascript">
            document.getElementsByTagName('button')[0].onclick=function(){
                // 打开窗口(挑IE或者其他浏览器的版本，兼容性差)
                window.open("https://www.baidu.com","_self");
            }
            document.getElementsByTagName('button')[1].onclick=function(){
                // 打开窗口(跟上面一样，但是兼容性更好)
                window.location.href="https://www.baidu.com";
            }
         </script>
    </body>
</html>

焦点事件和焦点函数
获取焦点函数：对象.focus();
获取焦点事件：

对象.onfocus = function() { //焦点事件
                //oInput.value = 'dwa';
              }

失去焦点函数：对象.blur();
失去焦点事件：

对象.onblur = function() { //焦点事件
                //oInput.value = 'dwa';
              }

全选函数、计算函数

全选函数描述：设置一个按钮和一个文本框，当在文本框中输入文字，点击按钮，使文字变成全部选中状态。
带文本框的对象.select()
全选函数：eval能计算可运算的计算表达式的结果
var num =eval(1+2*3/4);

事件的扩展

onmousemove；鼠标移动事件
onmousedown；鼠标按下事件
onmouseup；鼠标弹起事件
onkeydown；//ev.keyCode获取键盘码

document.onkeydown=function(ev){
                var ev =ev||event;
                //ev.keyCode 获取键盘码
                alert(ev.keyCode);
            }

事件流

事件冒泡：所有的事件都具有穿透性,直到穿透到document(子级接收了一个事件，他的父级同样接收这个事件),这种机制叫穿透冒泡.
通过event对象,阻止穿透ev.stopPropagation();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>点按钮图片显示，点空白图片消失</title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
                display: none;
            }
        </style>
    </head>
    <body>
        <p><button type="button">按钮</button></p>
        <div id="box">
            
        </div>
        <script type="text/javascript">
            // 事件冒泡:
            //   所有的事件都具有穿透性,直到穿透到document(子级接收了一个事件，他的父级同样接收这个事件),这种机制叫穿透冒泡.
            document.getElementsByTagName('button')[0].onclick=function(ev){
                var ev =ev||event;
                document.getElementById('box').style.display='block';
                // 通过event对象,阻止穿透.
                ev.stopPropagation();
            }
            
            
            document.onclick=function(){
                document.getElementById('box').style.display='none';
            }
        </script>
    </body>
</html>

Event对象

当一个对象触发一个事件时，事件function中设置形参event，event对象会返回描述该事件的所有信息。
代码描述：当点击空白窗口时，观察consle控制台输出了什么

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 
            触发该事件的所有信息都会被记录
         -->
        <script type="text/javascript">
            document.onclick=function(ev){
                var ev = ev||event;
                for(attr in ev){
                    console.log(attr+","+ev[attr])
                }
            }
        </script>
    </body>
</html>

js实现复制粘贴功能

// input与textarea可以直接使用这个方法。
let Url = document.getElementById("share_status1");
      Url.select();
      // 执行浏览器复制命令用户定义的代码区域用户定义的代码区域（只对可编辑区域有效果,如 input ,textarea 标签）
      document.execCommand("Copy");

// 这里是复制`<span></span>`中的代码，与直接复制input中的不一样，所以需要一个中转，不可以与input的那种一样
                let input = document.createElement('input');
                document.body.appendChild(input);
                let content = document.querySelector('#share_url').innerHTML;
                input.setAttribute('value', content);
                input.select();
                // #execCommand()这个方法,只对可编辑区域有效果,如 input ,textarea 标签,
                document.body.removeChild(input);

JS操作属性、JS换肤、JS操作style属性、JS操作clas
JS操作属性： JS换肤： JS操作style属性： JS操作class： JS中括号操作属性： JS函数： JS...
2018-08-20
今天学习了JS 运算符 JS 比较 JS If...Else JS Switch JS For JS While ...
react-redux+react-thunk的一个小计数器
app.js: connect.js counter.js: reducer.js: action.js:
JavaScript 04 (do...while循环/for
js循环,js循环嵌套,js do...while循环,js的for循环,js中的break,js中的contin...
Java EE之旅03-JS基础（上）
JS学习大纲 JS简介 1、js是什么 2、js能做什么 3、js历史及组成 4、js被引入的方式 js基本语法 ...
JAVA 之 JS知识框架
一、js的简介二、js基本语法三、js内建对象四、js的函数五、js的事件六、js的bom 七、js的dom
JavaScript八张思维导图
目录 JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实...
温故而知新，8张 Javascript 思维导图助你成长
目录 JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实...
webpack 学习总结
webpack 干嘛用的？ index.js 依赖 a.js，a.js 依赖 b.js，b.js 依赖 c.js，...
.min.js和.js文件的区别讲解
.js和.min.js文件 .js是JavaScript 源码文件；.min.js是压缩版的js文件。 .js压缩...