Web前端基础（06）

JavaScript中对象分类

内置对象: number/string/boolean等

浏览器相关对象BOM: Browser Object Model浏览器对象模型

页面相关对象DOM: Document Object Model文档对象模型

BOM浏览器相关内容

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

window中常见的方法:

window.isNaN() 判断变量是否是NaN

window.alert() 弹出提示框

window.confirm() 弹出确认框

parseInt()/parseFloat() 把字符串或数值 转成整数/转成小数

var timer =setInterval(方法,时间间隔) 开启定时器

clearInterval(timer) 停止定时器

window中常见的属性:

history: 历史(当前窗口的历史)

window.history.length 获取历史页面数量

history.back() 返回上一页面

history.forward() 前往下一页面

location: 位置

window.location.href 获取和修改浏览器的访问地址 location.href=“http://www.baidu.com”;

location.reload(); 刷新

screen 屏幕

screen.width/height 获取屏幕的分辨率

navigator 帮助/导航

navigator.userAgent 获取浏览器的版本信息

事件

什么是事件: 系统给提供的一些特定时间点, 事件包括:鼠标事件,键盘事件,状态改变事件

鼠标事件:

onclick 鼠标点击事件

onmouseover 鼠标移入事件

onmouseout 鼠标移出事件

onmousedown 鼠标按下事件

onmouseup 鼠标抬起事件

onmousemove 鼠标移动事件

键盘事件

onkeydown 键盘按下事件

onkeyup 键盘抬起事件

event.keyCode 获取按键编码 String.fromCharCode() 把按键编码转成字符

状态改变事件

onload 页面加载完成事件

onchange 值改变事件

onresize 窗口尺寸改变事件

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

事件属性绑定

动态绑定(通过js代码给元素后期添加事件)

事件传递(事件冒泡): 如果某一个位置有多个元素的事件需要响应,响应顺序是从最底层往上层传递(类似气泡),所以也称为事件冒泡

DOM

Document Object Model文档对象模型,包括和页面相关的内容

通过id获取元素 var d = document.getElementById(“id”)

获取和修改元素的文本内容 innerText

获取和修改元素的html内容 innerHTML

获取和修改元素的值 input.value 元素对象.name/id/value

原生JavaScript中DOM相关内容在jQuery框架中基本实现了全覆盖,所以只需要掌握jQuery框架的使用方式即可

jQuery框架

这是一个通过js语言所写的框架,对原生js语言进行封装,作用:提高开发效率.

jQuery框架就是一个普通的js文件,通过外部引入方式 把该文件引入即可.

js对象和jq对象互相转换:(js对象和jq对象不是一个东西,不能互相调用彼此的方法,有些时候只能的js对象但是需要用到jq框架里面的方法这时候就需要使用以下方式将js对象转成jq,同理有时只能得到jq对象但是需要调用js对象里面的方法,所以需要使用以下方法把jq对象转成js对象)

//js获取对象的方式

var js = document.getElementById(“d1”);

//jq获取对象的方式

var jq = $("#d1");

js转jq: var jq = $(js);

jq转js: var js = jq[0];

选择器

基础选择器 用法和css中一样

id选择器 $("#id")

标签名选择器 $(“div”)

class选择器 $(".class")

分组选择器 $("#id,div,.class")

任意元素选择器 $("*")

层级选择器

$(“div span”) 匹配div里面所有的span(包括所有后代span)

$(“div>span”) 匹配div里面所有的span子元素

$(“div+span”) 匹配div后面的span

$(“div~span”) 匹配div后面所有的span

层级相关的方法:

$("#abc").prev(“div”) 匹配id为abc元素的div哥哥元素

$("#abc").prevAll() 匹配id为abc元素的哥哥们元素

$("#abc").next() 匹配id为abc元素的弟弟元素

$("#abc").nextAll() 匹配id为abc元素的弟弟们元素

$("#abc").siblings() 匹配id为abc元素的所有兄弟元素

$("#abc").parent() 匹配元素的父元素

$("#abc").children() 匹配元素的所有子元素们

过滤选择器

$(“div:first”) 匹配第一个div

$(“div:last”) 匹配最后一个div

$(“div:eq(n)”) 匹配下标为n的div 从0开始

$(“div:lt(n)”) 匹配下标小于n的div

$(“div:gt(n)”) 匹配下标大于n的div

$(“div:not(.abc)”) 匹配所有div 排除掉class值为abc的div

$(“div:even”) 匹配下标为偶数的div

$(“div:odd”) 匹配下标为基数的div

内容选择器

$(“div:has§”) 匹配包含p子元素的div

$(“div:empty”) 匹配空的div

$(“div:parent”) 匹配非空的div

$(“div:contains(‘xxx’)”) 匹配包含xxx文本的div

可见选择器

$(“div:visible”) 匹配所有显示的div

$(“div:hidden”) 匹配所有隐藏的div

显示隐藏相关方法:

$("#abc").show() 显示

$("#abc").hide() 隐藏

$("#abc").toggle() 显示隐藏切换

选择器回顾:

基础选择器

标签名 div

id #id

class .class

分组 div,#id,.class

任意元素 *

层级选择器

子孙后代 div span

子元素 div>span

弟弟 div+span

弟弟们 div~span

相关方法:

哥哥 .prev() 哥哥们 .prevAll() 弟弟 .next() 弟弟们 .nextAll()

所有兄弟 .siblings() 父元素 .parent() 子元素们 .children()

过滤选择器

第一个 div:first

最后一个 div:last

第n个 div:eq(n)

小于n个 div:lt(n)

大于n个 div:gt(n)

不包含 div:not(xxx)

偶数 div:even

基数 div:odd

内容选择器

包含子元素 div:has(xxx)

空元素 div:empty

非空元素 div:parent

包含文本的元素 div:contains(xxx)

可见选择器

所有可见元素 div:visible

所有不可见 div:hidden

相关方法: 显示.show() 隐藏 .hide() 显示隐藏切换 .toggle()

练习:

1.定时器

2.定时器练习

3.鼠标事件

4.键盘事件

5.值改变事件

北京 上海 广州

6.事件传递

7.引入jQuery

未完待续…

web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。