前端基础——JS、jQuery总结

一、JS概述

1、什么是JS
全称JavaScript，简称JS
是由网景公司提供的一门嵌入在浏览器中执行的脚本语言。
主要作用是 实现网页中的动画效果，或者实现表单校验等功能
2、JS的特点
（1）JS是一门直译式的语言（JS不需要编译，直接执行的就是源代码）
（2）JS是一门基于对象的语言
（3）JS是一门弱类型的语言（JS中的变量不区分类型，可以指向任意的数据）
3、JS的优势
（1）良好的交互性（JS的出现就会为了嵌入在浏览器中运行，可以用户进行交互，提高用户体验）
（2）一定的安全性（JS只能在浏览器内部运行，不能访问浏览器意外的资源）
（3）跨平台性（只要有浏览器，就能运行JS）

4、JS的引入（掌握）
4.1.直接写在html中的script标签内部
script标签可以放在head或body中

需要注意的是:(1)在引入js文件的script标签内部,不要书写JS代码,因为无法执行
(2)引入js文件的script标签最好不要自闭,可能会导致js文件引入失败
4.3.直接将js代码写在html标签上

二、JS的语法

1、数据类型
1.1.基本数据类型
（1）数值类型（number）：JS中所有的数值在底层都是浮点型，只不过在需要时，会自动的在整型和浮点型之间进行转换
NaN、Infinity、-Infinity

（2）字符串类型（string）：JS中字符串是基本数据类型，但JS中也提供的对应的包装对象
	JS中的字符串可以使用单引号或者双引号引起来!

（3）布尔类型：布尔类型的值有两个: true和false

（4）undefined类型：声明了变量但没有为变量赋值，此时变量的值是undefined

（5）null类型：表示空值，可以作为函数的返回值，表示函数返回的是一个空的对象

1.2.复杂数据类型
主要指对象（JS内置对象、自定义对象、数组、函数）

2、变量的声明
JS中通过var关键字声明变量，声明的变量不区分类型，可以指向任意的数据
JS中是严格区分大小写的
JS有自动断句的功能，即使在一行代码之后，没有加分号，也不会报错
3、JS的运算符
JS中的运算符和Java中的运算符大致相同
4、JS中的语句
JS中的语句和Java中的语句大致相同
if分支结构
switch语句
for循环
while循环

5、JS的数组
声明方式:
var arr1 = [];
var arr2 = [88,100,“abc”,false];
var arr3 = new Array();
var arr4 = new Array(88,100,“abc”,false);
数组的特点:
(1)JS中的数组可以存放任意类型的元素
(2)JS中的数组的长度可以被任意改变

6、JS的函数
function fn1( [形参1,形参2,…] ){
//函数体…
}

(function( [形参1,形参2,...] ){ 
	//函数体... 
})( [实参1,实参2,...] );

var fn3 = function( [形参1,形参2,...] ){ 
	//函数体... 
}

三、DOM操作

DOM: Document Object Model, 文档对象模型
是JS专门为访问html元素所提供的一套API

1、如何获取html元素
document.getElementById( id值 ) 返回值是一个JS对象
– 通过元素的id值,获取该元素,返回是一个JS对象,表示所获取的元素
document.getElementsByTagName( 元素名/标签名 ) 返回值是一个js对象数组
– 根据元素名称, 获取该名称对应的所有元素组成的数组, 可以通过下标获取数组中指定下标的元素
element.parentNode
– 获取element所表示元素的父元素
例如: 获取p元素的父元素

document.getElementById(“p1”).parentNode

2、如何创建html元素
document.createElement(元素名/标签名) 返回一个JS对象
– 根据标签名创建指定名称的标签,返回的是一个JS对象,表示新创建的这个元素

3、如何添加html元素
parent.appendChild( child )
– 通过父元素(parent)调用appendChild方法添加子元素(child)

实例: 创建一个表格,并添加到body中
	//创建table、tr、td元素
	var oTab = document.createElement("table");
	var oTr = document.createElement("tr");
	var oTd = document.createElement("td");
	//将td添加到tr中,将tr添加到table,将table添加到body中
	oTr.appendChild( oTd );
	oTab.appendChild( oTr );
	document.body.appendChild( oTab );

4、如何删除html元素
parent.removeChild( child )
– 通过父元素(parent)调用removeChild方法删除子元素(child)

5、如何获取或设置元素的内容
element.innerHTML – 获取当前元素的所有内容
element.innerHTML = xxx; – 为当前元素设置内容(原内容会被新内容覆盖)
示例: 给td元素设置内容
var oTd = document.createElement(“td”); //
oTd.innerHTML = “我是一个td元素!!!”; //我是一个td元素!!!

一、jQuery概述

1、什么是jQuery
jQuery是一门轻量的、免费开源的JS函数库
其实就是一个JS的框架
jQuery可以极大的简化JS代码
核心思想：“写的更少、但做的更多”
2、jQuery的优势
可以极大的简化JS代码
可以像css选择器一样获取元素
可以修改css样式来控制页面的效果
可以兼容常用的浏览器
。。。

3、引入jQuery
jQuery函数库文件就是一个js文件，要想使用jQuery，需要先引入jQuery的函数库文件

4、文档就绪事件函数
JS提供的文档就绪事件函数
window.onload = function(){
//在浏览器加载完整个html网页后,立即执行
}
jQuery提供的文档就绪事件函数
$(function(){
//在浏览器加载完整个html网页后,立即执行
});
完整写法:
$(document).ready(function(){
//在浏览器加载完整个html网页后,立即执行
});

总结：什么时候需要用到文档就绪事件函数:
	通常是在获取元素时, 如果"获取元素的代码" 执行的时间, 比 "元素本身加载的时间" 还要早(也就是说,在获取元素时,元素还没有被浏览器加载), 那么元素必然是获取不到的!
	可以将获取元素的代码放在文档就绪事件函数中, 由于文档就绪事件函数是在浏览器加载完整个网页后立即执行，因此在这个函数中获取任何元素都可以获取到。

二、jQuery选择器

1.基本选择器
(1) $(“div”) – 匹配所有的div元素
$(“span”) – 匹配所有的soan元素
(2) $(".mini") – 匹配所有class值为mini的元素
$(“span.mini”) – 匹配所有class值为mini的span元素
(3) $("#one") – 匹配id值为 one 的元素
(4) $(“div,span,.mini”) – 匹配所有的div元素 和 所有的span元素 以及 class值为mini的元素

2.层级选择器
$("#one span") – 匹配id为one的元素内部的所有span元素

$("#one+span") -- 匹配id为one的元素后面紧邻的span兄弟元素
$("#one").next("span") -- 匹配id为one的元素下一个紧邻的span兄弟元素
$("#one").prev("span") -- 匹配id为one的元素上一个紧邻的span兄弟元素

$("#one").nextAll("span") -- 匹配id为one的元素后面所有的span兄弟元素
$("#one").prevAll("span") -- 匹配id为one的元素前面所有的span兄弟元素

$("#one").siblings("span") -- 匹配id为one的元素前后所有的span兄弟元素

3.基本过滤选择器
$(“span:first”) – 匹配所有span中的第一个span元素
$(“span:eq(0)”) – 匹配所有span中的第一个span元素
$(“span”).eq(0) – 匹配所有span中的第一个span元素

$("span:last") -- 匹配所有span中的最后一个span元素
$("span:eq(-1)") -- 匹配所有span中的最后一个span元素
$("span").eq(-1) -- 匹配所有span中的最后一个span元素

$("span:eq(n)") -- (n从零开始)匹配所有span中的第 n+1 个span元素

4.其他选择器
$(":input") – 匹配所有的表单项元素(可以是input、select、option、textarea等元素)
$(":checkbox") – 匹配所有的复选框
等价于 $(“input[type=‘checkbox’]”) – 匹配所有的复选框

$(":checked") -- 可以匹配所有被选中的单选框或复选框,以及被选中的option选项
$("input:checked") -- 表示匹配所有被选中的单选框或复选框
$("input[type='checkbox']:checked") -- 表示匹配所有被选中的复选框
$("input[type='checkbox']:not(:checked)") -- 表示匹配所有没有被选中的复选框

三、jQuery API总结

1、html元素操作
(1)创建html元素
$("

") – 创建一个div元素,返回一个jQuery对象
$(“

这是一个div元素

”) – 创建一个包含内容的div元素,返回一个jQuery对象
$("") – 创建文本输入框,返回一个jQuery对象

(2)添加子元素 -- append()
	$("body").append("<table><tr><td>这是一个td元素</td></tr></table>");
	-- 往body中添加一个表格元素
	
	var $div = $("<div>这是一个div元素</div>");
	$("body").append( $div ) -- 往body中添加一个div元素
	
(3)删除元素 -- remove()
	$("div").remove() -- 删除所有匹配的div元素

(4)替换元素 -- replaceWith()
	$("div").replaceWith("<p>我是来替换div的p元素!!</p>")

2、html内容 及 值的操作
html()函数 – 获取元素的所有内容(包裹在开始标签和结束标签中的所有内容)
如果通过选择器匹配了多个元素,只能获取第一个元素的内容
html()函还可以设置元素的内容,如果通过选择器匹配了多个元素,则会给所有元素设置内容
– 在js中对应的是innerHTML属性

text()函数 -- 获取元素中的所有文本内容(值获取文本,不获取标签)
	如果通过选择器匹配了多个元素,可以将所有元素内部的文本都返回
	text()函数还可以为元素的设置文本内容(只能设置文本)
	-- 在js中对应的是innerText属性(这个属性在部分浏览器中不兼容)

val()函数 -- 获取表单项元素的value值 或者是 为表单项元素设置value值
	表单项元素: input/select/option/textarea

3、html元素属性 或者 css属性操作
prop()函数 – 获取元素的某一个属性值,或者为元素设置属性值
attr()函数 – 可以获取元素的属性值,或者为元素设置属性值
prop()和attr()的区别:
(1) prop函数是在jquery1.6版本之后才出现,用于获取或设置元素的属性(固有属性)值,
attr函数是在jquery1.6版本之前就有的函数,用于获取或设置元素的属性(自定义属性)值

css()函数 -- 可以获取或设置元素的css样式

4、动画函数
show() – 设置元素为显示状态, 等价于 css(“display”, “block|inline”);
hide() – 设置元素为隐藏状态, 等价于 css(“display”, “none”);
toggle() – 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态

slideToggle() -- 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态

5、parent()/parents()/find()
parent() – 获取当前元素的父元素, 类似于js中的 parentNode属性
parents() – 获取当前元素的所有的祖先元素

find() -- 获取当前元素内部指定的后代元素
$("div").find("span") -- 获取所有div元素内部的span元素
$("div span") -- 获取所有div元素内部的span元素