第85节：Java中的JavaScript-白红宇

第85节：Java中的JavaScript

阅读量：5264 次

发布时间：2019-06-14

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

标题图

第85节：Java中的JavaScript

复习一下css：

选择器的格式：

元素选择器：元素的名称{}

类选择器：. 开头

ID选择器：# ID选择器

后代选择器：选择器1 选择器2

子元素选择器：选择器1 > 选择器2

选择器分组：选择器1，选择器2，选择器3{}

属性选择器：选择器[属性名称=‘属性值’]

盒子模型：

内边距：盒子内的距离

边框：盒子的边框

外边距：盒子和盒子之间的距离

轮播图

自动播放：每隔3秒切换，切换图片，

// 点击弹框// 确定事件，点击事件// 通过事件定义函数// 在函数里定义操作页面元素，做一些交互的操作  
    
       这里是达叔小生

// 点击切换图片

setTimeout(): 在指定的毫秒数后调用函数

setInterval(): 按照指定的周期来调用函数

scrollTo(): 把内容滚动到指定的坐标

scrollBy(): 按照指定的像素值来滚动内容

resizeTo(): 把窗口的大小调整到指定的宽度和高度

resizesBy(): 按照指定的像素调整窗口的大小

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

open(): 打开一个新的浏览器窗口

moveTo(): 把窗口的左上角移动到一个指定的坐标

moveBy(): 可相对窗口的当前坐标把它移动指定的像素

focus(): 把键盘焦点给予一个窗口

setInterval()方法按照指定的周期来调用函数，方法会不停地调用函数，直到clearInterval()被调用或者窗口被关闭，

定时器

// 技术分析function test(){ console.log("调用了");}// setInterval("test()", 2000); 这个函数会循环，定时2秒后，这个函数会重新被调用，一直循环。// setTimeout("test()", 2000);这个函数被用了，就不再执行了

取消操作，alert()显示一段消息，blur()把键盘焦点从顶层窗口移开，clearInterval()取消由setInterval()设置的timeout，clearTimeout()取消由setTimeout()方法设置的timeout。

setIntervale()

参数：mode 参数为要调用的函数，或是执行代码串millisec 参数为调用code之间的时间间隔

图片自动轮播：

// 会被显示在状态栏

文件加载完成事件onload，事件触发

显示和隐藏

setInterval：每隔多少毫秒执行一次
setTimeout：多少毫秒后执行一次
clearInterval和clearTimeout
img.style.display=block和img.style.display=none

定时广告：

表单效果

onblur 元素失去焦点onchange 域的内容被改变onfocus 元素获取焦点

表单提交规则

https://github.com/huangguangda/Tools/blob/master/regutils.js

引入文件

ondblclick: 当用户双击某个对象时调用的事件onerrror: 在加载文档或图像时发生错误onfocus: 元素获得焦点onkeydown: 某个键盘按键被按下onkeypress: 某个键盘按键被按下并松开onkeyup: 某个键盘按键被松开onload: 一张页面或一副图像完成加载onmousedown: 鼠标按钮被按下onmousemove: 鼠标被移动onmouseout: 鼠标从某元素移开onmouseover: 鼠标移到某元素之上onmouseup: 鼠标按键被松开

表格隔行颜色

     修改 | 删除


    
     function init(){ var tab = document.getElementById("tab");}

table对象table对象代表一个html表格，
    
     标签cells[] 返回包含表格中所有单元格的一个数组// 所有单元格rows[] 返回包含表格中所有行的一个数组tBodies[] 返回包含表格中所有tbody的一个数组

表格全选和全不选

getElementById()方法getElementById()方法返回带有指定ID的元素

var element = document.getElementById("tag");

appendChild(node)： 插入新的子节点removeChild(node)：删除子节点innerHTML: 节点元素的文本值parentNode：节点的父节点childNodes：节点元素的子节点attributes：节点的属性节点

getElementById(): 返回带有指定ID的元素getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表getElementsByClassName(): 返回包含带有指定类名的所有元素的节点列表appendChild(): 把新的子节点添加到指定节点removeChild(): 删除子节点replaceChild():替换子节点insertBefore(): 在指定子节点前面插入新的子节点createAttribute(): 创建属性节点createElement(): 创建元素节点createTextNode(): 创建文本节点getAttribute(): 返回指定的属性值setAttribute(): 把指定属性设置值

文本

省市联动

DOM：

Document Object ModelHTML DOM定义了访问和操作的html文档的标准DOM是标准，定义了访问html和xml文档的标准DOM是 Document Object Model 文档对象模型的缩写

选择城市

案例: