为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
JavaScript进阶篇_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。

    scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。

    offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

    offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

    注意:

    1. 区分大小写

    2. offsetParent:布局中设置postion属性(Relative、Absolute、fixed)的父容器,从最近的父节点开始,一层层向上找,直到HTML的body。


    查看全部
  • 网页尺寸offsetHeight

    offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。

    一、值

    offsetHeight = clientHeight + 滚动条 + 边框。

    二、浏览器兼容性

    var w= document.documentElement.offsetWidth     || document.body.offsetWidth; var h= document.documentElement.offsetHeight     || document.body.offsetHeight;


    查看全部
  • 网页尺寸scrollHeight

    scrollHeight和scrollWidth,获取网页内容高度和宽度。

    一、针对IE、Opera:

    scrollHeight 是网页内容实际高度,可以小于 clientHeight。

    二、针对NS、FF:

    scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。

    三、浏览器兼容性

    var w=document.documentElement.scrollWidth    || document.body.scrollWidth; var h=document.documentElement.scrollHeight    || document.body.scrollHeight;

    注意:区分大小写

    scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。


    查看全部
  • 浏览器窗口可视区域大小

    获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:

    一、对于IE9+、Chrome、Firefox、Opera 以及 Safari:

    •  window.innerHeight - 浏览器窗口的内部高度

    •  window.innerWidth - 浏览器窗口的内部宽度

    二、对于 Internet Explorer 8、7、6、5:

    •  document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。

    •  document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。

    或者

    Document对象的body属性对应HTML文档的<body>标签

    •  document.body.clientHeight

    •  document.body.clientWidth

    在不同浏览器都实用的 JavaScript 方案:

    var w= document.documentElement.clientWidth       || document.body.clientWidth; var h= document.documentElement.clientHeight       || document.body.clientHeight;


    查看全部
  • 请不要用document.body和document.all,否则除IE外的浏览器不认帐!

    标准的元素获取方法只有以下三个:
    document.getElementById(元素的ID);
    document.getElemetsByName(元素的name);在IE下只能获取到<input />
    document.getElemetsByTagName(元素的标签名);

    比如document.body
    最好是写成document.getElementsByTagName("body")[0];


    来自百度...

    查看全部
  • slice() 方法可从已有的数组中返回选定的元素。

    语法

    arrayObject.slice(start,end)

    参数说明:

    1.返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

    2. 该方法并不会修改数组,而是返回一个子数组。

    注意:

    1. 可使用负值从数组的尾部选取元素。

    2.如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。

    3. String.slice() 与 Array.slice() 相似。


    查看全部
    0 采集 收起 来源:选定元素slice()

    2018-03-27

  • 颠倒数组元素顺序reverse()

    reverse() 方法用于颠倒数组中元素的顺序。

    语法:

    arrayObject.reverse()

    注意:该方法会改变原来的数组,而不会创建新的数组


    查看全部
  • concat() 方法用于连接两个或多个数组。此方法返回一个新数组,不改变原来的数组。

    语法

    arrayObject.concat(array1,array2,...,arrayN)

    参数说明:

    注意:  该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。


    查看全部
  • 数组对象是一个对象的集合,里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的

    数组定义的方法:

    1. 定义了一个空数组:

    var  数组名= new Array();

    2. 定义时指定有n个空元素的数组:

    var 数组名 =new Array(n);

    3.定义数组的时候,直接初始化数据:

    var  数组名 = [<元素1>, <元素2>, <元素3>...];

    我们定义myArray数组,并赋值,代码如下:

    var myArray = [2, 8, 6];

    说明:定义了一个数组 myArray,里边的元素是:myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

    数组元素使用:

    数组名[下标] = 值;

    注意: 数组的下标用方括号括起来,从0开始。

    数组属性:

    length 用法:<数组对象>.length;返回:数组的长度,即数组里有多少个元素。它等于数组里最后一个元素的下标加一。


    查看全部
    0 采集 收起 来源: Array 数组对象

    2018-03-27

  • random() 方法可返回介于 0 ~ 1(大于或等于 0 但小于 1 )之间的一个随机数。

    语法:

    Math.random();

    注意:返回一个大于或等于 0 但小于 1 的符号为正的数字值。

    我们取得介于 0 到 1 之间的一个随机数


    查看全部
    0 采集 收起 来源:随机数 random()

    2018-03-27

  • ound() 方法可把一个数字四舍五入为最接近的整数。

    语法:

    Math.round(x)

    参数说明:

    注意:

    1. 返回与 x 最接近的整数。

    2. 对于 0.5,该方法将进行上舍入。(5.5 将舍入为 6)

    3. 如果 x 与两侧整数同等接近,则结果接近 +∞方向的数字值 。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6


    查看全部
    0 采集 收起 来源:四舍五入round()

    2018-03-27

  • floor() 方法可对一个数进行向下取整。

    语法:

    Math.floor(x)

    参数说明:

    注意:返回的是小于或等于x,并且与 x 最接近的整数。


    查看全部
    0 采集 收起 来源:向下取整floor()

    2018-03-27

  • ceil() 方法可对一个数进行向上取整。

    语法:

    Math.ceil(x)

    参数说明:

    注意:它返回的是大于或等于x,并且与x最接近的整数。


    查看全部
    0 采集 收起 来源:向上取整ceil()

    2018-03-27

  • <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title>实践题 - 选项卡</title>

        <style type="text/css">

         /* CSS样式制作 */  

            * {

    margin: 0px;

    padding: 0px;

    font: 12px normal;

    font-family: 微软雅黑;

    }


    #tabs {

    width: 290px;

    height: 150px;

    padding: 5px;

    margin: 20px;

    }


    #tabs ul {

    list-style: none;

    display: block;

    height: 30px;

    line-height: 30px;

    }


    #tabs ul li {

    float: left;

    width: 60px;

    height: 28px;

    line-height: 28px;

    text-align: center;

    display: inline-block;

    margin: 0px 3px;

    border: 1px solid #aaa;

    border-bottom: none;

    cursor: pointer;

    background: #fff;

    list-style: none;

    }


    #tabs ul li.on {

    border-top: 2px solid saddlebrown;

    border-bottom: 2px solid #fff;

    }


    #tabs div {

    height: 120px;

    line-height: 25px;

    border: 1px solid #336699;

    border-top: 2px saddlebrown solid;

    padding: 5px;

    }


    .hide {

    display: none;

    }

           

        </style>

        <script type="text/javascript">

             

        // JS实现选项卡切换

         window.onload = function() {

    var oTab = document.getElementById("tabs")

    var li = document.getElementsByTagName("li");

    var div = oTab.getElementsByTagName("div"); //oTabs.get...是为了定义className作用对象为id为tabs下的所有文本div


    for(var i = 0; i < li.length; i++) { //获取所有i编号的元素

    li[i].index = i; //定义一个index属性对li进行编号

    li[i].onclick = function() { //再注册一个点击事件,当点击的时候所有标签都恢复最初状态

    for(var n = 0; n < li.length; n++) { //这步是相对于未被点击部分的样式

    li[n].className = "";

    div[n].className = "hide";

    }

    this.className = "on"; //再对点击事件添加相应的属性

    div[this.index].className = ""; //通过之前的index编号绑定的指定div

    }

    }

    }

        

        </script>

     

    </head>

    <body>

    <!-- HTML页面布局 -->

    <div id="tabs">

    <ul>

    <li class="on">房产</li>

    <li>家具</li>

    <li>二手房</li>

    </ul>

    <div>

    275万购昌平邻铁三居 总价20万买一居<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br>

    </div>

    <div class="hide">

    40平出租屋大改造 美少女的混搭小窝<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br>

    </div>

    <div class="hide">

    通州豪华3居260万 二环稀缺2居250w甩<br> 200万内购五环三居 140万安家东三环<br> 北京首现零首付楼盘 53万购东5环50平<br> 京楼盘直降5000 中信府 公园楼王现房<br>

    </div>

    </div>


     

    </body>

    </html>


    查看全部
    0 采集 收起 来源:编程挑战

    2018-03-27

  • a++ : 把(a++)作为一个整体表达式,a 的值虽然自增1,但是整个表达式的值是取 a自增 之前 的值;<br> ++a : 也把(++a)作为一个整体表达式,a 的值也自增1,但是整个表达式的值是取 a 自增 之后 的值。 JS中运算符规则: % 取余数, 比如10%3 结果为1

    查看全部
    0 采集 收起 来源:编程练习

    2018-03-27

举报

0/150
提交
取消
课程须知
你需要具备HTML、css基础知识,建议同学们也可以想学习下js入门篇,快速认识js,熟悉js基本语法,更加快速入手进阶篇!
老师告诉你能学到什么?
通过JavaScript学习,掌握基本语法,制作简单交互式页面
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!