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 前面一节,我们做了一个简单的实验,来说明什么是策略文件,在文章的最后,也 ...
随机推荐
- numpy+pandas+ matplotlib模块(day18)
目录 numpy模块 二维数组 numpy数组的属性 T 数组的装置 dtype 数组元素的数据类型 size 数组元素的个数 ndim 数组的维数 shape数组的维度大小 astype 类型转换 ...
- js响应式布局
<!DOCTYPE html> <html class="mobile"> <head> <meta charset="UTF- ...
- css四种基本选择器
css选择器是什么? 要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的. CSS选择器:就是指定CS ...
- python3 range 倒序
话不多说上代码,要求简单,从100到1遍历操作. //第三个参数表示的是100所有进行的操作,每次加上-1,直到0 for i in range(100,0,-1): print(i)
- SQL语句实现：当A列大于B列时选择A列否则选择B列，当B列大于C列时选择B列否则选择C列
分享一道今天的面试题:SQL语句实现:数据库中有A B C三列,当A列大于B列时选择A列否则选择B列,当B列大于C列时选择B列否则选择C列 第一种:使用case when...then...else ...
- 转：XSS和CSRF原理及防范
原文地址:http://www.freebuf.com/articles/web/39234.html 随着Web2.0.社交网络.微博等等一系列新型的互联网产品的诞生,基于Web环境的互联网应用越来 ...
- 洛谷P2107 【小Z的AK计划】
#include<iostream> #include<queue> #include<algorithm> using namespace std; struct ...
- 【长期维护】C++休闲（修仙）躲方块小游戏
左右键控制小球左右移动,上键加速,Esc退出. 一个‘@’20分 #include <windows.h> #include <bits/stdc++.h> #include ...
- TCP/IP协议第一卷第三章 IP首部分析
IP介绍 IP是TCP/IP协议族中最为核心的协议.所有的TCP.UDP.ICMP.IGMP数据都以IP数据报格式传输. IP提供不可靠.无连接的数据报传送服务. 不可靠(unreliable)它不能 ...
- NOIP模拟 40
考得更嘛也不是了. 不过如果不犯任何低错的话.. T1 我神奇地想要缩减码量 比如想把尽量多的$b[i]-1$省掉 于是求$b[i]$的时候先减了个一 本来是正的 减完就忘了他应该是非负的了 于是线段 ...