1、css层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器/派生选择器</title>
<style>
/* 1.后代元素 */
#div1 div {
/* border: 1px solid red; */
}
/* 2.子代元素 */
#div1 > div {
/* 边框: 1像素 实线 颜色 */
/* border: 1px solid red; */
}
/* 3.相邻兄弟元素 */
#div1 + div {
border: 1px solid blue;
}
/* 4.所有兄弟元素 */
#div1 ~ div {
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div1" class="cls2">1111
<div>1-111
<div>1-1-11</div>
<div>1-1-22</div>
</div>
<div>1-222</div>
<div>1-333</div>
<span>1-444</span>
</div>
<div class="cls1">222</div>
<div>333</div>
<div>444</div>
<span class="cls1">555</span>
<span>666</span>
</body>
</html>
2、JS入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS入门</title>
<!-- 2.在html文件中任意位置添加script标签 -->
<script>
// 控制台(浏览器)打印
console.log('hello js');
// 弹窗
alert("弹窗");
</script>
<!-- 3.引用外部的js文件, 不能在这继续写其他的js代码 -->
<script src="js/myjs.js"></script>
</head>
<body>
<!-- 1.JS写在html标签内部 -->
<img src="../media/image.jpg"/>
</body>
</html>
3、ECMA语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECMA语法</title>
<script>
/*
* 1.JS中数据类型是弱类型(类型可变)
* 2.通常没有编译报错, 运行期间才会在浏览器控制台报错
* 3.JS中如果一行只有一句代码, 可以不加 分号;
*/
// 数据类型
var a = 1 ; // number 局部变量
a = 1.2; // number
a = true; // boolean
a = "hello"; // string
b = 10; // 不加var关键字全局变量
console.log(typeof b)
//console.log(c); // 没有声明, 运行时报错
var d; // undefined
console.log(typeof d); // 变量没有初始化 就是undefined
d = null;
console.log(typeof d);
</script>
</head>
<body>
</body>
</html>
4、ECMAScript基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECMAScript基础</title>
<script>
// 运算符
var a = "1";
var b = 1;
console.log(a == b); // 判断内容, 不判断类型
console.log(a === b); // 先判断类型, 再判断内容
// 语句
if (a) { // null 或者 undefined 表示false
console.log("a:" + a);
}
// 数组
var arr1 = [1,"hello",true,null];
console.log(arr1.length); // 数组长度
console.log(typeof arr1); // object
console.log(arr1[1]);
arr1 = new Array(5); // 创建一个长度为5的数组
console.log(arr1.length)
console.log(arr1[1])
arr1 = new Array(1,2,3,4); // 创建一个固定内容的数组
console.log(arr1)
arr1[6] = 9; // JS数组长度不固定, 不存在越界
console.log(arr1);
</script>
</head>
<body>
</body>
</html>
5、事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
<script>
// 函数对象定义, 名字就叫 fun1
function fun1() {
alert('按钮被点击');
console.log(10);
var a = 10;
console.log(a++);
}
</script>
</head>
<body>
<!-- 1.直接在标签中添加对应的事件属性 -->
<button onclick="fun1()" >按钮1</button>
<button id="btn1" >按钮2</button>
</body>
<script>
// 2.先获得 按钮2 的对象, 通过对象的属性添加事件
// 获得 DOM 对象的方式 getElementById 必须在标签加载完成后使用
var btn1 = document.getElementById("btn1");
// 给对象添加事件的属性, = 后面只能给一个函数对象
btn1.onclick = fun1;
btn1.onclick = function() { // 匿名函数
alert("通过匿名函数添加的事件")
}
</script>
</html>
6、函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script>
// 函数的定义, 对象名就叫 fun1
function fun1() {
alert("fun1");
}
console.log(typeof fun1);
fun1(); // 调用函数
var fun2 = fun1; // 函数的赋值
console.log(typeof fun2);
fun2();
var fun3 = function() { // 匿名函数, 赋值给了fun3
alert("fun3");
}
fun3();
// JS中的函数是对象(变量), 只能被覆盖, 不存在重载
function fun4() {
alert("fun4无参");
} // 被覆盖
function fun4(a) {
alert("fun4 : " + a);
}
fun4(1, 2); // 可以传参, 可以不传参
</script>
</head>
<body>
</body>
</html>
7、note
JavaScript:
ECMAScript 基础 语法
DOM: 文档对象模型
html中所有的标签都叫文档对象
BOM: 浏览器对象模型, 只有跟浏览器相关的对象
对象: 属性, 方法
1.JavaScript入门
2.事件
onblur 元素失去焦点。
onfocus 元素获得焦点。
onchange 域的内容被改变。 select标签
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onsubmit 确认按钮被点击。 form
3.this
1352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
