Web前端（HTML+CSS+JS）目录版

最新推荐文章于 2024-04-02 16:06:28 发布

程序猿也要酷

最新推荐文章于 2024-04-02 16:06:28 发布

阅读量1.4k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_35653670/article/details/97368410

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

Web前端入门学习

Web前端入门学习

HTML

一、基本语法格式

<!--声明是html格式为html 一般写在首行-->
<!DOCTYPE html>
<!--html是固定格式表示html的开始和结束-->
<html>
    <!-- 声明html网页信息-->
    <head>
        <!--编码字符集-->
        <meta charset="UTF-8">
		<!-- 移动客户端优先——>
        <meta name="viewport" content="width=device-width,initial-sclle=1.0">
        <!--标题-->
        <title>HTML标题</title> 
    </head>
    <!--和用户交互的部分-->
    <body>
           
    </body>
</html>

注意：<title>标签位于<head>标签内，是<head>标签中唯一要求包含的东西。
<meta>用来提供相关文档信息
CSS，JS文件用<link>标签引入并且写在<head>标签中

二、常用的一些标签

1、标签 h1~h6

标签

这是标签h1

这是标签h2

这是标签h3

这是标签h4

这是标签h5

这是标签h6

2、段落标签p

<p></p>段落标签前后有换行效果。

3、水平线标签

<hr/> 水平线是一个自闭和标签。

4、换行

<br/> 。

5、超链接

通过<a href="http://www.baidu.com"> <a/>标签实现，使用超连接调用某个网页前面必须要加http://。

6、div

<div></div>标签可以理解为是一个盒子，用于网页的布局

7、span

<span></span>标签是一个不带任何参数的标签和在<from>表单中的<label>类似

8、表格标签table

<table></table>

<!-- 表格标签 属性border=1 添加表格边框粗细为1 -->
        <!--   cellspacing="0" 使边框变只有一条线-->
        <table border="1"  cellspacing="0" >
            <!--设置表格标题-->
            <caption><h3>这是表格标题</h3></caption>
            <!-- 定义行 -->
             <tr >
                <!---th定义列 一般写在表格首行 内容会被加粗居中-->
                 <th style="width: 100px;">id</th>
                 <th style="width: 100px;">用户名</th>
                 <th style="width: 100px;">年龄</th>
             </tr>
             <tr>
                 <!-- tb定义列 -->
                 <td>1</td>
                 <td>张三</td>
                 <td>18</td>
             </tr>
             <tr>

<caption>标签用于设置表格标题会自动在表格上方居中显示
表格除了<table>标签以外还需要<tr>来定义行，<th>、<tb>来定义列<th>一般用于表格首行有加粗居中效果。

9、列表标签

<body>
         <h3>水果</h3>
         <!-- ul无序列表-->
         <ul>
             <li>西瓜</li>
             <li>苹果</li>
             <li>猕猴桃</li>
         </ul>

        <h3>蔬菜</h3>
        <!-- ol有序列表 start代表从几开始-->
        <ol start="50">
            <li>西红柿</li>
            <li>黄瓜</li>
            <li>东瓜</li>
        </ol>
    </body>

10、表单Form

含义：表单就是用来提交数据到后台服务器的，比如QQ网页上的登录和注册都是提交表单的一使用

<form action="http://www.baidu.com" method="GET">

action:数据发送的服务器地址，如上就是发送给了百度
method: 请求发送方式。常用的俩种方式为： GET、POST

get：将数据追加在url末尾 ? key=value & key=value;

post：将数据写在请求体中

在from表单中，提交数据的标签必须要有 name和value 俩个属性

表单专属标签<label>类似于<span>标签无默认样式标签

11、input

1、text代表文本框。还有一种超级文本框textrea用于输入更多内容

1、<input type="password"/>密码属性会隐藏输入内容

2、radio代表单选项，必须要有相同name属性，才可以使用组合使用单选项

<input type="radio" name="sex" value="0"/>男 <input type="radio" name="sex" value="1"/>女

3、checkbox代表多选。必须要有name属性，多个name属性的多选为一组

<input type="checkbox" name="hobby" value="0"/>唱

<input type="checkbox" name="hobby" value="1"/>跳

4、submit提交表单数据

5、reset清空表单内容

12、下拉框select

注意：name属性在select标签；value属性在option标签

   来&nbsp;&nbsp;&nbsp;自
                <select name="city" id="">
                    <option value="0">请选择</option>
                    <option value="1">山东</option>
                    <option value="2">安徽</option>
                    <option value="3">江苏</option>
                </select>

13、具有实体意义的代码

空格 :  
©: &copy

CSS

1、基本语法

1、行内式：<div style=" height: 200px;" ></div>

2、引入外部文件式:<link rel="stylesheet" href="css/text.css">

3、嵌入式:<style type="text/csss"> </style>

2、选择器

一、通用选择器 *

一般用于取消所有元素的内外边距和一些标签自带的字体样式

*{
    padding: 0; /* 将所有元素的内间距设置为0*/
    margin: 0; /* 将所有元素的外间距设置为0*/ 
    text-decoration: none; /*通常用于去除a标签的下划线*/
}

二、类选择器 .

/* 类选择器
格式：				    例：<a class="b"> <a/>
.class 修饰的类名称{		  .b{
	属性：值				 属性：值
属性：值				  	  属性：值
}							}

三、ID选择器

/* 格式				例：<a id="c"></a> 
#id修饰的名称{			#c{
	属性：值				属性：值
}						}

四、分组选择器

给不同名字标签设置相同属性

/*
.class,#id{
	属性：值
}

*/

五、后代选择器

/*
div p{
	属性：值
}

p标签是div中的子元素

3、常用属性

1、背景: background

设置背景颜色、图片背景的俩种方式

             ```css
body{
            background: blue;
            background-color: blue;
            /* background: url(img/Da66niel_Wu.jpg); */
            /* background-image: url(imgimg/Daniel_Wu.jpg) */
            /* background-position-y: -5px; /* 设置背景图片y轴上上移5px*/
    
            /* background-repeat: repeat; */ 默认重复 从上至下 从左到右
            /* background-repeat:repeat-x;  */ 背景图片在x轴上重复
            /* background-repeat: repeat-y; */ 背景图片在y轴上重复
            /* background-repeat: no-repeat; */ 背景图片不重复

            /* 设置背景图片，并不重复，一行代码实现 */
         	/* background: url(imgimg/Daniel_Wu.jpg) no-repeat;
			/*overflow: hidden;/* 超出标签范围内容隐藏 */
        }
             ```

2、文本text

1、设置颜色有三种方式：

color:aqua;		/* 通过颜色的英文单词名称设置*/
color: #7B68BB; /* 通过颜色代码设置*/
color:rgb(244,164,96); /* 通过rgb颜色代码设置*/

2、居中 text-align:center;
靠左text-align: left;默认靠左
靠右text-align: right;

3、文本修饰

text-decoration: none; /* 无任何线条修饰——去除超链接下划线*/
text-decoration: underline;/*下划线*/
text-decoration: overline;/*上划线*/
text-decoration: line-through;/*中划线*/
text-decoration-color: red; /*控制线条样式 设置线条颜色为红色*/
text-indent:20px; /*  首行缩进 */

4、文本首行缩进
text-indent:20px;或text-indent:2em; em大约为17px

3、字体

1、字体类型

font-family: '微软雅黑','宋体','黑体';设置多个字体类型浏览器会按从左到右按支持的类型选择

2、字体大小

font-size: 50px;

3、字体粗细

font-weight: 900;字体粗细取值范围是100~900的整数 bold=700、normal=900

4、列表list

            list-style: none;/* 无样式*/
            /* list-style: disc; 实心圆，默认样式 */
            /* list-style: circle; 空心圆 */
            /* list-style: square; 实心方块 */
            /* list-style:decimal; 数字 */
            /* list-style:decimal-leading-zero; 零开头数字 */
            /* list-style: lower-roman; 小写罗马 */
            /* list-style: upper-roman; 大写罗马 */
            /* list-style: lower-alpha; 小写英文 */
            list-style: lower-alpha; /* 大写英文 */

5、对齐方式

居中：text-align:center;

靠左：text-align:left;

靠右：text-align:right

两端对齐: text-align: justify;

1、两端对齐只有一行文字时不生效

2、两端对齐多行文字时最后一行不生效。解决方法：使用伪元素在末尾添加空行

:after{
    display:inline-block;/*将最后一行变为行内状元素*/
          width: 100%;/*使用父元素的宽度*/
          content: '';
}

6、display属性(块元素)

1、display定义了元素是否显示

2、display:none;表示元素不显示

3、display:block块状元素；比如div元素可以设置宽高的元素属于块状元素但是会自动换行

4、display:inline;行内元素；无法设置元素的宽/高

5、 display:inline-block;行内块元素，既能实现设置宽/高属性，也不会自动换行

7、边框属性border

1、border: 1px solid black; 用一条语句表示：分别是设置边框粗细、边框样式、边框颜色

		   /* border-width:5px; 粗细 */
           /* border-style:solid; 实线样式 */
           /* border-style: none; 无样式 */
           /* border-style: dotted; 点状 */
           /* border-style: dashed; 虚线 */
           /* border-style: double; 双实线 */
           /* border-color: black; 颜色 */
		   /* border-radius:8px; 边框变圆角*/

8、内外间距

1、内边距：padding 外边距：margin

			   /*内外边距同理*/
		  /* margin: 20px; 代表上下左右都是20px */
          /* margin: 10px 30px; 代表上下10px 左右30px; */
          /* margin: 2px 10px 20px 30px; 代表从左到右为上右下左设置像素; */
          /* 外间距如果只有俩个参数的情况下,第二个参数可以设置auto代表自动居中         */
          /* margin: 5px auto; */
 		  /* 上外边距20px 左外边距自动计算居中 下外边距0px 右外边距自动计算居中 */
 			margin: 20px auto 0 auto;

9、定位position

1、绝对定位：position:absolute

  position: absolute;/*绝对定位*/
        top: 100px;
        left: 100px; /*设置俩个参数即可确定位置*/

2、相对定位：position:relative
让子元素对父元素进行绝对定位的时候，父元素必须设置相对定位

3、固定定位：position:fixed

相对于浏览器窗口定位，不会因为你下滑而改变位置

       position: fixed;/* 相对于浏览器窗口定位*/
        bottom: 50px;
        right: 50px; /*设置俩个参数即可确定位置*/

10、鼠标变手势

cursor: pointer;

11、样式改变效果耗时

transition: all 0.5s;

12、行高

line-height：； 不允许使用负值

JavaScript

1、语法格式

1、行内式：<button onclick="alert('点击后的弹出框')">弹出框</button>

2、嵌入式：

<script type="text/javascript" charset="utf-8">alert('这是一个弹出框');</script>

3、引入外部文件：

<script src="js/hello.js" type="text/javascript" charset="utf-8"></script>

2、基础语法

1、var 来定义部分字符转和整数、小数

2、不能义关键字用来命名，就是js语法已经征用的单词不可以使用，否则报错

3、如何命名（标识符）：

一、支持 _ 和 & 特殊符号

二、区分大小写

三、不要以数字开头，但是支持数字

四、见名知意

五、使用驼峰或者下划线分割

六、console.() 用于打印在控制台

3、变量

变量，就是内存中用来存储数据的一个小空间
变量名也要遵循标识符的规则

注意：
1、若只声明而没有赋值，则该变量的值为 undefined

2、变量要有定义才能使用，若变量未声明就使用，JavaScript会报错

3、可以在同一条var命令中声明多个变量

4、若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值

5、js的语法不区分双引号和单引号，但是如果出现了引号嵌套需要注意

4、数据类型

1、undefined 例： var num;声明未赋值的变量都是undefined

2、null 例：var a=null; 空值

3、boolean 例 var a=true; 布尔类型 true/false

4、number 例var a=1,b=3.14 数值类型

5、字符串例var a=‘张三’ 字符串类型

6、函数function

5、数据类型的转换

一、转整数全局函数parseInt();

1、纯数字的字符串转整数：parselnt('495')=495

2、数字开头加字符的字符串: parseInt('456abc')=456 只会保留数字部分丢弃其他字符

3、其他字符开头加数字的字符串：parseInt('str123')=NaN

4、小数字字符串和小数都是只保留整数部分: parseInt('3.14')=3

5、进制转换：parseInt(0xa)=10 ；16进制的10，大小写无所谓

二、转小数全局函数parseFloat()

1、字符串转小数parseFloat("3.14")=3.14

2、数字开头加字符的字符串parseFloat("1.52ad")=1.52 只会保留数字部分丢弃其他字符

3、其他字符开头加数字的字符串：parseFloat('str123')=NaN

4、整数字符串，保留整肃部分不会自动加小数位

5、0开头的整数或字符串 parseFloat(0360598)=360598 去掉开头的0保留整肃，不会添加小数位

6、多位小数字符串parseFloat(1.23.35)=1.23 只会保留一个小数点后的有效数字

三、转字符串

1、使用toString() 注意： undefined 和 null 不能直接使用该函数否则会报错

解决方法加 " " 或 ’ ’ 最简单的方法就是所有变量加 " " 或者 ’ ’ 都可以转为字符串

6、运算符

一、算数运算符

除了加减乘除（+ - * /）需要注意的是还有求余数 %

自增和自减有两种写法
++在后： a++、a-- 表示先赋值后自增

++在前： ++a、–a 表示先自增后赋值

二、赋值运算符

x -= 1 等于 x=x-1；x * =1 等于 x = x * 1 ; x %=1 等于 x = x % 1
x +=1等于 x=x+1；x / = 1 等于 x = x / 1 ;

三、比较运算符

1、’==’ 会帮我们做简单的自动类型转换 5 == '5' true

2、’==='全等于必须类型和值都相等才是true

3、还有常见的大于">"、小于"<"、大于等于">="、小于等于"<="、不等于 “!=”

四、逻辑运算符

1、"&&" 短路于并且的意思
符号俩边条件都达到的时为：true 否则非false

2、"||" 短路或或者

符号俩边条件只要一个满足或俩个都满足时就为：true 否则false

五、三目运算符

格式：条件表达式？ ture的结果：fales的结果

var x = 2;
        var y = 5;
        // x大于y吗？大于返回x，小于返回y
        var result = x > y ? x : y;  //接收返回值到result
        console.log(result); // 在控制台打印result

7、IF判断语句

格式1 ：

if (条件表达式){ //如果条件表达式为true  则执行语句在 执行后续语句
    执行语句；		
}  //如果条件表达式为false。执行后续语句

格式2 ：

 if (条件表达式) {
                    true语句体;
                } else {
                    false语句体;
                }

                后续代码;

格式3 ：

 if (条件表达式) {

                } else if (条件表达式) {

                } else if (条件表达式) {

                }else{//后面这个slse块可以跟具实际情况 可有可无
                      
                }

8、循环语句

      格式：
              /*  for (初始表达式; 条件表达式; 操作初始表达式) {
                    语句体;
                }
            执行顺序：
                1. 初始表达式，例如：var i = 0;
                2. 执行条件表达式，例如：i < 5;
                3. 如果第二步为true，执行第四步，如果第二步为false，循环结束
                4. 执行语句体，然后执行第五步
                5. 操作表达式，例如：i++，然后执行第二步*/
 例:   for (var i = 1; i <= 5; i++) {
          if（i==3){
              continue //表示当i=3的时候跳出当次循环，继续下次
					  // break 表示结束循环
          }
       	}

9、数组

一、数组的定义

1、第一种：var 数组名 = [];定义一个空数组，未初始化值，如果要访问会返回undefined

2、第二种：var 数组名 = [值1, 值2, 值3,...]; 定义一个长度为5的数组，已初始化值

3、第三种：new Array(值1, 值2, 值3,...);定义一个长度为3的数组，已初始化值

4、第四种：new Array(长度);定义一个长度为5的数组，未初始化值，如果要访问会返回undefined

注意：

1、数组的获取：格式数组名[下标]；第一位：从0开始，最后一位：length-1

2、js的数组没有越界的概念，js的数组可以随意更改长度

二、数组的遍历即获取数组中所有数据使用for循环

var arr5 = [1, 3.14, true, null, "学习"];
        for (var i = 0; i < arr5.length; i++) {
            console.log("arr5[" + i + "] = " + arr5[i]);
        }

10、函数

一、函数的定义

/* 
            格式1：
                function 函数名([形参]){
                    语句体；
                    return 返回值； 
                }
            格式2：
                var 函数名=function([形参]){
                    语句体；
                    return 返回值；
					if（ 条件表达式）{
					return； //注意 在函数if中添加return当条件表达式为flase时结束函数
					}
                }
            调用：
                函数名([实参]);
        */

11、内置对象String

var str='我是一个字符串';

一、charAt(idx):指定位置字符

str.charAt(1);// "是"

二、indexOf(chr)定字符串的位置

返回指定字符串的位置，从左到右。找不到返回-1

str.indexOf("我") //"0"

三、substr(m,n):

返回给顶字符串从m位置开始，取n个字符，如果参数n省略。则意味着取全部

str.substr(2,2);//“一个”

四、substring:

返回给定字符串中从2开始，到3位置结束但不包括第3位。如果参数n省略。则意味着取全部

substring(2,3);//“一”

五、tolowerCase():转小写

str='SHSXT' str.toLowerCase()；//“shsxt”

六、toUpperCase();转大写

str='shsxt' str.toUpperCase(); //“SHSXT”

七、replace(s1,s2): 替换

将s1替换为s2 str='shsxt' str.replace('sh','bj'); //“bjsxt”

12、内置对象Math

1、随机数

Math.random();生成随机数，生成0到1的小数

2、上取整

	`Math.ceil()` 向上取整  `Math.ceil(0.00001)`=1

3、下取整

Math.floor()向下取整 Math.floor(0.99999)=0

4、四舍五入

Math.round()四舍五入取整，只对小数点后一位进行四舍五入 Math.round(3.19)=3

例；随机产生0到26的数

Math.floor (Math.random()*27)
产生0~1的数乘以27在向下取整可达到产生随机数0到26

13、内置对象Date

创建时间对象var date = new Date();

一、获取年

date.getFullYear()

二、获取月

date.getMonth() + 1

三、获取日

date.getDate()

四、获取星期

date.getDay()

五、获取分

getMinutes()

六、获取秒

getSeconds()

七、获取本地时间

toLocaleString()

八、set更改时间

设置日期时间，设置时间为2008奥运

		date.setFullYear(2008);
        date.setMonth(7);
        date.setDate(8);
        date.setHours(20);
        date.setMinutes(8);
        date.setSeconds(8);
        console.log(date.toLocaleString());

14、BOM对象

一、系统对话框

1、消息框：

alert(123);

2、输入框：

prompt(‘请输入年龄’，20)；第二参数为默认值可有可

3、确认框：

confirm(‘确认要更改么’)‘’

例子：

        var result=confirm('确认要修改么');
        //如果点确认，修改div文本的颜色，否则给个警告
        if(result){
            var dv=document.getElementById('dv');
            dv.style.color='blue';
        }else{
            alert('没事别瞎点');
        }

二、打开窗口

open('http://www.baidu.com', '_block') block：新窗口打开默认值

三、时间函数

1、setTimeout

setTimeout(函数,时间毫秒) 多少秒后执行函数

// setTimeout 5s后打印   settimeout(函数,时间毫秒);
        var num = 1;
        var result1 = setTimeout(function () {
            console.log("打印内容");
        }, 5000);

2、setInterval

setInterval(函数,时间毫秒) 多少秒执行一次

 //setInterval 每秒打印一次
        var result2 = setInterval(function () {
            console.log("打印内容");
        }, 1000);

注意： 时间函数调用后会返回一个停止时间函数的数值

//时间函数调用后会返回一个停止时间函数的数值 
        function stopTime() {
            clearTimeout(result1);
            clearInterval(result2); //停止时间函数
        }

练习：将当前时间获取到设置div 并且为整数时，修改颜色红色

var dv1 = document.getElementById("dv1"); //通过dvi的id与他关联
        setInterval(function () {
            //new Date().gerSeconds() 获取当时秒数

            if (new Date().getSeconds() % 10 == 0) {
                dv1.innerHTML = "<h1 style='color:red;'>" + new Date().toLocaleString() + "</h1>";
            } else {
                dv1.innerHTML = "<h1>" + new Date().toLocaleString() + "</h1>";
            }

        }, 1000);

四、location

1、reload 刷新页面 location.reload();
2、href 改变当前页面网址 location.href="http://www.baidu.com";

15、事件on

一、`onload` 页面加载

// 第一种，使用匿名函数，默认加载body

        // onload =function(){
        // document.getElementById('dv').style.color='blue';
        // }
 //第二种 使用具体函数
        function init(){
            var dv=document.getElementById('dv');
            console.log(dv);
            dv.style.color='red';
        }
   //  <body οnlοad="init();">

二、onClick点击

三、焦点事件

1、获取焦点：onfocus

2、失去焦点：onblur

四、鼠标事件

1、鼠标移入：onmouseover

2、鼠标移出: onmouseout

3、鼠标在范围内移动：onmousemove

五、键盘事件

1、键盘按下：onkeyup

2、键盘抬起：onkeydown

六、改变域内容事件

onchange 例如下拉框的选择

七、事件处理方式

HTML事件处理方式 / DOM事件处理方式
DOM事件处理方式，动态的方式绑定，方便代码的维护

16、DOM对象

一、获取节点

1、根据id获取，返回单个对象 document.getElementById( );

2、根据name获取，返回多个对象数组 document.getElementsByName();

3、根据标签名获取，返回多个对象数组document.getElementsByTagName();

4、根据class获取元素document.getElementsByClassName();

二、对象属性操作

<button type="button" id="btn">测试按钮</button><br />

    <input type="text" value="加油，胜利就在眼前" id="txt" class="test" />
    <br />

    性别：
    <input type="radio" checked="true" name="sex" value="1">男
    <input type="radio" name="sex" value="0">女
    <br />

    <img src="img/timg.jpg" style="width: 200px;" id="sxtimg" title="sxt" />

1、获取文本

var txt = document.getElementById('txt');
            // 根据属性获取文本
            console.log(txt.value);
            // 根据函数获取文本
            console.log(txt.getAttribute('value'));
--------------------------------------------------------------------------------------
//设置文本
			// 根据属性设置文本
            txt.value = '我是新文本';
            // 根据函数设置文本
            txt.setAttribute('value', '我是第二次设置的新文本');

2、获取属性

 var txt = document.getElementById('txt');
    // 根据属性获取
            // 获取id属性
            console.log(txt.id);
            // 获取class属性
            console.log(txt.className);
            // 获取type属性
            console.log(txt.type);
    // 根据函数获取
            console.log(txt.getAttribute('id'));
            console.log(txt.getAttribute('class'));
            console.log(txt.getAttribute('type'));
--------------------------------------------------------------------------------------
	// 根据属性设置
            //txt.id = 'newId';
            //txt.className = 'newClass';
            //txt.type = 'password';
            // 根据函数设置
            txt.setAttribute('id', 'newId2');
            txt.setAttribute('class', 'newClass2');
            txt.setAttribute('type', 'password');

3、获取是否选中*

			console.log(sex.checked);// 返回true false
            console.log(sex.getAttribute('checked'));// 有，返回具体的值或者没有，返回null
---------------------------------------------------------------------------------------
    // 根据属性设置
            //sex.checked = true;
    // 根据函数设置
            sex.setAttribute('checked', 'true');

4、获取样式

 function getStyle() {
            var sxtimg = document.getElementById('sxtimg');
            // 根据属性获取
            console.log(sxtimg.style.width);
            // 根据函数获取
            console.log(sxtimg.getAttribute('style'));

            // 根据属性设置，设置的是其中一个样式，属于样式的添加，建议使用属性操作
            //sxtimg.style.cursor = 'pointer';

            // 根据函数设置，设置的是全部样式，属于样式的覆盖
            sxtimg.setAttribute('style', 'cursor: pointer');
        }
// 将自定义函数绑定至按钮
        document.getElementById('btn').onclick = getStyle;

三、元素的创建和插入

								   //添加段落// 
//函数的方式创建
        function testCreateElementByFunc() {
            var p = document.createElement('p')
            var txt = document.createTextNode('我是一个p元素');
            var vd = document.getElementById('dv');
            p.appendChild(txt);
            dv.appendChild(p);
        }
//属性的方式创建  
        function testCrerteElenentByAttr() {
            var dv = document.getElementById('dv');
            dv.innerHTML = '<p>属性添加的p元素</p>'
        }
---------------------------------------------------------------------------------------
									// 添加图片//
     //函数的方式创建
        function testCreateImgByFunc() {
            var myImg = document.createElement('img');
            var dv = document.getElementById('dv');
            dv.appendChild(myImg);
            //myImg.setAttribute("src",'img/Daniel_Wu.jpg');
            myImg.src = 'img/Daniel_Wu.jpg';
        }
       //属性的方式创建
        function testCreateImgByAttr() {
            var dv = document.getElementById('dv');
            dv.innerHTML = '<img src="img/Daniel_Wu.jpg" style="width:300px;"/>';
        }
---------------------------------------------------------------------------------------
									// 文本框//
    //函数的方式添加
        function testCrerteElementByFunc() {
            var inp = document.createElement('input');
            inp.setAttribute('value', '我是一个文本框');
            inp.setAttribute('type', 'password');
            var div = document.getElementById('dv');
            dv.appendChild(inp);
        }
     //属性的方式添加
          function testCreateElementAyAttr(){
            var div=document.getElementById('dv');
            dv.innerHTML='<input value="我是一个文本框" type="password"/>';
        }
---------------------------------------------------------------------------------------
									// 选项框//
     //函数的方式添加
        function testCreateElementByFunc(){
            var opt=document.createElement('option');
            var txt=document.createTextNode('南山南');
            var sel=document.getElementById('mySelect');
            opt.appendChild(txt);
            opt.setAttribute('value','3');
            //第二种方法
            sel.options.add(opt);        
        }
        //属性的方式创建
        function testCreateElementByAttr(){
            //获取select
            var sel=document.getElementById('maSelect');
            /*
                sel.innerHtML='<optinon value="0">------请选择----</option>' +
                              '<option value="1">喜欢你</option>' +
                              '<option value="2">飘向北方</option>' +
                              '<option value="3">南山南</option>';
            */
            sel.innerHTML +='<option value="3">南山南</opyion>';
        }

四、间接查找节点

1、childNodes；子查询节点集合返回子节点为数组格式：父节点.childNodes

2、parentNode; 返回元素的父节点格式: 元素.parentNode

2、firsthChild;返回元素的第一个子节点格式:父节点.firstChild

3、lastChild; 返回元素的最后一个子节点格式： 元素.lastChild

4、previousSiblinl;返回上一个兄弟节点格式：元素.previousSiblinl

5、nextSibling；返回下一个兄弟节点格式: 元素.nextSibling

五、节点删除

    <div id="dv">
        <span id="cxy">程序猿|程序媛|攻城狮</span>
        <a href="javascript:void(0)" onclick="delNode();">删除</a>
    </div>

注：href="javascript:void(0)" 使a标签失去跳转功能

方法1：父节点.removeChild.子节点

  var dv=document.getElementById('dv');
  var cxy=document.getElementById('cxy');
	   dv.removeChild(cxy);

方法2：cxy.parentNode.removeChild(cxy)

 var cxy=document.getElementById('cxy');
        cxy.parentNode.removeChild(cxy);

alue=“0”>------请选择----’ +
‘喜欢你’ +
‘飘向北方’ +
‘南山南’;
*/
sel.innerHTML +=‘南山南’;
}




##### 四、间接查找节点

	1、`childNodes；`子查询节点集合 返回子节点为数组 格式：`父节点.childNodes`

	2、`parentNode;` 返回元素的父节点 格式: `元素.parentNode`

	2、`firsthChild; `返回元素的第一个子节点 格式:` 父节点.firstChild`

	3、`lastChild;` 返回元素的最后一个子节点 格式： `元素.lastChild`

	4、`previousSiblinl; `返回上一个兄弟节点 格式：`元素.previousSiblinl`

	5、`nextSibling；`返回下一个兄弟节点 格式: `元素.nextSibling`

##### 五、节点删除

```html
    <div id="dv">
        <span id="cxy">程序猿|程序媛|攻城狮</span>
        <a href="javascript:void(0)" onclick="delNode();">删除</a>
    </div>

注：href="javascript:void(0)" 使a标签失去跳转功能

方法1：父节点.removeChild.子节点

  var dv=document.getElementById('dv');
  var cxy=document.getElementById('cxy');
	   dv.removeChild(cxy);

方法2：cxy.parentNode.removeChild(cxy)

 var cxy=document.getElementById('cxy');
        cxy.parentNode.removeChild(cxy);

程序猿也要酷

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
Web前端（HTML+CSS+JS）目录版

文章目录Web前端入门学习HTML一、基本语法格式二、常用的一些标签1、标签 h1~h62、段落标签p3、水平线标签4、换行5、超链接6、div7、span8、表格标签table9、列表标签10、表单Form11、input12、下拉框select13、具有实体意义的代码CSS1、基本语法2、选择器一、通用选择器 *二、类选择器 .三、ID选择器四、分组选择器五、后代选择器3、常用属性1、背景: ...
复制链接

扫一扫