html基础之js操作
Posted 测试的自我放逐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html基础之js操作相关的知识，希望对你有一定的参考价值。
html基础之JS
HTML中的三把利器的JS 又称为javascript，看着好像和Java有点联系，实际上他和java半毛钱关系都没有，JavaScript和我们学习的Python、Go、Java、C++等，都是一种独立的语言，Python的解释器有Python2.7、Python3.x，浏览器具有解释JavaScript的功能，所以它才是HTML的三把利器之一。
在HTML中可以将JavaScript/JS的代码写在head中，被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。
引入JavaScript代码，类似于Python的import
<script src="public.js" type="text/javascript"></script>
head中引入JS与body中引入JS区别
html代码从上而下解析，如果在head中引入JS，影响页面打开的速度，存在风险，所以通常放在htmlbody的最下方，这样页面内容先展示，最后在加载JS。注：写在最下面要有底线，写在body内部的最底下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link
rel="stylesheet" href="static">--> ##link可以引入css
<style></style> ##加载其中的css样式
<!--写在上面和写在下面的区别：-->
<!--影响页面的加载速度-->
<!--<script
src="s1.js" type="text/javascript"></script>--> ####引入js 并指定类型
</head>
<body>
<script>
// if (1 == 2) { #通过{}的代码块来进行分割。
//
console.log(1111111111) ####打印结果
// } else if (2 == 2) {
//
console.log(1111111111)
// } else {
//
console.log(‘最后了！‘)
// }
// 如果是两个等号则不判断数据类型 如果三个等号则判断数据类型
// if (‘1‘===‘1‘){
//
console.log(1111)
// } else {
//
console.log(2222)
// }
// switch (1){ ###传入的参数一一对应。
//
case 1:
// console.log(111); ##注意不同语句间加分号，也便于前端处理代码。
// break; #break最好都加上 不然会打印其他case内容。
//
case 2:
// console.log(222);
// break;
//
default:
// console.log(333);
// }
// var name = ‘dsx nhy‘;
// for (var a in name){
//
console.log(name[a]); ###循环角标，通过角标取值
// }
//
// var list = [‘大师兄‘,‘牛牛‘,‘安大叔‘];
// for (var i in list){
//
console.log(list[i]) ######循环数组
// }
//
// var dict = {‘宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘};
// for (var d in dict){
//
console.log(d); ##取key
//
console.log(dict[d]); ##取value
// }
// 不支持字典的循环
// var list = [‘大师兄‘,‘牛牛‘,‘安大叔‘];
// for (var
i=0;i<=list.length;i++){
//
console.log(list[i]) ###循环数字，打印 只能循环list和字符串
// }
// 与python相同
// while (1==1){
//
console.log(1111) ##死循环
// }
Js中的函数
普通函数
// function f(name,age) { ###通过function来定义函数
//
console.log(name);
//
console.log(age);
// }
// f(‘dsx‘,18)
// function f() {
//
console.log(‘in‘+name)
// }
// console.log(‘out‘+name);
// f()
// 自执行函数
// a=(function () {
//
console.log(‘自执行函数！‘)
// });
// a()
</script>
</body>
</html>
绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input id=‘i1‘ type="button" value="一键输入用户名">
</div>
<div>
<input type="text" name="username">
</div>
<script>
// 当点击按钮时向input框输入 houyafan
// function demo(ths) { ###绑定后（如通过onclick绑定函数）ths就代表该标签。
// ths.parentElement.nextElementSibling.lastElementChild.value = ‘222‘
// }
var demo = document.getElementById(‘i1‘);
demo.onclick = function () { ###当点击的时候再绑定 匿名函数
demo.parentElement.nextElementSibling.lastElementChild.value = ‘222‘;
}
</script>
</body>
</html>
面向对象的编程
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// function f(name) {
//
this.name = name; ###类 与this使用相关（相当于py中的class）
//
this.say = function () {
// console.log(‘say-->‘+this.name)
//
}
// }
// var obj = new f(‘dsx‘); ##实例化 调用实例化方法。
// console.log(obj.name);
// obj.say()
// function f(name) {
//
this.name = name;
//
this.say = function () {
// console.log(this.name)
//
}
// }
//
// var obj = new f(‘dsx‘);
// console.log(obj.name);
// obj.say()
// class f():
//
def __init__(name):
// self.name= name
//
def say(self):
// print(self.name)
// obj = f(‘dsx‘)
// obj.name
</script>
</body>
</html>
2.js相关操作
注释
单行注释通过 // 多行通过 /* */
JS变量
|
name = ‘dsx‘; // 默认全局变量 function func() { var name = ‘niulaoshi‘; // 局部变量 } |
JS基本数据类型（JavaScript 声明数据类型通过new）
在console操作
字符串
|
//定义字符串 var str = ‘你开心就好！‘; var name = ‘大师兄‘; // 字符串的拼接 var name_str = name+str; ###直接可通过加号拼接 //字符串操作 str = ‘大师兄‘ str.charAt(0) 根据角标获取字符串中的某一个字符 char字符 str.substring(1,3) 根据角标获取 字符串子序列 大于等于x 小于y str.length 获取字符串长度 str.concat(‘牛教授‘) 拼接字符串 和加号拼接一样 str.indexOf(‘大师‘) 获取子序列的位置 只会拿第一个匹配 str.slice(0,1) 切片 start end str.toLowerCase() 变更为小写 str.toUpperCase() 变更大写 str.split(‘师‘,1) 切片 返回数组 参数2 为取分割后数组的前x个元素
数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带）
var age = 18; var score = 89.22; number = ‘18‘; // 字符串转 var n = parseInt(number); 如果是小数就会去掉小数点后面的数字。 // 转换成小数 f =parseFloat(number) 布尔类型（true 或 false） var t = true; var f = false; |
数组类型（就是Python的列表）
|
// 第一种创建方式 var list = new Array(); list[0] = ‘大师兄‘; list[1] = ‘牛教授‘;
// 第二种创建方式 var list2 = new Array(‘大师兄‘,‘牛教授‘);
// 第三种创建方式 var list3 = [‘大师兄‘,‘牛教授‘];
数组操作 var list3 = [‘大师兄‘,‘牛教授‘];
list3.length 数组的长度
list3.push(‘dsx‘) 尾部追啊参数
list3.shift() 头部获取一个元素 并删除该元素
list3.pop() 尾部获取一个元素 并删除该元素
list3.unshift(‘dsx‘) 头部插入一个数据
list3.splice(start, deleteCount, value) 插入、删除或替换数组的元素 中间0即可插入
list3.splice(n,0,val) 指定位置插入元素
list3.splice(n,1,val) 指定位置替换元素
list3.splice(n,1) 指定位置删除元素
list3.slice(1,2) 切片;
list3.reverse() 反转
list3.join(‘-‘) 将数组根据分割符拼接成字符串
list3.concat([‘abc‘]) 数组与数组拼接
list3.sort() 排序 |
对象类型（等同于Python的字典）
|
var dict = {name:‘dsx‘,age:18,sex:‘男‘ }; var age = dict.age; var name = dict[‘name‘]; delete dict[‘name‘] 删除 delete dict.age 删除 |
定时器
|
setInterval(alert(‘大师兄‘),5000); //参数1 为定时器执行的功能，第二个参数为定时器工作的间隔时间 毫秒为单位
function t1() { console.log(‘我是大师兄‘) } setInterval(‘t1()‘, 5000);// 可以运行方法 |
JS条件判断语句
|
if (条件) { 执行代码块 } else if (条件) { 执行代码块 } else { 执行代码块 };
if (1 == 1) { console.log() } else if (1 != 1) { console.log() } else if (1 === 1) { console.log() } else if (1 !== 1) { console.log() } else if (1 == 1 && 2 == 2) { //and console.log() } else if (1 == 1 || 2 == 2) { //or console.log() }
switch (a) { case 1: console.log(111); break; case 2: console.log(222); break; default: console.log(333) } |
JS循环语句
|
第一种循环 循环的是角标 tmp = [‘宝马‘, ‘奔驰‘, ‘尼桑‘]; tmp = ‘宝马奔驰尼桑‘; tmp = {‘宝马‘: ‘BMW‘, ‘奔驰‘: ‘BC‘}; for (var i in tmp) { console.log(tmp[i]) } 第二种循环 不支持字典的循环 for (var i = 0; i < 10; i++) { console.log(tmp[i]) } 第三种循环 while (1 == 1) { console.log(111) } |
函数定义
|
1、普通函数 function 函数名(形参, 形参, 形参) { 执行代码块 } 函数名(形参, 形参, 形参);
2、匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递 setInterval(function () { console.log(11) }, 5000); 3、自执行函数创建函数并且自动执行 当引入多个js文件时，函数名可能会出现重复，这时通过自执行函数，保证每一个js文件都会被解析，从而生成独立的容器，防止调用冲突 (function (name) { console.log(name) })(‘dsx‘);
作用域 Python的作用域是以函数作为作用域的，其他语言以代码块（{}）作为作用域的。 JavaScript是以函数作为作用域 function tmp() { var name = ‘dsx‘; console.log(name) } tmp(); console.log(name); 2、函数作用域在函数未被调用之前，已经创建 var name = ‘nhy‘; function a() { var name=‘dsx‘; function b() { console.log(name); } return b }
var c = a(); c(); 3、函数的作用域存在作用域链（代码不执行时，先生成作用域链） 当函数嵌套函数时，每一个函数为一个作用域，多层就叫做作用域链，查找遵循作用域链规则 function outer() { name = ‘nn‘; function inner() { var name = ‘ii‘ console.log(‘in‘, name) }
console.log(‘out‘, name); inner() } outer(); 函数不调用时，只生成作用域，当调用时遵循作用域链执行，name都为hhh function outer() { var name = ‘nn‘; function inner() { console.log(‘in‘, name) }
var name = ‘hhh‘; console.log(‘out‘, name); inner() } outer(); 4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行 var xxx; function func() { console.log(name); var name = ‘dsx‘; } func(); |
面向对象
|
// 在JavaScript中，方法和类写法类似，区别方式为是否有this，如果有就可以当做是类来用 // JavaScript的类默认就拥有了Python的构造函数__init__ function Foo(name) { this.name = name; } // 创建对象时JavaScript需要用到new关键字来创建对象 var obj = new Foo(‘dsx‘); console.log(obj.name);
// 类中定义方法，虽然可以用，但是在多个实例时存在重复实例方法，浪费资源 // 创建对象时，say每次创建对象，都会创意一个say的方法。 function Foo1(name) { this.name = name; this.say = function () { console.log(this.name) } } var obj1 = new Foo1(‘dsx_obj1‘); obj1.say(); // 完善类的定义 function Foo2(name) { this.name = name } // 类的原型,将共用的的方法抽出来，当在实例化后，只创建了一个叫做Foo2的对象，对象内只有name，在调用方法时去现在Foo中找，没有找到，会在去原型中找 是否有该方法。有执行，没有就报错 Foo2.prototype = { say: function () { console.log(this.name) } }; var obj2 = new Foo2(‘dsx_obj2‘); obj2.say(); |
序列化
|
1 2 |
JSON.stringify(obj) 序列化 JSON.parse(str) 反序列化 |
转义
转义中文或特殊字符
|
|
1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的，所以要进行转义 2、& 代表参数的链接，如果就是想传& 给后端那么必须转义 decodeURI(url) URl中未转义的字符 decodeURIComponent(url) URI组件中的未转义字符 encodeURI(url) URI中的转义字符 encodeURIComponent(url) 转义URI组件中的字符
字符串转义 var name=‘大师兄‘ escape(name) 对字符串转义 unescape(name) 转义字符串解码 |
以上是关于html基础之js操作的主要内容，如果未能解决你的问题，请参考以下文章