第五周学习笔记和总结

这周开始学习 js，主要做了下图这么一个效果，初步接触一些js的知识。

js小练习

一、我写的代码

    
    
    
    
    


    

        
文章
        
动态
        
评论
        
热门
    

    
    

最终要实现的效果：点击其中一个标题，这个标题背景变成红色，其它标题背景恢复成默认颜色。这用 css 实现不了，需要用 js 实现。

二、DOM

css 修饰 html 的样式；

js 是控制 html 行为或者动画效果；

用 js 选择器选中 html 标签并设置行为或者动画，这样的一个过程叫做 DOM 操作。

三 、用代码控制浏览器

浏览器是代码写的，所以也可以通过代码去控制浏览器。

其中，window 代表浏览器本身；document 代表视图窗口；location 代表地址栏；console 代表控制台。关于视图窗口和地址栏的范围见下图。

按 F12 打开控制台，输入 document.write('

hello world!

')，可以看到视图窗口里被替换成了 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

用 js 选择器获取 id 为 demo 的 div，写法为：document.getElementById('demo')，用 Jquery 获取同样的 div 写法为 $('#demo')。

$('#demo') 是什么？

看见小括弧，就该知道$() 是个方法，方法名为 $，'#demo' 是方法的参数，最终返回的是 div 对象。

注意：使用 jquery 之前需要先引入 jquery.js 文件，网络地址为 。

六、变量与数据类型

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。