HTML之JS
JavaScript语言通过浏览器解析。
JavaScript可以写在head中，也可以写在body中。被script标签所包裹，当浏览器解释HTML时，遇到style标签时，按照CSS规则解释，遇到Script标签时，按照JavaScript的语法规则解释。
引入JavaScript代码，类似于Python的import
<script src="public.js" type="text/javascript"></script>
head中引入JS与body中引入JS区别
html代码从上而下解析，在head中引入js，遇到js时就会加载，影响页面展示；在body最下方引入js，页面展示完成后再加载js，用户体验良好；
注释
单行注释通过 // 多行通过 /* */
JS变量
age = 18; // 默认全局变量
function func() {
var name = 'nana'; // 局部变量
}
JS基本数据类型（JavaScript 声明数据类型通过new）
字符串
// 定义字符串 var str = '今天天气真好！'; var name = 'nana'; // 字符串拼接 var name_str = name + str // 字符串操作 s = 'AbCdEFgHIjkLmn' s.charAt(1) //根据下标获取字符串某一个字符 s.substr(1,3) //根据下标获取字符串子序列 大于等于x 小于y s.length //获取字符串长度 s.concat('nana') //拼接字符串 s.indexOf('bC') //获取子序列的位置，如果不存在则返回-1 s.slice(1,3) //切片 s.toLowerCase() //变为小写 s.toUpperCase() //变为大写 var ss = 'a,b,c,d' s.split(',',1) //切片 返回数组 参数1为按什么符号分隔（这里为逗号）参数2为取分割后数组的前x个元素 // 数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带） var age = 18; var score = 89.22; number = '18'; // 字符串转整数 var n = parseInt(number); // 字符串转小数 f =parseFloat(number) // 布尔类型（true 或 false） var t = true; var f = false;
数组类型（就是Python的列表）
// 第一种创建方式 var list = new Array(); list[0] = 'nana'; list[1] = 'momo'; // 第二种创建方式 var list2 = new Array('nana','momo'); // 第三种创建方式 var list3 = ['pala','jojo']; // 数组操作 list3.length //数组的长度 list3.push('gogo') //尾部追加数据 list3.shift() //头部获取一个元素 并删除该元素 list3.pop() //尾部获取一个元素 并删除该元素 list3.unshift('lh') //头部插入一个数据 // 第一个参数，从哪里开始 第二个参数，删除几个 第三个参数，值 list3.splice(start, deleteCount, value) //插入、删除或替换数组的元素 list3.splice(n,0,val) //指定位置插入元素 list3.splice(n,1,val) //指定位置替换元素 list3.splice(n,1) //指定位置删除元素 list3.slice(1,2) //切片 list3.reverse() //反转 list3.join('-') //将数组根据分割符拼接成字符串 list3.concat(['abc']) //数组与数组拼接 list3.sort() //排序
对象类型（等同于Python的字典）
var dict = {name:'',age:15,sex:'女' }; var age = dict.age; var name = dict['name']; delete dict['name'] //删除 delete dict.age //删除
定时器
setInterval(alert('大师兄'),5000); //参数1 为定时器执行的功能，第二个参数为定时器工作的间隔时间 毫秒为单位
function t1() {
console.log('我是大师兄')
}
setInterval('t1()', 5000);// 可以运行方法
JS条件判断语句
if (条件) { 执行代码块 } else if (条件) { 执行代码块 } else { 执行代码块 }; if (1 == 1) { //两个等号不判断数据类型，只判断值 console.log() } else if (1 != 1) { console.log() } else if (1 === 1) { //既判断数据类型，也判断值 console.log() } else if (1 !== 1) { console.log() } else if (1 == 1 && 2 == 2) { //and console.log() } else if (1 == 1 || 2 == 2) { //or console.log() } switch (a) { case 1: console.log(111); break; case 2: console.log(222); break; default: console.log(333) }
JS循环语句
//第一种循环 //循环的是角标 tmp = ['宝马', '奔驰', '尼桑']; //循环的是下标 tmp = '宝马奔驰尼桑'; //循环的是下标 tmp = {'宝马': 'BMW', '奔驰': 'BC'}; //循环的是key for (var i in tmp) { console.log(tmp[i]) } //第二种循环 //不支持字典的循环 for (var i = 0; i < 10; i++) { console.log(tmp[i]) } //第三种循环 while (1 == 1) { console.log(111) }
序列化
// 序列化 JSON.stringify(obj) //序列化 //字典对象转字符串 var map = {"name":"nana","age":18} var strmap = JSON.stringify(map) JSON.parse(str) //反序列化 //字符串转字典对象 JSON.parse(strmap)
转义
转义中文或特殊字符
// 1、在标准的url的规范中是不允许出现中文字符或某些特殊字符的，所以要进行转义 // 2、& 代表参数的链接，如果就是想传& 给后端那么必须转义 decodeURI(url) //URl中未转义的字符 decodeURIComponent(url) //URI组件中的未转义字符替换 //将url中未转义的字符替换 var uri = 'http://www.imdsx.cn/index.php/2017/07/27/html4/' encodeURIComponent(uri) // 结果："http%3A%2F%2Fwww.imdsx.cn%2Findex.php%2F2017%2F07%2F27%2Fhtml4%2F" encodeURI(url) //URI中的转义字符 encodeURIComponent(url) //转义URI组件中的字符 //将url中替换的字符转义回来 decodeURIComponent('http%3A%2F%2Fwww.imdsx.cn%2Findex.php%2F2017%2F07%2F27%2Fhtml4%2F') // 结果："http://www.imdsx.cn/index.php/2017/07/27/html4/" // 字符串转义 var name='懵懂' escape(name) //对字符串转义，转成unicode unescape(name) //转义字符串解码
函数定义
function func(name,age) { console.log(name); console.log(age); } //变量作用域 //变量先在函数体内找，找不到再往外层找 //在函数体外使用函数体内的变量，不会报错 name = 'waiceng' function f() { name = 'neiceng' console.log(name) } f() //匿名函数 func2 = function () { console.log('这是匿名函数') }
绑定onclick事件
第一种绑定方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <label for="i1">用户名</label><input id="i1"><br> <label for="i2">密码</label><input id="i2"><br> <label for="i3">确认密码</label><input id="i3"><br> <!--onclick属性绑定js方法，点击触发--> <input type="button" value="注册" onclick="register()"> </div> <script> function register() { // 弹框 alert('这里是注册方法') } </script> </body> </html>
第二种方法
通过获取元素标签，使用匿名函数绑定onclick事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <label for="i1">用户名</label><input id="i1"><br> <label for="i2">密码</label><input id="i2"><br> <label for="i3">确认密码</label><input id="i3"><br> <input type="button" value="注册" id="register"> </div> <script> //通过ID获取注册按钮元素标签 var register = document.getElementById('register'); //register元素绑定一个onclick方法，匿名函数 register.onclick = function () { alert('这里是注册方法--匿名函数') }; </script> </body> </html>
ajax发送post请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <label for="i1">用户名</label><input id="i1" value="nanan"><br> <label for="i2">密码</label><input id="i2" value="aA123456"><br> <label for="i3">确认密码</label><input id="i3" value="aA123456"><br> <!--onclick属性绑定js方法，点击触发--> <!--<input type="button" value="注册" onclick="register()">--> <input type="button" value="注册" id="register"> </div> <!--用来请求ajax的库--> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script> //通过ID获取注册按钮元素标签 var register = document.getElementById('register'); //register元素绑定一个onclick方法，匿名函数 register.onclick = function () { var username = document.getElementById('i1').value; var pwd = document.getElementById('i2').value; var cpwd = document.getElementById('i3').value; var data = 'username=' + username + '&pwd=' + pwd + '&cpwd=' + cpwd //通过ajax来发送请求 $.ajax({ //请求的固定写法 url:'http://api.nnzhp.cn/api/user/user_reg', method:'post', data:data, //回调函数，接口的返回值会存在info里 success:function (info) { //通过判断error_code的值来判断是否成功 if (info.error_code == 0){ var span = '<span>注册成功</span>' //注册成功则添加一个span标签到注册按钮后面，显示注册成功 register.insertAdjacentHTML('afterEnd',span) }else{ alert('注册失败，失败原因'+ info.msg) } } }) }; </script> </body> </html>
ajax发送get请求
小练习，通过点击按钮获取返回值，把返回结果里的商品名称商品图片展示出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="获取奖品信息" id="getProduct"> <div id="i1"> </div> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script> var getProduct = document.getElementById('getProduct') getProduct.onclick = function () { $.ajax({ url:'http://api.nnzhp.cn/api/product/all', method:'get', success:function (info) { //如果error_code返回为0则说明请求成功 if (info.error_code==0){ //循环商品 for(var i in info.product_info){ var product_name = info.product_info[i].product_name; var img_url = info.product_info[i].img_url; //拼接商品名称、商品图片的标签 var span = '<span>'+product_name+'</span>'; var img = '<img src="' + img_url + '" alt="">'; var s = span + img; var div = document.getElementById('i1') //将两个标签加入到div中 div.insertAdjacentHTML('beforeEnd',s); } }else{ alert('请求失败!') } } }) } </script> </body> </html>
form表单提交
可自动拼接参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <form id="registerForm"> <label for="i1">用户名:</label><input id="i1" value="aaksdflef" name="username"><br> <label for="i2">密码:</label><input id="i2" value="Hhsdfkl" name="pwd"><br> <label for="i3">确认密码:</label><input id="i3" value="Hhsdfkl" name="cpwd"><br> <input type="button" value="注册" id="register"> </form> </div> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script> var register = document.getElementById('register') register.onclick = function () { var data = $('#registerForm').serialize();//定位到form表单获取元素，固定写法 var flag = confirm('确认注册么？'); //确认弹框，会返回一个布尔类型 //选择确认注册，走下面流程 if (flag){ $.ajax({ url: 'http://api.nnzhp.cn/api/user/user_reg', method: 'post', data: data, //form表单提交时自动拼接参数 success: function (info) { console.log(info) } }) }else{ alert('取消注册') } } </script> </body> </html>
