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

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
  • 通过元素节点的属性名称获取属性的值。

    语法:

    elementNode.getAttribute(name)

    说明:

    1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。

    2. name:要想查询的元素节点的属性名字


    查看全部
  • 方法总结如下:

    注意:方法区分大小写


    document.getElementsByTagName("input")获取的是所有input标签,包括复选项和按钮,所以要判断是否是复选项,如是选中。

    ②通过上面的三种方法获取的元素都是从下标0开始的


    全选:  obj.checked="checked"   或 obj.checked=true;

                obj.checked="" 或 obj.checked=false

    查看全部
  • 返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

    语法:

    document.getElementsByTagName(Tagname)

    说明:

    1. Tagname是标签的名称,如p、a、img等标签名。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,所以从0开始。


    查看全部
  • 返回带有指定名称的节点对象的集合。

    语法:

    document.getElementsByName(name)

    注意:

    1. 因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

    2. 和数组类似也有length属性,可以和访问数组一样的方法来访问,从0开始。


    备注:

    通过name获取的元素不唯一,所以得到的结果是多个,用数组装的多个对象;而id获取的是唯一的一个对象

    查看全部
  • FireFox不支持InnerText的解决方法


    <table>

      <tr>  

      <td  onclick="getDetail(this)">zhangtongzct</td>

      </tr>

    </table>

      通过点击table中td,获取td中的值,在一般浏览器,ie,360,谷歌中都支持innerText,但是火狐支持innText

    火狐中要用textContent,所以代码我们应该这样写

            function getDetail(obj){           
             var str= obj.innerText;  
                      if( str == null ) str = obj.textContent ; // 兼容火狐
                return str;
            }


    查看全部
  • 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。


    HTML文档可以说由节点构成的集合,DOM节点有:

    1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

    2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

    3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

    节点属性:

    遍历节点树:

    以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

    DOM操作:

    注意:前两个是document方法。


    查看全部
    0 采集 收起 来源:认识DOM

    2018-10-03

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
        <script>
     document.onkeydown=function mykeyDown(e){
                e=e||event;
     if(e.keyCode==13){alert('oh my www.phpernote.com');}
                return;
     }
        </script>
    </body>
    </html>

    火狐浏览器下兼容event

    查看全部
  • 1. screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如任务栏。

    2. screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如任务栏。

    注意:

    不同系统的任务栏默认高度不一样,及任务栏的位置可在屏幕上下左右任何位置,所以有可能可用宽度和高度不一样。


    查看全部
  • window.screen 对象包含有关用户屏幕的信息。
    1. screen.height 返回屏幕分辨率的高
    2. screen.width 返回屏幕分辨率的宽
    注意:
    1.单位以像素计。
    2. window.screen 对象在编写时可以不使用 window 这个前缀。



    <SCRIPT LANGUAGE="JavaScript"> 
    var s ="网页可见区域宽:"+ document.body.clientWidth; 
    s+="\r\n网页可见区域高:"+ document.body.clientHeight; 
    s += "\r\n网页正文全文宽:"+ document.body.scrollWidth; 
    s += "\r\n网页正文全文高:"+ document.body.scrollHeight; 
    s += "\r\n网页正文部分上:"+ window.screenTop; 
    s += "\r\n网页正文部分左:"+ window.screenLeft; 
    s += "\r\n屏幕分辨率的高:"+ window.screen.height; 
    s += "\r\n屏幕分辨率的宽:"+ window.screen.width; 
    s +="\r\n屏幕可用工作区高度:"+ window.screen.availHeight; 
    s +="\r\n屏幕可用工作区宽度:"+ window.screen.availWidth; 
    alert(s); 
    document.write(s) 
    </SCRIPT>

    查看全部
  • screen对象

    screen对象用于获取用户的屏幕信息。

    语法:

    window.screen.属性

    对象属性:


    查看全部
    0 采集 收起 来源:screen对象

    2018-10-03

  • 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

    语法

    navigator.userAgent

    几种浏览的user_agent.,像360的兼容模式用的是IE、极速模式用的是chrom的内核。

    使用userAgent判断使用的是什么浏览器


    查看全部
    0 采集 收起 来源:userAgent

    2018-10-03

  • 5354b1d00001c4ec06220271.jpg

    location.[属性|方法]


    查看全部
    0 采集 收起 来源:Location对象

    2018-10-03

  • Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。

    对象属性:


    查看全部
    0 采集 收起 来源:Navigator对象

    2018-10-03

  • location用于获取或设置窗体的URL,并且可以用于解析URL。

    语法:

    location.[属性|方法]

    location对象属性图示:

    location 对象属性:

    location 对象方法:


    查看全部
    0 采集 收起 来源:Location对象

    2018-10-03

  • 要创建一个运行于无穷循环中的计数器,我们需要编写一个函数来调用其自身。在下面的代码,当按钮被点击后,输入域便从0开始计数。

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    var num=0;
    function numCount(){
     document.getElementById('txt').value=num;
     num=num+1;
     setTimeout("numCount()",1000);
     }
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="txt" />
    <input type="button" value="Start" onClick="numCount()" />
    </form>
    </body>
    </html>


    查看全部

举报

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

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