这周开始学习 js，主要做了下图这么一个效果，初步接触一些js的知识。
js小练习
一、我写的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 实战</title>
<style>
ul {
width: 400px;
height: 400px;
margin: 50px auto;
background-color: #f5f5d5;
padding-top: 20px;
}
li {
list-style: none;
display: inline-block;
border: 1px solid #333;
padding: 5px 10px;
cursor: pointer;
}
.active {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li class="active">文章</li>
<li>动态</li>
<li>评论</li>
<li>热门</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$('li').on('click', function () {
$(this).addClass('active')
$(this).siblings().removeClass('active')
})
</script>
</body>
</html>
最终要实现的效果：点击其中一个标题，这个标题背景变成红色，其它标题背景恢复成默认颜色。这用 css 实现不了，需要用 js 实现。
二、DOM
css 修饰 html 的样式；
js 是控制 html 行为或者动画效果；
用 js 选择器选中 html 标签并设置行为或者动画，这样的一个过程叫做 DOM 操作。
三 、用代码控制浏览器
浏览器是代码写的，所以也可以通过代码去控制浏览器。
其中，window 代表浏览器本身；document 代表视图窗口；location 代表地址栏；console 代表控制台。关于视图窗口和地址栏的范围见下图。
按 F12 打开控制台，输入 document.write('<h2>hello world!</h2>')，可以看到视图窗口里被替换成了 h2 标签。输入 location.href = "https://www.baidu.com" 可以发现地址栏变成了百度的网址，页面也同样变了。
image.png
四、对象
就像汉语里基础单位是汉字，英语里基础单位是单词，js 这门语言基础单位是 对象。 window、docment、location 都是对象，对象拥有属性和方法。
4.1 对象的属性
- 获取对象属性的值：
对象.属性名；如获取浏览器当前页面的网址，location.href； - 设置对象属性的值：
对象.属性名=属性值；如设置浏览器网址为百度首页，location.href="https://www.baidu.com"。
4.2 对象的方法
就像用计算器一样，需要输入几个数字，然后计算器内部做一些计算，最终在屏幕上显示计算的结果。方法就是计算器内部具体做的事。
4.2.1 定义方法
function 方法名 (参数) {
return xx;
}
- 浏览器看到 function 就知道这个是方法；
- 方法名可以随便起，但是最好形象表示这个方法是做什么的，比如写个加法，就可以起名字 sum；
- 参数就是用计算器时输入的几个值；
-
{}花括弧里写方法具体做了些什么事； - return 后面是方法的返回值。就像计算器计算完之后总会在屏幕上显示结果，方法执行完之后也会将结果返回出去的。
4.2.2 调用方法
- 格式：
对象.方法名()，如document.write()，看到()就该知道这是个方法。 - 所有方法都必须由对象调用，像我还看到 alert() 方法，在浏览器上弹出个对话框，后来我才知道它是 window 的方法，完整写法是 window.alert()，只是 window 省略没写。
4.2.3 window 对象
window 是浏览器中最大的对象，其它对象或方法都是它的后代，比如 document 是 window 的属性，属性也可以是对象，完整写法应该是 window.document.write()，只不过就是在浏览器里运行，window 就代表浏览器，所以 window 通常省略不写。同样的，location 也是 window 的一个属性。
五、jquery
<div id="demo"></div>
用 js 选择器获取 id 为 demo 的 div，写法为：document.getElementById('demo')，用 Jquery 获取同样的 div 写法为 $('#demo')。
$('#demo') 是什么？
看见小括弧，就该知道$() 是个方法，方法名为 $，'#demo' 是方法的参数，最终返回的是 div 对象。
<script>
$('#demo')
$('.demo')
$('li')
function $ (a) {
// 获取字符串的第一个字符
var firstStr = a.charAt(0);
if (firstStr === '#') { // id 选择器
return document.getElementById(a.substring(1));
} else if (firstStr === '.') { // class 选择器
return document.getElementsByClassName(a.substring(1));
} else { // 标签选择器
return document.getElementsByTagName(a);
}
}
</script>
注意：使用 jquery 之前需要先引入 jquery.js 文件，网络地址为 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>。
六、变量与数据类型
var result = $('#demo');
等号右边是 jquery 的方法 $()，这个方法最终返回一个值 —— div 对象，这个值的类型是个对象。
等号左边是个变量/容器，上面写法的意思是将右边的值赋值给左边的变量。
function sum (a, b) {
return a + b;
}
var result2 = sum(4, 4);
sum(4, 4) 为调用了 sum 方法，最终结果返回 8，也是一个值，只不过这个值的类型是数字。
在 js 里值的类型叫做 数据类型，有以下几种。
- 数值型 Number;
- 字符串型 String；（用单引号或双引号括起来，如：
"hello"） - 布尔值型 Boolean；
- Null；
- Undefined；
- 对象类型 Object。
网友评论