JS 基础 与 Jquery常用方法

变量
　　变量命名
　　可以使用短名称 比如 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
条件语句

// if语句 else if 语句，，与python中的elif一致
if (a>5) {
console.log("大于5")
}else if(a<5){
// 条件判断后执行的代码
}
else{
console.log("小于5")
}
switch
// switch
switch (b-1) {
case n1:
//代码块
break;
case n2:
//代码块
break;
default:
console.log("上面的代码都没有匹配成功的情况下执行这里")
}
// 执行顺序是先执行switch 后面的代码，得到的结果满足case后面的话
// 就执行对应case后面的代码块，遇到break，就跳出swtich
函数定义
// 函数
// 定义函数的关键词 function 函数内的代码块，包裹在花括号中
function func() {
console.log("自定义函数的执行")
return 1;
}
func(); 
// 花括号中函数体，参数在func 后的括号中
// 不写返回值的话执行之后拿到的事undefined
对象定义
// 对象的定义
// 对象由花括号分割，在括号内部
// 定义方式 1
objA = new Object();
// 定义方式2 类似于python中的字典
var objB = {
name:"addicated",
func:function () {
alert('hello addicated')
}
};

// 对象属性
// 对象的属性以名称和值对的形式（name：value)来定义，
//属性由逗号分割
js循环
while循环
与Java一致
for循环，与java写法类似
- for（i in obj）{
// 遍历数组的话 i 为数组的下标索引
// 遍历对象的话 i 为对象内的属性名，所以想要得到数组/对象内的值通常需要
console.log(obj[i]) // 这样的写法
}

html dom树
文档树，
根元素为 html
元素 head body 两个兄弟元素
之后各自下面的标签为子元素
使用js代码操作元素，首先需要选择到元素节点，之后对元素节点进行操作。

1，获取到页面标签
-通过id查找页面元素

-通过id查找页面元素
document.getElementById()
-通过标签名找到页面元素
document.getElementByTagName()
-通过类名找到元素，拿到的是元素的列表
document.getElemnetsByClassName() 可切片之后进行操作

2，需要注意的问题
　　　

当页面元素未加载完成时，这时候通过js代码去获得元素是取不到的
　　1，针对这种场景，有两种方法
　　调整js代码的位置，放在页面元素代码的后面，保证在获取之前页面已经完成加载
　　2，在js代码前添加
　　windows.onload = function(){
　　js操作代码块，之后这部分代码就会等到页面加载完成之后才执行
　　}
　　操作页面标签
　　innerText 只获取文本
　　innerHTML 获取内嵌的html页面代码
　　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({'300px',
height:'200px',
background:'red'
});
$('.box2').css({'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() 被备选元素进行隐藏和显示的切换