JavaWeb入门(3)

    xiaoxiao2022-07-12  149

    JavaScript续 6.DOM简单学习:为了满足案例要求。 (1)功能:控制html文档的内容。 (2)代码:获取页面标签(元素)对象Element——获取对象:document.getElementById(“id值”); (3)操作Element对象: 修改属性值:明确获取对象的id——查看API文档,照可以修改的属性。 修改标签体内容:获取元素对象,使用innerHTML属性修改标签体内容。

    7.事件简单学习: (1)功能:某些组件被执行了某些操作后,出发了某些代码的执行。 (2)如何绑定事件: 第一种:直接在html标签上,指定时间的属性(操作),属性值就是js代码; 第二种:通过js获取元素对象,指定事件属性,设置一个函数。

    8.BOM: (1)概念:Browser Object Model 浏览器对象模型——将浏览器的各个组成部分封装成对象。 (2)组成:Window——窗口对象;Navigator——浏览器对象;Screen——显示器对象;History——历史记录对象;Location——地址栏对象。 (3)Window:窗口对象 【创建】 【方法】 alert(); confirm():如果用户点击确定,返回true,点击取消,返回false; prompt():显示可提示用户输入的对话框; open(); close():谁调用我,我关闭谁; 与定时器有关的方法: setTimeout():一次性定时器; clearTimeout():取消定时器; setInterval():循环定时器; clearTnterval()。 【属性】 ——获取BOM对象 history、location、navigator、screen; ——获取DOM对象 document 【特点】 Window对象不需创建可以直接使用 window引用可省略。 (4)Location:地址栏对象 【创建(获取)】 【方法】 reload()重新加载当前文档。刷新。 【属性】 href :设置或返回完整的URL。 (5)History:历史记录对象 【创建(获取)】 window.history history 【方法】 back():加载history列表的前一个URL。 forward():加载history列表中的下一个URL。 go(参数):加载history列表中的某个具体页面。 参数为正数(前进几个历史记录); 参数为负数(后退几个历史记录)。 【属性】 length:返回当前窗口历史列表中的URL数量。

    9.DOM: (1)概念:Document Object Model 文档对象模型。 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。 (2)W3C DOM 标准被分为3个不同的部分: 【核心 DOM】针对任何结构化文档的标准模型 Document:文档对象 Element:元素对象 Attribute:属性对象 Text:文本对象 Comment:注释对象 Node:节点对象,其他5个的父对象 【XML DOM】针对XML文档的标准模型 【HTML DOM】针对HTML文档的标准模型 (3)核心DOM模型 【创建(获取)】在html dom模型中可以使用window对象获取 【方法】 ——获取Element对象: getElementById():根据id属性值获取元素。一般id值唯一; getElementsByTagName():根据元素名称获取元素对象们。返回的是一个数组; getElementsByClassName():根据元素Class属性值获取对象们。返回值是一个数组; getElementsByName():根据name属性值获取对象们。 ——获取其他DOM对象 createAttribute(name); createComment(); createElement(); createTextNode() 【属性】 (4)Element:元素对象 【创建(获取)】 通过document来获取和创建 【方法】 removeAttribute():删除属性; setAttribute():设置属性。 (5)Node:节点对象,其他5个的父对象 【特点】 所有dom对象都可以被认为是一个节点 【方法】 appendChild():向节点的子节点列表的结尾添加新的子节点。 removeChild():删除(并返回)当前节点的指定子节点。 replaceChild():用新节点替换一个子节点。 【属性】 parentNode 返回节点的父节点。

    10.HTML DOM: (1)标签体的设置和获取:innerHTML (2)使用html元素对象的属性 (3)控制元素样式 使用元素的style属性来设置; 提前定义好类选择器的样式,通过元素的classname属性来设置其class属性值。

    11.事件监听机制 (1)概念:某些组件被执行了某些操作后,触发某些代码的执行。 【事件】某些操作。如:单机,双击,键盘按下了,鼠标移动了; 【事件源】组件。如:按钮,文本输入框… 【监听器】代码; 【注册监听】将事件,事件源,监听器结合在一起。当事件源发生了某个事件,则触发执行某个监听器代码。 (2)常见的事件 【点击事件】 onclick:单击事件; ondbclick:双击事件。 【焦点事件】 onblur:失去焦点; onfocus:元素获得焦点。 【加载事件】 onload:一张页面或一张图完成加载。 【鼠标事件】 onmousedown:鼠标按钮被按下; onmouseup:鼠标按钮被松开; onmousemove:鼠标被移动; onmouseout:鼠标从某元素松开。 【键盘事件】 onkeydown:某个键盘被按下; onkeypress:某个键盘被按下并松开。 【选择和改变】 onchange:域的内容被改变; onselect:文本被选中。 【表单事件】 onsubmit:确认按钮被电击; conreset:重置按钮被电击。

    Bootstrap 1.概念:一个前端开发的框架,来自Twitter,是目前很受欢迎的前端框架。基于HTML、CSS、JavaScript的,它简洁灵活。 【框架】一个半成品软件,开发人员可以在框架的基础上再进行开发,简化代码。 【好处】 定义了很多css样式和js插件。我们开发人员可以使用这些样式和插件得到丰富的页面效果。 响应式布局(同一套页面可以兼容不同分辨率的设备)。

    2.快速入门 【步骤】 下载Bootstrap; 在项目中将这三个文件夹复制; 创建html页面,引入必要的资源文件。 (1)响应式布局 【实现】依赖于栅格系统:将一行平均分成12个格子 【步骤】 ——定义容器。 相当于之前的table。 容器分类:container(两边有留白);container-fluid(每种设备都是100%的宽度) ——定义行。 相当于之前的tr 样式:row ——定义元素。 指定该元素在不同设备上,所占的格子数目。样式:col-设备代号-格子数目。 设备代号:xs(超小屏幕,手机);sm(小屏幕,平板);md(中等屏幕,桌面显示屏);lg(大屏幕)。 【注意】 一行中如果格子超过12,则超出部分自动换行。 栅格类属性可以向上兼容。 如果设备宽度小于设置栅格类属性的设备代码的最小值,会一个元素占满一整行。 (2)全局CSS样式 【按键】【图片】【表格】【表单】【导航栏和分页】【轮播图】(直接可复制粘贴会改就行)

    XML 1.概念:Extensible Markup Language 可扩展标记语言。 (1)可扩展:标签都是自定义的。 (2)功能: 【存储数据】配置文件;在网络中传输 (3)xml和html的区别: xml标签都是自定义,html标签都是预定义的; xml的语法严格,html语法松散; xml是存储数据的,html是展示数据的。 (4)w3c:万维网联盟

    2.语法 (1)基本语法: 后缀名.xml; 第一行必须定义为文档声明; 文档中有且仅有一个根标签; 属性值必须用引号包括起来(单双引号均可); 标签必须正确关闭; 标签名称区分大小写 (2)快速入门: (3)组成部分: 【文档声明】 ——格式:<?xml 属性列表 ?> ——属性列表 version:版本号,必须的属性; encoding:编码方式。告知解析引擎当前文档使用的字符集,默认值:ISO-8859-1; standalone:是否独立。 【指令】(了解)结合CSS的 【标签】标签名称自定义的。 名称可以包含字母、数字以及其他的字符; 名称不能以数字或者标点符号开始; 名称不能以字母xml(或XML、Xml等等)开始; 名称不能包含空格。 【属性】id属性值唯一 【文本】 CDATA区:在该区域中的数据会被原样展示。 格式:<![CDATA[ 数据 ]]> 【约束】规定xml文档的书写规则 ——作为框架的使用者: 能够在xml中引入约束文档,能够简单地读懂约束文档。 ——分类 DTD:一种能够简单的约束技术; Schema:一种复杂的约束技术。 ——DTD 引入dtd文档到xml文档中(内部dtd和外部dtd)

    最新回复(0)