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)//输出数组对应的值
}

---

事件监听

HTML DOM 事件大全——引自w3school

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").value

---

js模拟点击元素

//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，使用非常简单：

jquery.cookie.js ，

回话cookie，关闭浏览器cookie删除

$.cookie('the_cookie', 'the_value');

持久cookie，有时间规定

$.cookie('the_cookie', 'the_value', { expires: 7 });//保存七天

设置cookie路径

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });//这样整个网站都能共享cookie

cookie读取

$.cookie('the_cookie'); // cookie存在 => 'the_value' 
$.cookie('not_existing'); // cookie不存在 => null

cookie删除

$.cookie('the_cookie', null，{ expires: -1 });

---

本地存储localstorage

/ 存储
localStorage.setItem("lastname", "Gates");
// 取回
localStorage.getItem("lastname");

//删除
localStorage.removeItem("lastname");

表单标准化提交

这部分内容可以看我另一篇文章

JQuery异步post上传表单数据【标准化模板】