Javascript(2)-js进阶

发表: 2017-10-13 浏览: 1879

JavaScript

1.JavaScript核心操作——DOM对象

window对象

通过window对象，可以操作和浏览器软件相关的信息

        // window.alert();//调用浏览器的对话框操作



        // history对象：项目中几乎不用

        //window.history.back();//后退操作,返回上一个访问历史

        //window.history.forward();//前进操作，访问下一个访问历史

        //window.history.go(2);//跳转到某一个访问历史



        // location对象：项目中的url操作

        /*console.log(location);

        console.log(location.href);// 获取当前网页的url地址

        console.log(location.protocol);//获取当前访问协议

        console.log(location.host);// 获取访问网页的主机地址

        console.log(location.hostname);

        console.log(location.post);// 访问端口*/





        // JS代码控制页面的指向

        /*setTimeout(function() {

            location.href="http://www.baidu.com"

        }, 2000)*/



        /*setTimeout(function() {

            location.reload()// 刷新网页

        }, 5000)*/





        // screen对象

        // screen表示电脑屏幕的意思

        // screen.width/height表示的是电脑屏幕的宽度和高度分辨率

        // screen.availWidth/screen.availHeight:屏幕的宽度和高度【不包含任务栏】

        // console.log(screen.width, screen.height);

        // console.log(screen.availWidth, screen.availHeight);



        // navigator对象：浏览器软件的信息

screen对象
history对象
location对象
navigator对象
document对象
window事件操作
onload页面数据加载事件
onscroll页面滚动条事件
兼容问题：获取滚动条卷去网页高度

2.DOM基础API操作

获取标签DOM对象
直接通过id属性值使用DOM对象
通过id属性值获取：document.getElementById()
通过标签名称获取：document.getElementsByTagName()
通过class属性值获取：document.getElementsByClassName()
通过name属性值获取：document.getElementsByName()
混合获取，通常是id模式和tagName模式混合获取

代码操作

        // 直接通过标签的id属性，得到标签对象【 不推荐】

        console.log(box);

        box.innerText = "可以通过标签的id属性直接使用标签"



        // 通过getElemnetById("id")函数，来通过id属性值获取标签，【推荐】

        var _box = document.getElementById("box2");

        _box.innerText = "通过ElementById()函数获取标签对象，进行操作"



        // 通过标签名称，可以获取到一组标签

        var _boxes = document.getElementsByTagName("div");

        console.log(_boxes);

        _boxes[2].innerText = "这是通过getElementsByTagName()获取的元素"



        // 通过标签的name属性，也可以获取到一组标签

        var _jerry = document.getElementsByName("jerry");

        console.log(_jerry);

        _jerry.innerText = "通过name属性获取标签"





        // 通过标签的class属性获取标签：IE8.0+

        var _container = document.getElementsByClassName("container");

        console.log(_container);

        _container[0].innerText = "这个是通过class属性获取到的标签对象"

操作标签的DOM对象属性

标准函数操作
获取属性值：var x = getAttribute(name)
设置属性值：setAttribute(name, value)
移除属性：removeAttribute(name);
方括号操作
获取属性值：var x = dom[“name”];
设置属性值：dom[“name”]=value;
连接符.操作
获取属性值：var x = dom.name;
设置属性值：dom.name = value;
备注：dom表示dom对象，name表示属性名称，value表示属性值
操作标签的DOM对象样式
获取DOM对象样式
var x = document.currentStyle[name];兼容IE低版本的获取样式的方式
var x = getComputedStyle(dom)[name];获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>JS代码操作标签的样式</title>



    <style>

        #box{height: 200px;background:red;}

    </style>

</head>

<body>

    <div id="box" style="width:100px;"></div>

    <script>

    /*操作标签的样式*/

    /*增删改查*/

    /*获取样式、设置样式*/

    var _box = document.getElementById("box");



    /**************************************************/

    // 获取样式：有两种方式

    // 1. 获取样式的值  100px

    // 2. 获取样式的数值  100



    // 获取标签对象的样式【标签内嵌、页面内嵌、外部样式 都可以获取到】

    // 获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】

    var _h = window.getComputedStyle(_box).height;

    var _w = window.getComputedStyle(_box).width;

    console.log(_w, _h);

    // 兼容IE低版本的获取样式的方式【我们只需要了解即可】

    // var _h1 = _box.currentStyle.height;

    // var _w1 = _box.currentStyle.width;

    // 获取样式的数值

    var _wvalue = _box.offsetWidth;

    var _hvalue = _box.offsetHeight;

    console.log(_wvalue, _hvalue);

    /**************设置样式************************************/

    // 标签对象.style.样式名称  使用这样的语法，是用来操作标签内嵌样式的！

    // 给标签设置样式，统一使用 标签对象.style.样式名称 = 样式值;

    _box.style.width = "300px";

    </script>

</body>

</html>

控制台输出结果

设置DOM对象样式
直接通过style进行行内样式设置。
dom.style.样式名称 = 样式值;
样式名称可能是多个单词组成的 background-color，在JS中进行操作的时候需要将名称转换成驼峰命名法：backgroundColor
注意：尽量不要在JS中进行大量样式的设置。
对于标签内容的操作，有三种方式
1. innerText：给指定标签的开始标签和结束标签中增加文本内容【非W3C标准】
2. textContent：dom操作，给标签的开始标签和结束标签中增加文本内容，W3C标准操作
3. innerHTML：给标签的开始标签和结束标签中，增加一段HTML代码；慎重使用，容易造成代码注入漏洞！
  扩展：所谓代码注入漏洞，是用于可以在客户端通过输入包含代码的字符串的方式，将带入注入到我们的网页中进行执行的过程
  innerHTML的使用规则
  对于数据的来源，完全信任的情况下使用它。其他时候禁止使用！

代码操作：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>JS操作标签属性</title>



</head>

<body>

    <!-- value是input标签的属性 -->

    输入年龄：<input type="text" id="uname" value="100">



    <script>



        var _name = document.getElementById("uname");

        // 1. 直接通过 [标签对象.属性]来操作标签的属性值

        _name.value = "120";

        _name.id = "age";

        console.log(_name.value, _name.id);



        // 2. 通过 标签对象.["属性名称"] 来操作标签的属性值

        _name["value"] = 110;

        _name["id"] = "phone";

        console.log(_name["value"], _name["id"]);





        // 3. DOM操作方式，通过getAttribute("属性名称")获取标签的属性值

        _name.setAttribute("value", 119);

        _name.setAttribute("id", "sex");

        // _name.className = "sex";

        _name.removeAttribute("value");

        console.log(_name.getAttribute("value"), _name.getAttribute("id"));



    </script>

</body>

</html>

备注：在使用原生JS操作标签的属性时，规则如下

id属性、title属性，建议通过标签对象.属性名称的语法进行处理。
class属性，建议通过标签对象.className 的语法进行处理。
其他属性，建议使用set/getAttribute()的语法进行处理。
删除value属性。。。。：这样的语法是不能删除属性的
_name.value = null;

3.DOM核心API操作

节点属性API——获取元素定位

元素的尺寸(宽度、高度)、位置(top.left)

属性/函数名称描述
offsetWidth获取元素宽度；包含padding值\border值
offsetHeight获取元素高度；包含padding值\border值
offsetTop获取元素距离浏览器顶部的距离
offsetLeft获取元素距离浏览器左边的距离

备注：如果父元素进行了relative/absolute定位，offsetTop/offsetLeft就是相对父元素的顶部和左边的距离，如果父元素默认定位，就是相对浏览器窗口的距离

备注：获取网页可视区域宽度，高度

var clientWidth = 

window.innerWidth||document.documentElement.clientWidth;

var clientHeight = 

      window.innerHeight||document.documentElement.clientHeight;



获取网页文档的宽度、高度

var bodyWidth = document.body.clientWidth;

var bodyHeight = document.body.clientHeight;

实例：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #container{

            position:static;// relative

            width:800px;

            height:400px;

            margin-left:100px;

            margin-top:100px;

            background-color: #069;

            padding:1px;

        }

        #box{

            padding:50px;

            width:100px;

            height:100px;

            /*position:absolute;

            top:50px;

            left:50px;

            margin:50px 0 0 50px;

            background-color: #fff;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="box"></div>

</div>

<script>

    function getStyle(dom, styleName) {

        if(dom.currentStyle) {

            return dom.currentStyle[styleName];

        } else {

            return getComputedStyle(dom)[styleName];

        }

    }



    var box = document.getElementById("box");

    console.log(getStyle(box,"width") + "---" + box.offsetWidth);

    console.log(getStyle(box, "height") + "---" + box.offsetHeight);

    console.log(getStyle(box, "margin-left") + "---" + box.offsetLeft);

    console.log(getStyle(box, "margin-top") + "---" + box.offsetTop);

    // 获取网页可视区域高度、宽度

console.log(window.innerHeight + "--" + window.innerWidth);

console.log(document.documentElement.clientHeight + "--" + document.documentElement.clientWidth);

// 获取网页文档的高度、宽度

console.log(document.body.clientHeight + "--" + document.body.clientWidth);



</script>

</body>

节点查询API

属性/函数名称描述
hasChildNodes()判断是否包含子节点，返回一个布尔值
children获取元素所有的子元素节点集合/数组
childNodes获取元素所有的子节点集合/数组
firstChild获取元素第一个子节点
firstElementChild获取元素第一个子元素节点
lastChild获取元素最后一个子节点
lastElementChild获取元素最后一个子元素节点
previousSibling获取元素前一个兄弟节点
previousElementSibling获取元素前一个兄弟元素节点
nextSibling获取元素后一个兄弟节点
nextElementSibling获取元素后一个兄弟元素节点
parentNode获取元素的父节点
textContent操作(获取/设置)元素内容

节点创建/添加API

属性/函数名称描述
createElement(tagName)根据名称创建一个元素节点
createTextNode(text)根据文本创建一个文本节点
insertBefore(new,old)在指定的节点前面添加节点
appendChild(child)在子节点的末尾追加节点
replaceChild(new,old)使用新的节点替换指定的节点
removeChild(child)移除指定的子节点
className设置标签class属性样式值

代码操作

<body>

    <div id="container">

        <div id="box">

            原有标签

        </div>

    </div>

    <script>

        var container = document.getElementById("container");

        var box = document.getElementById("box");

        // 创建第一个元素节点

        var d = document.createElement("div");

        // 创建文本节点

        var t = document.createTextNode("这是div文本");



        // 创建第二个元素节点

        var d2 = document.createElement("p");

        var t2 = document.createTextNode("这是p文本");



        // 添加元素节点到指定节点中

        d.appendChild(t);

        // 追加节点到指定节点前面

        container.insertBefore(d, box);



        // 追加节点到子节点末尾

        d2.appendChild(t2);

        d2.className = "test";

        container.appendChild(d2);

    </script>

</body>

4.简单特效开发

抽奖

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>抽奖</title>

    <style type="text/css">

        *{margin: 0px;padding: 0px;}

        .container{

            width: 500px;height: 600px;background: white;border:solid 2px orange;margin: auto;border-radius: 10px;}

        .box,.show,.show_active{width: 450px;height: 450px;border-radius: 50%;}

        .box{border:2px orange solid;padding: 10px;margin: 10px auto;}

        .show{background-color: pink;font-size: 70px;line-height: 450px;text-align: center;}

        .show_active{background-color: #D0D0D0;color:#fff;font-size: 70px;line-height: 450px;text-align: center;}

        #btn{width: 200px;height: 40px;background-color:pink;display: block;margin: auto;font-size: 20px;}



    </style>

</head>

<body>

    <div class="container">

        <div class="box">

            <div id="show" class="show">

                等待抽奖

                </div>

        </div>

        <button id="btn" onclick="playGame()">开始抽奖</button>

    </div>



    <script type="text/javascript">

        var _names=["iphone7 plus","iPad Pro","apple watch","iPad mini4","iphone6","apple"]

        //获取页面中要使用的标签对象

        var _btn=document.getElementById("btn");

        var _show=document.getElementById("show");

        var _timer;

        var _flag=false;



        function playGame(){

            if (!_flag){

                _flag=true;

                _timer=setInterval(function(){

                    // 获取随机下标

                    var _no=Math.floor(Math.random(_names)*_names.length);

                    // 获取中奖礼品

                    var _n=_names[_no];

                    // 展示中奖礼品

                    _show.textContent=_n;

                    // 修改按钮的文本

                    _btn.textContent="停止抽奖";

                    // 修改展示的样式

                    _show.className="show_active"    

                },50);

            }else{

                _flag=false;

                clearInterval(_timer);

                // 修改按钮的文本

                _btn.textContent  = "开始抽奖";

                // 修改展示的样式

                _show.className = "show";

            }

        }





    </script>

</body>

</html>

效果展示：

抽奖

飞机飞行进度演示

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>飞机飞行进度演示</title>

    <style type="text/css">

        *{margin: 0px;padding: 0px;}

        #nav{position: relative;

            height: 128px;

            width: 1200px;

            border:solid 1px #8E8E8E; 

        }

        #nav img{

            position: absolute;

            left: 0px;

            top:0px;

        }



        #process{

            height: 128px;

            background:#FFA042;

            width: 0px;

        }

    </style>

</head>

<body>

    <div id="nav">

        <div id="process"></div>

        ![](images/flystart.png)

    </div>

    <button onclick="start()">开始飞行</button>

    <script type="text/javascript">

        // 获取小飞机图片

        var _plane=document.getElementById("plane");

        var _process=document.getElementById("process");

        // 定义一个变量，用来存放计时器

        var _timer;



        // start()函数

        function start(){

            _timer=setInterval(function(){

                // 获取left的样式数值

                var _left=_plane.offsetLeft;

                var _width=_process.offsetWidth;

                // 飞行过程left的值增加

                _left+=10;

                _width+=10;



                // 设置随着飞机的飞行 飞机的图片发生改变

                if (_left>200 && _left<800) {

                    _plane.setAttribute("src","images/flying.png");

                    _process.style.background="#6FB7B7";



                }else if(_left>800){

                    _plane.setAttribute("src","images/flyend.png");

                    _process.style.background="#02DFB2"

                }



                // 边界的判断

                if (_left>=1200){

                    // 停止计时函数

                    clearInterval(_timer);

                }



                // 设置样式

                _plane.style.left=_left+"px";

                _process.style.width=_width+"px";



            },100)

        }



    </script>



</body>

</html>

效果展示：

飞机飞行进度演示

5.JavaScript事件——Event

事件操作：
事件就是一种发生在网页上的行为；鼠标单击、鼠标双击、键盘按下、键盘抬起、获得焦点、失去焦点等等各种行为
常见的事件：

鼠标事件

属性/函数名称描述
onmouseout鼠标离开
onmouseenter鼠标进入
onabort图像的加载被中断。
onblur元素失去焦点。
onchange域的内容被改变。
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onerror在加载文档或图像时发生错误。
onfocus元素获得焦点。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按下并松开。
onkeyup某个键盘按键被松开。
onload一张页面或一幅图像完成加载。
onmousedown鼠标按钮被按下。
onmousemove鼠标被移动。
onmouseout鼠标从某元素移开。
onmouseover鼠标移到某元素之上。
onmouseup鼠标按键被松开。
onreset重置按钮被点击。
onresize窗口或框架被重新调整大小。
onselect文本被选中。
onsubmit确认按钮被点击。
onunload用户退出页面。

键盘事件

属性/函数名称描述
altKey返回当事件被触发时，"ALT" 是否被按下。
button返回当事件被触发时，哪个鼠标按钮被点击。
clientX返回当事件被触发时，鼠标指针的水平坐标。
clientY返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时，"CTRL" 键是否被按下。
metaKey返回当事件被触发时，"meta" 键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时，鼠标指针的水平坐标。
screenY返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey返回当事件被触发时，"SHIFT" 键是否被按下。

焦点事件：常用于表单元素标签

onfocus 获取焦点事件【获得光标事件】
onblue 失去焦点事件
onchange 内容修改事件，

事件的绑定方式：
1.标签属性绑定
2.dom元素绑定

鼠标拖拽功能

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>鼠标拖动</title>

    <style type="text/css">

        #box{

            position:absolute;

            width: 336px;

            height: 300px;

            background-image:url("images/mv33.jpg"); }



    </style>

</head>

<body>

    <div id="box">



    </div>

    <script type="text/javascript">

        var _box=document.getElementById("box");



        // event事件对象，可以通过事件对象，获取到鼠标的位置

        _box.onmousedown=function(event){

            var _clientX = event.clientX;

            var _clientY = event.clientY;



            var _boxl = _box.offsetLeft;

            var _boxt = _box.offsetTop;



            var _left = _clientX - _boxl;

            var _boxt = _clientY - _boxt;



            document.onmousemove = function(event){

                var _clientX1 = event.clientX;

                var _clientY1 = event.clientY;



                var _l = _clientX1 - _left;

                var _t = _clientY1 - _boxt;



                _box.style.left = _l + "px";

                _box.style.top = _t + "px"

            }



            document.onmouseup=function(event){

                document.onmousemove=null;

            }

        }

    </script>

</body>

</html>

效果展示：

鼠标拖拽

扩展

瀑布流式布局

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title></title>

  <style>

  *{margin:0px;padding:0px;}

  #container{width: 1200px;margin:auto;position:relative;}

  .box{padding:5px;float:left;position:absolute;left:0;top:0;}

  .item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}

  .item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}

  </style>

</head>

<body>

  <div id="container">

      <div class="box">

          <div class="item">![](image/1.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/2.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/3.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/4.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/5.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/6.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/7.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/8.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/9.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/10.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/11.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/12.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/13.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/14.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/15.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/16.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/17.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/18.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/19.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/20.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/21.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/22.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/23.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/24.png)</div>

      </div>

      <div class="box">

          <div class="item">![](image/25.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/26.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/27.png)</div>

      </div>

      <div class="box">

          <div class="item">![](image/28.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/29.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/30.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/31.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/32.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/33.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/34.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/35.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/36.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/37.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/38.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/39.jpg)</div>

      </div>

      <div class="box">

          <div class="item">![](image/40.jpg)</div>

      </div>

  </div>



  <script>

      // 网页中的标签和图片加载

      // 等待网页中的所有数据加载完成，再执行代码

      // window.onload 页面数据加载事件



      window.onload = function() {

          var _container = document.getElementById("container");



          // 获取所有的图片

          var _imgs = document.getElementsByClassName("box");



          // 计算一行可以存放多少张图片

          var _containerWidth = _container.offsetWidth;

          var _imgWidth = _imgs[0].offsetWidth;

          var _cols = Math.floor(_containerWidth / _imgWidth);



          // 声明一个记录高度的数组

          var _height = [];



          // 遍历所有的图片，开始定位

          for(var i = 0; i < _imgs.length; i++) {

              if(i < _cols) {

                  // 保存第一行中每一张图片的高度

                  _height.push(_imgs[i].offsetHeight);

                  _imgs[i].style.left = _imgWidth * i + "px";

              } else {

                  // 计算数组中的最小值

                  var _minHeight = Math.min.apply(null, _height);

                  console.log(_minHeight);



                  var _minIndex = getMinIndex(_minHeight, _height);

                  console.log(_minIndex);



                  // i 指的是循环到else的 i与function getMinIndex函数返回值 i不是一个值

                  _imgs[i].style.top = _minHeight + "px"；

                  _imgs[i].style.left = _minIndex * _imgWidth + "px";



                  // 更新最小高度

                  _height[_minIndex] += _imgs[i].offsetHeight;

              }

          }

      }

      /*value是最小值， arr是这个值所在的数组*/

      function getMinIndex(value , arr){

          for(var i = 0; i < arr.length; i ++) {

              if(value == arr[i]){

                  return i;

              }

          }

      }

  </script>

</body>

</html>

效果展示：

瀑布流式布局

作者：_知几

链接：http://www.jianshu.com/p/4452abb08fe5

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

0 个评论

要回复文章请先登录或注册

文章目录