初识JavaScript

首先对于JavaScript和Java两种语言，除了语法和Java有些类似，其他部分没有任何关系。由于当时Java很火，为了推广才在名字中加了Java，也就是所谓的蹭热度。

另外，与JavaScript共同提起的还有ECMAScript，它是一种脚本语言标准，而JavaScript遵循 ECMAScript规范。

前端三大基石：HTML、CSS、JavaScript。严格意义上，其中只有JavaScript称得上编程语言，其他两种都只是标记语言，JS作为行为层，对用户和浏览器之间的交互进行编程。

变量

JS与其他语言最不同的一点就在于JS是弱类型语言，没有具体数据类型的声明区别（及数字、字符串、布尔、数组等等都可以用同一类型关键字声明）

变量基本上都用var、let、const来进行声明，其中var常用于声明全局变量，let声明局部变量，const声明常量。

var str = "abcd";
let num1 = 3;
var num2 = 3.4;
const PI = 3.14;
let arr = [1,2,3,"ad",true,null];  //JavaScript的数组可以包括任意数据类型

JS中var变量作用域遵循就近原则，且{}外变量无法访问{}内的变量，且会自动将变量定义部分提前。

5种原始数据类型

Undefined(未定义)、Null(对象引用类型)、Boolean、Number(数字类型，不区分整数小数)、String(JS中也是不可变的)

其中Number类型内包括Infinity(无限大)和NaN(意为not a num，表示不是一个数，NaN和NaN无法比较)

//typeof关键字可以测试原始数据类型
typeof 1 // "number"
typeof 0.3 // "number"
typeof 1/0 // "NaN"
typeof 'a' // "string"
typeof "字符串" // "string"
typeof (1>0) // "boolean"

字符串

JS中只包含字符串，而不包含字符类型，但是字符串可以用单引号’'也可以用双引号""包裹。

另外JS中字符串可使用模板字符串，用反引号``，可以实现多行定义字符串，并通过${}包含其他字符串。

var num = "2";
var str = `多行字符串这是第${num}行`;

数组

JS数组内数据类型可任意存放，且可以给arr.length重新赋值，数组大小可以发生改变，长度变小，多余的元素会被舍弃，长度变大，多余的元素会以undefined填充。若取数组下标越界，会返回undefined。

大多数编程语言不允许直接改变数组长度，越界访问索引会报错，然而JS的数组却不会有任何错误。

var arr = [1,2,3,"ad",true,null];
arr.length = 8; // arr[1,2,3,"ad",true,null,undefined,undefined]
arr.length = 3; // arr[1,2,3]
arr[5] // 返回undefined

运算符

JS运算符：+，-，*，+ +，–，+ =，- =，= =等和java基本一致。但在进行除法运算时，不是整除，会按数学运算正常运算。
= =判断值是否相等；===判断值和类型两者是否都相同。

2 / 3 // 0.666.....
1 == "1" // true
1 === "1" // false
1 == true // true
1 === true // false

Map和Set

Map是一组键值对结构，一个key只能对应一个value，若重复对一个key放入value，后面的值会把前面的值覆盖掉。

Set和Map类似，但是没有value值，并且没有重复的key。

// 定义map和set
var map = new Map([["键1",1],["键2","two"],["键3",3.0]]);
var set = new Set([1,2,"3",3]);//给map集合添加新内容
map.set('键4', true); // 添加新的key-value
//获得map对应键的值
map.get("键1");
//给set集合添加新内容
set.add(4);

函数

JS中函数的声明，使用function关键词声明函数，没有权限修饰符和返回值类型，方法参数也是直接写名称，不需要写变量的声明关键词。

JS中函数没有重载概念，且参数个数不对，也可以进行方法调用。

//第一种函数定义方式
function fun1(x) {//具体逻辑
}//第二种函数定义方式
var fun2 = function(x){//具体逻辑
};      //末尾需要加;

闭包

先看一段代码

function add(){var i = 1;function func(){i++return i;}return func;
}var fun = add();
fun();    //2

其表面作用就是将函数作为参数返回，变量得以在返回的函数内保存，并可以延迟执行。其结构就可以称之为一个闭包过程，但是延迟执行函数这一行为和闭包的作用并无关系。

实际上，函数和其内部能访问到变量的总作用域，就是一个闭包。闭包的真正作用类似于Java中的get/set方法，常常用来间接访问一个变量（私有化一个属性），即Java中被private修饰的属性，用get/set方法获得其属性；而JS中被闭包的变量，用闭包函数获得其属性。

JSON

JSON(JavaScript Object Notation, JS对象简谱) 是一种轻量级的数据交换格式，其本质是一个字符串，以键值对格式保存数据。如{“name”：“xiaoming”}

JSON.stringify()：将JS对象转换为JSON格式字符串
JSON.parse()：将JSON格式字符串转为JS对象

对象

JS所有对象都是从Object下继承来的，且JS的对象是动态类型，可以自由地给一个对象添加或删除属性。访问一个不存在的属性不会报错，同数组一样，会返回undefined。“属性名” in 对象,可以判断该对象是否有此属性。

对象定义方式

//第一种定义方式
var obj1 = new Object();
obj1.name = "xiaoming";
obj1.fun = function(){//具体逻辑}//第二种定义方式(更为常用)
var obj2 = {name : "xiaohong",age : 20,phone : 1321111111,fun :function(){//具体逻辑}
}
obj2.name //访问name属性
obj2["name"] //也可以访问name属性
obj2.gender = "男"; //新增一个属性
delete obj2.gender; //删除一个属性
"name" in obj // true

常用对象及方法

String对象中的各种方法：charAt()、indexOf()、lastIndexOf()
Array对象中的各种方法：join()、pop()、push()、slice()：类似于string里的substring
Date对象中的各种方法：toLocaleString()、toLocaleDateString()、getMonth()、getFullYear()
注：JavaScript的月份范围用整数表示是0~11
Math对象中的各种方法：abs()、ceil()、random()、round()
RegExp对象(正则表达式)的各种方法：exec()、test()

和Java中对象方法作用基本一致。

原型概念

JavaScript会对每个被创建的对象设置一个原型，指向它的原型对象（我们也可以手动更改原型指向），我们一般称之为原型链，当我们访问对象内属性时，JS引擎会先在当前对象上寻找这个属性，如果没有，就追溯其原型链直到Object.prototype对象为止，若还未直到，返回undefined。（与Java中的继承相似）

注意：每个对象都有一个prototype属性(浏览器f12打开控制台访问，显示为__proto__)

BOM：浏览器对象模型

BOM(Browser Object Mode) 是指浏览器对象模型，JavaScript中用window对象进行操作。

window是js中的全局对象，可以对浏览器窗口进行操作，所有的全局变量和方法都可以由这个对象调用，甚至可以改变方法的指向

其中几个比较常用的对象如下：

//navigator表示浏览器信息
console.log('浏览器名称：' + window.navigator.appName);
console.log('浏览器版本：' + window.navigator.appVersion);
console.log('浏览器语言：' + window.navigator.language);//screen表示屏幕信息
console.log('屏幕宽度：' + window.screen.width);
console.log('屏幕高度：' + window.screen.height);//location表示当前页面的URL信息
console.log('协议：' + window.location.protocol);
console.log('域名：' + window.location.host);
console.log('路径名：' + window.location.pathname);
console.log('端口：' + window.location.port);

DOM：文档对象模型

DOM(Document Object Mode) 是指文档对象模型，JavaScript用document对象操作。（在window下层）

HTML被浏览器解析后，就是一颗DOM树，我们通过JS来操作DOM，可以改变HTML的结构。

常用方法如下：

document.getElementById()  //根据id获取dom
document.getElementsByClassName() //根据class名获取dom(数组)
document.getElementsByName()  //根据name名获取dom(数组)
document.getElementsByTagName()  //根据标签名获取dom(数组)
document.createElement()  //创建新节点
dom对象.appendChild()  //插入子节点
dom对象.removeChild()  //删除子节点
dom对象.parentElement()  //获得父节点
dom对象.innerText  //获取文本内容
dom对象.innerHtml  //获取html文本内容(有标签的)

初识jQuery

需要明确的是，jQuery并不是框架，而是类库，里面封装了大量JS函数，供我们使用。目的就是简化JS繁琐的语法和函数，让编程更简洁，操作DOM更方便。(write less，do more)

jquery的两种主方法

//$是jQuery中的一个函数名
$(document).ready(function(){//代码
})//更简单的方式
$(function(){//代码
})

引入jquery的两种方式

//本地核心文件方式的引入
//jquery.js和jquery.min.js的区别在于前者未压缩，后者压缩了。
<script src="./jquery/jquery-1.8.3.min.js"></script>
//cdn链接方式的引用
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

dom对象和jquery对象

dom对象就是用JS语法获得的对象，也称为JS对象。
jquery对象就是用jquery语法获得的对象，jquery对象都是数组，而数组中的元素都是dom对象。

//dom对象
var obj = document.getElementById("id名");
//jQuery对象，jobj是一个数组，此数组中只有一个元素。
var jobj = $("#id名");

dom对象可以和jquery对象相互转换，目的在于使用对应对象的属性和方法，dom和jquery两种对象的属性和方法不能同时使用。

dom对象转为jquery对象：$(dom对象)
jquery对象转为dom对象：jquery对象.get(索引)或jquery对象[索引]

jquery选择器

jquery选择器和css选择器一致，就是一个字符串，用来定位dom对象在文档中的位置。

jquery基本选择器
$("#id名")
$("标签名")
$(".class名")jquery组合选择器
$("选择器规则,选择器规则,...")jquery层次选择器
$("元素1 元素2") 元素1下，所有的元素2,包括子孙节点
$("元素1 > 元素2") 只包括子节点,不在往下
$("元素1 + 元素2) 匹配所有紧挨着元素1后面的元素2
$("元素1 ~ 元素2") 匹配所有与元素1同级别的元素2 且在元素1 后面的jquery基本过滤选择器
$("标签名:first")  第一个元素
$("标签名:last")    最后一个元素
$("标签名:even") 获得索引是偶数的元素
$("标签名:odd") 获得索引奇数的元素
$("标签名:eq(index)") 获得索引为index的元素
$("标签名:gt(index)") 获得索引大于index的元素
$("标签名:lt(index)") 获得索引小于index的元素jquery属性过滤器
$("div[id]")  div标签，且有该id
$("div[name = 'username']") div标签下，且name属性为username
$("div[name != 'username']") div标签下，且name属性不为username
$("div[name ^= 'user']") div标签下，且name属性以user字符串开始 前缀
$("div[name $= 'name']") div标签下，且name属性以name字符串结尾 后缀
$("div[name *= 'name']") div标签下，且name属性含有name字符串
$("div[name *= 'name'] [其他属性规则] [其他属性规则]") 复合属性过滤器jquery子元素过滤器
$("ul li:nth-child(排序号)") 返回ul中li中排序号的子元素，从1开始
$("ul li:first-child") 返回ul下li中第一个子元素
$("ul li:last-child") 返回ul下li中最后一个子元素
$("ul li:only-child") 如果ul下li中只有一个元素，就返回这个子元素jquery表单选择器（无form标签也可使用,只要有表单相关的标签即可）
$(":标签中type的值")jquery表单过滤选择器
$(":text:enabled") 获取所有可用的text
$(":input:disabled") 获取所有不可用的input
$(":checkbox:checked") 获取所有选中的复选框元素
$("select>option:selected") 获取所有选中的选项元素

jquery事件

//基本语法,其中事件名称就是js中事件去掉on的名字，如点击事件onClick就是click
//jquery主方法也是按照这种方式定义的,ready其实就相当于js中的onLoad方法
//事件有多种：click、dblclick、hover、change、onkeydown等等
$("选择器").事件名称(function(){//代码
})

jquery函数

jquery的内部追加
.append(内容) 在.前的元素中的最后追加
.appendTo(内容) 相当于剪切，如果有内容，是追加到原内容的后面
.prepend(内容) 在.前的元素中的开头追加
.prependTo(内容) 相当于剪切，如果有内容，是追加到原内容的前面jquery的外部追加
.after() 向.前的元素在此之后的同级节点追加
.before() 向.前的元素在此之前的同级节点追加jquery的删除
.remove() 删除.前元素的内容
.remove(选择器)
.empty() 清空.前元素下的所有节点内容jquery的复制
.clone()  复制后需要追加才有效果，事件要想被复制，需要加参数truejquery的属性操作
.attr("属性")  获取.前元素属性值
.attr("属性", "值")  属性的设置
.removeAttr("属性") 删除
.html() 返回.前标签下的所有文本形式
.html("具体html") 设置一个标签内的html
.val() 获取.前元素value值
.val("值") 设置val值
.addClass("样式表") 添加css样式
.css("属性名","属性值") 改变css样式
.removeClass("样式表") 删除css样式
.toggleClass("样式表") 切换css样式，有就删除，没有添加
.next() 获得一个元素后面挨着的元素
.prev() 获得一个元素前面挨着的元素
.siblings() 获得一个元素同级的所有元素
.children() 获得一个元素的子元素jquery的显示,隐藏
.show()
.hidden()jquery的遍历
.each(function(index,element){//循环处理的逻辑，每个对象都会执行。//index表示索引，element表示数组中的成员，都是自定义变量名
})
如果想用each循环dom数组和json，语法如下：
$.each(遍历对象,function(index,element){//这里$相当于jquery中的一个类名
})

Ajax

Ajax字母缩写含义：异步(Asynchronous)的 JavaScript(J) 和(and A) XML(X)。

Ajax是一种用于创建快速动态网页的技术，核心对象是XMLHTTPRequest（原生JS的对象），通过与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax最大特点：页面无刷新的请求（如百度输入字符后，搜索框下有反馈，在浏览器开发者模式下，在Network中为xhr类型的请求），同步的请求如果需要更新内容，就必须重新加载整个页面(注册，登陆)

Status是请求的状态码，常见的状态码有：200（成功）、300+（重定向或转发）、400+（客户端错误，请求路径出错居多）、500+（服务器错误）

//基本格式，还有$.get({})和$$.post({})其内部也是调用的$.ajax({})
$.ajax({属性:值,属性:值
});
$.get({url,[data],[fun],[type]})//例
$.ajax({//要求为String类型的参数，（默认为当前页地址）发送请求的地址url:"/json1?username="+username,//发送请求携带的数据data:{"key":"value"},dataType:"json",//请求成功后调用的回调函数，data已被jquery转成dataType指定的类型success:function (data) {//代码}
});

Ajax采用json数据结构定义参数，常用参数作用如下：
url：请求地址，String类型。
async：表示该请求是否为异步请求，Boolean类型，默认为true，可以不写。
contentType：向服务器发送参数的类型，String类型，默认值使用大多数情况，可以不写。
data：请求参数，将数据自动转换为请求字符串格式，常用为json格式，用{}包裹。
dataType：表示期望服务器返回的数据类型，String类型，可选的有xml、html、text、json。
error：一个function，请求出错时，执行该函数。
sucess：一个function，请求成功时，执行该函数。
type：请求方式，String类型，默认为get。

JavaScript和jQuery的基础知识和使用相关推荐

day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天--2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
JavaScript 面试必备的基础知识梳理（71个知识点）
1. JavaScript简介 JavaScript 最开始是专门为浏览器设计的一门语言,但是现在也被用于很多其他的环境. 如今,JavaScript 已经成为了与 HTML/CSS 完全集成的,使用 ...
【jQuery】基础知识梳理笔记
jQuery(网页特效) 简介: jQ是由漂亮国人-于2006年创建 jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装他的设计思想是write les ...
【JavaScript】JS的基础知识
JavaScript 一.什么是JavaScript? 二.JavaScript的用途三.JS是如何运行的? 四.JS前置知识 4.1 JS书写格式 4.1.1 行内格式 4.1.2 内嵌格式 4. ...
【jQuery】基础知识
前言 jQuery 是一个高效.精简并且功能丰富的 JavaScript 工具库.它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作.事件处理.动画和 Ajax 操作更加简 ...
从零开始学jQuery(1)--基础知识
别问我为什么突然跳到jquery了-我只能说-前面一点刚看的没怎么理解-就这里比较好理解 jQuery jQuery可能很多人都有一点印象,是个比较好用的查询方式,利用jQuery可以比较容易的查询到 ...
JavaScript模块化开发（一）基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
Java程序员从笨鸟到菜鸟之（二十八）Javascript总结之语言基础
JavaScript 脚本语言作为一门功能强大.使用范围较广的程序语言,其语言基础包括数据类型.变量.运算符.函数以及核心语句等内容.本篇文章主要介绍JavaScript 脚本语言的基础知识一:基础 ...
Jquery源码中的Javascript基础知识（三）
这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: 1 (function( window, undefined ) { 2 // code 定义变量 3 jQuery ...

JavaScript和jQuery的基础知识和使用