js基础知识2

最新推荐文章于 2024-09-23 08:37:48 发布

weixin_34408624

最新推荐文章于 2024-09-23 08:37:48 发布

阅读量42

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qq849784670/p/9708115.html

版权

DOM

　　Document Object Model

　　文档对象模型

　　　　对象：

　　　　　　属性和方法

　　　　　　属性：获取值和赋值

　　　　　　方法：赋值方法和条用方法

　　　　DOM树

　　　　　　　　　　　　　　document

　　　　　head　　　　　　　　body

title meat link....　　　　　　div.header div.content div.footer

　　DOM的获取

　　　　1.获取document对象

　　　　console.log(document);

　　　　2.获取html对象

　　　　document.documentElement

　　　　3.获取body对象

　　　　document.body

　　　　提供三种方法来采取body中的DOM

　　　　div #box .box

　　　　通过id获取：document.getElementById("box")

　　　　通过类获取：document.getElementByClassName("box")

for(var i = 0;i<olis.length;i++){
            
    olis[i].onclick = function(){
                
        alert(this.innerText);
        }
    }

View Code

　　　　通过标签获取： var oDiv = document.getElementByTagName("div");　　

　　DOM三步走

　　　　1.获取事件源

　　　　2.事件绑定

　　　　3.事件驱动（业务逻辑）

                - 对标签样式属性的操作
                    
                    oDiv.onclick  = function(){
                    //点语法  set方法 get方法 readonly 只读
                        console.log(this.style);
                        this.style = null;
                        
                        this.style.width = '200px';
                        this.style.marginLeft = '40px';
                    }
                
                
                - 对标签属性的操作
                
                id
                class
                src
                alt
                href
                title
                type
                name
                
                
                
                - 对值的操作
                    innerText
                        - 只获取文本
                    
                    innerHTML
                        - 获取文本和标签
                    value
                    - 事件    
                    
                    
                - 对DOM对象的操作（增删改查）
                
                - 控制元素显示隐藏
                    应用：网页中频繁性的切换建议使用这个
                    1.控制style.display属性显示隐藏
                    2.控制className对元素显示隐藏
                    
                    问题： 初始化的时候有渲染，
                    
                    应用：网页中少量的切换建议使用
                    3.对元素的创建和销毁
                     生命周期 出生 入死

笔记

1.对象

    <script type="text/javascript">
        var person = {                    
            name:"qing",            
            age:18,
            fav:function(){
                alert(this.name)
            }
        }
        person.fav();
    </script>
创建对象用{}来表示，里面的格式类似字典，但是key不用加""

View Code

2.对样式的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box" id="wrap"></div>
    <p>qing</p>
    <script type="text/javascript">
        var oDiv = document.getElementById("wrap");
        oDiv.onclick = function(){
            oDiv.style.width = "400px";
            oDiv.style.float = "left";
        }
    </script>
</body>
</html>

View Code

3.对标签属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 42px;
            height: 70px;
            background: url("./images/icon-slides.png") no-repeat -86px 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <img src="./images/购物车.png" width="100px" alt="" id="shop">
    <script>
        document.getElementsByClassName("box")[0].onmouseover = function(){
            this.style.backgroundPosition = "0 0";
        }
        document.getElementsByClassName("box")[0].onmouseout = function(){
            this.style.backgroundPosition = "-86px 0";
        }
        var isHover = true;
        var oDiv = document.getElementById("shop");
        oDiv.onclick = function(){
            if (isHover){
                this.src = "./images/购物车-hover.png";
                isHover = false;
            } else{
                this.src = "./images/购物车.png";
                isHover = true;
            }
        }
    </script>
</body>
</html>

View Code

4.控制元素显示隐藏的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">隐藏</button>
    <div class="box">
        <div class="child" id="child"></div>
    </div>
    <!--1.样式属性 display:none|block
        2.通过控制标签属性className 对类型添加 移除
        3.DOM创建 销毁 创建销毁

    -->
    <script>
        var oChild = document.getElementById("child");
        document.getElementById("btn").onclick = function(){
            // oChild.style.display = "none";
            // oChild.className += " hidden";
            oChild.className += " hidden";
        }
    </script>
</body>
</html>

View Code

5.对值得操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn">
        隐藏

    </button>
    <input type="text" id="user" value="qing">
    <div class="box">
        <div class="child" id="child"></div>
    </div>
    <script>
        var oChild = document.getElementById("child");
        document.getElementById("btn").onclick = function(){
            // oChild.style.display = 'none';

            // oChild.className +=' hidden';
            oChild.className = oChild.className + ' hidden';
            console.log(oChild.className);
            console.log(this.innerText);
            console.log(this.innerHTML);
            // this.innerHTML += "<span>哎哟</span>";
            this.innerText += "<span>哎呦</span>";
        }
        //从此处可以看出事件操作时异步的，不等待
        console.log(document.getElementById("user").value);
        document.getElementById("user").value = "qingqing";
    </script>
</body>

</html>

View Code

6.DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="father">
        <div id="laoda"></div>
        <div id="laoer"></div>
    </div>
    <script>
        var oLaoda = document.getElementById("laoda");
        console.log(oLaoda.nextSibling); //会识别文本标签，空格换行
        console.log(oLaoda.nextElementSibling);
        //浏览器兼容性
        var a = oLaoda.nextElementSibling || oLaoda.nextSibling ;
        console.log(a);
        console.log(document.getElementById("father").children);
        console.log(oLaoda.parentNode);

    </script>
</body>

</html>

View Code

7.真DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <button id="btn">隐藏</button>
    <div class="box" id="box">

    </div>
    <script>
        setTimeout(function () {
            var oBox = document.getElementById("box");
        //    DOM的创建 子元素 节点
            var oChild = document.createElement("div");
            oChild.className = "child";
            oChild.style.width = "200px";
            oChild.style.height = "200px";
            oChild.style.background = "red";
        //    父.appendChild(子)
            oBox.appendChild(oChild);
        },2000)
    </script>
</body>

</html>

View Code

8.选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            background: red;
        }
        #aaa{
            width: 50px;
            height: 50px;
            background-color: yellow;
            position: relative;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            position:absolute;
            top: 50px;
            display: none;
        }
    </style>
</head>
<body>
   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
   <button>按钮4</button>
   <button>按钮5</button>

   <div id="aaa">qing

       <div class="box"></div>
   </div>
    <script>
        var oBtns = document.getElementsByTagName("button");
        for(var i = 0;i < oBtns.length;i++){
            oBtns[i].onclick = function(){
                for (var j = 0;j < oBtns.length;j++){
                    oBtns[j].className = "";
                }
                this.className = "active";
            }
        }

    //    onmouseover 当穿过父元素和子元素时 会调用   onmouseout
    //    onmouseenter只穿过父元素                    onmouseleave
        document.getElementById("aaa").onmouseenter = function () {
                    console.log(1111);
                    this.children[0].style.display = "block";
        }
        document.getElementById("aaa").onmouseleave = function(){
            this.children[0].style.display = "none";
        }
    </script>
</body>

</html>