4.前端基础之JS
简述
掌握了解
JavaScript(js)的基本使用，以及jquery常用操作，能够处理前端交互,使用ajax请求数据。
JS基础
js代码必须位于 <script> 与 </script> 标签之间
建议写在html页面最底部，因为浏览器加载顺序从上至下，代码最后运行
js有不同版本，es5,es6，有一些新特性，如果使用新特性，需考虑兼容性。就像php5 php7语言的不同版本
输出
两种基本输出方式，方便调试代码
打印在控制台，浏览器开发者工具console
console.log('xxxx');
建议选择该方式，因为可以显示更多内容更详细，数组等
每一条语句通常分号结尾
弹出对话框
alert('xxx');
数据类型
数字
字符串，可以使用单引号或双引号
数组
//方式1
var cars=new Array();
cars[0]="Saab";
//方式2
var cars=["Saab","Volvo","BMW"];
以上两种比较常用
//方式3
var cars=new Array("Saab","Volvo","BMW");
操作数组
cars[0]
二维数组
var xxx=[
[1,2],
[a,b]
];
对象
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
操作对象
var age = person.age;
变量声明var a = 5; 使用var声明创建变量
函数
function xxx(a,b){
var c = a+b;
return c;
}
常用语句
加减乘除
= + - * /
判断比较
!=不等于
等于==
大于>小于<
与或非
(a>1)&&(b>1) 只有两边都正确，返回true
(a>1)||(b>1) 任何一个正确，反正true
! 否定
条件
if else
if (condition){
当条件为 true 时执行的代码
}else{
当条件不为 true 时执行的代码
}
多种情况时，增加else if(condition1)
适用情况最多，一般情况判断用if else即可
switch(n){
case 1: n=1时执行代码块 1 break;
case 2: 执行代码块 2 break;
default: 与 case 1 和 case 2 不同时执行的代码
}
当情况很多，进行匹配，用switch
注意不要漏掉break
如根据返回结果值匹配，如订单处理，根据返回订单状态status，进行不同处理
三目运算符
var a =(age<18) ? "年龄太小":"年龄已达到";
如果变量 age 中的值小于 18，则向变量 a 赋值 "年龄太小"，否则赋值 "年龄已达到"。
很常用的判断用法，适合简单的判断不要都用if else
循环
1.for循环，最常用
for (var i=0;i<cars.length;i++)
执行代码
}
通常循环数组内容，当i<数组cars的长度，即为循环数组
配合数组.length 获取数组长度
2.For/In 循环
3.while
4.do while
语句部分，大多数编程语言写法很相似，基本上通用，个别地方不同
this
表示当前的引用
注意不同情况下this指代内容不同
Json
json是用来js和后端服务器交互的通用数据形式，API接口通常返回的数据也是json形式
json形式和js的对象相似
{"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"}
]}
JSON.parse()，解析json，用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。
正则表达式
适用于处理匹配字符串，通常用于匹配文本内容
如，判断用户发表内容是否有 wx号，手机号，检测广告
较多内容，此处不展开
常用函数
1.浏览器相关
window.location.href = "url地址如xxx.com"; 打开新页面
window.history.back(); 返回上一页
2.数组操作
x.length; 数组长度
x.indexOf("a"); 看a在数组中位置，常用来判断数组中是否存在a
x.push("a"); 数组末尾追加新元素
x.concat(a); 数组x合并数组a，返回合并后数组
x.sort(); 数组排序
3.字符串操作
x.length; 字符串长度
x.concat(a); 两个字符串x和a连接
x.indexOf("a"); 常用来判断字符串中是否存在a
replace() 方法用于在字符串中用一些字符替换另一些字符
substr() 方法可在字符串中抽取从指定下标开始的指定数目的字符
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
4.计时器
setInterval()
不断执行，间隔指定的毫秒数不停地执行指定的代码。
setTimeout()
倒计时，在指定的毫秒数后执行指定代码。
这两个适用于写一些定时操作，如，定时刷新加载数据，时间限制倒计时
5.数据类型转换
parseInt(x) 转换为整数
parseFloat(x) 转换为小数
xx.toFixed(2) 保留两位小数
6.时间操作
new Date() // 当前日期和时间
var timestamp = new Date().getTime(); //当前时间戳
时间戳与日期格式转换
function timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);
//时间戳为10位需* 1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = date.getDate() + ' ';
var h = date.getHours() + ':';
var m = date.getMinutes() + ':';
var s = date.getSeconds();
return Y+M+D+h+m+s;
}
常用事件
事件在用户的操作后触发执行，如点击某个按钮后，执行click点击事件对应函数内容
事件操作通常配合jquery使用
onclick 鼠标点击某个对象
onchange用户改变域的内容，如改变input内容
onblur元素失去焦点
onkeydown某个键盘的键被按下
onsubmit提交按钮被点击
Ajax
ajax就是异步更新的技术，简单说不刷新页面的情况下，get或者post和后端服务器交互
最常用的交互方法，用来请求数据
通常传统页面，get或者post数据需要刷新网页，体验不好，使用ajax，不需要重新刷新页面，即可与后端交互数据
通常配合jquery，因为jq封装简化了ajax写法
虽然很方便，无需刷新，但是传统form表单方式使用也不可忽视
$.ajax({
url: "url地址xx.com/xx", //请求的接口地址
data: {name: 'jenny'}, //发送的数据内容
type: "POST", //形式get或者post
dataType: "json", //数据json形式
success: function(data) {
//成功后执行的代码
}
});
form表单提交
serialize() 方法通过序列化表单值 ，获取表单form的内容，不需要一个一个获取表单中的值
$(".form").serialize();
此外有简写方法
//get方法
$.get(
"接口url",
{key1:"value1",key2:"value2"}, //请求内容
function(data){
//成功后执行的代码
});
//post方法
$.post(
"接口url",
{key1:"value1",key2:"value2"}, //请求内容
function(data){
//成功后执行的代码
});
注意ajax跨域情况，是一种安全策略，js只能操作自己域下的资源，其他域不能访问
常用方案1，后端允许跨域，并返回jsonp数据
方案2，后端做代理，写一个API接口，后端请求数据并返回，前端ajax请求该代理API，避免跨域
Jquery基础
jquery就是一个js的函数库，简化代码写法，更加方便
常用来操作html元素，事件处理，ajax
使用前，必须引入
<script src="jquery.min.js"></script>
src可以是网络地址如知名cdn库提供的地址，可以是本地地址
min.js 通常代表压缩过的js文件，如果下载其他js插件，有很多，选择min.js一般是压缩过的，文件更小，加载快
就绪事件
防止在网页没有加载完成之前运行，jq写在此处，表示加载完后运行jq代码
$(function(){
// 开始写 jQuery 代码
});
选择器
用来选择某个元素，如某个按钮，选择后即可执行该元素的相关操作，如事件处理，修改元素内容
id选择
$("#test")
class选择
$(".test")
事件处理
点击事件
$(".test").click(function(){
$(this).hide();
});
class为test的元素（如button按钮）点击后，执行的代码
此处hide隐藏该元素，对应的show显示元素
该写法为jq事件通用写法，其他事件修改事件名称即可，如click改成focus变为 focus事件
此处this代表当前元素，事件操作中常用this
键盘事件
keypress
keyup
keydown
鼠标悬停hover()
表单相关
change()内容改变，如input框内容改变
submit() 表单提交
元素获得焦点
focus()
失去焦点
blur()
操作元素内容
两种功能
1.设置，修改元素值
2.获取，获取当前值
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记），如设置某个div的内容
append() 方法，在元素结尾(通常如div，p)追加内容
val() - 设置或返回表单字段的值
$(".test2").html("<b>Hello world!</b>");
使用场景举例
ajax加载请求商品列表
1.ajax请求获取数据
2.因为获取的是数据不是html，因此将处理过的要展示的商品数据拼接html代码后
3.设置在某个div显示
追加append或者设置html
设置属性attr()
如来设置href，title等属性
操作class
hasClass()检查被选元素是否包含指定的 class 名称
addClass()
向被选元素添加一个或多个类
removeClass()
从被选元素删除一个或多个类
toggleClass() 方法，该方法对被选元素进行添加/删除类的切换操作
使用场景举例
操作css，通常用来改变显示效果，不同的类class有不同的css效果，给某元素添加了类class之后，该元素有了类的css效果
网友评论