Web-知识点整理（一）

最新推荐文章于 2022-09-23 00:06:46 发布

Half_orc

最新推荐文章于 2022-09-23 00:06:46 发布

阅读量229

点赞数 1

本文链接：https://blog.csdn.net/Half_orc/article/details/79683997

版权

一. 函数的两种定义方式

1.

function add(){  
        //() 为参数列表
        //内部为函数体
            var a=0
            var b='0'
            if(a){
                console.log('什么')
            }
         }  
         var fun=function(item){  // 形参
            console.log(item)
            }
            fun('1')  //实参

2.

var fun=function(item){  // 形参
            console.log(item)
            }
        fun('1')  //实参

注意
1.函数必须要使用才可触发
2.if（）：6个数据在（）会成为false 1.0 2.false 3.” 4.undefined 5.null 6.NaN
3.= 赋值 ==比较数值是否相等 ===全等于（比较数值和数据类型）

二.数据类型

数据类型：string number boolean null undefined object(array function)
typeof输出值：string number boolean undefined object function(注意无null)

三.返回值

函数的执行结果等同于函数的返回值

function show(){
    return 1
}
alert(show(2))  //1

function f(){
    console.log()
}
console.log(f)  
/*ƒ f(){
    console.log()
}*/
console.log('f')  //f

四.获取及修改元素

<script>
        document.querySelector('P')  //获取到<p>1</p> 即获取第一个元素
        document.querySelectorAll('p')[]  //获取所有的元素
        document.getElementsByTagName('')[]
        document.getElementsByClassName('')[]
        document.getElementById('')[]
</script>

注意：
var p=document.getElementsByTagName(‘p’)[0]
getComputedStyle(‘p’).height
/* 错误写法：
document.getElementsByTagName(‘p’)[0].style.height
*/

1.修改元素：元素.属性=‘’
2.class元素：
添加：document.querySelector(‘p’).classList.add(‘p4’)
移除：document.querySelector(‘p’).classList.remove(‘p2’)
有则添加无则删除 img.classList.toggle(‘dis’)

五.节点

添加子节点：
1.创建子节点 2.获取父元素 3.给父元素去添加节点父元素.appendChild(子元素)
删除节点
1.获取父元素 2. 获取要删除的元素 3.删除父元素.removeChild(子元素)

<body>
    <ul>
        <li>1  <button>删除</button> </li>
    </ul>
    <input/> <button onclick="addItem()">确定</button>
    <script>
            function addItem () {
            var ul = document.getElementsByTagName('ul')[0];
            var  val = document.getElementsByTagName('input')[0].value
            var li = document.createElement('li')
            li.innerHTML = val + '&nbsp;&nbsp;<button>删除</button>';
            ul.appendChild(li)
            document.getElementsByTagName('input')[0].value = ''
            del()
        }
        function del () {
            var ul = document.getElementsByTagName('ul')[0];
            var btns = ul.getElementsByTagName('button'); // 类数组

            for (var i=0;i<btns.length;i++) {
                    btns[i].index = i; 
                    btns[i].onclick=function() {
                        var li = document.getElementsByTagName('li')[this.index];
                        ul.removeChild(li)
                    }
            }
        }

        del()

    </script>
</body>

创建元素：var li = document.createElement(‘li’)
添加元素位置：ul.appendChild(li)

六.HTML5新增功能

w3c标准：结构(html) 表现(css) 行为(js)分离 ajax
h1- h6 (严禁为了放大字体使用)

1.简单标签

html5新增：
    <header>头部</header>
    <footer>脚部</footer>
    <nav>导航</nav>
    <section></section>

    <input list="data"/>
    <datalist id="data">
        <option value="a"></option>
        <option value="ab"></option>
        <option value="ac"></option>
    </datalist>

2.拖拽功能

<body>
    <ul>
        <li draggable='true' style="background-color: #ccc;"></li>
        <li draggable='true' style="background-color: lightpink;"></li>
        <li draggable='true' style="background-color: lightblue;"></li>
    </ul>
    <div></div>
    <script>
        var lielem=document.querySelector('li')
        var div=document.querySelector('div')

            lielem.ondragstart=function(e){
                e = e || window.event
                e.dataTransfer.setData('key':'halforc')
                e.dataTransfer.setDrag
                this.style.backgroundColor='gold'
            }

            // lielem.ondragstart = function(){}  //拖拽开始
            // lielem.ondrag=function(){}  //进行
            // lielem.ondragend=function(){}  //完成

            //div.ondragenter=function(){} //li被拖拽到div上
            //div.ondragover=function(){}  //li在div上被拖拽
            //div.ondragleave=function(){}  //li离开div了
            //div.ondrop=function(){}  //li在div上松开鼠标 想要触发此事件 需在div.ondragover=function(){return false} 添加
    </script>

</body>

3.存储方式

<script>
        //短期存储:
        sessionStorage.setItem('user','sinal')
        alert(sessionStorage.getItem('user'))
        alert(sessionStorage.length)
        sessionStorage.removeItem('user')
        sessionStorage.clear()  //清空

        //长期存储
        localStorage.setItem('user','halforc')
        localStorage.getItem('user')
        localStorage.length
        localStorage.removeItem('user')
        localStorage.clear()
    </script>

4.表单

<body>
    <input type="text" placeholder="请输入用户名" required pattern="[A-Za-z]{3}" onfocus="fo()" onblur="changePlacehoder()" onchange="change()" oninput="search()"/> <!-- 单行文本框-->
    <input type="checkbox" checked="checked">
    <input type="number" placeholder="请输入数字">
    <input type="email">
    <input type="url">
    <input type="color">
    <input type="search">
    <input type="range" onchange="rangeChange(this)" min="10" max="100" >
    <script>
        function fo(){
            console.log('111')
        }
        function change(){}
        function rangeChange(obj){
            console.log(obj.value)
        }
    </script>
</body>

七.对象简介

object 万物皆对象只有对象才有属性和方法
对象.属性===属性值对象.方法的名称()
js中最顶层的对象是 window

/*对象
    var obj = {
        属性：属性值，
        属性：属性值
    }
    obj.属性=属性值

堆栈理解

堆（简单）
var a=2
var b=a
b=3
console.log(a)  //2

栈（复杂）
var obj = {name:'sinal'}
var objs = obj
objs.name='aa'
console.log(obj.name)   //aa

Half_orc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫