华清远见html+css+js阶段
雨坠星河
帮助3人
华清远见html css js阶段总结
1. html阶段总结
1. 1html基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
1.2 html常用标签
<HTML></HTML> 表示该文件为HTML文件
<head></head> 包含文件的标题,使用的脚本,样式定义等
<title></title> 包含文件的标题,标题出现在浏览器标题栏中
<style></style> 内联样式标签
<link href="" type="text/css" rel="stylesheet" /> 引用外部css资源，href为资源地址
<script src=""></script> 引用外部js资源，src为资源地址
<body></body> 放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
<a href=""></a> 链接标签，href为链接地址
<img src=""></img> 图片标签，src为图片地址
<br> 换行标签
<p> 段落标签
<pre></pre> 段落格式化标签
<b></b> 字体加粗
<i></i> 字体倾斜
<hr> 水平线标签
<table></table> 表格标签
<caption></caption> 表格标题标签
<th></th> 表格中的页眉标签
<tbody></tbody> 表格中的主体内容标签
<tfoot></tfoot> 表格中的页脚标签
<tr></tr> 表格中的行标签
<td></td> 行标签中的单元格标签
<form></form> 表单标签
<select></select> 下拉框标签
<option></option> 下拉框的内容标签
<textarea></textarea> 文本域标签
<button></button> 按钮标签
<input type="text"> 文本框标签
<input type="password"> 密码框标签
<input type="submit"> 提交按扭标签
<input type="checkbox"> 复选框标签
<input type="radio"> 单选框标签
<input type="reset"> 重置按扭标签
<input type="image"> 图片按扭标签
<input type="hidden"> 隐藏域标签
<input type="button"> 按扭标签
<input type="file"> 文件标签
<h1></h1> 标题标签（1，2，3，4，5，6），1代表字号最大，6代表字号最小
<u></u> 下划线标签
<ol></ol> 有序列表标签
<ul></ul> 无序列表标签
<li></li> 列表项标签
<div></div> 分区标签（默认为块级元素，常用）
<span></span> 对文档中的行内元素进行组合的标签（默认为行内元素）
<iframe></iframe> 页内框架标签
2. css阶段总结
2.1 css 的三种使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的三种使用方式</title>
<link href="./p3.css" type="text/css" rel="stylesheet" />
<style>
/* Id选择器： #id的值 {} */
#p2{
width: 400px; background-color: blanchedalmond;
}
/* 标签选择器： 标签名{}*/
p{
color: red;
}
</style>
</head>
<body>
<!-- css : cascading style sheet , 级联样式表 , 用于调整html中标签的样式的语言。
语法规则： "样式名:样式的值" , 比如 ： color: red ，这个指定字体的颜色为红色。
"样式名:样式的值, 样式名1:样式值1" , 比如： color:red , font-size: 20px
三种使用方式： ① 内联样式： 直接在标签上，通过style属性进行使用。
② 内部样式： 在head标签中，通过<style>css语言<style>标签，使用样式。
③ 外部样式：通过在head标签中， 使用<link href="https://blog.csdn.net/cyq1123/article/details/xx.css">标签，引入css文件，进行样式的使用。
-->
<!--内联样式 ：只对当前使用的标签有效。 -->
<p id="p1" style="width: 500px; background-color: aquamarine;">内联样式</p>
<!--内部样式 ：css语言通过选择器找到标签，然后添加对应的样式。 -->
<p id="p2">内部样式</p>
<!-- 外部样式 : 在css文件中，写样式。在html文件中引用css文件。 -->
<p id="p3">外部样式</p>
</body>
</html>
2.2 css的特征
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css特征</title>
<style>
h1{
border: 2px dotted aqua; /*边框:宽度 类型 颜色*/
color: red; /*字体颜色*/
}
h2{
color: green;
font-size: 50px;
}
#h3{
border: 2px solid black;color: green;
}
h3{
font-size: 50px; color: yellow !important;/*!important： 设置样式的优先级最高*/
}
</style>
<link href="./p3.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- css特征：
① 继承性： 父元素的一些样式，会被其子元素继承。比如字体颜色。
② 层叠性： 一个元素可以有多个样式效果进行叠加。
③ 优先级： 浏览器默认样式< 标签的默认样式 < [外部样式/内部样式/内联样式]
** 外部样式/内部样式/内联样式: 根据谁后写，谁优先。
-->
<!-- 继承性 -->
<div style="background-color: red; color: white;">
<p>Lorem ipsum dolor sit amet</p>
<a href="#" style="color: white;">a标签</a>
</div>
<!-- 层叠性 ：
background: yellow; 背景色
font-size: 20px; 字体大小
color: #FF0000; 字的颜色
font-weight: bold; 字体的粗细
width: 300px; height: 100px; 标签的宽，高
overflow: scroll; 溢出，则使用滚动条。
-->
<p style="background: yellow;font-size: 20px; color: #FF0000;
font-weight: bold; width: 300px; height: 100px; overflow: scroll;">
Lorem ipsum dolor sit amet
</p>
<!-- 优先级 -->
<!-- 内联样式的优先级高于内部样式和外部样式 -->
<h1 style="color:green;">中秋节快到了</h1>
<!-- 内部样式和外部样式： 谁后写，谁优先。 -->
<h2>中秋节是团员的节日。</h2>
<!-- 练习：通过内部样式设置 h3 : ① 根据标签选择器设置h3标签字号50px , 字体颜色黄色。
② 根据id选择器，设置h3标签边框 ， 字体颜色绿色
-->
<!-- ** id选择器优先级 > class选择器 > 标签选择器 -->
<h3 id="h3" style="color: pink;">中秋节：海上生明月，天涯共此时。</h3>
<!-- 使用三种不同的方式给标签设置样式，不冲突情况就是都有效(层叠性)，冲突则以优先级为准（优先级）。 -->
</body>
</html>
2.3 css的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的基本选择器</title>
<style>
#ul1 li{
background-color: green;
list-style: none; /*去掉li标签前面符号*/
margin:3px ; /*设置标签和其他标签四个方向的间距都是3px*/
}
/*class选择器： .className{} */
.group {
color: red;
}
#first{font-size: 30px;}
/* span标签是行内元素，宽度高度由内部的内容决定。如果希望设置width ， height .
那么需要修改span标签的显示方式： display:inline-block （行内块级元素： 不换行，支持设置宽，高 , 比如img标签。）
*/
span{
width: 100px;
height: 30px;
display: inline-block;
background: #21448c;
text-align: center; /*文字的左右居中*/
line-height: 30px; /*行高：如果文字只有一行 ，然后行高等于高度 ，那么文字就垂直居中*/
}
b{
color: white;
border-left: 1px solid white;
border-right: 1px solid white;
/* padding: 8px; *//*padding :四个方法的内边距(标签和内部的内容之间的间距。)*/
padding-left: 6px ; /*单个方向的设置*/
padding-right: 6px;
}
/* 分类选择器的使用 */
span.three{
width: 120px;
}
/* 分组选择器 */
p , h1{
border: 3px solid black;
border-radius: 5px; /*设置边框为圆角*/
}
/* 派生选择器： 选择子孙 */
/* #sel span{
padding: 5px;
border: 3px solid #008000;
} */
/* 派生选择器： 选择子 */
#sel>span{
padding: 5px;
border: 3px solid red;
}
</style>
</head>
<body>
<!-- 选择器： selector ,根据某个特征，找到标签。
① 标签选择器: 根据标签的名字，选择到对应的标签(当前html页面中的该标签都被选择出来。)。
② id选择器： 根据标签的id ， 选择标签。(一个html页面 ， id是唯一的， 只会选择出一个符号条件的标签).
③ class选择器： 根据标签的class属性 ， 选择标签。( 一个html页面， class允许重复， 可以选择出多个符合条件的标签。)
④ 分类选择器： 元素选择器和class/id选择器一起使用.
⑤ 分组选择器： 选择器1 , 选择器2 ， 选择n....{样式}
⑥ 派生选择器： 找子(嵌套在内部的第一层符号条件的标签元素) 选择器>选择器{}
找子孙(嵌套在内部的所有符号条件的标签元素) 选择器 选择器{}
-->
<!-- 所有li设置背景色为绿色
九龙坡 ， 沙坪坝设置为字体红色
第一个li 设置 为30px
-->
<ul id="ul1">
<li class="group" id="first">九龙坡</li>
<li>渝中</li>
<li>渝北</li>
<li>江北</li>
<li class="group">沙坪坝</li>
</ul>
<ul>
<li>html语言</li>
<li>css语言</li>
<li>js语言</li>
</ul>
<p>
<span><b>span one</b></span>
<span><b>span two</b></span>
<span class="three"><b>span three</b></span>
</p>
<h1 class="three">h1标签</h1>
<p class="three">p标签</p>
<div id="sel">
<span>1.基本选择器：
<span>a.标签选择器</span>
<span>b.id选择器</span>
<span>c.class选择器</span>
</span>
<span>2.分组选择器</span>
<span>3.分类选择器</span>
<span>4. 伪类选择器
<span>:link</span>
<span>:hover</span>
<span>:foucs</span>
</span>
</div>
<div style="width: 22px; height: 22px;background:url(10.jpg) no-repeat 0 0;border-radius: 2px; ">
</div>
<div style="width: 22px; height: 22px;background:url(10.jpg) no-repeat -22px 0;border-radius: 2px; ">
</div>
<div style="width: 22px; height: 22px;background:url(10.jpg) no-repeat 0px -22px;border-radius: 2px; ">
</div>
</body>
</html>
2.4 css 定位
relative 不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对像是浏览器可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级：z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数
3. js阶段总结
3.1 js 的三种使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的三种使用方式</title>
</head>
<body>
<!-- 1.事件定义的方式
2.js嵌入到html页面，通过<script>标签来使用
3.把js相关内容写在单独的.js文件中，然后在html页面上，通过<script src="https://blog.csdn.net/cyq1123/article/details/xx.js">引入js文件，进行使用。
-->
<!-- onclick:是标签事件属性 ,alert('hello!')是js中定义的一个弹出警告框的函数. -->
<button onclick="alert('hello!')">你好！</button>
<button onclick="f1('nice to meet you.')">你好</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<script>
// 自定义函数
// js是弱数据类型语言。
function f1(a){
alert(a)
}
// -- get Element By Id ,根据id获取元素, id是唯一的,所以找出来的是唯一的符合要求的一个元素。
let btn = document.getElementById("btn3");
btn.onclick= function(){
alert("say hi");
}
</script>
<!-- 解释执行的时候： 需要先加载按钮，js文件中才找得到btn4这个按钮。 -->
<script src="4js使用.js"></script>
</body>
</html>
3.2 js基本知识
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
1.js的作用：
- 操作html和css , 实现动态页面
2.定义变量
- let 变量名;
- 变量命名规则
- null , undefined
3. 数据类型
- 定义变量的时候是用let定义，没有指定数据类型，给这个变量赋值任意数据类型都可以。
- string , nubmer, date, boolean , array , object ,function
- typeof, parseInt ,parseFloat ,toString ,isNaN
- 算术运算过程中true转为1，false转为0.
- 把变量作为条件判断的时候，非空转换为true，空转换为false.
4. 运算：、
- 算术运算
- 条件运算 （== 判断内容是否相等， ===判断内容和类型是否同时相等）
- 逻辑运算
- 赋值运算
5.分支语句：
- if...else :同java
- switch...case
6.循环语句
- for : 同java
- while： 同java
- break, continue ,
- return
7.js的对象：
- String
- Number
- Date
- Boolean
- Math
8. js的相关操作
-对象的获取： getElementById , getElementsByTagName....
-样式相关操作: obj.style.xxx
-属性相关的操作: obj.属性
-对标签内部的内容的操作：obj.innerHTML , ojb.innerText
9. 特殊功能的函数
- eval(string)
-setInterval(function,number), function:指的是函数的定义。
10. 数组对象 : Array
** 定义数组，数组赋值， 遍历数组， 数组长度，数组下标，数组的各种函数
** 排序
** 二维数组
11. 函数对象 : function
** 函数的定义
** 函数的调用
** 区分需要的是函数的定义，还是函数的调用结果。
12. 函数参数对象 : arguments
** 函数的参数都存放在arguments对象中
** arguments本质就是一个数组
13. 全局函数： setInterval , clearInterval
** let timer = setInterval(function , time ) ，启动了定时器函数
** clearInterval(timer) ,关闭定时器
** parseInt
** parseFloat
* encodeURI:编码
* decodeURI:解码
-->
</body>
</html>
3.3 js数组的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数组的使用</title>
</head>
<body>
<button onclick="upSort()">升序</button>
<button onclick="downSort()">降序</button>
<ul>
<li>tom</li>
<li>alice</li>
<li>tom hanks</li>
<li>rose</li>
<li>jack</li>
<li>amy</li>
<li>zara</li>
</ul>
<script>
// 练习： 使用循环， 数组和数组的排序 ，实现标签的内容的升序和降序的显示。
// - 思路： 把li标签取出来，然后把标签的文本内容取出来，放在数组中，对数组排序，
// 然后把排好序的内容，循环放在li标签中。
function upSort(){
// a。找到所有的li标签
var list = document.getElementsByTagName("li");
// b。变量li标签，把li中的文本内容获取出来，存在数组中
let txts = new Array();
for(let i=0 ; i<list.length ; i ){
txts.push(list[i].innerText) // list[i]代表每一个li -- list[i].innerText(get操作)
}
// c. 对数组排序
txts.sort();
// d. 把排好序的内容，放在li的标签中。
for(let i=0 ; i < list.length; i ){
list[i].innerText = txts[i]; // set操作
}
}
function downSort(){
// a。找到所有的li标签
var list = document.getElementsByTagName("li");
// b。变量li标签，把li中的文本内容获取出来，存在数组中
let txts = new Array();
for(let i=0 ; i<list.length ; i ){
txts.push(list[i].innerText) // list[i]代表每一个li -- list[i].innerText(get操作)
}
// c. 对数组排序 ，然后对数组逆序
txts.sort();
txts.reverse();
// d. 把排好序的内容，放在li的标签中。
for(let i=0 ; i < list.length; i ){
list[i].innerText = txts[i]; // set操作
}
}
// js的Array对象: 长度可变，数组元素可以是任意类型。可以通过数组下标的方式操作数组。
// push方法可以在数组末尾增加元素， pop方法可以在数组中弹出最后一个元素。
// 1. 创建数组 : 数组元素可以是任意类型。
let arr1 = new Array();
let arr2 =[1,2,3];
console.log(arr1.length);
console.log(arr1);
console.log(arr1[0]);
console.log(typeof(arr1)); //object
console.log(typeof(arr2));//object
console.log(arr2);
arr1[0] = "abc";
arr1[1] = alert; // 将alert函数的定义赋值给数组
arr1[7] = 100;
console.log(arr1);
console.log(arr1[3]);//undefined
arr1=null; // 清空数组元素
// console.log(arr1.length);//Cannot read properties of null (reading 'length')
console.log(arr2.length);// 3
arr2[5] = 100;
console.log(arr2);
// 2. push(添加元素) ,pop(取出元素) -- 操作数组的末尾
// unshift(添加元素) ,shift(取出元素) -- 操作数组的首位
let arr3 = new Array();
arr3.push("a");
arr3.push("b");
arr3.push("c");
console.log(arr3);
let last = arr3.pop();
console.log("last:" last);
console.log(arr3);
let first = arr3.shift()
console.log(first);
arr3.unshift("A") // 数组头部插入
console.log(arr3);
// 3. 数组的长度可变 ：arguments
// *** 定义数组的时候，如果数组只有一个参数，并且是整数的number类型，那么这个参数作为数组的长度。
// 如果数组有多个参数，那么这些参数作为数组的元素。
let arr4 = new Array(7);// 创建对象的时候，只有一个整数参数，那么这个参数就是数组的长度。
console.log(arr4.length); // 7
let arr5 = new Array("a","b","c","d"); // 创建对象的时候，有多个参数 ,参数是数组的元素。
console.log(arr5.length); // 4
let arr6 = new Array("10");// 创建对象的时候，只有一个非整数参数，那么这个参数就是数组的元素。
console.log(arr6.length); //1
// 4. 数组的排序： js定义sort函数 （升序） --默认的排序方式是按字符串进行排序。
// js定义reverse函数 -- 数组的逆序。
// ** 降序： 先调用sort升序，然后reverse逆序。
//[1,11,2,3,22,111] -- 按字符排序 [1,11,111,2,22 ,3]
let arr7 = [1,11,2,3,22,111] ;
console.log(arr7.sort()); // [1, 11, 111, 2, 22, 3]
arr7=['php' , 'c ' ,'java' ,'c','jsp' ,'python']
console.log(arr7.sort()); //['c', 'c ', 'java', 'jsp', 'php', 'python']
console.log(arr7);// ['c', 'c ', 'java', 'jsp', 'php', 'python']
console.log(arr7.reverse()); // ['python', 'php', 'jsp', 'java', 'c ', 'c']
</script>
</body>
</html>
3.4 js正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
</head>
<body>
<script>
/*
a.能出现那些字符 [字符] ， \d表示纯数字[0-9]， \w匹配字母数字[0-9a-zA-Z] .....
b.出现的字符的个数{n} , {n,m} , 等价于{1,} , ?等价于{0,1} , *等价于{0,}
c.匹配行首 ^
d.匹配结尾 $
e. .等价于任意内容
f. \用于转义, \.表示.本身
g. () 用于分组
h. |表示或
i. i -忽略大小写 g - 全局查找
*/
// 1. 正则表达式的创建
let reg = new RegExp(/^[0-9]{6}$/); // 只能是数字，并且要是6位
let reg1 = /^[a-zA-Z0-9]{4,8}$/i ; // 数字字母都可以，并且最少4位，最多8位。
// 2. 正则表达式相关的函数
// test函数： 测试字符串是否满足正则表达式的要求，满足返回true，不满足返回false.
// exec函数： 如果字符串满足正则表达式的要求，返回匹配成功的字符串(返回的是一个包含了字符串的一个数组)。
let str = "abc1234djdkdfjfjlkdl";
console.log(reg.test(str)); // false
console.log(reg1.test(str)); // true
console.log(reg.exec(str));
console.log(reg1.exec(str)); //['abc1234', index: 0, input: 'abc1234', groups: undefined]
let reg2 = /[a-zA-Z0-9]{4,8}/ig
console.log(reg2.exec(str)); // -- 行首开始找
let str2 = reg2.exec(str); // -- 再次找，就从第二个符号要求的字符串开始找。因为正则表达式加了g。
console.log(str2[0]);
// 练习： str ="abcabc123abc123" ,reg =/[a-zA-Z0-9]{3}/ig ,然后把匹配成功的内容，找到之后，保存到数组中。
str ="abcabc123abc123";
reg =/[a-zA-Z0-9]{3}/ig
let a1 = new Array();
let substr="";
while(substr=reg.exec(str)){ // 变量非空转换为true，空转换为false.
a1.push(substr[0]);
}
console.log(a1);//['abc', 'abc', '123', 'abc', '123']
// 判断字符串是否符合邮箱的规则
// 邮箱的正则表达式: 邮箱是一个从头到尾都完全满足正则表达式的字符串，需要使用^限定开始，$限定结尾
let email ="12@fjm@qq.com"
reg1 = /\w @\w (\.\w ) / //未指定从头到尾都符合正则表达式
reg1 = /^\w @\w (\.\w ) $/
if(reg1.test(email)){
console.log("是邮箱");
} else{
console.log("不是邮箱");
}
email ="fjm@qq.cn.com"
if(reg1.test(email)){
console.log("是邮箱");
}else{
console.log("不是邮箱");
}
</script>
</body>
</html>
3.5 js dom节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<p id="p" >段落标签</p>
<ul id="sheng">
<li><a href="#">四川</a></li>
<li><a href="#">重庆</a></li>
<li><a href="#">云南</a></li>
<li><a href="#">贵州</a></li>
</ul>
<a id="bing" href="http://www.百度.com">百度</a>
<script>
// dom : document object model - 文档对象模型
// 1. 查询节点
// -- document.getElementById(id) ,
// -- document.documentGetElementsByTagName,.document.documentGetElementsByClassName,document.documentGetElementsByName
// --节点对象.各种节点查询方法
let p = document.getElementById("p");
// 2. 节点的名字--nodeName
// -- 文档节点，节点名字： #document
// -- **** 元素和属性节点，节点的名字：元素或属性名
// -- 文本节点，节点名字： #text
console.log(p.nodeName); //P(nodeName如果是标签的名字，那么是大写。)
console.log(document.nodeName); // #document
// if(p.nodeName == "P"){
// p.style.display ="none";
// }
// 3. 节点的类型--nodeType
// -- 文档节点，类型：9
// -- 元素节点，类型：1
// -- 属性节点， 类型：2
// -- 文本节点， 类型：3
console.log(p.nodeType); // 1
console.log(document.nodeType);// 9
if(p.nodeType == 1){
console.log("是元素节点");
}
// 4. 获取节点的属性
// - getAttribute(属性名)
let pId = p.id;// 直接通过属性名获取属性值
pId = p.getAttribute("id"); // dom中封装的查找属性的方法
console.log(pId);
// 5. 设置节点的属性
p.setAttribute("class" , "active") ;// 增加属性
//p.className = "active"; // 修改属性
let a = document.getElementById("bing");
a.setAttribute("href" , "http://www.taobao.com") ;// 修改属性
//a.href="http://www.jd.com"
// 6. 删除节点的属性
//a.removeAttribute("href");
p.removeAttribute("class")
//p.className = "";
// 7. 节点的父节点:parentNode
let parentP = p.parentNode;
console.log(parentP.nodeName); // 节点的名字-BODY
// 8. 节点的子节点：
// --- childNodes :找到子节点，找到的节点包含元素节点和文本节点
// --- children : 找到子节点，只包含元素节点
// --- firstChild：第一个孩子，所有孩子中的第一个，可能是文本节点。
// --- firstElementChild: 第一个孩子，代表孩子中的第一个元素节点。
// --- lastChild:最后一个孩子，所有孩子中的最后一个，可能是文本节点。
// --- lastElementChild：最后一个孩子，代表孩子中的最后一个元素节点。
let childs = p.childNodes;
console.log(childs);
let ul = document.getElementById("sheng");
let ulChilds = ul.childNodes;
console.log(ulChilds);//包含了5个text , 4个li.
let liArr = new Array();
for(let i = 0 ; i < ulChilds.length ; i ){
//console.log(ulChilds[i].nodeName ":" ulChilds[i].nodeType);
if(ulChilds[i].nodeType==1){
liArr.push(ulChilds[i]);
}
}
console.log(liArr);
ulChilds = ul.children;
console.log(ulChilds);
console.log(ul.firstChild);
console.log(ul.firstElementChild);
console.log(ul.lastChild);
console.log(ul.lastElementChild);
// 9.节点的兄弟节点
// --- previousSibling： 上一个兄弟，可能是文本类型的兄弟
// --- previousElementSibling , 上一个元素节点兄弟
// --- nextSibling : 下一个兄弟，可能是文本类型的兄弟
// --- nextElementSibling:下一个元素节点兄弟
console.log(ul.previousSibling); // #text
console.log(ul.previousElementSibling); //p
console.log(ul.nextSibling);
console.log(ul.nextElementSibling);
// 练习：用节点的父子关系， 把第二个li，修改为class="active"
ul.firstElementChild.nextElementSibling.setAttribute("class","active");
// 用节点的父子关系，把第三个li中的a元素的href修改为http://www.百度.com
ul.children[2].firstChild.setAttribute("href","http://www.百度.com");
// 用节点的父子关系，把每个li中的a元素的背景色修改为红色。
let ulList = ul.children;
for(let i =0 ; i< ulList.length; i ){
ulList[i].children[0].style.background="red";
}
</script>
</body>
</html>
3.6 js dom节点的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>我是ul的哥哥</div>
<ul id="sheng">
<li><a href="#">1.四川</a></li>
<li><a href="#">2.重庆</a></li>
<li><a href="#">3.云南</a></li>
<li><a href="#">4.贵州</a></li>
</ul>
<div>我是ul的弟弟</div>
<script>
// 1. 创建节点
let li = document.createElement("li");// 创建节点(得到的是一个节点对象)，创建的是li类型的节点。
li.id="li5";
li.innerText="5.北京"
/*
let li1 = "<li></li>";// 这个li1是string.
li1.id="li5" ;// ？？？
console.log(typeof(li1));//string
console.log(typeof(li));;//object
*/
// 2. 把节点添加到dom中
// --- 父节点.appendChild(创建的节点) ， 作为父节点的最后一个子节点。
// --- 父节点.insertBeffore(新节点，参考节点) ，作为父节点的孩子，插入到指定节点的前面。
let ul = document.getElementById("sheng");
ul.appendChild(li);// 追加到末尾
let li2 = ul.children[1];
ul.insertBefore(li,li2); // 插入到指定位置
// 3. 删除节点：节点删除之后，其子节点也被删除了
// -- 父节点.removeChild(子节点) ,根据父节点，删除指定的子节点
// -- 节点.remove() , 删除节点本身，其子节点也被删除了。
ul.removeChild(li2);
// ul.remove()
// 4. 替换节点
// --- 父节点.replaceChild(新节点，被替换的节点)
let li00 = document.createElement("li");
li00.style.border = "1px solid blue";
ul.replaceChild(li00 , ul.firstElementChild)
// 5.克隆节点
// -- 节点.cloneNode(true): 表示克隆节点及其子节点
// --节点.cloneNode(true): 表示克隆节点本身，不包含其子节点
let ulCloneTrue = ul.cloneNode(true);
let ulCloneFalse = ul.cloneNode(false);
console.log(ulCloneTrue);
console.log(ulCloneFalse);
// -- 在ul的后面，添加ulCloneTrue
ul.parentNode.insertBefore(ulCloneTrue , ul.nextElementSibling)
</script>
</body>
</html>
3.7 bom对象
document , screen , history , location ,navigator …
3.8 事件和事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
span{
border: 8px solid blue;
border-radius: 50%;
margin-top: 100px;
display: inline-block;
}
</style>
</head>
<body>
<span></span>
<script>
/*
1. -- 事件分为： 鼠标事件， 键盘事件，状态事件， 其他....
2. -- 事件对象： event , 事件触发的时候会产生一个event对象。
3. -- 事件的定义方式：a.在标签上使用on 事件名称，调用函数。
b.在js代码中，通过函数绑定进行函数的调用：
obj.onclick = function
4. -- 事件的取消： 事件执行的函数返回值是false. 事件就取消了。
5. -- 事件的执行机制：冒泡原理-- 元素的某个事件被触发了。 那么其包裹元素的同类事件也会被触发。
*/
// -- 键盘事件：onkeydown ,onkeyup
/*
document.onkeydown = function() {
console.log(event);
switch (event.keyCode) {
case 37:
alert("按左键")
break;
case 38:
alert("按上键")
break;
case 39:
alert("按右键")
break;
case 40:
alert("按下键")
break;
default:
alert("按错了")
}
}*/
// 练习： 让网页上的span标签，根据按键的方向，让span上下左右移动(每按一次，移动5px)
// 同时 asdw四个键和方向键一样的功能。
let ml = 0; // 记录当前的位置
let mt = 0;
document.onkeyup = function(){
let span = document.getElementsByTagName("span")[0];
switch (event.keyCode) {
case 65:
case 37:
ml = ml - 5;
if(ml<0){
ml = 0 ;
}
span.style.marginLeft = ml "px";
break;
case 87:
case 38:
mt = mt - 5;
if(mt < 0 ){
mt = 0 ;
}
span.style.marginTop = mt "px"
break;
case 68:
case 39:
ml = 100;
if(ml > (screen.width- 16)){
ml = screen.width -16;
}
span.style.marginLeft = ml "px";
break;
case 83:
case 40:
mt = mt 10;
console.log(mt);
if(mt > screen.height - 16 ){
mt = screen.height - 16 ;
}
span.style.marginTop = mt "px"
break;
default:
alert("按错了")
}
}
</script>
</body>
</html>
4. jquery阶段总结
4.1 初识jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>认识jquery对象</title>
<!-- 导入jquery.js... 然后就可以使用。
//1 .下载到本地，然后在项目中引用 ， 2 . 可以使用网络存在的js。 3. 安装、。
-->
<script src="../js/jquery.js"></script>
<style>
img{width: 50px; height: 50px;}
</style>
</head>
<body>
<img src="../img/a.jpeg" />
<img src="../img/a.jpeg" />
<img src="../img/a.jpeg" />
<button>变大</button><button>变小</button>
<p>1</p>
<p>2</p>
<p>3</p>
<!--
jquery就是js的函数库，jquery中封装了常用的函数。
write less , do more.
** 找到元素 - $(选择器)
** display:none . - hide()
** display:block. - show()
** innerHTML - html()
** innerText - text()
** onclick - click()
** style.xx - css()
-->
<script>
// 功能： 单击图片的时候，把图片的宽度，高度，修改为200px
// -- $("img")选择器函数
// -- click(function)
// -- $(this): 对象类型的转换. jquery的函数只能通过jquery对象调用，$(this)的目的就是把js对象this，转换为jquery对象。
// -- width() , height() : 宽,高
$("img").click(function(){
$(this).width("200px").height("200px");
})
// **** 你在使用的对象是js对象，还是jquery对象： 只有jquery对象才能调用jquery中封装好的方法。
// **** js对象和jquery对象的转换
// **** $(js对象) ， 转换为了jquery对象。
let $ps= $("p"); // 是一个dom数组
for (let i = 0; i < $ps.length; i ) {
//let p1 = $ps[0];// p1是js对象
//console.log(p1.text());//p1.text is not a function , p1是js对象，没有text方法。
//let p1 = $ps.get(i);// p1是js对象
//console.log(p1.text()); //p1.text is not a function
let $p1 = $ps.eq(i); // eq是jquery提供的获取元素的方法， 结果是一个jquery对象。
console.log($p1.text()); // 调用jquery的函数
}
// 功能： 单击变大按钮。 然后让p中的字体变大5px .
$("button").eq(0).click(function(){
let $ps = $("p");
let font = $ps.css("font-size"); // 获取样式的值
$ps.css("font-size" , parseInt(font) 5 "px") // 设置样式的值
})
</script>
</body>
</html>
4.2 jquery 知识点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery知识点</title>
</head>
<body>
<!--
1. jquery : js的函数库 , 操作html， css , 兼容性很强， 动画
2006年发布了第一个版本 ， js2.0之后不再兼容ie6,7这种低版本。
类似于jquery的框架：zepto.js ....
2.jquery对象：
*** jquery对象: 可以调用jquery中封装的函数
*** js对象： 按原生js进行操作。
*** jquery对象和js对象的转换： $(js对象) -- 转换了jquery对象。
$("span").get(0) , 获取到的是js对象。
3.选择器 ： jquery通过选择器函数，得到是一个数组
*** jquery的选择器函数 $(selecter)
*** jquery的选择器函数 $(selecter)中的选择器支持任意css的选择器。
基本选择器（id ,class , tag），层次选择器(子 ，子孙, 弟弟)，
过滤选择器（:lt ,:odd(奇数), :even(偶数)）。表单选择器(:text)
4.jquery函数：
css , attr , html , text , val , height , widht .....、
5.函数的参数是函数：
setInterval(funcion , time);
6.回调(callback)函数：
某个函数执行完成之后，再执行的其他函数，被称为回调函数。
语法规则：
function xx (yy){
// 先执行xx需要执行的代码，这部分执行完之后
// 然后在判断yy是否存在，存在就调用yy函数
if(yy){
yy()
}
}
-->
<button>显示</button>
<div style="width: 300px; height: 300px; background-color: red; display: none;"></div>
<script src="../js/jquery.js"></script>
<script>
// $("button").click(function(){
// $("div").show(3000,"swing" ,function(){
// $("div").css("background","green");
// $("div").hide(3000,"swing",function(){
// $("div").show(3000,"swing");
// });
// })
// })
$("button").click(function(){
$("div").show(3000,"swing")
$("div").css("background","green");
$("div").hide(3000,"swing")
$("div").show(3000,"swing")
});
//setInterval(funcion , time);
function fun1(k){
if(k){// k不是空，就执行k()
k();// 执行函数
}
}
fun1();
let i = 0 ;
let timer
function mm(a){
timer = setInterval(function(){
console.log("---mm被执行---" i );
if(i > 10 ){
clearInterval(timer)
if(a){
a();
}
}
},1000)
}
// fun1(mm);
function nn(){
console.log("----nn被执行----");
}
//要求：mm函数执行完成之后，再执行nn函数。
//mm();
//nn();
mm(nn);
</script>
</body>
</html>
4.3 jquery dom 操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<ul class="u0">
<li>重庆</li>
<li>武汉</li>
<li>长沙</li>
<li>南昌</li>
</ul>
<script src="../js/jquery.js"></script>
<script>
// 1.创建节点，内容是成都， 添加在武汉前面
// --- $("<li>成都</li>") ,创建了节点， 节点是jquery对象。
let $li = $("<li>成都</li>")
$li.addClass("active") ;// 参数是类名。
$li.click(function(){
$li.hide()
})
// 2. 添加节点
$("li:eq(1)").before($li);// 查找到的节点的前面，添加上新节点。
// 3. 在第一个li中，添加超链接
let $a =$("<a></a>");
$a.text("这时最热的城市 ，查看天气预报")
$a.attr("href" , "http://www.百度.com")
$(".u0 li:first").append($a); //作为节点的孩子节点，添加到dom中。
// 4. 找到u0的孩子们，然后切换孩子们的class
let $chs = $(".u0").children();
$chs.toggleClass("active");
$chs.removeClass("active");
// -- 练习：把所有li中的内容获取出来，然后保存在一个数组中。
let txtArr = new Array();
for(let i = 0 ; i < $chs.length ; i ){
txtArr.push($chs.eq(i).text())
}
console.log(txtArr);
// *** jquery的each函数（each遍历数组）
txtArr = new Array();
$chs.each(function(){
// 遍历到的每个对象，用this指代， 然后 $(this) 把当前正在遍历的内容转换为jquery对象。
txtArr.push($(this).text())
$(this).mouSEO（(Search Engine Optimization)）ver(function(){
$(this).css("color","green")
})
$(this).mouSEO（(Search Engine Optimization)）ut(function(){
$(this).css("color","black")
})
})
// 5. 通过最后一个li标签，找到其父节点，然后删除父节点
//$("li:last").parent().remove() // remove删除节点， parent父节点
// 6. 通过第二个li ，找全部自己的全部弟弟。
let $sib = $("li:eq(1)").siblings(); // 找弟弟们
$sib.each(function(){
$(this).text( $(this).text() "---" $(this).text() )
})
// 7. 找到最后一个li，然后找最后一个li的下一个兄弟
console.log($("li:last").prev().text());
</script>
</body>
</html>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhfgbfeg
系列文章
更多
同类精品
更多
-
微信小程序没声音怎么办
PHP中文网 06-15 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
微信人名旁边有个图标有什么用
PHP中文网 03-11 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信获取用户openid失败怎么办
PHP中文网 03-26 -
photoshop怎么把印章抠出并放在另一张图上
PHP中文网 06-15 -
EhViewer(E绅士)最新版_ehviewer白色版彩色版_Ehviewer显示网络错误怎么办?e站进不去了怎么办
Evanpatchouli 09-19 -
Excel筛选和排序是灰色的怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24
