JavaScript笔记十
1.正则表达式
- 语法：
- 量词
{n} 正好n次
{m,n} m-n次
{m,} 至少m次
+ 至少1次 {1,}
? 0次或1次 {0,1}
* 0次或多次 {0,}
- 转义字符
\ 在正则表达式中使用\作为转义字符
\. 表示.
\\ 表示\
. 表示任意字符
\w
- 相当于[A-z0-9_]
\W
- 相当于[^A-z0-9_]
\d
- 任意数字
\D
- 除了数字
\s
- 空格
\S
- 除了空格
\b
- 单词边界
\B
- 除了单词边界
^ 表示开始
$ 表示结束
2.DOM
- Document Object Model
- 文档对象模型，通过DOM可以来任意来修改网页中各个内容
- 文档
- 文档指的是网页，一个网页就是一个文档
- 对象
- 对象指将网页中的每一个节点都转换为对象
转换完对象以后，就可以以一种纯面向对象的形式来操作网页了
- 模型
- 模型用来表示节点和节点之间的关系，方便操作页面
- 节点（Node）
- 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
- 虽然都是节点，但是节点的类型却是不同的
- 常用的节点
- 文档节点 （Document），代表整个网页
- 元素节点（Element），代表网页中的标签
- 属性节点（Attribute），代表标签中的属性
- 文本节点（Text），代表网页中的文本内容
- DOM操作
- DOM查询
- 在网页中浏览器已经为我们提供了document对象，
它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。
- document查询方法：
- 根据元素的id属性查询一个元素节点对象：
- document.getElementById("id属性值");
- 根据元素的name属性值查询一组元素节点对象:
- document.getElementsByName("name属性值");
- 根据标签名来查询一组元素节点对象：
- document.getElementsByTagName("标签名");
- 元素的属性：
- 读取元素的属性：
语法：元素.属性名
例子：ele.name
ele.id
ele.value
ele.className
- 修改元素的属性：
语法：元素.属性名 = 属性值
- innerHTML
- 使用该属性可以获取或设置元素内部的HTML代码
- 事件（Event）
- 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
- 我们可以为事件来绑定回调函数来响应事件。
- 绑定事件的方式：
1.可以在标签的事件属性中设置相应的JS代码
例子：
<button onclick="js代码。。。">按钮</button>
2.可以通过为对象的指定事件属性设置回调函数的形式来处理事件
例子：
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
- 文档的加载
- 浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。
- 如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，
此时将会无法正常获取到DOM对象，导致DOM操作失败。
- 解决方式一：
- 可以将js代码编写到body的下边
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
</body>
- 解决方式二：
- 将js代码编写到window.onload = function(){}中
- window.onload 对应的回调函数会在整个页面加载完毕以后才执行，
所以可以确保代码执行时，DOM对象已经加载完毕了
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
};
};
</script>
JavaScript笔记十的更多相关文章
- JavaScript笔记十二
1.DOM对CSS的操作 - 读取和修改内联样式 - 使用style属性来操作元素的内联样式 - 读取内联样式: 语法:元素.style.样式名 - 例子: 元素.style.width 元素.sty ...
- python3.4学习笔记(十四) 网络爬虫实例代码，抓取新浪爱彩双色球开奖数据实例
python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...
- [Effective JavaScript 笔记] 第4条：原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第3章：使用函数--个人总结
前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
- [Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- [Effective JavaScript 笔记]第28条：不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- 《MFC游戏开发》笔记十 游戏中的碰撞检测进阶：地图类型&障碍物判定
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9394465 作者:七十一雾央 新浪微博:http:// ...
- java jvm学习笔记十（策略和保护域）
欢迎转载请说明出处:http://blog.csdn.net/yfqnihao/article/details/8271415 前面一节,我们做了一个简单的实验,来说明什么是策略文件,在文章的最后,也 ...
随机推荐
- 处理 Could not find a 'KafkaClient' entry in the JAAS configuration. System property 'java.security.auth.login.config' is
场景 某监控进程需要访问多个集群的Kafka INFO - org.apache.kafka.common.KafkaException: Failed to construct kafka cons ...
- mysql慢日志分析组件安装
1.pt-query-digest 安装 cd /usr/bin wget percona.com/get/pt-query-digest chmod u+x pt-query-digest yum ...
- Android dos操作
adb shell 开Androidls 列表cd +目录名 打开目 ...
- vue 踩坑--项目名称不能与插件名称一样
今天webpack搭建,命令行一直报错 百度说是项目名称为:vue npm 拒绝安装 后来才发现是 package.json的name名称也设成了vue 所以 修改一下就可以了.
- fenby C语言P24
#include <stdio.h> int main(){ char cArr[]={'I','L','O','V','E','C'}; char sArr[]="ilovec ...
- GCC中，可以使用未声明过的函数
今天代码中使用了一个函数,这个函数也是自定义的,但是还没来得及声明和定义,可以编译时竟然未报错,网上查了下果然,GCC中可以使用未声明的函数http://bbs.csdn.net/topics/390 ...
- Spring Cloud gateway 网关服务 一
之前我们介绍了 zuul网关服务,今天聊聊spring cloud gateway 作为spring cloud的亲儿子网关服务.很多的想法都是参照zuul,为了考虑zuul 迁移到gateway 提 ...
- intellij idea - Project Structure 项目结构详解（简单明了）
IDEA Project Structure 设置 可以点击 按钮,或者使用快捷键 Ctrl + Shift + Alt + S 打开 Project Structure .如下如所示: 项目的左 ...
- 【MySQL】MySQL Workbench快捷键小结
执行当前行,ctrl+enter 执行整篇sql脚本: ctrl+shift+enter 格式化sql语句(美化sql语句):ctrl+b 自动补全:ctrl+space(似乎win10中这个快捷键失 ...
- Linux的目录介绍
Linux的目录介绍 Linux系统以目录来组织和管理系统中的所有文件.Linux系统通过目录将系统中所有的文件分级.分层组织在一起,形成了Linux文件系统的树型层次结构.以根目录 “/” 为起点, ...