![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：很好
Collection
Collection
1. JavaScript的变量声明注意事项
尽量在方法或对象中声明对象, 尽量少使用全局变量
在每一条语句结束都加一个( ; ) 号, 虽然没有;号语句也可执行, 但当文件被压缩处理后可能会出问题
2. JavaScript类的创建方法
方法一:
new Object() 创建一个对象, 然后再给对象增加属性和方法
<script>
// 通过new Object()创建一个空的对象
var obj1 = new Object();
// 添加对象属性
obj.name = 'checkBox';
// 定义一个对象方法
ogj.selected = function() {
return 1;
};
// 调用一个对象方法
console.log('选中情况:'+obj.selected());
</script> 方法二:
通过将{}赋值给一个变量来生成一个对象
即{ }就是一个空对象
<script>
var obj2 = {};
obj2.name = 'php.net';
obj2.rand = function(){
return Math.random();
};
</script>方法三:
用{key1: value1, key2: value2, .....}定义一个对象
<script>
var obj3 = {
id: 'username',
name: 'username',
mDown: function () {
alart('提示一条信息!');
}
};
// 属性调用
console.log(obj3.id + '对应的名称是: '+ obj3.name);
// 方法的调用
obj3.mDown();
</script>3. 对象方法的链式调用
方法必须返回一个自身对象this才能进行链式调用
<script>
var obj4 = {
name: 'Bob',
getName: function(){
return this.name;
},
setName; function(name){
this.name = name;
return this;
}
}
// 输出对象的name属性的默认值
console.log(obj4.getName());
// 改变对象的name属性后输出
// 这里采用了链式调用
console.log(obj4.setName('Alex').getName());
</script>4. 对象的复制
在对对象进行复制时其实是在内存中获取了同一个地址空间, 对新对象内属性的改变也将影响到旧对象;
新对象其实就是给旧对象一个别称, 基实体还是同一个;
如复制上面的obj4:
var obj5 = obj4;
// 这时obj5.name应该是Alex
console.log(obj5.getName());
// 调用obj5.setName()方法
obj5.setName('Robin');
// 调用obj4.getName()方法
console.log(obj4.getName()), // 此时的输出为 Robin5. jQuery的引入
jQuery是javaScript的一个库, 提供更方便的javaScript操作的方法.
在html文档中使用jQuery时需在head部分引入jQuery的js文件
<script src="../jquery-3.4.1.js"></script>
id选择器: $('#id') id前加#号, 选中带有特定id属性的元素对象
类选择器: $('.类名') 类名前加. 号, 选中特定类名的元素对象
元素选择器: $('标签名') 直接写标签名, 选中同一种标签的所有元素对象
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<!---- 引入jquery文件 --->
<script src="../jquery-3.4.1.js"></script>
<title>JQuery学习</title>
</head>
<body>
<!-- 给div设置了id -->
<div id="item1" style="background-color: green;width: 100%;height: 50px"></div>
<!-- 给p设置了class -->
<p class="p1" style="background-color: green;width: 100%;height: 50px"></p>
<!-- 给 button 设备了单击事件 -->
<button onclick="change_color_div()">改变DIV颜色</button>
<!-- 给 p 设置了id ,这个元素用来给出一些提示信息, 开始时是隐藏的 -->
<p id="info" style="font-size: 1.5em; color: green; display: none"></p>
</body>
</html>
<script>
var arr = [1,2,3,4,5,6,7,8,9];
$.each(arr,function (i,v) {
if (i<3){
return false; // 返回false就是break;
}
if (v>7) {
return true; // 返回true就是continue;
}
console.log('索引'+i+'c的值是'+v);
});
function change_color_div() {
// 以元素标签进行选择$('标签名')
$('div').css({'background': 'blue', 'border':'1px red solid'});
// 类选择器$('.类名')
// text()方法可改变元素文本内容
$('.p1').text('我被选种后, 输出了这段文字, 文字被加粗并居中!').css({'color':'white','font-weight': 'bold','text-align':'center','line-height':'50px'});
// button 后面紧接着的第一个p
// show()方法可以把隐藏的对象显示出来
$('button + p').show();
// id选择器 $('#id')
$('#info').text('我被显示出来了!');
};
</script>
点击按钮后
7. 数组遍历
$.each(数组, function( 索引, 值 ){ } );
通用遍历方法，可用于遍历对象和数组。
不同于遍历 jQuery 对象的 $().each() 方法，此方法可用于遍历任何对象。
回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。
如果需要退出 each循环可使回调函数返回 false，相当于别的语言中break 其它返回值将被忽略。
如果需要提前跳过一次循环, 可使回调函数返回true, 相当于别的语言中的continue。
<script>
var arr = [1,2,3,4,5,6,7,8,9];
$.each(arr,function (i,v) {
if (i<3){
return true; // 返回true就是continue;
}
if (v>7) {
return false; // 返回false就是break;
}
console.log('索引' + i + ' 的值是 '+v);
});
</script>执行情况:
