JavaScript/JQuery基本使用
JavaScript/JQuery基本使用
前言
这是前端的JavaScript和JQuery的基础使用，对于日常使用来说，这些代码足够了。我写代码的时候经常忘记，写下常用的代码，用的时候直接看这些，免得再去百度了。文章内容以例子为主，一个例子胜过千言万语。
附上我最喜欢的的一个js教程w3school
控制台操作
console.log()
console.info()//一般信息
console.debug()
console.warn()//警告
console.error()//错误console.dir()//可以显示一个对象所有的属性和方法加载doc后执行函数
$(document).ready(function(){
//函数内容
}查看变量类型
可以看字符、数字等简单变量类型，一些复杂的一律按object来显示
typeof类型转换
String() //转成字符串
Number() //转成数字
parseFloat() //转浮点型
parseInt()
Boolean() 循环迭代
1、for in 对字典迭代
for(key in dict){
console.log(key);//输出“键”
console.log(dict[key]);//输出"值"
}2、for in 对数组迭代
for(index in list){
//index是数组对应的序号
console.log(list[index]);//输出"值"
}3、for of 对数组迭代
for(value of list){
console.log(value)//输出数组对应的值
}事件监听
1、input输入框事件监听
输入框的事件监听有：输入框获得焦点focus、失去焦点blur、文本内容变化（输入或删除字）input。个人不建议使用click/mouse或者keypress来触发事件
focus：
//js原生
object.addEventListener("focus", myFunc);
//jq
$(selector).focus(function)blur：
//js
object.addEventListener("blur", myFunc);
//jq
$(selector).blur(function)input:
//js
object.addEventListener("input", myFunc);
//jq
$(selector).bind("input", function(e){})比较容易混淆的change： 类似于blur，change必须是内容发生变化而且失去焦点才能触发。而且change可以作用于select元素，input只用于input元素。
//js原生方法
object.addEventListener("change", myFunc);
function myFunc(){}
//jquery
$(selector).change(function)
$("#text_input").bind("input propertychange", function (e) {
console.log("a")
});2、jquery和js如何判断checkbox是否选中
$("input[type='checkbox']").is(':checked')返回结果：选中=true，未选中=false
if(document.getElementById("checkboxID").checked){
alert("checkbox is checked");
}这里面（“xx”）就是该元素的id，不需要#。不要弄混。
3、CheckBox获取选中的value
原理：先给所有的CheckBox给一个一样的class名。再用jq的伪类来获取所有checked的元素的value。
示例：
html代码：
<input type="checkbox" name="" id="" class="myCheckBox" value="0">
<input type="checkbox" name="" id="" class="myCheckBox" value="1">
<input type="checkbox" name="" id="" class="myCheckBox" value="2">
<input type="checkbox" name="" id="" class="myCheckBox" value="3">js代码：
list=[];//list来存储数据
for (item of $(".myCheckBox:checked")) {//迭代获取值
list.push($(item).val());
console.log(list);
}4、select标签事件处理
以下是获取select的列表项的选中的项的值
$("#select").children('option:selected')是select元素的选中的子元素
// js
var select = document.querySelector("select");
select.options[select.selectedIndex].innerHTML;
// jq
$("select").change(function (e) {
console.log($("select").children('option:selected').val())
});快速获取选中的option中的value：
document.querySelector("select").valuejs模拟点击元素
//js
var btn = document.getElementById("btn");
btn.click();// 同：btn.dispatchEvent(new Event("click"))
//jq 以下两种均可
$('#btn').trigger("click");
$('#btn').click();get请求
$("button").click(function(){
$.get("/api/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});获取响应头
注意：如果是跨域的话，服务器没做跨域处理请求头是获取不到的，需要服务端做请求头的跨域处理
原生：
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log( this.getAllResponseHeaders());
}
};jq：
$.ajax({
url: api + route, /*接口域名地址*/
type: method,
data: data,
headers: { "token": $.cookie('token')},
success: function (res,status,xhr) {
console.log(xhr.getAllResponseHeaders());
},
error: function (e) {
console.log(error);
alert("出错")
},
})给标签添加内容
$().append()将js对象转为jquery对象
$(js对象)页面跳转
在原来的窗体中直接跳转用
window.location.href="你所要跳转的页面";在新窗体中打开页面用：
window.open('你所要跳转的页面');
window.history.back(-1);返回上一页json处理
如果json是由数组来的，那么parse（）解析后，会变为json数组，使用json[数字]来获取数据，由对象变来的话，会变为json对象，使用json.属性 获取值，或者 json[“属性”] 获取值
// JSON对象转字符串
JSON.stringify()
// JSON字符串转JSON对象
JSON.parse()获取元素属性值
动态获取按钮的自定义属性值
$(".auto_item").attr("属性名")如果想设置属性名，使用$(".auto_item").attr("属性名","值")
获取属性的个数
function attributeCount (obj) {
var count = 0;
for(var i in obj) {
if(obj.hasOwnProperty(i)) { // 建议加上判断,如果没有扩展对象属性可以不加
count++;
}
}
return count;
}Cookie处理
使用document.cookie可以获取cookie字符串，但是自己处理还得自己分割字符串，推荐使用第三方库处理cookie，使用非常简单：
回话cookie，关闭浏览器cookie删除
$.cookie('the_cookie', 'the_value');持久cookie，有时间规定
$.cookie('the_cookie', 'the_value', { expires: 7 });//保存七天设置cookie路径
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });//这样整个网站都能共享cookiecookie读取
$.cookie('the_cookie'); // cookie存在 => 'the_value'
$.cookie('not_existing'); // cookie不存在 => nullcookie删除
$.cookie('the_cookie', null，{ expires: -1 });本地存储localstorage
/ 存储
localStorage.setItem("lastname", "Gates");
// 取回
localStorage.getItem("lastname");
//删除
localStorage.removeItem("lastname");