隐藏页面特效

html基础和js基础

1|0HTML基础


1|1html文件结构


<!DOCTYPE html>

  • 文档类型声明

<html lang="en"></html>

  • 是html标签，称之为根标签，一个html文件，有且只有一个根标签

head标签

  • html文档头标签，用来对文档的内容进行描述

  • meta标签，告诉浏览器以哪种编码方式打开这个html文件

  • title标签，文档的标题

  • style标签，用来设置css样式

  • link标签，用来链接一个外部文件，通常也是用来设置css样式

  • script标签，用来放js代码

body标签

  • 用来放页面上显示的内容，在body里会写大量的标签来构建网页的结构

1|2结构层：HTML标签


h系列标签

  • 用来显示各级标题，h1-h6系列

p标签

  • 一个p标签就是一个段落，独占一行

hr标签

  • 水平分割线

br标签

  • 换行

手动换行或多个空格

  • 一个换行或多个空格会解析成一个空格

空格

  • html中表示的空格

div标签

  • 没有语意的标签，更多的用来搭建页面，独占一行，非常重要

  • 默认宽度是整个屏幕，高度由内容来填充

span标签

  • 宽高都由内容来填充

特殊符号< >等可以百度查看

 

  • < :

 

  • :>

  • & :

a标签 超链接

  • href属性

    • 表示a标签超链接到的地址，如href="http://www.baiducom"

    • 打开html文件，如href="01html文件结构.html"

    • 打开图片，如href="01.jpg"

    • 如果是zip之类浏览器识别不了的连接，点击的效果是下载，如href="test.zip"

  • target属性

    • _blank

      • 表示重新开一个窗口打开链接

    • _self

      • 可以默认不写，就是在现有的页面跳转

  • 在不同状态下，显示不同的颜色，css设置

    • 未访问的状态

    • 点击时的状态

    • 访问过的状态

  • 锚点的使用

    • 如span标签中设置了一个id属性id="d1"，href属性中设置href="#d1",那么就可以通过点击a标签跳转span标签id为d1的位置

快捷创建多行标签

  • 代码：ul>li{我是第$个li}*50

img标签

  • 用来在页面上显示一张图片

  • src属性

    • 表示图片url链接地址

  • alt属性

    • 表示图片不存在或者加载失败时给出的提示信息

  • title属性

    • 当鼠标悬浮在图片上时给出的提示信息

列表标签

  • 有序列表：ol标签

    • 外层ol，内层要用li标签

    • type属性

      • 可以设置1,a,i,A等

    • start属性

      • 可以设置什么位置开始，如start="3"，表示从3开始

  • 无序列表：ul标签

    • 外层ul，内层要用li标签

    • type属性

      • circle，空心小圆圈

      • square，方形小方块

  • 定义列表：dl标签

    • 第二层dt标签

      • 表示主题

    • 第三层dd标签

      • 自带缩进，表示内容

table表格标签

  • 第二层tr

    • 第三层th

      • 表头

        • 加边框style中设置，td,th{border:1px solid #000;}

          • padding表示内边距

          • text-align:center;表示文本垂直居中

    • 第三层td：表示表头下面的内容

      • rowspan：表示合并行

      • colspan：表示合并列

  • style中设置合并上面style样式中已设置好的td，th，代码如下table{ border-collapse: collapse;}

    • 把单个边框无缝整合起来

form表单标签

  • action属性

    • 表示指定数据的地址

  • method属性

    • 用来设置用什么请求方式向服务器请求数据，get或者post等

  • 内层：input标签

    • type属性：用来规定输入的类型

      • text：文本输入框

      • password：密码输入框

      • tel：只在移动端有效，样式是会弹出输入框，类似于手机上面的键盘小数字输入框

      • number：数字输入框，包括点和e，但是有上下按钮

      • button：普通按钮，可以设置value值，用来表示按钮上显示文字

      • radio：单选框

        • 单选框时，input标签必须设置name属性，同时也可以设置value属性和id属性。

        • checked属性

          • 默认选中

      • checkbox：多选框

        • 多选框时，input标签必须设置name属性，同时也可以设置value属性和id属性。

        • checked属性

          • 默认选中

      • reset：重置按钮，用来重置form表单数据

      • submit：提交按钮

        • 设置value属性，登录或者注册等，提交数据

      • file：上传文件

    • placeholder属性

      • 用来在文本框上面显示隐性的文本提示，代码如下placeholder="请输入用户名"

    • name属性

      • 单选框radio，多选框checkbox设置name属性时表示一组，表单中基本都要设置name属性，无论是用户主动输入的还是单选多选，都要设置name属性

    • id属性

      • 可以用来绑定，给定标识相当于身份

    • value属性

      • 用来把数据提交给服务器，用户主动输入的不需要加value，其他的如单选框和多选框等都需要加value

  • select标签下拉选择框

    • 内层option标签

      • 用来显示下拉框选项内容

      • option标签属性

        • selected属性

          • 表示默认选中

1|3表现层：CSS


css三种使用方式

  • 行内样式：直接给标签添加style属性，style里面写css属性键值对。<p id="p1" style="color:red;">我的p</p>

    • 优先级最高

  • 内部样式：在head里面添加style标签，然后写p{ color:red;}

  • 外部样式：在外部导入css文件。在head标签里面写<link rel="stylesheet" href="test.css">

选择器：给哪几个标签设置样式

    • 通配符选择器表示全部

  • 标签选择器，使用标签名设置样式

    • 标签{要设置的属性 }

  • 类选择器，标签中设置了class属性值，类属性值可以写多个

    • .class对应的属性值{ 要设置的属性}

  • id选择器

    • #id值{要设置的属性}

  • 选择器优先级(权重)

    • 通配符 < 标签 < 类 < id

    • 注意事项，如果有嵌套的div标签，假如都设置了样式，会优先用自己的

    • 继承中继承的优先级最低

      • 继承 < 自带样式 < 通配符 < 标签 < 类 < id

    • css的权重计算

      • 会先比较id的个数，然后再比较类的个数，标签的个数。哪个的个数加起来多，就会用哪个css的样式属性来设置

    • 设置的属性后面如果加了 ！import 表示无敌，最大

  • 组合选择器

    • 后代选择器

      • 只要是后代就行。意思是只要在选择器1内部里面的就为后代。语法：选择器1 选择器2{ 要设置的属性 }

    • 子元素选择器

      • 意思就是儿子选择器。语法：选择器1>选择器2{要设置的属性}

    • 交集选择器

      • 就是同时拥有。语法：选择器1选择器2{要设置的属性}

    • 并集选择器

      • 多个同时。语法：选择器1,选择器2{ 要设置的属性}

    • 兄弟选择器

      • 找相邻的下一个兄弟。语法：选择器1+选择器2{要设置的属性}

    • 伪类选择器

      • 就是根据标签不同的状态设置不同的样式（后面四种状态必须要按顺序写，不然不会触发）

        • 语法：标签名:link{要设置的属性} 没有访问过的状态

        • 语法：标签名:visited{要设置的属性} 访问过的状态

        • 语法：标签名:hover{要设置的属性} 鼠标悬停时的状态

          • cursor:pointer

            • 鼠标变成小手

        • 语法：标签名:active{要设置的属性} 鼠标按下时的状态

    • 伪元素选择器：在自己内部标签底部设置元素

      • 设置属性 div:after{ content:要加的内容 }

        • 在标签内容后面添加内容

      • 设置属性 div:before{ content:要加的内容 }

        • 在标签内容前面添加内容

属性：找到标签以后给它设置什么样式（部分常用属性）

  • 文本相关属性

    • 文字中加一条删除线

      • text-decoration:line-through

    • 文字上划线

      • text-decoration:overline;

    • 文字下划线

      • text-decoration:underline;

    • 水平居中/左/右

      • text-align:center/left/right

    • 垂直居中/行高

      • line-height:数字/百分比

    • 文字缩进距离

      • line-indent:数字/百分比

    • 给文字设置阴影效果

      • text-shadow:像素 像素 像素 颜色;

    • a标签或者文本取消下划线

      • text-decoration:none;

    • 设置文字超出后处理方式

      • overflow:hidden;

        • 超出范围的部分全部隐藏

  • 字体相关属性

    • font-size:像素;

      • 设置字号

    • font-weight:可选值;

      • 设置文字是否加粗

      • 可选值normal，意思普通加粗

      • 可选值bold或bolder，意思为更粗

      • 可选值lighter，意思为变细

    • font-family:字体

      • 设置字体，如黑体，楷体等

    • font-style:italic/oblique

      • 设置字体是否倾斜

  • 背景图片相关属性

    • background-color

      • 设置背景颜色

    • background-image

      • 设置一张背景图片

        • 默认是平铺填满

    • background-image:宽度 高度

      • 设置背景图片的大小

    • backgound-repeat:no repeat;

      • 背景图片是否重复，不重复

    • background-position:关键字或px值

      • 设置背景图片的位置

    • background-attachment:fixed或scroll

      • 设置背景图片是否随着内容滚动

  • 其他相关属性设置

    • overflow:hidden/visible/scorll/auto

      • hidden隐藏超出范围的部分

      • visible超出部分正常显示，默认值

      • scorll超出部分滚动显示

      • auto根据内容自动显示或隐藏滚动条

    • list-style:none

      • 去除ul列表前面的符号，只保留文字部分

    • opacity：0-1

      • 设置透明度，值在0-1之间

    • 垂直居中

      • display：flex； align-items：center

  • css布局相关属性

    • 盒子模型（width/height/padding/margin/border/display属性），这种称之为文档流或者标准流。盒子的构成：内容+内边距+边框

      • display

        • 表示元素的显示方式

        • block表示块级元素，独占一行，高度默认由内容填充，可以设置宽高

        • inline行内元素，不独占一行，大小都由内容填充，无法设置宽高

        • display的几个值

          • inline

            • 将块级标签变为内联标签

          • block

            • 将内联标签变为块级标签

          • inline-block

            • 同时具备内联标签和块级标签的属性，就是不独占一行，可以设置宽度和高度

          • none

            • 设置标签隐藏

      • 内边距padding

        • 边框和内容之间的距离，可以设置四个方向，padding-top,left,right等，增加内边距只会增加盒子的大小，不会增加内容的大小，每个值的顺序是从上右下左

      • 边框border

        • 设置四周统一边框语法：border: 1px solid red;

        • border-radius

          • 设置圆角边框

          • 当设置值为50%时，可以作为圆形头像

      • 外边距margin

        • 表示一个盒子与另外一个盒子之间的的距离就是外边距

          • body{margin:0;padding:0} 去除所有默认间距

          • margin-left:5%; 距离左边的距离为父级标签宽度的5%.

          • margin-top:距离上面间距

          • margin：0 auto; 水平居中

        • 外边距注意事项

          • 两个元素的上下垂直，一个下边距，一个上边距，则margin会塌陷，而不会相加，只会取一个最大值。左右不会塌陷，会叠加。

          • 给子元素设置margin-top会直接作用到父元素

            • 解决办法，给父元素加border-top

            • 解决办法，给父元素加padding-top

    • 浮动float，脱离了标准了，所有的元素都能设置宽高，也都不独占一行了，不再受行内元素和块级元素的限制

      • float-right,向右浮动

      • float-left,向左浮动

      • 浮动的元素会按照指定的方向浮动布局，直到碰到它父元素的边界或者另一个浮动元素

      • 浮动的元素就像不存在一样

      • 清除浮动的方法

        • 1.给父元素添加height

        • 2.让浮动的子元素参与父元素的高度计算 然后再添加一个样式, .clearfix:after{ content='' display:block clear:both }

        • 给父级添加属性， .cc{ overflow:hidden }

    • 定位positon，绝对定位，相对定位，固定定位（绝对定位的元素脱离标准流）

      • static：静态定位，也就是标签默认，html文档的默认效果

      • relative: 相对定位,按照自己原来的位置进行移动

      • absolute: 绝对定位,按照父级标签或者祖先辈儿标签设置了相对定位的标签位置进行移动,如果没有找到相对定位标签,会找到整个文档的位置进行移动

      • fixed: 固定定位, 按照浏览器窗口的位置进行移动

1|4行为层：JS


代码引入的三种方式

  • 1.head标签的script标签里面(alert('xx'), confirm('xx'))

  • 2.body标签的script标签里面

  • 3.外部文件引入的方式来使用,在想使用这个js代码的html文件中,head标签或者body标签下面或者上面写下面的内容

定义变量

  • var a = 10;

    • 变量定义 var 变量名;

数据类型

  • number(整数和浮点数)

    • var a = 11; var b = 11.12;

      • 打印用console.log()

      • 查看类型 typeof a

    • 声明了变量但是没有赋值，查看类型的话是undefined

    • 转换

      • parseInt("1.2") 结果为1， 无论有多少位小数, 都只取整数部分, 不存在四舍五入

        • 将某值转换成数字，不成功则NaN

      • parseFloat("1.2")

        • 将某值转换成浮点数，不成功则NaN

    • 判断是否是非数字

      • NaN，非数字。可使用 isNaN(num) 来判断

        • 每个NaN都是不相同的

    • 判断是否是无穷大

      • Infinity，无穷大。可使用 isFinite(num) 来判断

  • string类型(字符串)

    • var s = 'abcde' var s = new String('xscvs'); 两种方法都可以，但是常用第一种

      • 索引取值

        • 字符串[索引下标]

      • 移除两端空格/左空格/右空格

        • 得到的都是一个新字符串，原字符串不改变

        • 字符串.trim()

        • 字符串.trimLeft()

        • 字符串.trimright()

      • charAt根据给定的索引取值

        • 字符串.charAt(索引下标)

      • substring(start,end),根据索引获取子序列,切片

        • 字符串.substring(start,end),end不取

      • 获取字符串长度

        • a.length

  • bool布尔类型(小写)

    • var a = true

    • var a = false

  • undefined和null类型

    • undefined

      • 变量声明了,但是没有赋值,此时这个变量是undefined类型

    • null

      • 变量不用了,就可以给变量赋值为null,--- object类型

  • 数组array

    • var a = [11,22,33]

      • 索引下标取值

        • 变量a[索引下标]

      • 尾部追加元素push

        • 变量a.push(值)

      • 尾部移除元素pop

        • 变量a.pop(值)

      • 头部插入元素unshift

        • 变量a.unshift(值)

      • 头部移除元素shift

        • 变量a.shift(值)

      • 在指定索引位插入元素splice

        • a.splice(index,删的个数,值)

          • a.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))

      • 切片slice

        • a.slice(start,end)

      • 原数组反转reverse

        • a.reverse()

      • 数组拼接join

        • a.join(值)

          • a.join("+") 用+号来拼接数组

      • 数组连接/合并concat

        • a.concat()

          • a.concat(b) b也是一个数组，将两个数组合拼成一个

      • 数组排序sort

        • 排序需要自己定义一个函数，才能正常排序 function func(a,b){ return a - b;当大于0时，互换位置从小到大排序 return b-a; 从大到小排序 }；

使用：a.sort(func)

  • 自定义对象(dict)

    • var a = {name:'liuwei',age:25}; 自定义对象时，键可以不用加引号

      • 类型是object类型

      • 通过键取值

        • a["name"] 通过键取值时，键一定要加引号

        • a.name

      • 修改值

        • a["name"] = 'xiaobai'

      • 新增键值对

        • a["sex"] = 'boy'

      • 删除键值对

        • delete a["sex"]

          • 返回true

  • 比较

    • == 比较值相等 弱等于 != 不等于 弱不等于 === 比较值和类型相等强等于 !== 不等于 强不等于 || 或 && 且

      • var a = '1'; var b = 1; a == b; true 弱等于 a === b ; false 强等于

条件判断

  • if (){

}else if{

}else{

};

 - 语法：
复制代码
var a= 88
 if(a<77){ 
console.log("小了"); 
}else if(a>88){
 console.log("大了"); }
else{
 console.log("猜对了"); };

switch(){
 case....:
 ....... break;
 case ....: 
.... break; 
......... } 用来判断等于某些值,每个 每个case后面都要跟一个break

var num = 10 
switch(num){ 
case 5: 
console.log("小了"); 
break; 
case 9:
 console.log("差点"); 
break; 
case 10: 
console.log("猜对了");
 break; 
case 12: 
console.log("大了"); 
break; 
case 20:
 console.log("太大了");
 break; } ;
复制代码

 

循环for

  • var a = [11,22,33,44,55] for(var b in a){ console.log(b,a[b]); }; for循环获取的都是索引

  • 自定义索引并设置增加步长，适用于：字符串、元组。（字典索引非有序）

    • for(var i=0;i<10;i++){ console.log(i) };

      • 执行顺序，是先执行前面的 i = 0 和 i <10; 第一次执行打印0 第二次再执行i++ 然后执行打印1

异常处理

  • try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 var name = '' } catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 } finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 }

函数

  • 普通函数

    • function func(arg){ return arg + 1; };

调用： func(1)

  • 匿名函数（没有函数名） 一般用于当做参数使用， 例如：设置定时器 setInterval(function(){},1000)

    • function (arg){ return arg + 1; }

  • 自执行函数

    • (function(arg){ console.log(arg); })('wupeiqi')

1|5Js操作BOM对象


js操作浏览器对象模型

  • 弹框

    • alert("你吃了吗今天")

      • 无返回值

    • confirm("今天你吃了吗")

      • 有返回值 页面点击确定返回值为true 页面点击取消返回值为false

  • location对象

    • location.href

      • 获取当前页面的地址

    • location.href="http://www.baidu.com"

      • 跳转网址

    • location.reload()

      • 刷新当前页面

  • 计时器

    • 1.一段时间之后执行某个任务

      • 设置： var t = setTimeout(function(){ confirm("你今天吃了吗") },5000); 5000表示秒数,意思是5000秒后执行弹框

      • 返回值

        • 会返回一个浏览器记录计时器的标识数字

      • 清除

        • clearTimeout(返回值) 参数为之前返回的返回值

    • 2.每隔一段时间执行某个任务

      • 设置： var t = setIntervar(function(){ confirm("你吃了吗今天"); },1000)

      • 返回值

        • 会返回一个浏览器记录计时器的标识数字

      • 清除

        • clearIntervar(返回值) 参数为之前的返回值

1|6JS操作DOM对象


HTML文档(.html文件)

查找选择器

  • 按标签名查找

    • var t = document. ElementsByTagName("标签")

    • 返回值： 有多个会返回一个数组 需要根据for循环来取对应的标签对象 记住for循环永远取的都是索引

  • 按id值查找

    • var t = document.ElementById("id值")

    • 返回值： 返回一个标签对象

  • 按类值查找

    • var t = document.ElementsByClassName("类值")

    • 返回值： 有多个会返回一个数组 需要根据for循环来取对应的标签对象 记住for循环永远取的都是索引

      • for (var i=0;i<t.length;i++){ console.log(i,t[i]); };

  • 按name值查找

    • getElementsByName()

    • 返回带有指定名称的对象的集合

间接查找选择器

  • 找下一个兄弟标签

    • 先根据类获取到对应的标签对象 var a = document.getElementsByClassName('c1')["0"] 然后拿获取到的标签对象找到下一个兄弟标签并改变其字体颜色 a.nextElementSibling.style.color = 'aqua';

  • 找上一个兄弟标签

    • 先根据类获取到对应的标签对象 var a = document.getElementsByClassName('c1')["0"] 然后拿获取到的标签对应找上一个兄弟标签 var b = a.previousElementSibling;

  • 找第一个儿子标签

    • 先根据类获取到对应的标签对象 var a = document.getElementsByClassName('c1')["0"] 拿获取到的对象找第一个儿子标签 a.firstElementChild;

  • 找最后一个儿子标签

    • 先根据类获取到对应的标签对象 var a = document.getElementsByClassName('c1')["0"] 拿获取到的对象找最后一个儿子标签 a.lastElementChild

  • 找所有儿子标签

    • 返回值是一个数组

      • 先根据类获取到对应的标签对象 var a = document.getElementsByClassName('c1')["0"] 拿获取到的对象找最后一个儿子标签 a.children 获取对应的标签可以使用for循环数组 for (i=0;i<(a.children).length;i++){ console.log(i,a.children[i]); };

  • 找到自己的父级标签

    • 先根据类获取到对应的标签对象 var a = document.getElementsByClassName('c1')["0"] 拿获取到的对象找自己的父级标签 a.parentElement

文本操作

  • innerText

    • 获取文本内容

      • var a = document.getElementById("d3"); a.innerText

    • 设置文本

      • a.innerText='你是校花吗'

      • a.innerText = '校花'; 不能解析标签，只会把内容当成文本显示

  • innerHTML

    • 获取文本

      • a.innerHTML 获取的内容包含标签

    • 设置文本

      • a.innerHTML='校花'; 能够识别标签,生成标签效果

value值操作

input标签

  • 获取值

    • 先用input标签的id值获取标签对象 var a = document.getElementById("username"); 获取输入框值，没有就为空（“”） a.value;

  • 设置值

    • 先用input标签的id值获取标签对象 var a = document.getElementById("username"); 设置输入框的值 a.value=“你吃了吗今天”

class类值操作

  • 获取标签类值

    • var a = document.ElementById("d3"); a.classList;

  • 添加类值

    • a.classList.add("c3");

  • 移除类值

    • a.classList.remove("cc3")

  • 有就删除,没有就添加

    • a.classList.toggle("c3");

    • 有返回值，成功添加返回true 删除返回false

      • 例子：动态添加或删除类值,让颜色变换 需要先定义一个cc3样式，然后再执行定时器动态删除添加 var b = setInterval( function(){ a.classList.toggle("cc3"); },1000 );

style样式操作

  • 设置样式

    • var a = document.getElementById("d3"); a.style.color = 'green';

    • var a = document.getElementById("d3"); a.style.backgroundColor = 'pink'; 当css属性名称有-的时候，需要去掉-， 并且后面单词的首字母大写

label标签补充

  • 两种方式写法效果都会触发 点击文字输入框光标会显示

    • <label >用户名: <input type="text" name="username" id="username"> </label>

    • <label for="password">密码: </label> <input type="password" name="password" id="password">

botton按钮补充

  • 作为普通按钮，没有提交效果

  • input标签type为button
  • button标签type为button

  • 在form表单中，button按钮标签 type类型为submit时，有提交数据效果

  • button标签type为submit

  • form表单外，都为普通按钮

日期对象

  • 获取当前时间日期对象

    • var timer = new Date()

  • 将日期时间对象转换为国人 看的懂的时间日期字符串

    • timer.toLocaleString()

  • 获取日期中的日

    • timer.getDate()

  • 获取当前日期对应的星期 数字表示（0-6) 周日数字是0

    • timer.getDay()

  • 获取月（0-11,0表示1月,依次类推）

    • timer.getMonth()

  • 获取完整年份

    • timer.getFullYear()

  • 获取小时 1个多小时也按1小时算

    • timer.getHours()

  • 获取分钟

    • timer.getMinutes()

  • 获取秒

    • timer.getSeconds()

  • 获取毫秒

    • timer.getMilliseconds()

  • 返回累计毫秒数

    • timer.getTime()

事件

  • DOM中可以为标签设置事件，给 指定标签绑定事件之后，只要对 应事件被处罚，就会执行对应代码。

    • 单击触发事件

      • onclick

    • 双击触发事件

      • ondblclick

    • 内容修改时触发事件

      • onchange

        • 例子

          复制代码
          <script> 
//1.找到select标签，绑定change事件 
var s1 = document.getElementById('hobby');
 s1.onchange = function(){
 //console.log(this);是当前select标签对象 //console.log(this.selectedIndex);
选中select标签下面的option标签的索引值 //console.log(this.options);select标签下面的所有option标签 console.log(this.options[this.selectedIndex]); 
//根据标签索引获取对应值 
var option_text = this.options[this.selectedIndex].innerText; 
var d1 = document.getElementById('d1');
 d1.innerText = option_text; }
</script>
          复制代码

           

    • 获取焦点时触发事件

      • onfocus

        复制代码
        //input标签如果绑定change事件，只有在光标或者叫作焦点离开时才会认为是 
//域内容发生了变化，才会触发change事件
var inp = document.getElementById('username'); 
inp.onchange = function(){ 
console.log(this.value); } 
//获得光标或者说焦点触发事件 var inp = document.getElementById('username');
 inp.onfocus = function () { 
this.style.backgroundColor = 'red'; } 
//失去光标或者说焦点触发的时间 
inp.onblur = function () { this.style.backgroundColor = 'yellow'; }
        复制代码

         

         

    • 失去焦点触发事件

      • onblur

  • 绑定事件的两种方式

    • 方式1

    • 复制代码
      <script>
function changeColor(ts){
   ts.style.backgroundColor = 'pink';
   ts.nextElementSibling.style.backgroundColor = 'black';
}
</script>
      复制代码
  - 首先直接在div上面写绑定事件
 

onclick="changeColor(this)" changeColor是自定义的函数名 括号里面的参数this就是这个事件对象，不能换别的 js代码中自定义的函数需要接收这个对象，可以随便写一个变量接收。 下面设置样式的时候直接拿变量操作就可以

- 方式2：<script>
    var a = document.getElementById('d2');
    a.onclick = function(){
        this.style.backgroundColor = 'pink';
        this.previousElementSibling.style.backgroundColor ='blue';
    }
</script> //this就表示当前绑定事件对象
//this就表示当前绑定事件对象
​

创建标签

  • document.createElement(标签名)

  • d1.appendChild(标签)；给某个标签添加元素（内部尾部追加）

    复制代码
    <script>
    var btn = document.getElementById('btn');
    var d1 = document.getElementById('d1');
    btn.onclick = function(){
        //清空标签
        d1.innerText='';
        //1.创建a标签
        var ale = document.createElement('a');//创建标签
        ale.href = 'http://www.baidu.com'; //添加属性
        //img.src = '图片路径'
        ale.innerText ='百度';
        d1.appendChild(ale);//给某个标签添加元素（内部尾部追加）
    }
</script>
    复制代码

     

补充标签对象.checked

  • 标签对象.checked` 可以对选中状态进行读取和设置

1|7web标准主要构成三方面


结构层

结构层：指的是就是html,只用网页标签对代码里的普通文本进行标准，不同的标签显示不同的含义，从而构建整个html文档结构

表现层

指的是css，使用css样式来控制HTML标签，例如设置标签的版式，颜色，大小等外观，让整个HTML界面变得更加美观，便于欣赏

行为层

指的是javascript，简称js，使用html标签可以搭建一个网页的结构，使用css可以将html文档里的结构更加的美观，但是此时的网页是一个完全静态的，无法实现和用户的交互，使用js可以实现页面和用户的交互

1|8结构层：HTML属性


全局属性：所有标签都能设置的属性

  • class

  • id

  • title

标签属性：每个标签特有的属性

1|9label标签，可以用来跟某些标签绑定，用label标签中的for属性和其他标签中的id属性绑定，表示点击label标签中的文本可以自动关联绑定的id属性的标签。例如跟input标签中单选框绑定后，页面点击label标签的文本信息可以自动选中单选框


 


__EOF__

本文作者：404 Not Found
本文链接：https://www.cnblogs.com/weiweivip666/p/13254740.html
关于博主：可能又在睡觉
版权声明：转载请注明出处
声援博主：如果看到我睡觉请喊我去学习
posted @   我在路上回头看  阅读(126)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae