<input type=“text” name=“username”
value=“lalala”
placeholder=“用户名”
maxlength=“10”
readonly=“readonly”>
性别:
<input type=“radio” name=“gender” id=“nan”
value=“nan”>
<input type=“radio” name=“gender” id=“nv”
value=“nv”>
<input checked=“checked” type=“radio” name=“gender” id=“qt”
value=“qt”>
爱好：
<input checked=“checked” type=“checkbox” name=“hobby” id=“lq”
value=“lq”>
<input type=“checkbox” name=“hobby” id=“wz”
value=“wz”>
<input checked=“checked” type=“checkbox” name=“hobby” id=“ldm”
value=“ldm”>
生日：
靓照:
个人介绍：
这家伙很懒。。。什么都没留下!出生地：
请选择 北京 上海 广州<input type=“hidden”
name=“id” value=“234234”>
input的使用:
-提交按钮submit:
-自定义按钮button:
-重置按钮reset: 清空内容使用
-复选按钮chekbox:
-禁用文本框:disabled=“disabled”
文本框是不能输入内容的，显示 被禁用了。
-文本框显示内容placeholder: 文本框显示姓名内容 输入内容时 姓名自动消失
最大值：maxlength=“10”
自动登陆(复选框后面跟自定义命名)
-距离加宽不限制于按钮label: 不添加label只能在自动登陆前面复选框里打勾，填了后点击文字也可以打勾 （一般和复选按钮混合使用) 例：
-文本框内文字显示placeholder: text是文本显示 password是用于密码 显示内容为****
###CSS 层叠样式表
-
用于给页面中的元素添加显示样式
-
三种引入方式：
-
- 内联样式：在元素内部通过style属性添加样式，不能复用，只能作用于一个元素
<div style="border: 1px solid red">马上中秋节放假</div>
-
- 内部样式：在head标签内部添加style标签，在标签内部通过选择器找到页面中的元素，并添加样式，好处可以在页面内部复用，弊端：只能在当前页面复用
-
- 外部样式：在单独的css文件中写样式代码 在head里面通过link标签引入
<link rel="stylesheet" href="first.css">
first是css的文件名，
———————————————————————————————————
###CSS
-
Cascading(层叠) Style（样式）Sheet(表)，层叠样式表 用于美化页面。
-
引入CSS的三种方式：
-
内联样式： 在元素中添加style属性添加样式，只能作用于当前元素，不能复用
-
内部样式： 在head标签中添加style标签，可以在当前页面复用，不能多页面复用
-
外部样式： 在单独的css文件中写样式代码 在head中添加 link标签引入css文件，可以多个页面复用
- 三种引入方式的优先级
-
内联优先级最高
-
内部和外部优先级一样，后执行的覆盖前面执行的
###选择器
- 通过选择器可以灵活的选中页面中的某些元素，选中后给元素添加样式
-
标签名选择器 格式： 标签名{样式代码}
-
id选择器 格式： #id{样式代码}
-
类选择器 格式： .class{样式代码}
- 练习：创建demo04 在页面中 添加5个div 让第1，3，5个背景颜色为绿色，让第4个添加紫色边框，让所有的div字体红色
-
任意元素选择器 格式： *{样式代码} 优先级较低因为作用范围大
-
属性选择器 格式： 标签名[属性名=‘属性值’]
-
子孙元素选择器
-
子元素选择器
-
分组选择器
如果需要对页面中多种不相关的元素设置相同的效果，此时一个选择器如果选择不到的话可以使用分组选择器把多个选择器合并到一起
-格式： .class,#id,h3{样式代码}
- 伪类选择器 用于选择元素的状态
/*a 是超链接 直接{}加颜色
-
未访问状态 a:link{ color:red; }
-
访问过状态 a:visited{color:yellow;}
-
鼠标悬停状态 a:hover{color:blue;}
-
鼠标点击时状态 a:active{color:green;}
####选择器回顾：
标签名选择器 标签名{}
id选择器 #id{}
类选择器 .class{}
子孙选择器 div span a{}
子元素选择器 div>span>a{}
任意元素选择器 *{}
分组选择器 #id,.class,标签名{}
属性选择器 input[type=‘password’]{}
伪类选择器 未访问a:link 访问过 a:visited 悬停 a:hover 点击时 a:active
####常用样式属性
-
color 字体颜色
-
border 边框
-
background-color 背景颜色
#####颜色的赋值方式
-
通过颜色名称赋值 red blue pink yellow green …
-
通过6位的16进制赋值 ，每两位表示一个颜色每个颜色的取值为0-255 三原色 rgb redgreenblue红绿蓝（了解）
举例：红色 #ff0000 蓝色 #0000ff 绿色 #00ff00
黄色 #ffff00 黑色 #000000 白色 #ffffff
-
通过3位的16进制赋值 #0f0 等效 #00ff00
-
通过三位10进制赋值 rgb(0-255,0-255,0-255); 红色 rgb(255,0,0);
-
通过四位10进制赋值 alpha：透明度 rgba(0-255,0-255,0-255,0-1); 透明度值越小越透明 background-color: rgba(255,0,0,0.2)
#####设置背景图片
/设置图片/
background-image:url(“…/imgs/a.jpg”)
控制属性背景图片的平铺效果:
background-repeat:repeat;
-repeat; 在垂直方向和水平方向重复，为重复值
-repeat-x; 仅在水平方向重复
· -repeat-y；仅在垂直方向重复
· -no-repeat；仅显示一次
/* 设置元素的宽高 _/
width: 500px;
height: 500px;
background-color: yellow;
/_ 设置背景图片 _/
background-image: url(“…/imgs/k.jpg”);
/_ 设置背景图片的尺寸
如果图片尺寸小于元素的尺寸
则会自动重复平铺 _/
background-size: 300px 300px;
/_ 禁止重复 _/
background-repeat: no-repeat;
/_ 控制背景图片的位置
1.横向位置 left/center/right左中右
2.纵向位置 top/center/bottom上中下
可以实现9宫格的9个位置
_/
/_ background-position: center center; _/
/_ 通过百分比控制位置
第一个参数0代表左边缘 100%代表右边缘
第二个参数0代表上边缘 100%代表下边缘
_/
background-position: 80% 80%;
####练习 创建demo10 页面中添加三个div 第一个div尺寸300_300 设置背景图片正好填充，要求图片全部显示，第二个div尺寸500_500，背景颜色为红色 背景图片尺寸100_100 要求图片只显示一张显示在正中间，第三个div尺寸200_200背景绿色 图片100_100显示在div的左下角的位置（要求使用百分比方式控制位置）
———————————————————————————————————
###布局相关的样式
####盒子模型
- 盒子模型包括元素的宽高，外边距，内边距和边框。
#####元素的宽高
-
width/height 通过该属性设置元素的宽高
-
只能对块级元素设置宽高，行内元素的宽高只能受内容影响
#####外边距
-
指元素距离上级元素边框或相邻兄弟元素边框
-
如何设置外边距：
/* 给某个方向外边距单独赋值 */
/* margin-top: 20px; 上
margin-left: 20px; 右
margin-bottom: 10px; 下
margin-right: 20px; */ 左
/* 批量赋值外边距 */
/* margin: 30px; // 四个方向全是30 */
/* margin: 10px 30px; // 上下10 左右30 */
/* margin: 0 auto; // 水平居中 */
margin: 10px 20px 30px 40px;/* 上右下左 */
-
如果元素的上边缘和上级元素的上边缘重叠此时添加上外边距会出现粘连效果，通过给上级元素添加overflow:hidden解决
-
如果上下相邻两元素同时添加了下外边距和上外边距，取最大值。
####行内元素外边距相关
-
行内元素左右外边距生效，上下不生效
-
左右相邻两个元素 同时存在右外边距和左外边距时取两个值相加之和
上下取最大，左右相加
#####边框
/1.粗细 2.样式 3.颜色/
/border: 19px solid blue;实线/
/border: 10px dashed read;虚线/
/border: 10px groove green;凹槽线/
/border: 10px inset yellow;嵌入式线/
/* 单独给元素的某一个方向添加边框 _/
border-top: 12px solid green; 上
border-left: 12px solid blue; 右
border-bottom: 12px solid pink; 下
border-right: 12px solid yellow; 左
/_ 值越大越圆 */
border-radius: 4px;
-
块级元素：四个边加边框全部生效并且全部影响元素所占宽高
-
行内元素：四个边加边框全部生效 ，但是左右边框会影响元素所占宽度上下边框不影响元素所占高度
#####内边距
- 什么是内边距：元素边框距内容的距离
/* 内边距会影响元素的宽高 _/
/_ padding-left: 20px;
padding-top: 20px; _/
padding: 10px; /_ 四个边的内边距都是10px _/
padding: 10px 20px; /_ 上下10 左右20 _/
padding: 10px 20px 30px 40px; /_ 上右下左 */
-
块级元素：内边距全部生效并且会影响元素的所占宽高
-
行内元素：内边距全部生效但是左右内边距会影响元素所占宽度上下内边距不影响元素所占高度
#####块级元素和行内元素关于盒子模型的总结
-
块级元素：可以设置宽高，外边距全部生效，边框全部生效并且全部影响宽高，内边距全部生效并且全部影响宽高
-
行内元素：不可以设置宽高，外边距左右生效上下不生效，边框全部生效但是左右影响宽，上下不影响高，内边距全部生效但是左右影响宽上下不影响高
####文本相关属性
/* 文本对齐方式 left/center/right 左中右*/
text-align: center;
/* 文本修饰
underline下划线
overline上划线
line-through删除线
none 无
删除线使用
text-decoration: line-through;*/
/*去掉ul的点
ul{list-style:none;*/
/*去掉超链接的下划线 指向a
text-decoration: none;*/
/* 文本颜色 */
color: green;
/* 文本阴影
1 阴影颜色
2和3 代表阴影偏移坐标
4 阴影模糊程度值越大越模糊
*/
text-shadow: red 5px 5px 5px;
/* 行高 用于实现上下居中 */
line-height: 50px;
####字体相关属性
/* 字体大小 单位像素*/
font-size: 10px;
/* 字体粗细 bold加粗
normal 默认效果 */
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 字体名称 可以赋值多个 依次检测
哪个可用用哪个 */
font-family: Microsoft YaHei, Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
###课程回顾：
-
盒子模型： 外边距 内边距 边框 宽高
-
宽度计算公式：左外边距+左边框+左内边距+宽度+右内边距+右边框+右外边距
####学子商城首页练习：
-
段落标签p自带上下外边距，如果不需要可以设置成margin：0;
-
display：block;是把行内元素改成块级元素
-
float:left/right; 浮动元素 明天会细讲
####溢出设置 overflow
-
超出范围隐藏 overflow:hidden;
-
超出范围显示 overflow:visible;
-
超出范围滚动显示 overflow:scroll;
4.解决粘连问题:
####显示方式 display
-
block：块级元素的默认值，可以设置宽高 盒子模型相关没有任何限制，但是元素必须独占一行
-
inline: 行内元素的默认值，可以和多个行内元素共占一行，不能修改宽高，而且盒子模型相关的上下(外边距，内边距，边框)不能赋值或没有效果
-
inline-block: 行内块，可以修改宽高 也可以共占一行
———————————————————————————————————
浮动:float: left;左浮动 float:right; 右浮动
###定位
####position定位
#####文档流定位（静态定位）
-
默认是文档流定位 元素如果是文档流定位则显示的位置会从上到下 从左向右排列
-
设置方式： position:static；
#####相对定位
-
相对定位元素不会脱离文档流，不影响其它元素的位置，相对定位通过上右下左让元素相对于元素初始位置做偏移
-
设置方式： position：relative；
直接top,right,left,bottom上右左下调位置 left:10px;(右移用左，下移用上)
-
应用场景：存在于页面中的元素如果需要做位置移动，但是不希望页面中的其它元素跟着移动，此时使用相对定位
-
总结：不脱离文档流，相对于初始位置
#####绝对定位
-
元素脱离文档流，后面的元素会往上顶，上下左右的值相对于窗口或相对于做了非static定位(推荐相对定位)的祖先元素，如果多个祖先元素做了相对定位则就近原则。
-
设置方式： position：absolute；
直接top,right,left,bottom上右左下调位置 top:10px;(右移用左，下移用上)
-
应用场景：当元素需要层叠显示并且不希望元素存在于文档流中时使用
-
总结： 脱离文档流，相对于窗口或相对定位的祖先元素
#####固定定位
-
元素固定在窗口的某个位置，不会因为内容位置的改变改变自身位置
-
设置方式： position:fixed;
-
总结：脱离文档流，相对于窗口
####浮动定位
元素脱离文档流，元素可以在当前所在行左侧或右侧浮动，当撞到父元素边框或行内其他浮动元素时停止
-
如果一行浮动元素装不下会自动换行，换行时有可能会被卡住
-
如果元素上面的元素浮动了则元素会往上顶，如果不希望元素往上顶可以设置元素两侧不允许有浮动 clear:both
-
当元素的所有子元素全部浮动时此时自动识别的高度为0，
通过overflow：hidden解决
- 应用场景：把纵向排列的元素改成横向时使用
####行内元素的垂直对齐方式
vertical-align:默认baseline/top/middle/bottom
###CSS的三大特性
- 继承性：子元素可以继承祖先元素中的部分样式，只能继承color/font-开头/text-开头的属性
- 有个别标签自带效果，不能继承自带效果的样式 比如： 超链接，h1-h6
-
层叠性：通过不同的选择器可以多次指向同一个元素 如果设置的属性不一样则所有的效果全部生效,如果作用相同的属性 则根据选择器的优先级决定
-
优先级：当多个选择器选择同一个元素并且设置相同的属性时会根据以下规则
-
直接选中优先级高于间接选中(继承)
-
如果是相同选择器：后执行的覆盖前面执行的
-
如果是不同选择器：根据选择器的作用范围决定优先级，范围(id<class<标签名<继承<元素默认样式)越小优先级越高 (id>class>标签名>继承>元素默认样式 )
———————————————————————————————————
###JavaScript 简称JS
-
用于给页面添加动态效果或动态内容的
-
JS历史：1995年由网景(NetScape)公司发布 LiveScript 同年改名为JavaScript，和Java没有关系，为了蹭热度。
-
语音特点： 属于脚本语言不需要编译，由浏览器解析执行，JavaScript可以嵌套在html中 ，基于面向对象，弱类型的语言, 交互性：可以用户直接交换，安全性：该语言只能访问浏览器里面的内容
###如何在html页面中引入JavaScript
- 在元素的事件属性中，如按钮的点击事件
<input type=“button” value=“点我试试！”
οnclick=“alert(‘试试就试试！’)”>
- 在script标签中写js代表 script标签可以写在页面的任何位置 推荐写在head里面
- 在单独的js文件中写js代码 通过script标签中的src属性引入，引入过文件的script标签不能在标签体中 继续写js代码
###JavaScript语法
数据类型，变量，运算符，语句，方法（函数）
####数据类型
- 数值类型(number)
NaN (Not a Number) isNaN(18)= false isNaN(“abc”)=true
-
字符串类型(string)
-
布尔值类型(boolean)
-
未定义类型(undefined)
-
对象类型(object)
####变量的声明和赋值
var x = 18; //类型为number 值 18
var name = “张三”; //类型string 值 张三
var b = true/false; //类型Boolean 值 true/false
var y; //类型是undefined 值 undefined
var p = new Person();
####数据类型之间的隐式转换
- js中数据类型会根据不同的场景进行自动类型转换
- 数值类型
-
转字符串： 直接转 18->“18” “abc”+18 = “abc18” （只有加法会把数值转字符串）
-
转布尔值: 0和NaN转false 非0即真(true)
- 字符串类型
-
转数值: 能转直接转 不能转则转成NaN； （NaN和任何数值进行任何运算结果都是NaN） “35”->35 “abc”->NaN
-
转布尔值: 只有空字符串(“”) 转false 其它true “”->false, “a”->true
- 布尔值类型
-
转数值： true=1 false=0 30+true=31 30+false=30
-
转字符串： 直接转 “abc”+true = “abctrue”
- undefined类型
-
转数值： NaN
-
转字符串： “undefined”
-
转布尔值： false
- null
-
转数值：0 28+null=28
-
转字符串： “null” “abc”+null = “abcnull”
-
转布尔值： false
###运算符
-
JS语言中的运算符和Java中大致相同
-
和，==会先将等号两端的类型统一然后再比较值，===先判断类型是否相等如果不等则直接false如果相等再比较值是否相等
-
typeof typeof 66+6 =“number6”
-
两数相除 结果会自动生成整数或小数 5/2=2.5 4/2=2
###语句 if else while do while for switch case
-
JS语言中的语句和Java中大致相同
-
- 语句中写条件的括号中如果不是布尔值类型会自动转成布尔值
-
- for循环中 int i 改成 var i 不支持增强for循环（foreach)
###函数(方法)声明
Java中声明函数的写法
public String run(int age,String name){
return “abc”;
}
- JS中写法
function run(age,name){
return “abc”;
}
-
格式一： function 方法名(参数列表){ return xxx; }
-
格式二： var 方法名 = function(参数列表){ return xxx; }
###和页面相关的函数
- 通过id得到页面中元素的函数
var input = document.getElementById(“myinput”);
- 从文本框中获取内容和设置内容
input.value = “abc”;
alert(input.value);
- 给div设置文本内容
d.innerText=“abc”;
- 给div设置html内容
d.innerHTML+= “
abc
”;———————————————————————————————————
String 数组 日期对象 正则
###String相关内容
- 创建字符串的两种方式
var s1 = “abc”; //单引号和双引号都可以
var s2 = new String(“abc”);
- 把字符串转成数值
parseInt(str)//把字符串转成整数，还可以把小数转成整数
parseFloat(str)//把字符串转成小数
Number(str)//等效parseFloat
- 字符串转大小写
str.toUpperCase()//转大写 str.toLowerCase()//转小写
- 获取字符串出现的位置 从0开始
var str = “abcdefgem”;
-从前面找
str.indexOf(“e”);
-从后面找
str.lastIndexOf(“e”);
- 截取字符串 从0开始
str.substring(start,[end]);
- 替换字符串
str.replace(old,new);
color
var x = “
”;x.replace(“[c]”,color);
- 拆分字符串
str.split(“.”); //返回值是个数组
####数值相关：四舍五入
18.23456.toFixed(4); // 18.2346
###数组相关
- 创建数组 数组内部可以添加任意类型的数据
var arr1 = [“小明”,18,true];
var arr2 = new Array();
- 往数组中添加内容
arr2.push(“张学友”);
arr2.push(28);
arr2.push(true);
- 修改数组的长度
arr1.length = 2;
- 遍历数组
for(var i=0;i<arr1.length;i++){
alert(arr1[i]);
}
- 数组反转
arr.reverse();
- 数组排序 默认排序方式是以字符串的形式进行排序 排序规则是通过Unicode编码进行排序
arr.sort();
- 自定义排序：
//自定义排序需要准备一个自定义的排序方法
function sortfn(a,b){
return a-b;//升序
//return b-a;//降序
}
alert(arr.sort(sortfn));
###日期相关函数
- 服务器时间和客户端时间
- 获取客户端时间
var d1 = new Date();
- 2018/9/30 14:35:32 把字符串时间转成时间对象
var d2 = new Date(“2018/9/30 14:35:32”);
- 从时间对象中获取和设置时间戳（距离1970年1月1日 08：00：00）
d2.getTime();
d2.setTime(1000); 1970/1/1 08:00:01
- 获取时间分量 单独的年 月 日 时 分 秒 星期几
d1.getFullYear();
d1.getMonth();//从0开始
d1.getDate();
d1.getDay();//星期
d1.getHours();
d1.getMinutes();
d1.getSeconds();
- 获取年月日 获取时分秒
d1.toLocaleTimeString();
d1.toLocaleDateString();
###正则表达式
. :匹配任意字符除了换行
\w:匹配任意数字、字母、下划线
\d:匹配任意数字
\s:匹配空白
^: 开头
$: 结尾
- 应用场景：1. 查找内容 2. 校验文本
//第一种创建方式：第一个/代表的是规则
//第二个参数表示模式
//（i:忽略大小写 g:全局查找）
var reg1 = /^a/i; //以a开头 忽略大小写
//以m结尾
reg1 = /m$/;
//包含两个数字
reg1 = /\d{2}/;
//以3个数字开头
reg1 = /^\d{3}/;
//以y开头m结尾中间包含5位数字
reg1 = /^y\d{5}m$/;
//6-10位数字字母下划线
reg1 = /^\w{6,10}$/;
//第二种创建方式第一个参数是格式，第二个是模式
//第二个参数如果没有值可以省略
var reg2 = new RegExp(“^\w{6,10}$”);
//和正则相关的方法
//1. 查找内容
var str = “you can you up no can no b b”;
var reg = /no/g;
//查找内容 如果全局查找 每执行一次查找一个
//执行第二次查找下一个 找不到时得到null
//alert(reg.exec(str));//no
//alert(reg.exec(str));//no
//alert(reg.exec(str));//null
//2. 校验方法
//reg = /^You/i;
//alert(reg.test(str));
//字符串和正则相关的方法
//3. 查找内容 一次性得到所有查找内容
//var arr = str.match(reg);
//alert(arr);
//4. 查找替换 替换所有
alert(str.replace(reg,“bu”));
———————————————————————————————————
###事件取消
-在事件属性中如果直接return false 则会把当前事件取消掉
###DHTML
-Dynamic(动态) HTML，着并不是一个新的技术 只是HTML+CSS+JS得到的一个
动态页面称为DHTML
-BOM：Browser(浏览器) Object(对象) Model(模型) ，包含浏览器相关的各种对象
-DOM：Document(文档) Object(对象) Model(模型)，包含和页面相关的各种对象
###BOM 浏览器对象模型
###window(窗口)
- window里面的属性和方法称为全局属性或全局方法，调用时可以省略掉 window.
-window下常用的属性和函数
parseInt()和paseFloat()
alert() 弹出框
confirm() 确认框
prompt() 弹出文本框
isNaN()
-location:位置
-href 获取和设置浏览器访问的地址
-reload() 页面重新加载（刷新）
history：历史
-次历史代表的是当前窗口的历史
-history.length获取当前窗口访问的页面数量
-history.back()返回上一页面
-history.forward()前往下一页面
-history.go(num) 前往某个页面 0代表当前页面 1代表下一个页面 -1代表上一个页面 2代表下两个页面
screen ：屏幕
-screen.width/height 屏幕宽高
-screen.availWidth/availHeight 屏幕可用宽度
navigator 导航/帮助
-navigator.userAgent 得到浏览器的版本信息
###和window相关的事件
onclick onblur onsubmit
-onclick:点击事件， 当点击页面内的任何位置的时候触发
<a href=“http://www.tmooc.cn”
οnclick=“return confirm(‘您确认离开吗？’)”>OO
οnclick=function(){
alert(“点击了窗口！”);
}
-onload: 加载完成事件，当页面加载完成的时候执行
onload = function(){
i1.value=“abc”;
}
-onfocus:获取焦点事件，当页面处于激活状态的时候执行
onfocus = function(){
console.log(“获取焦点”);
}
-onblur:失去焦点事件，当页面切换到非激活状态的时候执行
onblur = function(){
console.log(“失去焦点”)
}
####eval()方法(函数)
-可以将传递到方法中的字符串参数以js代码的形式执行
####高级版计算器
-按钮边框不影响显示范围
-文本框边框影响显示范围
###通过js给元素添加样式
-获取和设置的样式为内联样式，不能获取非内联样式的值
###定时器
-setInterval(函数，时间间隔);
/每隔2秒执行函数体的内容/
setInterval(function(){
//console.log(x++);
x+=10;
i1.style.marginLeft=x+“px”;
},2000);/2000是2秒/
###假轮播图作业：
//通过元素名称获取元素对象 得到一个数组
-var arr = document.getElementsByTagName(“img”);
//让元素对象隐藏
-display:“none”;
//让元素对象显示
-display:“block”;
function myfn(div){
//通过div 得到里面的img图片
var img = div.getElementsByTagName(“img”)[0];
//alert(img);
//判断图片当前是否是隐藏状态
if(img.style.display==“none”){//隐藏
img.style.display=“block”;//让图片显示
}else{
img.style.display=“none”;//让图片隐藏
}
}
———————————————————————————————————
###定时器
-通过定时器可以实现每隔一段事件执行某段代码
-开启定时器：
var timeID = setInterval(函数，时间间隔)
-停止定时器
clearInterval(timeID);
-setTimeout(函数，时间);//这种方式只会执行一次
###DOM Document Object Model
-文档对象模型 ，学习DOM 主要学习的就是对页面中标签的增删改查操作
###查找元素
-通过id查找
var input = document.getElementById(“id”);
-通过标签名查找
var arr = document.getElementsByTagName(“标签名”)[0];
-通过标签的name属性查找
var arr = document.getElementsByName(“name属性的值”)[0];
-通过标签的class属性查找
var arr = document.getElementsByClassName(“class属性的值”)[0];
-获取body
document.body
####创建元素
var h1 = document.createElement(“h1”);
h1.innerText=“拉拉”;// 需要点击页面才会显示内容
###添加元素到某个元素中
父元素.appendChild(新子元素);
ul.appendChild(li);
###插入元素到某个元素的上面
父元素.insertBefore(新元素,弟弟元素);
ul.insertBefore(li,sh);
###删除元素
父元素.removeChild(被删除的元素);
ul.removeChild(sh);
- 背景
- 白色
- 上海
- 广州
li的父元素是ul，li的子元素是d1，li的弟弟元素是sh(和li同级别)
例：
<input type=“button” value=“添加” οnclick=“addfn()”>
<input type=“button” value=“插入” οnclick=“insertfn()”>
<input type=“button” value=“删除” οnclick=“removefn()”>
- 背景
- 上海
- 广州
———————————————————————————————————
###事件
-事件指一些特定的时间点 事件包括：window相关的事件(状态改变事件)，鼠标
相关，键盘相关
-onclick点击事件，onload加载完成事件，onfoucs获取焦点事件，
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
资料领取方式：戳这里免费获取
里面
ul.appendChild(li);
}
function insertfn(){
//创建li元素对象
var li = document.createElement(“li”);
//设置显示内容
li.innerText = i1.value;
//得到ul
var ul = document.getElementsByTagName(“ul”)[0];
//li添加到ul里面的上海上面
ul.insertBefore(li,sh);
}
function removefn(){
//得到ul
var ul = document.getElementsByTagName(“ul”)[0];
ul.removeChild(sh);//删除
}
<input type=“button” value=“添加” οnclick=“addfn()”>
<input type=“button” value=“插入” οnclick=“insertfn()”>
<input type=“button” value=“删除” οnclick=“removefn()”>
- 背景
- 上海
- 广州
———————————————————————————————————
###事件
-事件指一些特定的时间点 事件包括：window相关的事件(状态改变事件)，鼠标
相关，键盘相关
-onclick点击事件，onload加载完成事件，onfoucs获取焦点事件，
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-FnjVGzkd-1712125504296)]
[外链图片转存中…(img-fwpz2fD1-1712125504296)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-mFbL78uh-1712125504297)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
资料领取方式：戳这里免费获取
