首页 > 编程语言> > 第十一章前端开发-JavaScript

第十一章前端开发-JavaScript

2019-12-18 20:55:06 作者：互联网

第十一章前端开发-JavaScript

11.3.1 js引入方式

行内样式

<p id="" class="" style="" onclick="console.log(2);">mjj</p>

内嵌式

<script type="text/javascript">
    // js代码
</script>

外接式

<script type="text/javascript" src="js/index.js"></script>

11.3.2 js基础语法

11.3.2.1 测试语句

打印：console.log();
弹出框：alert();
输入：prompt(message:'请输入');
- 有返回值，使用变量接收

示例：

console.log('hello world');
alert('hello world');
console.log(window);
var name = prompt('请输入今天的天气？');
console.log(name);

注释
```
//单行注释
/*多
行
注
释*/
...
```

运算符

a ++;相当于 a+=1;
++ a;相当于 a+=1;

var a = 1;
a ++;      // 相当于 a+=1;
++ a;      // 相当于 a+=1;

var a = 4;
// 先把a的值赋值给c，再a++
var c = a ++;
console.log(c);   // 4
console.log(a);   // 5
// 先++a，再赋值给c
var c = ++a;
console.log(c);   // 5
console.log(a);   // 5

==（等于）和===（等同于）的区别

var a = 2;
var b = '2';
console.log(a == b);      // 比较的是值，为true
console.log(a === b);     // 比较是值和数据类型，为false

11.3.2.2 变量

基本数据类型

整型：number
字符串：string
布尔：boolean
未定义的：undefined
空对象：null

var a = 2;      // 整型
var b = '2';    // 字符串
var c = true;   // 布尔
var d;          // 未定义的
var e = null;   // 空对象

// 先声明后定义
var f;
console.log(f);   // 值  是undefined
console.log(typeof f);  // 类型  是undefined

引用数据类型
- 数组：Array
- 对象：Object
- 函数：function

时间：Date

var arr = ['张三','李四'];   //数组

// js中,有全局作用域和函数作用域
// 1.普通函数的声明
function add(a,b){
    return a + b
}
// 2.函数表达式
var add2 = function(){
};
// 3.自执行函数
;(function(){
    alert(1111);
})();

// 定义在对象中的函数，叫做对象的方法
var obj = {
    name:'mjj',
    age:19,
    fav:function () {
        console.log(this);
    }
};
obj.fav();

其他：NaN（不是数字），Infinity（无限大）
- NaN：不是一个数字，不是整型
  - isNaN：判断是否是NaN
- 对于运算来说，Infinity相当于报错

函数：解决冗余性的代码，为了封装

定义函数

function sum(a,b){
    // 函数体;
}

函数调用

function sum(a,b){
    console.log(a+b);
}
sum(3,5);    // 调用函数，直接写函数名

函数返回值

function sum(a,b){
    return a+b
}
var result = sum(4,5);

函数的arguments：伪数组

function  fn(a,b) {
    // arguments.length，是实参的个数
    // arguments它不是一个数组，它被称为叫伪数组
    console.log(arguments);
    for(var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
}
fn(2,3,4);
console.log(fn.length);      // fn.length，是形参的个数

11.3.2.3 流程控制

if语句

var score = 100;
if(score > 80){
    console.log('可以吃鸡了');
}else if(score > 70) {
    console.log('在家呆着');
}else{
    console.log('学习');
}

// 特殊：三元运算
var a =  1 < 2 ? "yes": "no";
console.log(a);

switch语句

var weather = prompt('请输入今天的天气');
switch (weather) {
    case '晴天':
        console.log('可以去打篮球');
        break;
    case '下雨':
        console.log('可以睡觉');
        break;
    default:
        console.log('学习');
        break;
}

11.3.2.4 循环

for循环

var arr = [8,9,0];
// 1.初始化循环变量  2.循环条件  3.更新循环变量
for(var i = 0;i < arr.length; i++){
    console.log(arr[i]);
}

while循环

初始化条件
while(判断循环结束条件){
    // code to run
    递增条件
}

// 打印1到100之间的数
var a = 1;
while(a <= 100){
    console.log(a);
    a+=1;
}

11.3.3 js常用对象

11.3.3.1 对象

创建对象

构造函数
- 使用new操作符后跟Object构造函数

// 创建对象
var person = new Object();
// 给对象添加name和age属性
person.name = 'jack';
person.age = 28;
// 给对象添加fav的方法
person.fav = function(){
    console.log('泡妹子');
}

// 特殊：
var person = {};    // 与new Object()相同

使用对象字面量表示法
- 对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程

var person = {
    name : 'jack';
    age : 28,
    fav : function(){
        console.log('泡妹子');
    }
}

this指向
- 对象中的this指向当前对象
- 全局作用域中的this，一定指向window
- 函数中的this，一般情况下，都指向window
  - 特殊情况：使用call和apply，此时this指向传入的对象
- 自执行函数中的this，一定指向window

var obj = {};
obj.name = 'mjj';
obj.fav = function(){        
    console.log(this);       // 此时this指向当前对象，即obj 
}

console.log(this);           // 此时this指向window
function  add(x,y) {
    console.log(this.name);
}
add();                      // 空值，此时this指向window
add.call(obj,1,2);           // 此时this指向传入的对象，即obj
add.apply(obj,[1,2]);        // 此时this指向传入的对象，即obj

(function () {
    console.log(this);       // 此时this指向window
})()

访问对象中属性的方法

点语法：用来访问对象中的属性

person.name;         // jack
person.fav();        // 泡妹子

括号表示法

person['name'];          // 相当于person.name;

遍历对象

var obj = {};
for (var key in obj){
    obj[key]
}

面向对象

// 使用构造函数来创建对象
function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

// es6用class来创建对象
class Person{
    constructor(name,age){
        // 初始化
        this.name = name;
        this.age = age;
    }
    fav(){
        console.log(this.name);
    }
}
var p = new Person('mjj',18);
p.fav();

11.3.3.2 数组：Array

数组的创建方式
- 跟object创建对象一样，使用Array构造函数方式创建
```
var colors = new Array();
```
- 使用字面量方式创建数组
```
var colors = [];
```

Array.isArray()：确定某个值到底是否是数组

var colors = ['red','green','blue'];
Array.isArray(colors);       // true

toString()：返回由数组中每个值以一个以逗号拼接成的字符串

var colors = ['red','green','blue'];
alert(colors.toString());        // red,green,blue

join方法：返回由数组中每个值以相同符号拼接成的字符串

var colors = ['red','blue','green'];
colors.join('||');           // red||blue||green

栈方法：LIFO（后进先出）
- push()：进，可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
```
var colors = [];
var count = colors.push('red','blue','green');
alert(count);                // 3
```
- pop()：出，从数组末尾移除最后一项，减少数组的length值，然后返回移除的项
```
var item = colors.pop();     // 取最后一项
alert(item);                 // green
alert(colors.length);        // 2
```

队列方法：FIFO（先进先出）

unshift()：进，在数组前端添加任意个项并返回新数组的长度

var colors = [];
var count  = colors.unshift('red','green');  // 推入两项
alert(count);                // 2
console.log(colors);         // ["red", "green"]

shift()：出，移除数组中的第一个项并返回该项，同时将数组长度减1

var colors = ['red','blue','green'];
var item = colors.shift();       // 取得第一项
alert(item);                 // "red"
alert(colors.length);        // 2

重排序方法

reverse()：反转，翻转数组项的顺序

var values = [1,2,3,4,5];
values.reverse();
alert(values);           // 5,4,3,2,1

sort()：排序，默认是升序排列

// 升序
function compare(v1,v2){
    if(v1 < v2){
        return -1;
    }else if (v1 > v2){
        return 1;
    }else{
        return 0;
    }
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values);           // 0,1,5,10,15
// 降序
function compare(v1,v2){
    if(v1 < v2){
        return 1;
    }else if (v1 > v2){
        return -1;
    }else{
        return 0;
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);           // 15,10,5,1,0

操作方法
- concat()：数组合并方法，一个数组调用concat()方法去合并另一个数组，返回一个新的数组，接收的参数是可以是任意的
  - 参数为一个或多个数组，会将这些数组中每一项都添加到结果数组中。
  - 参数不是数组，这些值就会被简单地添加到结果数组的末尾
```
var colors = ['red','blue','green'];
colors.concat('yello');                   // ["red", "blue", "green", "yello"]
colors.concat({'name':'张三'});           // ["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);  
// ["red", "blue", "green", {…}, "black", "brown"]
```
- slice()：基于当前数组中一个或多个项创建一个新数组，可以接受一或两个参数，要返回项的起始和结束位置
  - 一个参数的情况下，返回从该参数指定位置开始到当前数组默认的所有项
  - 两个参数的情况下，返回起始和结束位置之间的项，但不包括结束位置的项
```
var colors = ['red','blue','green','yellow','purple'];
// 正值情况下
colors.slice(1);     // ["blue", "green", "yellow", "purple"]
colors.slice(1,4);      // ["blue", "green", "yellow"]
// 负值情况下
colors.slice(-2,-1); // ["yellow"] 
colors.slice(-1,-2); // []
```
- splice()：给数组插入、删除、替换项
  - 插入：向指定位置插入任意数量的项，只需提供3个参数：起始位置，0（要删除的个数），要插入的项
  - 删除：删除任意数量的项，只需指定2个参数：要删除的第一项的位置，要删除的个数
  - 替换：向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置，要删除的项数，要插入的任意数量的项
```
var colors = ["red", "green", "blue"];
var removed = colors.splice(0,1); 
alert(colors);       // green,blue 
alert(removed);  // red，返回的数组中只包含一项
removed = colors.splice(1, 0, "yellow", "orange"); 
alert(colors);       // green,yellow,orange,blue 
alert(removed);  // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); 
alert(colors);       // green,red,purple,orange,blue 
alert(removed);  // yellow，返回的数组中只包含一项
```

位置方法

indexOf()：从数组的开头(索引位置0)开始向后查找
lastIndexOf()：从数组的末尾开始向前查找，然后然会他的索引

var numbers = [1,2,3,4,5,4,3,2,1];
numbers.indexOf(4);          // 3
numbers.lastIndexOf(4);      // 5  
numbers.indexOf(4,4);        // 5
numbers.lastIndexOf(4,4);    // 3
var person = {name:"mjj"};
var people = [{name:'mjj'}];
var morePeople = [person];
people.indexOf(person);   // -1
morePeople.indexOf(person);  // 0

迭代方法

filter()：利用指定的函数确定是否在返回的数组中包含某一项

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.filter(function(item, index, array){
    return (item > 2);
});
alert(filterResult);    // [3,4,5,4,3]

map()：返回一个数组，而这个数组的每一项都是在原始数组中的对应项上执行函数的结果

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterResult);    // [2,4,6,8,10,8,6,4,2]

forEach()：对数组中的每一项执行函数，没有返回值，本质上与使用for循环迭代数组一样，只能在数组中使用

//执行某些操作,相当于for循环
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
});

11.3.3.3 字符串：String

字符串的创建方式
```
var stringValue = "hello world"; 
```

length属性

var stringValue = "hello world"; 
alert(stringValue.length);            // "11"

字符方法

charAt()：返回给定位置的那个字符

var stringValue = "hello world"; 
alert(stringValue.charAt(1));         // "e"

charCodeAt()：返回给定位置的那个字符所对应的编码

var stringValue = "hello world";
alert(stringValue.charCodeAt(1));     // 输出"101"

字符操作方法

concat()：用于将一或多个字符串拼接起来，返回拼接得到的新字符串
+或${}，也可以拼接字符串

var stringValue = "hello ";
var result = stringValue.concat("world"); alert(result);           // "hello world" 
alert(stringValue);      // "hello"

// concat()方法可以接受任意多个参数，也就是说可以通过它来拼接任意多个字符串
var stringValue = "hello ";
var result = stringValue.concat("world", "!");
alert(result);           // "hello world!"

// 拼接字符串
// 通用方式：
var name = 'wusir', age = 28;
var str = name + '今年是' + age + '岁了，快要结婚了，娶了个黑姑娘';
// es6的模板字符串，使用``（Tab上面的那个键）
var str2 = `${name}今年是${age}岁了，快要结婚了，娶了个黑姑娘`;

slice()，substr()，substring()：基于子字符串创建新字符串的方法

var stringValue = "hello world";
// 正值情况下
stringValue.slice(3);      // "lo world"
stringValue.substring(3);      // "lo world"
stringValue.substr(3));        // "lo world"

stringValue.slice(3, 7);       // "lo w"
stringValue.substring(3,7);    // "lo w"
stringValue.substr(3, 7);      // "lo worl
// 负值情况下
stringValue.slice(-3);         // "rld" 
stringValue.substring(-3);     // "hello world"
stringValue.substr(-3);        // "rld"
stringValue.slice(3, -4);      // "lo w" 
stringValue.substring(3, -4);  // "hel"
stringValue.substr(3, -4);     // ""(空字符串)

字符串位置方法

indexOf()：从字符串的开头向后搜索子字符串
lastIndexOf()：从字符串的末尾向前搜索子字符串

var stringValue = "hello world";
alert(stringValue.indexOf("o"));            // 4
alert(stringValue.lastIndexOf("o"));        // 7
alert(stringValue.indexOf("o", 6));         // 7
alert(stringValue.lastIndexOf("o", 6));     // 4

trim()：删除字符串的前后空格

var stringValue = "   hello world   ";
stringValue.trim();       // "hello world"

字符串大小写转换方法

toUpperCase()：小写转换成大写
toLowerCase()：大写转换成小写

var stringValue = "hello world";
stringValue.toUpperCase();       // "HELLO WORLD"
stringValue.toLowerCase();       // "hello world"

11.3.3.4 日期对象：Date

日期对象的创建方式
```
var myDate = new Date();
```
基本方法
- getDate()：返回指定日期对象的月份中的第几天
- Date()：返回当天的日期和时间
- getMonth()：返回指定日期对象的月份
- getFullYear()：返回指定日期对象的年份
- getDay()：返回指定日期对象的星期中的第几天
- getHours()：返回指定日期对象的小时
- getMinutes()：返回指定日期对象的分钟
- getSeconds()：返回指定日期对象的秒数
日期格式化方法
- toLocaleString()：以特定于实现的格式显示年月日，时分秒;
- toDateString()：以特定于实现的格式显示星期几、月、日和年
- toTimeString()：以特定于实现的格式显示时、分、秒和时区;
- toUTCString()：以特定于实现的格式完整的 UTC 日期
```
var myDate = new Date();
myDate.toLocaleString();     // "2019/6/4 上午9:33:58"
myDate.toDateString();          // "Mon Apr 15 2019"
myDate.toTimeString();          // "10:11:53 GMT+0800 (中国标准时间)"
myDate.toUTCString();           // "Mon, 15 Apr 2019 02:11:53 GMT"
```

将今天的星期数显示在网页上，即写入body中，使用document.write

var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log(weeks[date.getDay()]);
var day = weeks[date.getDay()];
document.write(`<a href="#">${day}</a>`);

数字时钟

示例：返回了用数字时钟格式的时间

var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var temp = "" + ((hour > 12) ? hour - 12 : hour);
if (hour == 0)
    temp = "12";
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
alert(temp);

升级版：在网页上显示数字时钟的动态效果

<body>
<h2 id="time"></h2>
<script>
    var timeObj = document.getElementById('time');
    console.log(time);
    function getNowTime() {
        var time = new Date();
        var hour = time.getHours();
        var minute = time.getMinutes();
        var second = time.getSeconds();
        var temp = "" + ((hour > 12) ? hour - 12 : hour);
        if (hour == 0) {
            temp = "12";
        }
        temp += ((minute < 10) ? ":0" : ":") + minute;
        temp += ((second < 10) ? ":0" : ":") + second;
        temp += (hour >= 12) ? " P.M." : " A.M.";
        timeObj.innerText = temp;
    }
    setInterval(getNowTime, 20)
</script>
</body>

11.3.3.5 数学对象：Math

min()和max()方法

Math.min()：求最小值
Math.max()：求最大值

var max = Math.max(3, 54, 32, 16);
alert(max);    // 54
var min = Math.min(3, 54, 32, 16);
alert(min);    // 3

// 特殊：使用apply，找到数组中最大或最小值
var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null, values);

舍入方法
- Math.ceil()：天花板函数，只入不舍，相当于取整再加1
  - 执行向上舍入，即它总是将数值向上舍入为最接近的整数
- Math.floor()：地板函数，只舍不入，相当于取整
  - 执行向下舍入，即它总是将数值向下舍入为最接近的整数
- Math.round()：四舍五入，和数学中的取舍方式一致
  - 执行标准舍入，即它总是将数值四舍五入为最接近的整数
```
var num = 25.7;
var num2 = 25.2;
Math.ceil(num);     // 26
Math.floor(num);    // 25
Math.round(num);    // 26
Math.round(num2);   // 25
```

random()方法

用来取随机数
Math.random()：方法返回大于等于0小于1的一个随机数

// 例1:获取min到max的范围的整数
function random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
}

// 例2: 获取随机颜色
/* 产生一个随机的rgb颜色
@return {String}  返回颜色rgb值字符串内容，如：rgb(201, 57, 96) */
function randomColor() {
 // 随机生成rgb值，每个颜色值在0-255之间
    var r = random(0, 256),
        g = random(0, 256),
        b = random(0, 256);
 // 连接字符串的结果
    var result = "rgb("+ r +","+ g +","+ b +")";
    // 返回结果
    return result;
}

// 例3: 获取随机验证码
function createCode(){
    //首先默认code为空字符串
    var code = '';
    //设置长度，这里看需求，我这里设置了4
    var codeLength = 4;
    //设置随机字符
    var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
    //循环codeLength 我设置的4就是循环4次
    for(var i = 0; i < codeLength; i++){
        //设置随机数范围,这设置为0 ~ 36
        var index = Math.floor(Math.random()*36);
        //字符串拼接 将每次随机的字符 进行拼接
        code += random[index]; 
    }
    //将拼接好的字符串赋值给展示的Value
    return code
}

11.3.3.6 字符串和数值之间的转换

字符串转数值

parseInt()：字符串转整数
perseFloat()：字符串转浮点型
Number()：字符串转数值

var str = '123.0000111';         
console.log(parseInt(str));           // 123
console.log(typeof parseInt(str));     // number
console.log(parseFloat(str));         // 123.0000111
console.log(typeof parseFloat(str));  // number
console.log(Number(str));             // 123.0000111

数值转字符串

toString()：数值转字符串
数字+空的字符串：数值转字符串

var num  = 1233.006;
// 强制类型转换
console.log(String(num));
console.log(num.toString());
// 隐式转换
console.log(''.concat(num));
// toFixed()方法会按照指定的小数位返回数值的字符串 四舍五入
console.log(num.toFixed(2));

11.3.4 BOM

Brower Object Model：浏览器对象模型

11.3.4.1 window对象

系统对话框方法

警告框：window.alert();
确认框：window.confirm();
弹出框：window.prompt();

window.alert('mjj');
var a = window.confirm('你确定要删除?');
console.log(a); 
var weather = window.prompt('今天天气如何??');
console.log(weather);

定时方法

setTimeout()：一次性任务
- 在5秒之后，执行相应的操作，可以做异步操作

// 在5秒之后 执行相应的操作,可以做异步行为
window.setTimeout(function(){
    console.log('111');
},5000);
console.log('2222');

// 清除任务
var timer = setTimeout(callback,2000);
clearTimeout(timer);

setInterval()：周期性循环
- 可以使用clearInterval()来清除当前的定时任务，在开启定时器之前，要先清除掉定时器

// 周期性定时器
var num = 0;
var timer = null;
// 开启定时器
timer = window.setInterval(function(){
    num++;
    if(num === 10){
        // 清除定时器
        clearInterval(timer);
    }
    console.log(num);
},1000);

总结：
- setTimeout(callback,毫秒)：一次性任务，延迟操作，异步
  setInterval(callback,毫秒)：周期性循环任务，用于动画、css、transtion、tranform

location对象
- reload()：重新加载，相当于刷新了整个页面，可用来做测试
```
console.log(window.location);
setInterval(function(){
    location.reload();
},2000)
```
- 局部刷新，使用ajax技术
  - ajax技术：在不重载页面的情况,对网页进行操作

示例：切换图片

<div id="box">
    <img src="images/1.jpg" alt="" id="imgBox">
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script type="text/javascript">
    var imgBox = document.getElementById('imgBox');
    var next = document.getElementById('next');
    var prev = document.getElementById('prev');
    var num = 1;
    next.onclick = function (){
        nextImg();
    };
    prev.onclick = function () {
        prevImg()
    };
    function nextImg(){
        num++;
        if(num === 5){
            num = 1;
        }
        imgBox.src = `images/${num}.jpg`;
    }
    function prevImg(){
        num--;
        if(num === 0){
            num = 4;
        }
        imgBox.src = `images/${num}.jpg`;
    }
    // 还可以使用定时器来循环切换，即setInterval(nextImg,1000);
</script>

11.3.5 DOM

Document Object Model：文档对象模型

11.3.5.1 节点

节点的分类
- 元素节点：各种标签
- 文本节点：标签中的文本内容
- 属性节点：标签中的属性

获取元素节点的方式

getElementById()：通过id获取单个节点对象
getElementsByTagName()：通过标签名获取节点对象
getElementsByClassName()：通过类名获取节点对象

// 1.通过id获取单个节点对象
var box = document.getElementById('box');
console.log(box);
console.dir(box);
console.log(box.children);
// 2.通过标签名来获取节点对象 
var box2 = document.getElementsByTagName('div');
console.log(box2);
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
 lis[i].onclick = function(){
     // 排他思想
     for(var j = 0; j < lis.length; j++){
         lis[j].className = '';
     }
     // this指向了绑定onclick的那个对象
     this.className = 'active';
 }
}
// 3.通过类名获取
var lis2 = document.getElementsByClassName('active'); */
console.log(lis2);

节点的创建、添加和删除

创建节点：createElement()
- 属性：
  - innerText：只能设置文本
  - innerHTML：既可以设置文本又可以设置标签要是引用${},要用反引号
  - 针对与表单控件，使用value
    - inputText.value = '123';
添加节点：
- appendChild(newNode)：在后面追加newNode
- insertBefore(newNode,node)：在node前插入newNode
删除节点：removeChild()

var ul = document.getElementById('box');
// 创建节点
var li1 = document.createElement('li');
var li2 = document.createElement('li');
// innerText 只设置文本
li1.innerText  = '你好';
li1.innerHTML = '<a href="#">123</a>';
li1.setAttribute('class','active');
console.log(li1.children);

li1.children[0].style.color = 'red';
li1.children[0].style.fontSize = '20px';
// 插入节点
ul.appendChild(li1);
li2.innerHTML = '第一个';
ul.insertBefore(li2,li1);
// 删除节点
ul.removeChild(li2);

示例：遍历数据操作页面

<style>
    ul li p.name{
        color: red;
    }
</style>

<body>
    <ul id="box"></ul>
    <script type="text/javascript">
        var box = document.getElementById('box');
        //从前端获取后端的数据
        var data = [
            {id:1,name:'小米8',subName:'你真好',price:98},
            {id:2,name:'小米6',subName:'你真好2',price:948},
            {id:3,name:'小米4',subName:'你真好3',price:100},
            {id:4,name:'小米2',subName:'你真好4',price:928},
            {id:5,name:'小米10',subName:'你真好5',price:918}
        ];
        for(var i = 0; i < data.length; i++){
            var li = document.createElement('li');
            li.innerHTML = `<p class="name">${data[i].name}</p>
<p class="subName">${data[i].subName}</p>
<span class="price">${data[i].price}元</span>`;
            box.appendChild(li);
        }
    </script>
</body>

11.3.5.2 属性操作

对样式操作

修改样式：box.style.color等

<style type="text/css">
 #box{
     width: 200px;
     height: 200px;
     background-color: red;
 }
</style>
<div id="box">mjj</div>

// 获取事件源对象
var box = document.getElementById('box');
// 绑定事件
box.onmouseover = function (){
    // 让标签的背景色变绿
    box.style.backgroundColor = 'green';
    box.style.fontSize = '30px';
}
// 绑定事件
box.onmouseout = function (){
    // 让标签的背景色变红
    box.style.backgroundColor = 'red';
    box.style.fontSize = '16px';
} 

// 单击更换背景色
var isRed = true;
box.onclick = function(){
    if(isRed){
        this.style.backgroundColor = 'green';
        isRed = false;
    }else{
        this.style.backgroundColor = 'red';
        isRed = true;
    }
}

对属性操作

获取标签上的属性：getAttribute
修改标签上的属性：setAttribute
- 如果是自定义的属性,要在文档上能看到,通过setAttribute设置属性

<style type="text/css">
    .a{
        color: red;
        font-size: 30px;
    }
    p.active{
        color: blue;
    }
</style>
<p title="我的班级" id="p1" class="a">21</p>

// 如果是自定义的属性,要在文档上能看到,通过setAttribute设置属性
var p1 = document.getElementById('p1');
console.log(p1.getAttribute('title'));
p1.setAttribute('class','abc');
console.log(p1.className);
console.log(p1.title);
console.dir(p1);
/* p1.onclick = function(){
    this.className = this.className +' active';
} */
// // 单击更换颜色
var isRed = true;
p1.onclick = function(){
    if(isRed){
        this.className = this.className +' active';
        isRed = false;
    }else{
        this.className = 'a';
        isRed = true;
    }
}

对类操作
- 修改类：
  - box.className 类名可以找到这个类对应的value
  - box.title
- 清除类：removeClass()

11.3.5 js常用事件

找到元素节点，然后给元素添加事件

onclick：鼠标单击事件
onmouseover：鼠标经过事件
onmouseout：鼠标移开事件
onchange：文本框内容改变事件
onselect：文本框内容被选中事件
onfocus：光标聚焦事件
onblur：光标失焦事件
onload：网页加载事件

标签：function,console,log,第十一章,JavaScript,alert,var,stringValue,前端开发
来源： https://www.cnblogs.com/hanfe1/p/12063597.html

第十一章 前端开发-JavaScript

第十一章 前端开发-JavaScript

11.3.1 js引入方式

11.3.2 js基础语法

11.3.2.1 测试语句

11.3.2.2 变量

11.3.2.3 流程控制

11.3.2.4 循环

11.3.3 js常用对象

11.3.3.1 对象

11.3.3.2 数组：Array

11.3.3.3 字符串：String

11.3.3.4 日期对象：Date

11.3.3.5 数学对象：Math

11.3.3.6 字符串和数值之间的转换

11.3.4 BOM

11.3.4.1 window对象

11.3.5 DOM

11.3.5.1 节点

11.3.5.2 属性操作

11.3.5 js常用事件

第十一章前端开发-JavaScript

第十一章前端开发-JavaScript