web06

###JavaScript对象分类

1. 内置对象:number/string/boolean等
2. 浏览器相关对象BOM: Browser Object Model 浏览器对象模型
3. 页面相关对象DOM: Document Object Model 文档对象模型
   ###BOM浏览器相关内容

• window: 该对象的属性和方法称为全局属性和方法,访问时可以省略掉window.

1. window中常见的方法:

• window.isNaN(); 判断变量是否是数值
• window.parseInt(); 把字符串或小数转成整数
  parseInt(Math.random()*100)
  parseInt(i1.value) + parseInt(i1.value)
• window.parseFloat(“2.38”); 把字符串转成小数
• window.alert(); 弹出提示框
• window.confirm(“您确认离开吗?”); 弹出确认框
• window.prompt(“想吃什么?”); 弹出文本框
• window.setInterval(方法,时间间隔); 定时器
  当需要每隔一段时间重复做某件事的时候,使用定时器
  var timer = setInterval(方法,时间间隔);
  clearInterval(timer); 停止定时器
  setTimeout(方法,时间间隔); 只执行一次的定时器

2. window中常见的属性

• history:历史(当前窗口历史,关闭窗口历史会删除)
  history.length 获取窗口历史页面数量
  history.back() 返回上一页面 等效<-
  history.forward() 前往下一页面 等效->
  history.go(n) n代表前进和后退的数值 n=1代表前进1个页面 2代表2个页面 n=-1代表后退一个页面 -2后退两个页面 0刷新
• location:位置
  location.href 获取和修改浏览器的访问地址
  hocation.reload(); 刷新页面
• screen:屏幕
  screen.width 屏幕的宽度
  screen.height 屏幕的高度
• navigator导航/帮助
  navigator.userAgent 获取浏览器的版本信息
  ###事件
• 什么是事件:事件是系统给提供的一些特定时间点, 包括:鼠标事件/键盘事件/状态改变事件

1. 鼠标事件:
   • onclick 点击事件
   • onmouseover 鼠标移入事件
   • onmouseout 鼠标移出事件
   • onmousedown 鼠标按下事件
   • onmouseup 鼠标抬起事件
   • onmousemove 鼠标移动事件
2. 键盘事件:
   • onkeydown 键盘按下事件
   • onkeyup 键盘抬起事件
3. 状态改变事件:
   • onload 页面加载完成事件
   • onchange 值改变事件
   • onresize 窗口尺寸改变事件

####事件绑定(给元素添加事件的方式)

1. 事件属性绑定
2. 动态绑定(通过js代码给元素添加事件) 好处:能将html代码和js代码分离
   ####事件传递(事件冒泡)

• 当某一个位置有多个事件需要响应,则事件的响应顺序是从最底层往上层传递,类似气泡从下往上所以称为事件冒泡.

###DOM文档对象模型

• 页面相关内容

1. 通过id获取元素 document.getElementById("");
2. 获取和修改元素文本内容 innerText
3. 获取和修改元素html内容 innerHTML
4. 获取和修改文本框的值 value
   ###jQuery框架

• 作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率
• jQuery就是一个通过js语言所以写的框架
• 由于jQuery框架就是js语言所写,引入框架和引入普通的js文件一样
• js对象的方法和jq对象的方法不能混着调用,各自调用各自独有的方法和属性
  ####js对象和jq对象互相转换
• js转jq: var jq = $(js);
• jq转js: var js = jq[0]; jq本质上就是一个数组里面装的是js对象
  ####jq中的选择器

1. 基础选择器 写法和css一样

• 标签名选择器 $(“div”)
• id选择器 $("#id")
• class选择器 $(".class")
• 分组选择器 $(“div,#id,.class”)
• 任意元素选择器 $("*")

2. 层级选择器

• $(“div span”) 匹配div里面所有的span(子孙后代选择器)
• $(“div>span”) 匹配div里面的span子元素(子元素选择器)
• $(“div+span”) 匹配div的弟弟span
• $(“div~span”) 匹配div的弟弟们span
• 层级相关的方法:
  1. $("#abc").prev(“span”) 匹配id为abc元素的哥哥元素
  2. $("#abc").prevAll(“div”) 匹配id为abc元素的哥哥们元素
  3. $("#abc").next(“div”) 匹配id为abc元素的弟弟元素
  4. $("#abc").nextAll(“div”) 匹配id为abc元素的弟弟们元素
  5. $("#abc").siblings(“div”) 匹配id为abc元素的兄弟元素
  6. $("#abc").parent() 匹配id为abc元素的父元素
  7. $("#abc").children(“div”) 匹配id为abc元素的子元素们

3. 过滤选择器

• $(“div:first”) 匹配第一个div
• $(“div:last”) 匹配最后一个div
• $(“div:eq(n)”) 匹配下标为n的div n从0开始
• $(“div:lt(n)”) 匹配下标小于n的div
• $(“div:gt(n)”) 匹配下标大于n的div
• $(“div:even”) 匹配下标为偶数的div
• $(“div:odd”) 匹配下标为奇数的div
• $(“div:not(.abc)”) 匹配class值不等于abc的div