JavaScript+jQuery基础

JS运行在浏览器中,负责实现网页中的动画效果,或者是实现表单校验等功能
特点
1.JS是一门直译式的语言(边解释边运行,没有编辑的过程)
java–>编写时xx.java–>编译成xx.class–>运行
js–>编写时直接运行,没有编译过程
2.JS是一门基于对象的语言(JS中没有类的概念,也没有编译过程)
JS中是有对象的(内置对象,自定义对象)
3.JS是一门弱类型的语言(Java强类型)
优势:
1.JS是具有良好的交互性
2.JS具有一定的安全性(只能在浏览器内部运行,不能访问浏览器以外的资源)
3.JS具有跨平台性(LS浏览器)
(JS语言是跨平台的,是因为有浏览器,但浏览器不能跨平台)
(Java语言是跨平台的,是因为有虚拟机,但虚拟机不能跨平台)

document是一个JS对象,用于表示当前html页面.当浏览器加载完整个html网页后,会用document对象表示整个html网页

document.getElementById(id值)–>通过元素的id值,获取一个元素.返回的是表示该元素的JS对象
document.getElementByTagName(元素名)–>通过元素名称获取当前文档中的所有指定名称的元素,返回的是一个数组,其中包含了所有指定名称的元素.
document.creatElement(元素名称)–>根据元素名称创建指定名称的元素,返回的是表示新创建元素的js对象
parent.appendChild(child)–>通过父元素添加子元素,其中parent表示父元素,child表示子元素
element.innerHTML–>获取当前元素的html内容

jQuery
jQuery是一门轻量的,免费开源的JS函数库(JS的简单框架)

基本选择器

$=jQuery
.=class
#=id

(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素

(3)id选择器
$("#one") -- 选中id为one的元素

(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

层级选择器

$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素

$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素

$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素