zoukankan      html  css  js  c++  java
  • html06

    1.全局函数
    alert();
    console.log();
    parseInt();
    parseString();
    isNaN();
    eval(); 用于计算表达式字符串 用于执行字符串中的js代码
    eval("1+2");
    3

    小练习:通过eval模拟页面计算器

    2.js的外部对象
    DOM 文档对象模型(document Object Model)
    -通过DOM实现对HTML文档数据的操作
    -定义了很多js访问和操作HTML的方法
    BOM 浏览器对象模型(Bowser Oobject Model)
    -通过BOM移动窗口,更改状态栏等等(不跟页面的内容发生直接联系)

    2.1 BOM对象
    用的最多的
    window对象
    -所有的全局变量,方法,属性都是放在window对象中
    它们都自动成为window的成员
    -常用属性
    * location :指的是当前窗口的地址对象
    * document :指的是窗口中显示的HTML文档对象
    document里面放的是head和body
    * history :指的是当前窗口访问过的历史记录对象
    * screen :指的是当前屏幕对象
    * navigator:指的是浏览器的相关信息
    -常用方法
    * alert() : 全局的方法都在window中
    alert() ;//跳出只有确定,这一个选项的对话框
    confirm("12334");//跳出有确定,取消两个选项的对话框

    定时器,主要用来制作网页的闹钟,动态时钟,倒计时,跑马灯效果
    一次性定时
    * setTimeout() clearTimeout()
    特点:在一个设定的时间之后,执行代码
    setTimeOut(function,time)
    - function :定时器执行的内容
    - time :多久之后执行(以毫秒为单位)
    (栗子1: window.setTimeout("alert(111)",3000);)
    栗子2: 5秒后弹出hello
    function sayHello(){
    alert("hello");
    }
    window.setTimeout(sayHello,5000);

    周期性定时 关闭周期性定时器
    *setInterval() clearInterval()
    特点:间隔多久执行一次
    常见对象(window的5个属性可以分别获取其对应的5个对象)
    * location
    -href 属性:获取当前窗口正在访问的地址
    -reload() :重新加载(等同于刷新)

    * document
    * history
    -length 属性 :返回访问的地址的个数
    -back() : 返回上一个地址
    -forward() : 进入下一个地址
    -go(index) go(-1)等于back()
    : index<0 回退
    : index>0 前进
    *screen
    -width : 实际的宽度
    -availWidth :可用高度
    -height : 实际的屏幕高度
    -availHeight : 可用的屏幕高度
    *navigator
    -userAgent : 获取浏览器相关信息

    2.2DOM对象
    页面在加载的时候,由浏览器生成的
    1)js创建动态的HTML
    - js可以改变HTML的元素
    - js可以改变HTML的属性
    - js可以改变HTML的样式
    - js可以对HTML中的事件作出反应
    ** DOM模型会被构造成DOM树 **
    DOM是浏览器打开的时候生成的

    2)查询 读取 修改 新增 删除 - js对DOM的操作
    *查询
    -document.getElementById(id);
    -返回1个节点
    -document.getElementsByTagName(lagName); 根据标记名称获取节点
    -返回根据标签名称查到的元素集合
    -document.getElementsByname(name);
    -返回根据标签name属性查到的元素集合
    -documentEle.parentNode; 查找某个元素的父节点
    -返回指定节点的父节点
    -documentElc.childNodes
    -返回指定节点的所有子节点
    -document.qucrySelector(selector); html5特有
    -根据选择器查找单个节点
    -返回符合选择器的第一个节点
    -document.qucrySelectorAll(selector); thml5特有
    -根据选择器的所有节点

    *读取+修改(前提:找到节点)
    -读取
    ~内容(值)
    innerHTML属性 - 不解析html文本 (节点中的HTML)
    - 将内容当成字符串打印
    innerText属性 - 只获取解析后的文本内容 (节点中的文本)
    ~属性
    ele.属性名
    ele.getAttribute(属性名)

    *修改
    ~值
    ele.innerHTML = 值;
    ele.innerText = 值;
    ~属性
    ele.属性名=值;
    ele.setAttribute(属性名,值);
    栗子:
    console.log(li_1.getAttribute("id"));
    li_1.setAttribute("id","li_1");

    *读取修改样式
    获取节点的样式 ele.style;
    修改节点的样式 ele.style = 值;

    //轮播图

  • 相关阅读:
    003random随机数模块
    002---time & datetime
    001---包和模块
    000软件开发规范
    python函数篇
    LeetCode OJ:Construct Binary Tree from Preorder and Inorder Traversal(从前序以及中序遍历结果中构造二叉树)
    LeetCode OJ:Flatten Binary Tree to Linked List(捋平二叉树)
    LeetCode OJ:Convert Sorted Array to Binary Search Tree(将排序好的数组转换成二叉搜索树)
    LeetCode OJ:Count Complete Tree Nodes(完全二叉树的节点数目)
    LeetCode OJ:Validate Binary Search Tree(合法的二叉搜索树)
  • 原文地址:https://www.cnblogs.com/yingyigongzi/p/9232273.html
Copyright © 2011-2022 走看看