本文转载自：https://blog.csdn.net/xiaogeldx/article/details/85390757
注
- 在pycharm中快速注释HTML的方法（用于注释方法不正确时）：
- File--Settings--Languages&Frameworks--Python Template Languages--Template Languages改为None，HTML和JavaScript注释方法就都正确了
JavaScript基础知识
- 网页三要素：HTML，css，js
- JavaScript和Java没有任何关系，最多语法看起来有点像
- JavaScript原名ivescript，是一门动态类型，弱类型基于原型的脚本语言
- 和HTML复合使用，不能单独使用
- 大部分浏览器都支持
JavaScript作用：
- 页面特效
- 前后交互
- 后台开发（node）
JavaScript写在哪里
- 写在script标签里
- 外部js文件引入
写在script标签里
1.
<head>
<meta charset="UTF-8">
<title>try</title>
<script>
alert("wer");
</script>
</head>
<body>
<div>
<input type="button" value="点我" onclick="alert('bug')">
</div>
2.
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<div>
<input type="button" value="点我" onclick="alert('bug')">
</div>
<script>
alert("wer");
</script>
外部的js文件内，然后引入
<head>
<meta charset="UTF-8">
<title>try</title>
<script src="js/a.js"></script>
</head>
<body>
<div>
<input type="button" value="点我" onclick="alert('bug')">
</div>
-
a.js的代码:
alert("wer");
JS一些注意事项
- 严格区分大小写
- 每一行完整语句后面加分号
- 变量名不能使用关键字和保留字
- 代码要缩进，保持可读性
- 注释用//
JS修改元素内容
- 首先获取id为xxx的元素 document.getElementByld(" ")
- var 是js定义变量的关键字,创建（声明变量），如果不加为全局变量
- innerHTML和innerText可以修改/获取
JS获取元素
-
通过id获取元素:id
document.getElementById(" "); -
通过class名字获取元素:class
document getElementsByClassName(" "); -
通过标签名获取元素:tagName
document.getElementsByTagName(" "); -
通过name的属性获取元素，一般用于input:name
document.getElementsByName(" "); -
通过css选择器获取一个
document.querySelector(" "); -
通过css选择器获取所有
document.querySelectorAll(" ");
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<p id="p1"><span>111</span></p>
<p class="c1">2222</p>
<span name="span1">3333</span>
</div>
<div class="div2">
<p class="c1">5555</p>
<span name="span1">6666</span>
<p name="span1">7777</p>
<span class="c1">8888</span>
</div>
<div>
<p>9999</p>
<span>0000</span>
</div>
<script type="text/javascript">
//通过id获取元素,一个网页中一个id命名使用一次,所以不用加索引
var a = document.getElementById('p1');
a.onclick = function () {
alert('bug');
};
//通过标签名获取元素,需要加索引
var b = document.getElementsByTagName('span')[0];
b.onclick = function () {
alert('bug');
};
// 通过name获取元素,需要加索引
var c = document.getElementsByName('span1')[1];
c.onclick = function () {
alert('bug');
}
// 通过classname获取元素,需要加索引
var d = document.getElementsByClassName('c1')[1];
d.onclick = function () {
alert('bug');
};
// 通过css选择器获取一个元素
// 单独的标签获取第一个,如果选择器里还嵌套标签,第一个选择器里面的所有标签都能获取,不能索引
// 选div时,第一个div标签里的标签都能获取
var e = document.querySelector('div');
e.onclick = function(){
alert('bug');
};
// 通过class标签获取所有
// 此时获取的是id为div1下的所有的span标签
// div标签里嵌套其他标签时需要索引,表示第几个div里的所有标签都可以获取
// 单独的标签可以直接索引获取
// #div1或者.div2加上里面的标签需要索引获取
var f = document.querySelectorAll('div')[0];
f.onclick = function () {
alert('bug');
};
</script>
</body>
</html>
JavaScript简单事件
JS的基础事件
-
单击事件：onclick
-
双击事件:ondblclick
-
鼠标划入:onmouseenter
-
鼠标划出:onmouseleave
-
窗口变化:onresize
// 浏览器窗口有变化时就会出现 window.onresize = function () { alert("3245"); }; -
改变下拉框:onchange
<select> <option value="1">苹果</option> <option value="1">橘子</option> <option value="1">橙子</option> </select> <script type="text/javascript"> var h = document.getElementsByTagName('select')[0]; //改变下拉框里的值就会弹出 h.onchange = function () { alert('改变了'); }; </script>
操作标签属性
-
合法属性的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <div> <p id="p1" class="s1">我是一句话</p> </div> <script type="text/javascript"> var a = document.getElementById("p1"); // 增/改：无则增，有则改 a.className="hahaha"; // 查 console.log(a.className); // 删除 a.removeAttribute("class"); console.log(a); </script> </body> </html> -
自定义属性的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>try</title> </head> <body> <di <p id="p1" class="s1">我是一句话</p> </div> <script type="text/javascript"> var a = document.getElementById("p1"); // 增/改 无则增，有则改 a.setAttribute("age","m"); // 查，查到返回true，没查到返回false console.log(a.hasAttribute("age")); // 删除 a.removeAttribute("age"); console.log(a); </script> </body> </html>
JS修改样式
- Obj.style.变量=变量值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<div id="div2" style=" 100px;height: 100px;color: red;border:1px solid blue">
<p id="p1" class="s1">我是一句话</p>
</div>
<script type="text/javascript">
var b = document.getElementById("div2");
b.style.width = "50px";
b.style.height = "50px";
console.log(b)
</Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try</title>
</head>
<body>
<div id="div2" style=" 100px;height: 100px;color: red;border:1px solid blue">
<p id="p1" class="s1">我是一句话</p>
</div>
<script type="text/javascript">
var a = document.getElementById("div2");
var b = document.getElementById("div2");
b.onclick=function() {
a.style.width = "50px";
a.style.height = "50px";
}
console.log(b)
</Script>
</body>
</html>
数据类型
- js提供了一种检测当前变量的数据类型的方法，也就是typeof关键字
JS的数据类型
- 五种基本类型＋object（复杂型）
Number类型
-
Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值
var a = 123; console.log(typeof a); -
NaN:非数字类型
-
isNaN() 函数用于检查其参数是否是非数字值
isNaN(123) //false isNaN("hello") //true
String类型
-
字符串有length属性
-
字符串转换：转型函数String(),适用于任何数据类型（null,undefined 转换后为null和undefined）；toString()方法（null,defined没有toString()方法）
-
字符串要用引号
var a = "123"; console.log(typeof a);
Boolean类型
-
该类型只有两个值，true和false
var a = true; console.log(typeof a);
Undefined类型
-
只有一个值，即undefined值。使用var声明了变量，但未给变量初始化值，那么这个变量的值就是undefined
var a; console.log(typeof a);
Null类型
-
null类型被看做空对象指针，前文说到null类型也是空的对象引用
var a = null; //object console.log(typeof a); -
null类型进行typeof操作符后，结果是object，原因在于null类型被当做一个空对象引用
Object类型
- js中对象是一组属性与方法的集合,这里就要说到引用类型了，引用类型是一种数据结构，用于将数据和功能组织在一起,引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法
引用类型
Object类型
- 我们看到的大多数类型值都是Object类型的实例
- 创建Object实例的方式有两种
-
第一种是使用new操作符后跟Object构造函数，如下所示
var person = new Object(); person.name = "Micheal"; person.age = 24; -
第二种方式是使用对象字面量表示法，如下所示
var person = { name : "Micheal", age : 24 };
-
Array类型
- 数组的每一项可以用来保存任何类型的数据，也就是说，可以用数组的第一个位置来保存字符串，第二个位置保存数值，第三个位置保存对象等等
- 数组的大小是可以动态调整的
- 创建数组的基本方式有两种
-
第一种是使用Array构造函数，如下所示
var colors = new Array("red","blue","yellow"); -
第二种是使用数组字面量表示法，如下所示
var colors = ["red","blue","yellow"];
-
Function类型
-
每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法，函数通常是使用函数声明语法定义的，如下所示
function sum(num1,num2){ return num1 + num2; }; -
这和使用函数表达式定义函数的方式相差无几
var sun = function (){ return sum1 + sum2; };
案例
var name = 'xiaoge';
alert(typeof name);//string
var age = 15;
alert(typeof age);//number
var flag = true;
alert(typeof flag);//boolean
var a;//undefined
alert(typeof a);
var b = null;
alert(typeof b);//object
var arr = [1,2,3];//object
alert(typeof arr);
var user = {
name:'xiaoge',
age:18
};
alert(typeof user);//object
alert(typeof console.log());//undefined
var say = function () {
alert(name+'很帅');
};
alert(typeof say);//function
alert(say())//xiaoge很帅//undefined
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/test.css">
<script src="js/test.js"></script>
</head>
<body>
<div class="d1">
属性名：<input type="text" class="an"><br>
属性值：<input type="text" class="av"><br>
<input type="button" value="设置" class="set1">
</div>
<div class="d2" style=" 200px; height: 200px; background-color: yellow; line-height: 200px; text-align: center;">我就是我</div>
<script type="text/javascript">
var moumov = document.getElementsByClassName('d2')[0];
moumov.onmouseenter = function () {
moumov.innerText = '是我还是我';
moumov.style.background = 'blue';
};
moumov.onmouseleave = function () {
moumov.innerText = '我就是我';
moumov.style.background = 'yellow';
};
var inp = document.getElementsByTagName('input');
inp[2].onclick = function () {
var attr = inp[0].value;
var attrs = inp[1].value;
moumov.style[attr] = attrs;
};
</script>
</body>
</html>
