7.26 JS第二天

最新推荐文章于 2023-07-05 11:45:17 发布

吃土豆炖豆角文艺吗

最新推荐文章于 2023-07-05 11:45:17 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_40710524/article/details/97373475

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

1.tab切换主要原理和思路先写好Html css样式然后初始化让刚开始无动作的时候图片都display none 有一个display block li的第一个给一个背景色然后获取元素绑定事件点击的时候给className为空然后给一个加className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #tab{
            width:300px;
            height: 345px;
            margin: 100px auto;

        }
        #tab ul li{
            float: left;
            width: 100px;
            height: 45px;
            background: pink;
            text-align: center;
            line-height: 45px;
        }
        #tab div{
            display: none;
            height: 300px;
        }
        #tab div.active{
            display: block;
        }
        #tab li.active{
            background: green;
        }
        #tab div img{
            width: 100%;
            height: 100%;

        }
    </style>
</head>
<body>
    <div id="tab">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <div class="active">
            <img src="https://img-bss.youkuaiyun.com/1558508583729.jpg" alt="">
        </div>
        <div>
            <img src="https://img-bss.youkuaiyun.com/1563779653200.jpg" alt="">
        </div>
        <div>
            <img src="https://img-bss.youkuaiyun.com/1561358566688.jpg" alt="">
        </div>
    </div>
    <script>
        var  oDiv= document.getElementById('tab');
        var aLi=oDiv.getElementsByTagName('li');
        var aDiv = oDiv.getElementsByTagName('div');
        for(var i=0;i<aLi.length;i++)
        {
            aLi[i].index=i;

            aLi[i].onclick=function(){ 
               
                for(var j=0;j<aLi.length;j++)
                {
                    aLi[j].className='';
                    aDiv[j].className='';
                }
                aLi[this.index].className="active";
                aDiv[this.index].className="active"
               
               
            }
        }
    </script>
</body>
</html>

switch 判断必须值和类型都相等

栈内存可以叫做作用域给js代码执行的环境

堆内存所有的引用数据类型他们需要存储的内容都在堆内存中相当于一个仓库目的存储信息信息分为 ---对象会把键值对存储进来函数会把代码当做字符串存储起来。

arguments 实参集合-》类数组

- - arguments只有函数才有

函数的返回值不加return 返回undefined

for in循环对象的时候顺序（key值）数字在前字母按照原来的顺序排列（小数算做字母）

number（“1”）//1 number("1a")//NaN number([])//0 number(false)//0 number('')//0 number(null)//0

number(undefined)//NaN number({})//NaN

isNaN(null)//false isNaN(NaN)//true isNaN(undefined)//true

+'1111' 加号变成数字类型 -'1111'变成负的1111【

- - 加法特殊性
    1. 遇到字符串的时候，+不是数学运算符，而是字符串拼接，只要不遇到字符串就是数学运算
    2. 字符串拼接：把其他值转换成字符串然后在拼接 tostring；其他数据类型的toString是直接的把值用双引号包起来就行了，只有对象的有特殊性[object Object]

】

所以其他类型转换成数字类型四种方法 numbe parseInt parseFloat +

null和undefined没有toString方法

什么类型为false 五种 0 null un NaN、‘ ’

对象和boolean（把两边都转换成数字）

（{ }）==false//NaN==0 false

[ ]==false //true [ ]==true//false [ ]==false//true [ ]->' '->0

![]==false//true ![ ]->false->0

1. 规律：两个等于号比较，左右两边数据值的类型不一样，浏览器会把两边的类型都转换成数字后在比较
2. 但是null undefined除外
  - null == undefined ->true
  - null === undefined -> false
  - null,undefined和其他任何值不想等
  - null == 0 -> false

lastIndexOf()从后往前找找到后再看下标（正常下标）【没有对应字符返回-1】

fromCharCode()把对应ascii码值换成字符串

substr(开始截取的下标，截几个) 返回值截取后的字符

substring(开始截取的下标，截取的末尾下标但是不包括这个【不能为负数】) 返回值截取后的字符

slice( )同上但是第二个参数可以为负数

字符串转换成数组 split（，）分割返回值是数组这个很重要

Replace(old, news) 字符的替换换多个用正则

获取id元素（id的主语永远都是document）

如果id重复只能出现第一个所以一个页面只能出现的id名唯一

1. 获取dom元素的方法
  - document.getElementById()
    1. 获取id 一个元素
    2. 此方法的上下文只能document
    3. id不能重复的,重复获取的永远是第一个
    4. 返回的时一个dom对象
  - document.getElementsByTagName()
    1. 上下文是可以自己来指定的
    2. 获取到的结果是一个元素集合（类数组集合
- - getElementsByName
    1. 通过元素的name属性值获取一组元素（类数组：节点集合nodelist）
    2. 上下问是document
    3. ie浏览器中只能识别表单元素的name属性值，所以我们这个方法都是操作表单元素的

获取元素参数可以写css的选择器返回的只是一个dom对象

querySelector（‘ . a ’）

querySelector( ' .a ' )回的只是一个集合

for in的时候 obj.key是不行的 obj【key】然后初始 str = “ ”给空串

不过obj[xxx]这个有好处..就是xxx是动态的时候..

例如:
var xxx="2";

obj[xxx]这样就可以..但obj.xxx就不行的..

var obj = {name:111}
obj.name (这个name不能当做变量只能当字符串来用)

1. DOM的节点
  - node: 节点，浏览器认为在一个html页面中的所有内容都是节点（标签节点，注释节点，文本节点，文档节点）
  - 元素节点： html标签
  - 文本节点：文字内容（大部分浏览器会把空格和换行也当作文本节点，除ie678）
  - 注释节点：注释内容
  - document文档节点：整个文档

console.dir() 看结点 nodename nodetype nodevalue

.childNodes 返回节点集合

.children 返回的是元素集合节点 ie678和标准浏览器中有区别（6～8会把注释节点当作元素节点）

.parentNode 获取父级节点

.previousSibling 获取哥哥节点（注意空格也是文本节点哦） .previousElementSibling 获取哥哥元素节点不兼容ie 6 7 8

.nextSibling 获取弟弟节点 .nextElementSibling 获取弟弟元素节点不兼容ie 6 7 8

.firstChild 获取第一个子节点 .lastChild 获取最后一个子节点 .firstElementChild .lastElementChild 获取第一个【最后一个】子元素节点好用不兼容

DOM的增删改查

动态创建元素 .createElement()

父亲.appendChild() 追加元素容器 .insertBefore(新元素，在这个元素之前)

剪切已经存在的元素放在某个元素之前容器.insertBefore(容器.getElementById(),某元素)

删除容器.removeChild(容器.get...)