变量
变量命名
可以使用短名称 比如 x y 也可以使用描述性更好的名称（推荐
变量必须以字母开头
变量也可以以 $ _符号开头，但不推荐
变量名称对大小写敏感
驼峰式命名法
变量声明
js中变量可以先声明后赋值
同时也可以同时给多个变量赋值
var a=10,b=11,c=22;
数据类型
数字类型
字符串
数组
null
undefined 定义对象但没有赋值的话，调用的时候是undefined，null是有值的，为null
布尔类型
js是一个弱类型的语言，不管整数还是小数都是数字类型
数组 Array
类似于python的列表，可以通过下标取值
定义方式
var aList = Array(1,2,3,4,5,6)
属性 length 返回数组的元素数量
方法
往数组最后插入一个元素
aList.push(value)
获取最后一个元素
aList.pop()
null 类型
类似于python中的none类型
null是有值的，为null
定义对象但没有赋值的话，调用的时候是undefined
布尔值
true
false
运算符
==与 ===的区别
==判断值是否相等，之比较内容是否相等，不管是不是同一个类型
=== 判断值之外还会判断类型是否相等，要同一个类型且值相同才为true
条件语句
1 // if语句 else if 语句，，与python中的elif一致 2 if (a>5) { 3 console.log("大于5") 4 }else if(a<5){ 5 // 条件判断后执行的代码 6 } 7 else{ 8 console.log("小于5") 9 } 10 switch 11 // switch 12 switch (b-1) { 13 case n1: 14 //代码块 15 break; 16 case n2: 17 //代码块 18 break; 19 default: 20 console.log("上面的代码都没有匹配成功的情况下执行这里") 21 } 22 // 执行顺序是先执行switch 后面的代码，得到的结果满足case后面的话 23 // 就执行对应case后面的代码块，遇到break，就跳出swtich 24 函数定义 25 // 函数 26 // 定义函数的关键词 function 函数内的代码块，包裹在花括号中 27 function func() { 28 console.log("自定义函数的执行") 29 return 1; 30 } 31 func(); 32 // 花括号中函数体，参数在func 后的括号中 33 // 不写返回值的话执行之后拿到的事undefined 34 对象定义 35 // 对象的定义 36 // 对象由花括号分割，在括号内部 37 // 定义方式 1 38 objA = new Object(); 39 // 定义方式2 类似于python中的字典 40 var objB = { 41 name:"addicated", 42 func:function () { 43 alert(‘hello addicated‘) 44 } 45 }; 46 47 // 对象属性 48 // 对象的属性以名称和值对的形式（name：value)来定义， 49 //属性由逗号分割 50 js循环 51 while循环 52 与Java一致 53 for循环，与java写法类似 54 - for（i in obj）{ 55 // 遍历数组的话 i 为数组的下标索引 56 // 遍历对象的话 i 为对象内的属性名，所以想要得到数组/对象内的值通常需要 57 console.log(obj[i]) // 这样的写法 58 }
html dom树
文档树，
根元素为 html
元素 head body 两个兄弟元素
之后各自下面的标签为子元素
使用js代码操作元素，首先需要选择到元素节点，之后对元素节点进行操作。
1，获取到页面标签
-通过id查找页面元素
1 -通过id查找页面元素 4 document.getElementById() 5 -通过标签名找到页面元素 6 document.getElementByTagName() 7 -通过类名找到元素，拿到的是元素的列表 8 document.getElemnetsByClassName() 可切片之后进行操作
2，需要注意的问题
1 当页面元素未加载完成时，这时候通过js代码去获得元素是取不到的 2 1，针对这种场景，有两种方法 3 调整js代码的位置，放在页面元素代码的后面，保证在获取之前页面已经完成加载 4 2，在js代码前添加 5 windows.onload = function(){ 6 js操作代码块，之后这部分代码就会等到页面加载完成之后才执行 7 } 8 操作页面标签 9 innerText 只获取文本 10 innerHTML 获取内嵌的html页面代码 11 onclick() 绑定点击事件
jquery
jquery 是目前使用最广泛的js函数库
jquery的版本为1，2，3系列，1系列兼容低版本的浏览器，2，3系列放弃兼容低版本，
目前使用最多的是1系列，
口号是 write lee do more
引用方式，按照普通js文件的方式引用
本次只针对jquery选择器与样式操作进行终点学习
jquery可以快速的选择元素，选择规则和css选择相同，使用length属性判断是否选择成功
# id 选择器
$(‘#id1‘)
#类选择器
$(‘.classname‘)
# 标签选择器
$(‘tagname‘)
# 层级选择器
$(‘#id li span‘)
# 属性选择器
$(‘input[name=user]‘)
选择到节点之后便可以对元素进行css样式赋值修改
前文中提到的元素未加载完成定位不到元素的问题
使用jquery解决更为简单
$(function () {
// function 的写法相当于一个匿名函数，
// 与window.onload中逻辑一样，当页面加载完成后进行运行
$(‘#box1‘).css({width:‘300px‘,
height:‘200px‘,
background:‘red‘
});
$(‘.box2‘).css({width:‘300px‘,
height:‘200px‘,
background:‘pink‘
});
对元素统一进行设定赋值属性
// 可以对元素集统一进行设定赋值
$("li").css({background :‘pink‘,
fontSize:‘36px‘})
同级标签选择
// prev()查找的事同级元素的前一个，，比如定位到li3，prev取到的就是li2
li3.prev().css({background: ‘red‘});
// 选择该节点以前的所有兄弟节点
li3.prevAll().css({background: ‘blue‘});
li3.nextAll(); //选择该节点之后的所有兄弟节点
li3.next(); //选择该节点之后的一个兄弟节点
li3.siblings(); // 选择所有的兄弟节点，除了自己之外
父级，子级标签选择，过滤
li3.parent().css({background: ‘red‘}); //选择父节点 支持链式调用
$(‘.div‘).parent().css({background:‘red‘});
li3.children(); //选择所有子元素
$(‘.div‘).find(‘#id1‘); // 查找元素
// 选择过滤
$(‘.div‘).has(‘p‘); // 过滤
获得索引
$(‘div‘).index() # 获得索引值
$(‘div‘).eq(0) # 按照索引下标取值
# 选择class等于cs的div元素
$(‘div‘).filter(‘.cs‘);
# 选择第六个div元素
$(‘div‘).eq(5)
使用jquery操作样式
$("").css(‘width‘);
$("").css(‘color‘);
添加或者移除class属性
// 添加或者移除class属性
$().addClass("")
$().remove("")
// 重复切换样式
$().toggleClass(‘‘)
常用的绑定click事件
$("#li1").click(function(){
})
jquery 效果函数
//jquery 效果函数
animate() 对被选元素应用自定义的动画
fadein() 主键改变被选元素的不透明度，从隐藏到可见
fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏
hide() 隐藏备选的元素
show() 显示备选的元素
sideDown() 通过调整高度来滑动显示被选元素
sideToggle() 对被选元素进行滑动隐藏和滑动显示的切换
sidUp() 通过调整高度来滑动隐藏被选元素
stop() 停止在备选元素上运动动画
toggle() 被备选元素进行隐藏和显示的切换