变量

变量命名

可以使用短名称 比如 x y 也可以使用描述性更好的名称（推荐
变量必须以字母开头
变量也可以以 $ _符号开头，但不推荐
变量名称对大小写敏感
驼峰式命名法

变量声明

js中变量可以先声明后赋值

同时也可以同时给多个变量赋值

  1. var a=10,b=11,c=22;

数据类型

数字类型
字符串
数组
null
undefined
布尔类型
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. }

switch

  1. // switch
  2. switch (b-1) {
  3.     case n1:
  4.         //代码块
  5.         break;
  6.     case n2:
  7.         //代码块
  8.         break;
  9.     default:
  10.         console.log("上面的代码都没有匹配成功的情况下执行这里")
  11. }
  12. // 执行顺序是先执行switch 后面的代码，得到的结果满足case后面的话
  13. // 就执行对应case后面的代码块，遇到break，就跳出swtich

函数定义

  1. // 函数
  2. // 定义函数的关键词 function 函数内的代码块，包裹在花括号中
  3. function func() {
  4.     console.log("自定义函数的执行")
  5.     return 1;
  6. }
  7. func(); 
  8. // 花括号中函数体，参数在func 后的括号中
  9. // 不写返回值的话执行之后拿到的事undefined

对象定义

  1. // 对象的定义
  2. // 对象由花括号分割，在括号内部
  3. // 定义方式 1
  4. objA = new Object();
  5. // 定义方式2 类似于python中的字典
  6. var objB = {
  7.     name:"addicated",
  8.     func:function () {
  9.         alert('hello addicated')
  10.     }
  11. };
  13. // 对象属性
  14. // 对象的属性以名称和值对的形式（name：value)来定义，
  15. //属性由逗号分割

js循环

while循环

与Java一致

for循环，与java写法类似

  • for（i in obj）{
    // 遍历数组的话 i 为数组的下标索引
    // 遍历对象的话 i 为对象内的属性名，所以想要得到数组/对象内的值通常需要
    console.log(obj[i]) // 这样的写法
    }

html dom树

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

1，获取到页面标签

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

2，需要注意的问题

当页面元素未加载完成时，这时候通过js代码去获得元素是取不到的
1，针对这种场景，有两种方法
调整js代码的位置，放在页面元素代码的后面，保证在获取之前页面已经完成加载
2，在js代码前添加

  1. windows.onload = function(){
  2. js操作代码块，之后这部分代码就会等到页面加载完成之后才执行
  3. }

操作页面标签

  1. innerText 只获取文本
  2. innerHTML 获取内嵌的html页面代码
  3. 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解决更为简单

  1. $(function () {
  2.     // function 的写法相当于一个匿名函数，
  3.     // 与window.onload中逻辑一样，当页面加载完成后进行运行
  4.     $('#box1').css({width:'300px',
  5.                     height:'200px',
  6.                     background:'red'
  7.     });
  8.     $('.box2').css({width:'300px',
  9.                     height:'200px',
  10.                     background:'pink'
  11.     });

对元素统一进行设定赋值属性

  1. // 可以对元素集统一进行设定赋值
  2. $("li").css({background :'pink',
  3. fontSize:'36px'})

同级标签选择

  1. // prev()查找的事同级元素的前一个，，比如定位到li3，prev取到的就是li2
  2. li3.prev().css({background: 'red'});
  3.  // 选择该节点以前的所有兄弟节点
  4. li3.prevAll().css({background: 'blue'}); 
  5. li3.nextAll();  //选择该节点之后的所有兄弟节点
  6. li3.next();  //选择该节点之后的一个兄弟节点
  7. li3.siblings(); // 选择所有的兄弟节点，除了自己之外

父级，子级标签选择，过滤

  1. li3.parent().css({background: 'red'}); //选择父节点  支持链式调用
  2. $('.div').parent().css({background:'red'});
  3. li3.children(); //选择所有子元素
  5. $('.div').find('#id1');  // 查找元素
  7. // 选择过滤
  8. $('.div').has('p');  // 过滤

获得索引

  1. $('div').index()  # 获得索引值
  2. $('div').eq(0)  # 按照索引下标取值
  3. # 选择class等于cs的div元素
  4. $('div').filter('.cs');
  5. # 选择第六个div元素
  6. $('div').eq(5)

使用jquery操作样式

  1. $("").css('width');
  2. $("").css('color');

添加或者移除class属性

  1. // 添加或者移除class属性
  2. $().addClass("")
  3. $().remove("")
  4. // 重复切换样式
  5.  $().toggleClass('')

常用的绑定click事件

  1. $("#li1").click(function(){
  3. })

jquery 效果函数

  1. //jquery 效果函数
  2. animate() 对被选元素应用自定义的动画
  3. fadein() 主键改变被选元素的不透明度，从隐藏到可见
  4. fadeOut() 逐渐改变被选元素的不透明度，从可见到隐藏
  5. hide() 隐藏备选的元素
  6. show() 显示备选的元素
  7. sideDown() 通过调整高度来滑动显示被选元素
  8. sideToggle() 对被选元素进行滑动隐藏和滑动显示的切换
  9. sidUp() 通过调整高度来滑动隐藏被选元素
  10. stop() 停止在备选元素上运动动画
  11. toggle() 被备选元素进行隐藏和显示的切换