day15_雷神_前端03

前端 day03

---

内容回顾

javascript:
1.ECMAScript5.0 es6(阮一峰) es7 es8

(1)声明变量 var let
(2)内置函数 Date Math.random()
(3)if else switch while do-while for
(4)
var a = 5;

//先赋值
var a = a++;
//var x = ++a;

2.DOM
Document Object Model
(1)获取DOM对象
getElementById()
getElementsByTagName()
getElementsByClassName()
(2)onclick 点击
onmouseover 鼠标悬浮
onmouseout 鼠标移出

onmouseenter 鼠标进入
onmouseleave 鼠标离开
(3)
一、值得操作

too liang
oDiv.innerText = 'too liang'; 仅仅的设置文本
oDiv.innerHTML = '

too liang

'; 文本和标签一起渲染
oInput.value = 'alex'; 仅仅是对表单控件 有效
二、标签属性操作：

设置类名： oDiv.className += ' active'; 追加类名
设置id：oDiv.id = 'box'
title
img中的src设置
a中的href
input id name placeholde.... value
三、样式操作
oDiv.style.(css中所有的样式属性)
注意：如果margin-left 使用js的时候marginLeft

DOM的三步走：
1.事件对象
2.事件
3.事件驱动

注释法排错

DOM的增删改建

追加
删除

JS中的BOM

Browser Object Model

window对象时BOM的顶层对象

alert方法其实是window.alert，点可以不写

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

href：跳转

hash 返回url中#后面的内容，包含#

host 主机名，包括端口

hostname 主机名

pathname url中的路径部分

protocol 协议 一般是http、https

search 查询字符串

举例1：

smyhvae

JS中的定时器

百度
跳转

JS的面向对象

JQuery入门

F12 里的network里的那些name，都是相当于每一个请求。

alex

jQuery的基本选择器

$(this).text() text括号里不传值表示查看值，传了值表示设置值。

alex

tailiang

高级选择器

• 
  alex
  


• 
  alex2
  

基本过滤选择器

• alex1


• alex2


• alex3


• alex4


• alex5


• alex6

筛选的方法

• 
  alex1
  alex1
  


• alex2


• alex3


• alex4


• alex5


• alex6

siblings选项卡

• 
  热门
  


• 洗衣机


• 洗衣机


• 冰箱

选项卡完整版

• 
  a
  


• b


• c


• d

1

2

3

4

对类的操作

标签属性、对象属性的操作

男
女

动画

动画

自定义动画

自定义动画

单双击问题解决

按钮

ajax 练习

查询天气