Day85.JavaScript基本内容② -HTML和CSS、JS

阅读量：346 次

发布时间：2019-03-04

本文共 3392 字，大约阅读时间需要 11 分钟。

JavaScript基本内容②

1. JS中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件:

onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作 onclick 单击事件： 常用于按钮的点击响应操作。 onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。 onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作 onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法

事件的注册:

什么是事件的注册(绑定)?

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

静态注册:

通过html标签的事件属性直接赋于事件响应后的代码

动态注册:

先通过js代码得到标签的dom对象，然后再通过 dom对象.事件名 = function(){}

动态注册基本步骤:

1.获取标签对象

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

onload加载完成事件

静态注册写法    
       Title

动态注册的写法

onclick单击事件

    
       Title

onblur失去焦点事件

    
       Title        用户名:
    密  码:

onchange内容发生改变事件

    
       Title            请选择你心中的女神:
           
        请选择你心中的男神:

onsubmit表单提交事件

    
       Title

2. DOM模型

DOM全称: Document Object Model 文件对象模型

Document对象(重点)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QN6WFMEy-1603892483658)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201027223140466.png)]$

Document 对象的理解：第一点：Document 它管理了所有的 HTML 文档内容。 第二点：document 它是一种树结构的文档。有层级关系。第三点：它让我们把所有的标签 都 对象化 第四点：我们可以通过 document 访问所有的标签对象。

在这里插入图片描述

Document对象中的方法介绍(重点)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oIxQ9pkD-1603892483666)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201028202118245.png)]$

1. getElementById()方法

getElementById(): 根据指定的id属性查询返回标签对象

    
       Title        用户名:

正则表达式

在这里插入图片描述

    
       Title

两种常见的验证提示显示效果

    
       Title        用户名:

2. getElementsByName()方法

getElementsByName(): 根据指定的name属性查询返回多个标签对象的集合

    
       Title        兴趣爱好:    c++    java    c

3. getElementsByTagName()方法

getElementsByTagName(): 根据指定标签名来进行查询并返回集合

    
       Title        兴趣爱好:    c++    java    c

三个方法的使用注意事项:

注:	document对象的三个查询方法,如果有id属性，优先使用getElementById()方法进行查询							如果没有id属性,则优先使用getElementsByName()方法进行查询							如果id属性、name属性,则使用getElementsByTagName()方法进行查询								以上三个方法，必须要在页面加载完成之后，才能查询

节点的常用属性和方法

节点就是标签对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JWT8MJuS-1603892483670)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201028212315834.png)]$

style/css.css文件@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;}


   dom查询
   
      
          
              你喜欢哪个城市?      
      
              
      北京
         
      上海
         
      东京
         
      首尔
      
     
      
     
      
     
      
              你喜欢哪款单机游戏?      
      
              
      红警
         
      实况
         
      极品飞车
         
      魔兽
      
     
      
     
      
     
      
              你手机的操作系统是?      
      
     
      IOS
      Android
      Windows Phone
     
   
    
   
    
           gender:      
           Male      
           Female      
     
      
     
      name:

document对象补充说明

通过方法写入body标签内容，而不通过直接编写

document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名appendChild(oChildNode) 方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

    
       Title

转载地址：http://xfoq.baihongyu.com/

你可能感兴趣的文章