day 51

时间：2021-05-25 04:16:38

一 window对象

window 对象表示一个浏览器窗口。

在客户端 JavaScript 中，Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法

，可以把那个窗口的属性作为全局变量来使用。例如，可以只写 document，而不必写 window.document

同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert()，而不必写 Wi

ndow.alert()。

关键函数的案例使用：

alert() 显示带有一段消息和一个确认按钮的警告框
setInterval() 按照指定的周期（以毫秒）来调用函数或计算表达式
clearInterval()  取消有setInterval()来设置的 timemout
setTimeout() 在指定的毫秒数后调用函数或表达式
clearTimeout()  取消有setTimeout()方法设置的timeout

1 alert 和setimeout() 延迟实例
//匿名函数的 设置的延迟显示
var timer = setTimeout(function (){alert('我的延迟3秒');

},3000);

day 51

-----
取消延迟的话 以上就不会执行了 后边必须传参数
clearseTimeout（timer） 

---------------

2  setInterval（） 按照一定周期循环

匿名函数 周期循环 3秒后循环执行setInterval */
var timer = setInterval(function(){console.log(123);}, 3000);

day 51

取消后就以上就不会执行了 后边必须传参数
clearInterval(timer);
--------------------------


二window的子对象 


1 navigator对象


浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。


navigator.appName　    　// Web浏览器全称

navigator.appVersion　　 // Web浏览器厂商和版本的详细字符串

navigator.userAgent　　 // 客户端绝大部分信息

navigator.platform　　　 // 浏览器运行所在的操作系统


2 screen对象


屏幕对象，不常用。


3 history对象


浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以用来前进或后退一个页面。


history.forward()  // 前进一页

history.back()    // 后退一页

history.go(n)     //  前进n页


4 location对象 五星重要


location.href          获取URL

location.href="URL" // 跳转到指定页面

location.reload()      重新加载页面


a  获取本地的网址


console.log(location.href);


day 51


b 跳转到其他的网页：


console.log(location.href='http://www.baidu.com.cn');


day 51


3 刷新网页  location.reload();


day 51


三、***** DOM标准规定HTML文档中的每个成分都是一个节点(node)：


    

  • 文档节点(document对象)：代表整个文档 （包括head 和body 及其其他的）
    • 

  • 元素节点(element 对象)：代表一个元素（标签）
    • 

  • 文本节点(text对象)：代表元素（标签）中的文本
    • 

  • 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性 id
    • 

  • 注释是注释节点(comment对象)
    • 



四、查找标签 （也就是元素节点）




document.getElementById            根据ID获取一个标签        一个单数

document.getElementsByName         根据name属性获取标签集合     数组

document.getElementsByClassName    根据class属性获取           数组

document.getElementsByTagName      根据标签名获取标签合集        数组




1 根据标签名获取标签结合  合集
var ps=document.getElementsByTagName('div');
console.log(ps);


day 51


　 取出结合可以利用索引去取具体的数组中一个


var ps=document.getElementsByTagName('div')[0];
console.log(ps);


day 51


2 根据id取值 注意getElementById 没有s


var ps=document.getElementById('p1');
console.log(ps);


day 51


3 根据class取值


var ps=document.getElementsByClassName('c1')[1];


console.log(ps);


day 51


五、间接查找


parentNode     　　  父节点

childNodes      　　 所有子节点

firstChild      　　 第一个子节点

lastChild       　　 最后一个子节点

nextSibling    　　  下一个兄弟节点

previousSibling 　　 上一个兄弟节点

// 注意节点和标签的区别，主要记下面的

parentElement          　　父节点标签元素

children      　　　　　　　所有子标签

firstElementChild      　　第一个子标签元素

lastElementChild       　　最后一个子标签元素

nextElementSibling     　　下一个兄弟标签元素

previousElementSibling 　　 上一个兄弟标签元素


1 找父节点 通过id


day 51


var ps = document.getElementById('p1');
 console.log(ps.parentNode);


2 找父亲的父亲


var ps = document.getElementById('p1');
 //ps.parentNode
 console.log(ps.parentNode.parentNode);


day 51


2 第一个子节点


原div


day 51


3找到第一个c1的所有节点
var ps = document.getElementsByClassName('c1')[0];
找到文档的c1类的第一个索引就是c1的 


day 51


console.log(ps.childNodes); 第一个c1的所有子节点


day 51


4找到第一个c1的第一个节点


var c1Ele= document.getElementsByClassName('c1')[0];
console.log(c1Ele.firstChild);


day 51


5找到第一个c1的最后一个节点


var c1Ele= document.getElementsByClassName('c1')[0];
console.log(c1Ele.lastChild);


day 51


6 c1 同级下一个兄弟节点 nextsibling


day 51


var c1Ele= document.getElementsByClassName('c1')[0];
console.log(c1Ele.nextSibling);


day 51


7 显示同级上一个节点


var c1Ele= document.getElementsByClassName('c1')[0];
console.log(c1Ele.previousElementSibling);


day 51


-------------------------------------------------


六document对象的属性和操作


属性节点







attributes


获取所有标签属性




getAttribute()
获取指定标签属性




setAttribute()
设置指定标签属




removeAttribute()
移除指定标签属






var s = document.createAttribute("age")


s.nodeValue = "18"




创建age属性


设置属性值为18







文本节点





innerText
所有的纯文本内容，包括子标签中的文本




outerText
与innerText类似




innerHTML
所有子节点(包括元素、注释和文本节点)




outerHTML
返回自身节点与所有子节点




 
 




textContent
与innerText类似，返回的内容带样式




data
文本内容




length
文本长度




createTextNode()
创建文本




normalize()
删除文本与文本之间的空白




splitText()
分割




appendData()
追加




deleteData(offset,count)
从offset指定的位置开始删除count个字符




insertData(offset,text)
在offset指定的位置插入text




replaceData(offset,count,text)
替换，从offset开始到offscount处的文本被text替换




substringData(offset,count)
提取从ffset开始到offscount处的文本





var c2in = document.getElementsByClassName('c2')[0].innerText;1 c2 第一个索引的文本节点


console.log(c2in);


day 51


c1 的第一个索引的 innertext







innerText
所有的纯文本内容，包括子标签中的文本




outerText
与innerText类似




innerHTML
所有子节点(包括元素、注释和文本节点)




outerHTML
返回自身节点与所有子节点





1 var c2in = document.getElementsByClassName('c1')[0].innerText;
 console.log(c2in);


day 51


2  和1一样  var c2in = document.getElementsByClassName('c1')[0].outerText;


console.log(c2in);


day 51


3比innerhtml  多自身块级


var c2in = document.getElementsByClassName('c1')[0].outerHTML;


 console.log(c2in);


day 51


4 显示子节点 var c2in = document.getElementsByClassName('c1')[0].innerHTML;
console.log(c2in);


day 51




七  样式操作


操作class类


className                     　　获取所有样式类名(字符串)


classList.remove(cls)     　　删除指定类


classList.add(cls)          　　添加类


classList.contains(cls)   　　存在返回true，否则返回false


classList.toggle(cls) 　　     存在就删除，否则添加


JS操作CSS属性的规律：


1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：


obj.style.margin

obj.style.width

obj.style.left

obj.style.position


2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：


obj.style.marginTop

obj.style.borderLeftWidth

obj.style.zIndex

obj.style.fontFamily


事件


HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。


onclick        当用户点击某个对象时调用的事件句柄。

ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               //练习：输入框

onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress     某个键盘按键被按下并松开。

onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。

onmousemove    鼠标被移动。

onmouseout     鼠标从某元素移开。

onmouseover    鼠标移到某元素之上。

onmouseleave   鼠标从元素离开

onselect      文本被选中。

onsubmit      确认按钮被点击。


画个圆背景颜色点击切换可以变颜色


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画个圆背景颜色点击切换可以变颜色</title>
    <style>
        .c1{
            width:500px;
            height:500px;
            border-radius: 300px;
            //半径大于250就行
            background: red;
        }
        .c2{
            background: yellow;
        }
    </style>
</head>
<body>
<div class="c1" ></div>
<input type="button" value="颜色切换" onclick="change()">
</body>
<script>
    function change() {
        var c11 = document.getElementsByClassName('c1')[0];
        // 类名挂s 所以生成的的数组
        // c11.classList.add('c2');//
        c11.classList.toggle('c2');
        // 存在就删除 否则就添加
    }
</script>
</html>


----------------------------------


day 51


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单示例</title>
    <style>
        .left {
            position: fixed;
            left: 0;
            top: 0;
            width: 20%;
            background-color: darkgrey;
            height: 100%;
        }
        .right {
            width: 80%;
        }
        .title {
            text-align: center;
            padding: 10px 15px;
            border-bottom: 1px solid red;

        }
        .content {
            background-color: #336699;
        }
        .content > div {
            padding: 10px;
            color: white;
            border-bottom: 1px solid black;
        }
        .hide {
            display: none;
        }
    </style>

    <script>
        // 定义一个函数
        function show(ths) {
             // 隐藏所有的.content标签     --> classList.add("hide")
            // 1. 找标签（所有.content标签 ）
            var contentEles = document.getElementsByClassName("content");
            // 节点对象.属性
            // 遍历上面的标签数组
            for (var i=0;i<contentEles.length;i++){
                contentEles[i].classList.add("hide");
            }
            // 如何让函数知道我点的哪个菜单（传参数）
//            console.log(ths);
            // 显示我下面的.content标签 --> classList.remove("hide")
            // 2.找这个标签下面的content标签
            var nextEle = ths.nextElementSibling;
            // 2. 显示这个content标签
            nextEle.classList.toggle("hide");
            console.log(nextEle);
        }

    </script>
</head>
<body>

<div class="left">
    <div class="item">
        <div class="title" onclick="show(this);">菜单一</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <div class="item">
        <div  class="title" onclick="show(this);">菜单二</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
    <div class="item">
        <div  class="title" onclick="show(this);">菜单三</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>

</div>
<div class="right"></div>
</body>
</html>
相关文章