• JavaScript之BOM(DOM)


    DOM:是研究HTML代码内部的

    控制HTML文档内容,以页面标签(元素)为对象

    事件:对元素进行某些动作后会触发代码实现功能的一种属性

    效果:

    点击图片后

    BOM:是研究浏览器这个程序的

    浏览器对象模型,用于把浏览器相关的组件封装为对象进行操作。

    Window:浏览器窗口对象

    DOM:BOM是包含DOM的,然后DOM我们拿出来单独分为一级讲解

    Location:地址栏对象

    History:历史记录对象

    Screen:显示器屏幕对象

    Window对象与弹出框有关的方法:

    alert()显示带有一段消息和一个确认按钮的警告框。

    confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。

    如果用户点击确定按钮,则方法返回true

    如果用户点击取消按钮,则方法返回false

    prompt()显示可提示用户输入的对话框。

    返回值:获取用户输入的值

    Window对象与打开关闭有关的方法:

    close()关闭浏览器窗口,谁调用关谁。

    open()打开一个新的浏览器窗口 返回新的Window对象

    Window对象与定时器相关方法

    setTimeout()在指定的毫秒数后调用函数或计算表达式。

    clearTimeout()取消由 setTimeout()方法设置的timeout

    setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式

    clearInterval()取消由setInterval()设置的 timeout

    暂停选老婆


    location对象

    	1. 创建(获取):
    		1. window.location
    		2. location
    
    	2. 方法:
    		* reload()	重新加载当前文档。刷新
    	3. 属性
    		* href	设置或返回完整的 URL。
    	href 用于获取或指定当前页面的url
    		可以用于页面跳转
    

    history对象

    1. 创建(获取):
            1. window.history
            2. history
    
        2. 方法:
            * back()	加载 history 列表中的前一个 URL。
            * forward()	加载 history 列表中的下一个 URL。
            * go(参数)	加载 history 列表中的某个具体页面。
                * 参数:
                    * 正数:前进几个历史记录
                    * 负数:后退几个历史记录
        3. 属性:
            * length	返回当前窗口历史列表中的 URL 数量。	
            go(-1)
    		后退一个页面
    

    DOM,为了操作html对象

    把html文档加载进内存, 用对象模型加以描述, 可以对这些对象进行操作以修改文档最终数据结构。
    该对象模型是一个树型结构, 一般我们称为DOM树。
    我们的dom操作一般都是基于该dom树进行增删改查操作。

    document对象

    获取Element对象:




    	DOM树
    	方法:
    	1. 获取Element对象:*****
    		1. getElementById()	: 根据id属性值获取元素对象。id属性值一般唯一
    		2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
    		3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
    		4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
    

    Element对象


    setAttribute(属性名,属性值)
    设置属性

    removeAttribute(属性名)
    删除属性

    ##Node对象
    



    点击删除子节点:

    点击添加子节点:

    想删除自己这个节点,需要找个爹:parentNode

    HTML DOM

    innerHTML 内部的html, 用于设置和获取元素的标签体

    innerText 内部的文本, 不支持html格式数据, 参数都会当成普通字符串处理

    样式控制:

    使用style属性指定样式的值
    使用className属性指定样式类

    事件

    事件监听机制***
    	在某个组件上监听某个特定的行为, 当此行为被触发, 则自动执行提前设定好的代码逻辑。
    事件
    	1. 点击事件:
    		1. onclick:单击事件
    		2. ondblclick:双击事件
    	2. 焦点事件
    		焦点:
    			元素获得焦点代表该元素是用户目前可以进行交互的元素
    		1. onblur:失去焦点
    		2. onfocus:元素获得焦点。
    	3. 加载事件:
    		onload
    			一般用在window对象上, 用于获取页面加载完成这一事件
    			window.onload = function(){
    				// xxxx
    				document.getElementXXXX
    			}
    	4. 选择和改变
    		onchange	域的内容被改变。
    			一般用于select下拉列表,用于感知下拉列表的选项被改变。
    	5. 表单事件:
    		onsubmit	提交按钮被点击
    			它的返回值可以控制表单是否提交。
    				当返回true或者不返回的时候, 表单可以提交
    

    BootStrap

    前端框架
    	框架:
    		把一部分公共的逻辑已经实现的半成品软件。
    	BootStrap是移动设备优先的框架。
    

    初始页面:

    栅格系统*****
    

    	响应式编程
    		编写一套页面, 可以适配不同分辨率的设备, 达到良好的显示效果。
    	BootStrap里,使用栅格系统来实现页面的响应式编程。
    




    变为xs模式时,Vanの消失:

    栅格是可以嵌套的。

  • 相关阅读:
    18.综合应用判断素数
    17.综合应用判断素数
    16.综合应用判断素数
    15.for循环的三个表达式是可以省略
    14.循环的理解
    myeclipse2014中搭建SSH环境注意事项
    Java web设计模式学习
    问题1:myeclipse中导入新JSP项目出现红色感叹号
    Java集合类学习笔记
    Java 复习第一部分:知识体系、变量、运算部分
  • 原文地址:https://www.cnblogs.com/maomaodesu/p/12031310.html
Copyright © 2020-2023  润新知