js基础

最新推荐文章于 2024-10-08 13:51:35 发布

Lia------Li

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量228

点赞数

文章标签： javascript 编码

本文链接：https://blog.csdn.net/qq_36974981/article/details/79386548

版权

属性：
str.length 字符串包含字符的个数
方法：
str.charAt(number) 取字符串第number个字符
str.charCodeAt(number) 取字符串第number个字符的编码
0-9 对应 48-57
A-Z 对应 65-90
a-z 对应 97-122
String.fromCharCode(字符编码) 通过字符编码获取对应的字符

str.indexOf(字符串)
如果str包含参数中的字符串就返回子字符串在str中的位置
如果不包含返回 -1
应用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px; height: 200px;
            background-color: #f10110;
        }
        .active{background-color: #0101f1;}
    </style>
</head>
<body>
    <div class="box active"></div>
    <button>切换颜色</button>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        var box = document.getElementsByTagName('div')[0];
        btn.onclick = function(){
            var cls = box.className
            if(cls.indexOf('active') === -1){
                box.className = 'box active'
            }else{
                box.className = 'box'
            }
        }
    </script>
</body>
</html>

分割：
str.slice(from:number,to:number)
在str中截取 [from,to) 返回新的字符串
可以写负数负数代表倒着数从-1开始不会自动调整参数顺序

str.substring(from:number,to:number)
在str中截取 [from,to) 返回新的字符串
可以写负数拿到的是整个字符串会自动调整参数顺序

str.substr(from:number,length:number)
从from位置开始截取，截取 length个
如果是一个参数，就从参数位置开始截取，直到位置结束

split：
str.split(‘,’) //以逗号分解str，变成数组
应用找到wd对应的值：

<body>
    <script>
        var query = 'rsv_spt=1&rsv_iqid=0xabf2b47400007b1c&issp=1&f=8&rsv_bp=0&rsv_idx=2&wd=硅谷&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=8&rsv_sug1=7&rsv_sug7=100'
        var arr1 = query.split('&')

        function findWd(){
            for (var i = 0; i < arr1.length; i++) {
                // var item = arr1[i]
                // console.log(item);
                // var arr2 = item.split('=')
                var arr2 = arr1[i].split('=') 
                if('wd' === arr2[0]){
                    return arr2[1]
                }
            }
        }
        console.log(findWd());
    </script>
</body>

大小写转换
str.toLowerCase() 将str转换成小写
str.toUpperCase() 将str转换成大写
应用首字母大写，其余字母小写：

<body>
    <script>
       function capitalize(str){
            //var firstCode = str[0].toUpperCase() //把第一个字母大写
            return str[0].toUpperCase() + str.slice(1).toLowerCase()

        }
        console.log(capitalize(str));
    </script>
</body>

方法需用括号调用

str.trim() 去除字符串左右两边的空格中间的去不掉

cookie
获取cookie
document.cookie
设置cookie
document.cookie = “key=value;expires=过期日期”
封装设置cookie的函数（方法）↓

function setCookie(key,value,time){
    var date = new Date()
    date.setDate(date.getDate()+time)
    document.cookie = key + '=' + encodeURI(value) + ';expires='+date
}

获取cookie ↓

 function getCookie(key){
            var cookie = document.cookie
            var arr1 = cookie.split(';')
            for (var i = 0; i < arr1.length; i++) {
                var item = arr1[i]
                console.log(item);
                var arr2 = item.split('=')
                console.log(arr2)
                if(arr2[0].trim() === key){ //需要用trim()去空格，否则可能匹配不上
                    return decodeURI(arr2[1])
                }
            }
        }

删除cookie ↓

function removeCookie(key){
      setCookie(key，null,-10)
}

设置并打印cookie，通过封装函数设置

setCookie('age',17,7)
setCookie('sex','women',7)
setCookie('username','张三%%',7)
console.log(document.cookie);
console.log(getCookie('sex'))
console.log(getCookie('username'))

//demo1
<body>
    <h3 id="user">您还没有登录，请登录</h3>
    <p id="exit">退出登录</p>
    <script src="wally.js"></script>
    <script>
        /*
        如果cookie中有用户名，说明已经登陆过
        网页中只显示用户名
         */
        var user = $id('user')
        var exit = $id('exit')
        var username = getCookie('username')
        if(username){
            user.innerText = username
            exit.style.display = 'block'
        }else{
            user.innerText = '请登录'
            exit.style.display = 'none'
        }
        exit.onclick = function(){
            removeCookie('username')
            location.reload() //刷新页面
        }
    </script>
</body>

//demo2
<body>
    <form>
        <div>
            <input type="text" name="username" id="username">
        </div>
        <div>
            <input type="password" name="password" id="password">
        </div>
        <div>
            <button id="btn">登录</button>
        </div>
    </form>
    <script src="wally.js"></script>
    <script>
        var username = $id('username'),btn = $id('btn');
        btn.onclick = function(){
            var _val = username.value
            setCookie('username',_val,30)
        }
    </script>
</body>

array

        var arr = [1,2,3]
        var arr1 = new Array(4)
        var arr2 = new Array(4,5,6)
        console.log(arr,arr1,arr2)
        console.log(arr.length)

        arr.length = 2 //截取数据的前两项
        console.log(arr)
        console.log(arr.length);
        arr.length = 0 //清空数组
        console.log(arr)

        arr2 = []
        console.log(arr2);  //清空数组

arr
arr.push(‘数据’) 将参数追加到数组arr的最后
返回值：数组arr的length
arr.unshift(‘数据’) 将参数插入到数组arr的最前边
返回值：数组arr的length
arr.pop() 将数组最后的元素去掉
返回值：被去掉的那一项
arr.shift() 将数组的第0项的元素去掉
返回值：被去掉的那一项
arr1.concat(arr2) //合并数组str1和str2

arr.forEach(function(item,index,array){
代码
},this指向）
item 当前遍历项
index 当前索引值
array 遍历的数目
第二个参数：设置第一个参数回调函数中的上下文环境 this
注：forEach中 return 不管用

var arr = [1,2,'wally',true]
arr.forEach(function(item,index,array){
    console.log(item,index,array);
})  //1 0 Array[4]
    //2 1 Array[4]
    //wally 2 Array[4]
    //true 3 Array[4]

arr.slice(num) 分割出从第num个数组元素到数组结束的所有元素
arr.slice(num1,num2) 分割出从num1到num2个数组元素

var arr = ['wally','zhangsan','lisi','laoliu']
var arr1 = arr.slice(2)
var arr2 = arr.slice(1,3)
console.log(arr1);//["lisi", "laoliu"]
console.log(arr2);//["zhangsan", "lisi"]

arr.splice(num)
arr.splice(num1,num2)
常用 arr.splice(num,1) 去掉一位 num位置的数
arr.splice(num,0,x) 插入一个元素从第num位开始，用第3个参数替换
splice()的返回值是被删除的元素

var arr = ['wally','zhangsan','lisi','laoliu']
arr.splice(1,1,'hello') //从第1位开始 用第3个参数 替换掉1位元素
console.log(arr); //["wally", "hello", "lisi", "laoliu"]

//arr.splice(1,0,'hello') //插入  
//console.log(arr);//["wally", "hello", "zhangsan", "lisi", "laoliu"]

arr.sort() 排序正序

var arr = [9,3,1,7]
        console.log(arr.sort()); //1,3,7,9
//正序↓
        var arr1 = [9,31,17,7]
        console.log(arr1.sort(function(a,b){
            return a-b
        }));
//倒序↓
        console.log(arr1.sort(function(a,b){
            return b-a
        }));

arr.reverse() 排序倒序
arr.join(‘字符’) 用参数中的值，把数组每一项连起来，变成一个字符串

var arr = [9,3,1,7]
console.log(arr.join('=')); //9=3=1=7
console.log(arr.join(''));//9317

翻转字符串

var str = 'hello world'
var arr = str.split('').reverse().join('')
console.log(arr) //dlrow olleh

Math属性：

<body>
    <script>
        console.log(Math.PI); //PI -> π
        console.log(Math.abs(-15)); //15     
        abs(num): 求num的绝对值
        console.log(Math.max(1,18,12,-3,9)); //18    
        //Math.max(num1,num2,...): 求最大值
        console.log(Math.min(1,18,12,-3,9)); //-3    
        //Math.min(num1,num2,...): 求最小值
        console.log(Math.pow(2,10)); //1024    
        //Math.pow(x,y): 求x的y次幂
        console.log(Math.sqrt(16)); //4    
        //Math.sqrt(num): 求num的平方根
        console.log(Math.ceil(3.1)); //4   
        //Math.ceil(num): 向上取整
        console.log(Math.floor(19.9)); //19    
        //Math.floor(num): 向下取整
        console.log(Math.round(3.1)); //3   
        //Math.round(num): 四舍五入
        console.log(Math.round(3.5)); //4
        console.log(Math.random()); //[0,1)    
        //Math.random(): 随机数 [0,1)
        console.log(Math.random()*10); //[0,10)
        //0-10间的整数，不含10
    </script>
</body>

event：
ondblclick 鼠标双击时触发的事件。两次点击的时间差需要小于3秒，否则被视为单击
onmouseup 鼠标点击、未放开时触发的事件
onmousemove 鼠标移动时触发的事件
onmousewheel 鼠标滚动时触发的事件
event对象：
兼容：
FF（火狐）：不认识event 认为event是参数
其他浏览器：window.event 参数e也支持

e.clientX,e.clientY 鼠标相对于可视窗口的 X，Y坐标跟滚动无关
e.pageX,e.pageY 鼠标相对于文档的 X，Y坐标跟滚动有关系

console.log的值：
console.log(document); // 打印出整个dom 的内容
console.log(document.documentElement); // 打印出 html 的内容
console.log(document.body); // 打印出 body 的内容

按压键盘时触发的事件：
onkeypress
这个事件在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。
onkeyup
这个事件在用户放开任何先前按下的键盘键时发生。
onkeydown
这个事件在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。

鼠标移入移出时触发的事件：
onmouseover与onmouseenter 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
onmouseout与onmouseleave 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
onmouseover和onmouseout 这两个事件会使子元素冒泡，即移入子元素也会有事件发生。
而onmouseenter与onmouseleave不会这样，推荐使用这两个。

表单事件：
onfocus 拾取焦点
onblur 失去焦点
onchange 标签input的value值被改动了，失去焦点才会触发
oninput 只要输入，马上触发
onreset 重置表单内容
onsubmit 提交表单内容
阻止默认行为事件：
preventDefault()

拖拽图标所用事件：
onmousemove 每当用户把鼠标移动一个像素，就会发生一个 mousemove 事件。这会耗费系统资源去处理所有这些 mousemove 事件。因此请审慎地使用该事件。
onmousedown 事件会在鼠标按键被按下时发生。
onmouseup 事件会在鼠标按键被松开时发生。

拖拽div代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div{position:absolute;width: 200px;height: 200px;background-color: #0ff;}
  </style>
</head>
<body>
  <div></div>
  <script>
    var div = document.getElementsByTagName('div')[0];
    div.onmousedown = function(e){
      e = e||event
      //记录鼠标相对于div的位置？
      var dX=e.clientX - this.offsetLeft,
          dY=e.clientY - this.offsetTop;
      console.log(dX,dY);

      document.onmousemove = function(e){
        e = e||event
        div.style.left = e.clientX - dX + 'px'
        div.style.top = e.clientY - dY + 'px'
      }
      //鼠标抬起 将事件释放
      document.onmouseup = function(){
        document.onmousemove = null
        document.onmouseup = null
      }
    }

  </script>
</body>
</html>

监听事件

<body>
    <button id="btn">按钮</button>
    <script>
        //事件监听不会覆盖
        btn.addEventListener('click',function(){
            alert(1)
        })
        btn.addEventListener('click',function(){
            alert(2)
        })

        document.onclick = function(){
            alert(1)
        }
        document.onclick = function(){
            alert(2)
        }
        //后写的会覆盖前边写的事件，同一个事件不可以绑定两次
    </script>
</body>

addEventListener
好处：可以重复监听
兼容：IE8以下不兼容
addEventListener的第三个参数：是不是捕获 false->冒泡（从里到外） true->捕获（从外到里）
IE8-
obj.attachEvent(‘onclick’,function(){
代码
})

<body>
    <div id="box1">
        1
        <div id="box2">
            2
            <div id="box3">3</div>
        </div>
    </div>
    <script>
        //兼容写法
        function addEvt(obj,eventName,callback,cuptrue){
            cuptrue = cuptrue || false  //设置默认值是false
            obj.addEventListener?obj.addEventListener(eventName,callback,cuptrue):obj.attachEvent('on' + eventName, callback,cuptrue)
        }
        addEvt(box2,'click',function(){
            alert(5)
        })

        // IE8-
        // box1.attachEvent('onclick',function(){
        //  alert('4')
        // })

/*
        //addEventListener的第三个参数：是不是捕获
        // false->冒泡（从里到外）  true->捕获（从外到里）
        box1.addEventListener('click',function(){
            alert(1)
        },true)
        box2.addEventListener('click',function(){
            alert(2)
        },true)
        box3.addEventListener('click',function(){
            alert(3)
        },true)
*/
    </script>
</body>

移除监听绑定

//兼容写法
function removeEvt(obj,eventName,fn){
return obj.removeEventListener? obj.removeEventListener(eventName,fn) : obj.attachEvent('on' + eventName,fn)
}

//应用1
<body>
    <button id="btn">解除绑定</button>
    <script>
        //兼容写法
        function removeEvt(obj,eventName,fn){
            return obj.removeEventListener? obj.removeEventListener(eventName,fn) : obj.attachEvent('on' + eventName,fn)
        }

        function show(){
            alert('hello')
        }
        document.addEventListener('click',show)
        btn.addEventListener('click',function(){
            //移除绑定的函数
            //removeEventListener在IE中不支持
            //IE中支持的是obj.attachEvent
            document.removeEventListener('click',show)
        })
    </script>
</body>

//应用2
<body>
    <button id="btn">解除绑定</button>
    <script src="wally.js"></script>
    <script>
        function show(){
            alert('hello')
        }
        addEvt(document,'click',show)
        addEvt(btn,'click',function(){
            removeEvt(document,'click',show)
        })
    </script>
</body>