94_JavaWeb_JS2_event_dom_方法_属性

JavaScript 事 件 : 输入设备与页面进行交互的响应

常用的事件：

onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作

onclick 单击事件： 常用于按钮的点击响应操作。

onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法

事件的注册（绑定）

当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码。

动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码

动态注册基本步骤：

1、获取标签对象

2、标签对象.事件名 = fucntion(){}

按钮_静态点击 按钮_动态点击

用户名:
密码:


--国家-- 意大利 英国 日本

伴娘 姐夫 B哥 李心

GET请求的特点是： 1、浏览器地址栏中的地址是：action属性[+?+请求参数] 请求参数的格式是：name=value&name=value 2、不安全 3、它有数据长度的限制 POST请求的特点是： 1、浏览器地址栏中只有action属性值 2、相对于GET请求要安全 3、理论上没有数据长度的限制

onsubmit

DOM 模型  Document Object Model 文档对象模型

把文档中的标签，属性，文本，转换成为对象来管理

Document 对象的理解： 第一点：Document 它管理了所有的 HTML 文档内容 第二点：document 它是一种树结构的文档，有层级关系 第三点：它让我们把所有的标签 都 对象化 第四点：我们可以通过 document 访问所有的标签对象 方法介绍 document.getElementById(elementId) 通过标签的id属性查找标签 dom 对象,elementId 是标签的id属性值 document.getElementsByName(elementName)通过标签的name属性查找标签dom对象,elementName标签的name属性值 document.getElementsByTagName(tagname) 通过标签名查找标签dom对象,tagname 是标签名 document.createElement( tagName)方法，通过给定的标签名，创建一个标签对象,tagName 是要创建的标签 注： document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询 如果没有 id 属性，则优先使用getElementsByName方法来进行查询 如果id属性和name属性都没有最后再按标签名查 getElementsByTagName 以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

正则

getElementById

用户名： 较验

getElementByName

兴趣爱好： C++ Java JavaScript
全选 全不选 反选

getElementByTagName

兴趣爱好： C++ Java JavaScript
全选

节点的常用属性和方法

方法

getElementsByTagName()方法 获取当前节点的指定标签名孩子节点

appendChild( oChildNode )方法，可以添加一个子节点，oChildNode

属性

childNodes属性，获取当前节点的所有子节点

firstChild属性，获取当前节点的第一个子节点

lastChild属性，获取当前节点的最后一个子节点

parentNode属性，获取当前节点的父节点

nextSibling属性，获取当前节点的下一个节点

previousSibling属性，获取当前节点的上一个节点

className 用于获取或设置标签的 class 属性值

innerHTML属性，表示获取/设置起始标签和结束标签中的内容

innerText属性，表示获取/设置起始标签和结束标签中的文本

@CHARSET "UTF-8"; body { width: 800px; margin-left: auto; margin-right: auto; } button { width: 300px; margin-bottom: 10px; } #btnList { float:left; } #total{ width: 450px; float:left; } ul{ list-style-type: none; margin: 0px; padding: 0px; } .inner li{ border-style: solid; border-width: 1px; padding: 5px; margin: 5px; background-color: #99ff99; float:left; } .inner{ width:400px; border-style: solid; border-width: 1px; margin-bottom: 10px; padding: 10px; float: left; }

HTML Java web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。