当前位置：首页 > news >正文

网站信息内容建设管理/seo排名软件怎么做

news 2025/7/12 23:14:03

网站信息内容建设管理,seo排名软件怎么做,vue 做的pc端网站,北京网站设计策划公司js的历史 javascript 为了处理表单的验证 1995年，网景公司布兰登艾奇 10天 Mocha 9月 LiveScript 12月 java的顺风车 javascript 微软： JScript 1997年 js1.1 为蓝本欧洲计算机制造商协会 ECMAScript js和es的关系 js和ECMAScript的…

js的历史

javascript

为了处理表单的验证

1995年，网景公司布兰登·艾奇 10天 Mocha

9月 LiveScript

12月 java的顺风车 javascript

微软： JScript

1997年 js1.1 为蓝本欧洲计算机制造商协会 ECMAScript

js和es的关系

js和ECMAScript的关系:

ECMAScript规定了javascript的语法标准

javascript是ECMAScript的体现

js的概念

js是基于对象和事件驱动的解释性脚本语言;

特点

2.1 基于对象: 页面中所有的内容自己创建的对象都可以来直接用

一切皆对象万物皆对象

2.2 事件驱动: 浏览器会直接对用户或者是客户端的行为进行一个响应

2.3 解释性: 浏览器可以直接执行js代码

2.4 跨平台性: 只要有浏览器就可以运行

组成部分

ECMAScript 语法标准

DOM Document Object Model 文档对象模型

BOM Browser Object Model 浏览器对象模型

引入方式

行内

基于事件通过事件进行触发

第一个鼠标事件: onclick

οnclick=“alert(‘hello js’)”

缺陷：单个事件的简单的代码触发不推荐使用

<div style="width: 100px;height: 100px;background: red;" onclick="alert('hello js')">这是一个div</div>

内嵌

内嵌： script 双标签可以写在页面的任何位置也可以有多个

执行: 从上到下执行遇到script标签就会去执行其中的代码其中代码执行完成后，才会往后执行

建议: body的结束标签之前

没有遵循三分离

常用：学习授课结构和行为一一对应

w3c:

实现分离: html–结构 css–样式 js–行为

<script>alert('3');
</script>

外链

有js文件后缀.js
script 双标签 src地址属性引入对应的文件地址
js文件中直接写代码

推荐使用: 开发过程中

注意：在外链的js中，如果再写代码不会执行

<script src="./06.js">// 在外链的js中，如果再写代码 不会执行alert('2');
</script>

注释

行注释 //
块注释 /* 注释代码 */

调试语言

alert

alert(‘内容’)

作用：弹出提示内容

	  阻断页面

alert('hello js')"

console.log

console.log(‘内容’) 在控制台输入内容

console.log(值1, 值2, 值3, … ); 可以同时输出在控制台

// 鼠标移动
document.getElementById('box').onmousemove = function(){// alert('onmousemove');console.log('onmousemove');
}

事件三部曲

找找到是谁来触发鼠标操作谁就找谁

通过id:

document.getElementById(‘id名’)

object HTMLDivElement—获取成功将box从页面中拿到js中来使用

null—获取失败检查单词检查大小写

document–文档

get–获取

Element–元素

ById—通过id

添加事件鼠标操作谁就加给谁

语法: 元素.事件 = function(){}

onclick

具体做的事情:

function后面的{}中

// 1. 找
alert(document.getElementById('box'));
// alert(document.getElementById('box1'));// 2. 加事件
document.getElementById('box').onclick = function(){// 3. 具体的事情alert('1');
}

window.onload

执行顺序：代码从上往下执行执行到script标签的时候 body还没有执行页面中还没有元素获取不到box

Cannot set property ‘onclick’ of null: 不能把onclick这个属性加给null

元素没有获取到

window.onload作用: 等待页面及资源加载完成后, 在执行其中的代码

window.onload = function(){

所有代码

}

window.onload = function () {// 1. 找alert(document.getElementById('box'));// alert(document.getElementById('box1'));// 2. 加事件document.getElementById('box').onclick = function () {// 3. 具体的事情alert('1');}
}

事件

点击事件 onclick
双击事件 ondblclick
滑入事件从元素外面进入到元素里面 onmouseover onmouseenter
滑出事件从元素里面出去到元素外面 onmouseout onmouseleave
鼠标按下 onmousedown
鼠标抬起 onmouseup
右键菜单 oncontextmenu
鼠标移动 onmousemove 一直不间断触发

// 找元素
// alert(document.getElementById('box'));
// 加事件  元素.事件 = function(){}
document.getElementById('box').onclick = function(){// 具体做的事情alert('单击');
}// 加事件  元素.事件 = function(){}
document.getElementById('box').ondblclick = function(){// 具体做的事情alert('双击');
}// 滑入滑出
// 滑入
document.getElementById('box').onmouseover = function(){// 具体做的事情alert('mouseover');
}
document.getElementById('box').onmouseenter = function(){// 具体做的事情alert('mouseenter');
}// 滑出
document.getElementById('box').onmouseout = function(){// 具体做的事情alert('mouseout');
}
document.getElementById('box').onmouseleave = function(){// 具体做的事情alert('mouseleave');
}// 按下
document.getElementById('box').onmousedown = function(){alert('mousedown');
}// 抬起
document.getElementById('box').onmouseup = function(){alert('mouseup');
}// 右键菜单
document.getElementById('box').oncontextmenu = function(){alert('contextmenu');
}// 鼠标移动
document.getElementById('box').onmousemove = function(){// alert('onmousemove');console.log('onmousemove');
}

over与enter区别

over与enter的区别： over会用子元素触发父元素身上的事件 enter不会

document.getElementById('box').onmouseover = function(){console.log('over');
}
document.getElementById('box').onmouseenter = function(){console.log('enter');
}document.getElementById('box').onmouseout = function(){console.log('out');
}
document.getElementById('box').onmouseleave = function(){console.log('leave');
}

变量

概念

变量：用来存储数据的容器

用关键字 var 声明

声明方式

先声明，后赋值;

var 变量名; 变量名 = 值;

声明的同时并赋值;

var 变量名 = 值;

同时声明多个;

var 变量名1, 变量名2, …;

变量名1 = 值1;

变量名2 = 值2;

同时声明多个的同时并赋值;

var 变量名1 = 值1, 变量名2 = 值2, …;

// 先声明 后赋值
var box; box = 1;
console.log(box);// 声明的同时并赋值
var obox = 2;
console.log(obox);// 同时声明多个
var a,b,c;
a = 10;
b = 20;
c = 30;
// console.log(a);
// console.log(b);
// console.log(c);
console.log(a, b, c);// 同时声明多个并赋值
var x = 30, y = 40, z;
z = 50;
console.log(x, y);

命名规范

命名规范:

\1. 由字母、数字、_、$组成, 数字不能够开头的

\2. 不能使用关键字和保留字 top

\3. 不能重复, 重复的话后面的会覆盖前面的

建议:

\1. 具有语义化 userName password isLogin

\2. 遵循小驼峰命名法多个单词组成一个变量名, 从第二个单词开始首字母大写 userName

// continue;
// break;
// casevar top = 10;
console.log(top); // 得不到10var abc = 20;var abc = 40;
console.log(abc); // 40

场景

用来存储元素元素有多个地方用到的时候将元素存储到一个变量中只获取一次元素多次操作
需要存储数据的时候

操作表单内容

获取表单内容: var 变量名 = 元素.value;
设置表单内容: 元素.value = ‘要设置的内容’;
注意:
1. 步骤：先获取元素在获取/设置内容
2. 获取下拉列表的值没有value属性的情况下获取到的是option中的内容，如果有value 获取的就是value的值
3. 设置下拉列表的值有value写value的值没有value就写option的内容值与选中的项必须一模一样不一样的话就选不中出现空白

// 获取表单内容  
// 1. 获取元素
var inp = document.getElementById('inp');
console.log(inp);
// 2. 获取表单的值  内容
var inpValue = inp.value;
console.log(inpValue);// 3. 设置表单内容
inp.value = '古力娜扎';// 获取文本域的值
var txt = document.getElementById('txt');
console.log(txt);
var txtValue = txt.value;
console.log(txtValue);
// 设置文本域的值
txt.value = '这是古力娜扎的私人领域';// 获取下拉列表的值  没有value属性的情况下 获取到的是option中的内容
// 如果有value  获取的就是value的值
var city = document.getElementById('city');
console.log(city);
var cityV = city.value;
console.log(cityV);// 设置下拉列表的值
//    city.value = 'gz '; // option中的内容 还是value的内容  有value写value的值  没有value就写option的内容  值与选中的项必须一模一样  不一样的话就选不中出现空白
city.value = 'gz';

操作闭合标签内容

闭合标签: 双标签有起始标签有结束标签就是闭合标签

闭合标签的内容：起始标签和结束标签中间

innerText

获取闭合标签的内容:

var 变量名 = 元素.innerText;

设置闭合标签的内容:

元素.innerText = ‘值’;

// 获取内容  先获取元素
var box = document.getElementById('box');
console.log(box);
var txt = box.innerText;
// box.innerText; // 不会报错 没有任何作用 既没有输出在控制台 也不会显示在页面中
console.log(txt);// 设置box的内容为: 新的内容
box.innerText = '新的内容';

innerHTML

获取闭合标签的内容:

var 变量名 = 元素.innerHTML;

设置闭合标签的内容:

元素.innerHTML = ‘值’;

// 获取ul的内容
var oul = document.getElementById('oul');
console.log(oul);
var oulHTML = oul.innerHTML;
console.log(oulHTML);// 设置ul的内容
oul.innerHTML = '新的内容';

区别

都是获取闭合标签的内容，innerText不能获取标签 innerHTML可以获取标签
都可以设置闭合标签的内容 innerText不识别标签的 innerHTML可以识别标签
设置内容的时候后面的会覆盖前面的

不想覆盖累加

语法：元素.innerHTML = 元素.innerHTML + ‘新的内容’;

var oulHTML = oul.innerHTML;
console.log(oulHTML);var oulTxt = oul.innerText;
console.log(oulTxt);
// 设置ul的内容
// oul.innerHTML = '新的内容';
// oul.innerHTML = '<li>新的内容</li>';
// oul.innerText = '<li>新的内容</li>';// 累加: 语法：元素.innerHTML = 元素.innerHTML + '新的内容';
oul.innerHTML = oul.innerHTML + '新的内容';
oul.innerHTML = oul.innerHTML + '<li>新的内容</li>';

变量拼接

删除被替换的内容删除掉
加加两个引号(与最外层引号一致) 以及两个加号
拼接在加号中间加上变量名

// 变量不能直接写在引号中  相当于是英文字符  而不是变量
// 变量拼接： 1. 删除 被替换的内容删除掉  2. 加  加两个引号(与最外层引号一致)  以及两个加号 3. 拼接 在加号中间 加上变量名
oul.innerHTML = oul.innerHTML + '<li>' + txt + '</li>';

操作属性

属性：写在起始标签上除了起始标签名以外的都是属性

操作属性：

\1. 获取属性: var 变量名 = 元素.属性名;

var 变量名 = 元素[‘属性名’]; var 变量名 = 元素[变量];

\2. 设置属性: 元素.属性名 = ‘值’;

元素[‘属性名’] = ‘值’; 元素[变量] = ‘值’;

点和[]的区别： []里面可以是变量可以是’属性名’ 点后面只能是属性名

操作id

   \1. 获取属性: var 变量名 = 元素.id;

\2. 设置属性: 元素.id = ‘值’;

var div = document.getElementById('abox');
console.log(div);
var txt = div.id;
console.log(txt);var btn = document.getElementById('btn');
console.log(btn);
// 加事件
btn.onclick = function(){// 具体做的事情  元素.属性名 = '值';div.id = 'bbox';
}

操作class

   \1. 获取属性: var 变量名 = 元素.className;

\2. 设置属性: 元素.className = ‘值’;

class: 是关键字所以不能直接用

需要用 className

场景：

\1. 修改多个样式 2个以上

\2. 样式跟随鼠标改变点击div让div的背景色变蓝点击其他按钮让某个元素的样式改变

var div = document.getElementById('abox');
console.log(div);// var txt = div.class;  错误
var txt = div.className;
console.log(txt);// 设置类名
div.className = 'ab';

操作src

   \1. 获取属性: var 变量名 = 元素.src;

\2. 设置属性: 元素.src = ‘值’;

绝对地址：以盘符为开头

file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/1207/day01/img/1.jpg

相对地址：

./ 同一个

…/ 上一个

// 获取元素
var img = document.getElementById('img');
console.log(img);
// 获取src的值
var txt = img.src;
console.log(txt); // file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/1207/day01/img/1.jpg  没用var txt1 = img['src'];
console.log(txt1);var a = 'src';
console.log(a);
var txt2 = img[a];
console.log(txt2);// 设置的时候写相对地址
// 点击img  改变img为第二张图
img.onclick = function(){// img.src = './img/2.jpg';// img['src'] = './img/3.jpg';var a = 'src';img[a] = './img/4.jpg';
}

操作样式

单个属性操作

修改style属性的某一个属性

操作样式属性: 只能操作行内

\1. 获取样式属性: var 变量名 = 元素.style.属性名;

\2. 设置样式属性: 元素.style.属性名 = ‘值’;

在js中没有连字符转换成驼峰命名法 font-size —> fontSize

var box = document.getElementById('box');
console.log(box);
var w = box.style.width;
console.log(w); // 空box.style.width = '300px';
box.style.background = 'blue';
box.style.height = '300px';

多个属性操作

\1. 获取： var 变量名 = 元素.style.cssText;

\2. 设置：元素.style.cssText = ‘值’;

值:写的样式，样式的语法与css中语法一致 width:100px; font-size: 21px;

直接给style赋值, 原先写在行内的样式就会被覆盖掉

var box = document.getElementById('box');
console.log(box);
// 批量操作样式
var txt = box.style.cssText;
console.log(txt);// 设置样式
box.style.cssText = 'width:300px; height: 300px; font-size: 40px; color: #fff;background: black;';