JavaScript7

最新推荐文章于 2024-04-18 10:36:11 发布

小新没蜡笔m

最新推荐文章于 2024-04-18 10:36:11 发布

阅读量453

点赞数

文章标签：正则表达式

本文链接：https://blog.csdn.net/m0_66506641/article/details/123451113

版权

1.正则表达式语法

1.1量词

通过量词可以设置一个内容出现的次数
量词只对它前边的一一个内容起作用*
{n}正好出现n次
- {m,n} 出现m-n次
{m,}m次以上
+ 至少一个，相当于{1,}
* 0个或多个，相当于{0,}
? 0个或1个，相当于{0,1}

var  reg = /a{3}/;
console.log(reg.test("aaac"));//true
reg = /(ab){3}/;
console.log(reg.test("ababab"));//true
reg = /ab+c/;
reg = /ab*c/;

1.2检查一个字符是否以a开头

^表示开头
$表示结尾

var reg=/^a/;
var reg=/a$/;
var reg=/^a$/;//只能出现一个a

1.3检查字符串是否含有.

.表示任意字符串
在正则表达式中使用\作为转义字符
\.表示.
\\表示\

var reg=/\./;
reg=new RegExp("\\.");//在构造函数中使用\\表示\

1.4检查是否含有单词child

\w 任意字母、数字[A-z 0-9_]
\W 除了字母、数字、[^A-z0-9_ ]
\d任意的数字[0-9]
\D.除了数字[^0-9]
\s空格
\S除了空格
\b单调边界
\B除了单调边界

var reg=/\bchild\b/;

1.5去掉字符串中的前后空格

去除空格就是使用""(空符串)来代替空格

var str="    hello    ";
str=str.replace(/\s/g,"");//去除全部空格
str=str.replace(/^\s*/,"");//去除开头的空格
str=str.replace(/\s*$/,"");//去除结尾的空格
str=str.replace(/^\s*|\s*$/g,"");//去除开头和结尾的空格

1.6邮件的正则

2.DOM

●DOM ,全称Document Object Model文档对象模型。

●JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

●文档

一文档表示的就是整个的HTML网页文档

●对象

-对象表示将网页中的每一个部分都转换为了一个对象。

●模型

一使用模型来表示对象之间的关系,这样方便我们获取对象。

节点

●节点Node ,是构成我们网页的最基本的组成部分,网页中的每一个部分都可以称为是一个节点。
●比如: htm|标签、属性、文本、注释、整个文档等都是一个节点。
●虽然都是节点,但是实际上他们的具体类型是不同的。
●比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点文档称为文档节点。
●节点的类型不同,属性和方法也都不尽相同。

节点

节点: Node-构成HTML文档最基本的单元。

●常用节点分为四类
-文档节点:整个HTM文档
-元素节点: HTML文档中的HTML标签
-属性节点:元素的属性
-文本节点: HTML标签中的文本内容

<p lid="pId"IThis_ is_ a_ paragraphK/p>H

事件

●事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。
●JavaScript与HTML之间的交互是通过事件实现的。
●对于Web应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键,等等。

文档的加载

*浏览器在加载一个页面时，是按照自上向下的顺序加载的，
*读取到一行就运行一行 ,如果将script标签写到页面的上边，
*在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
*会导致无法获取到DOM对象

获取元素节点

●通过document对象调用
1. getElementById()
通过id属性获取一个元素节点对象
2. getElementsBy TagName()-通过标签名获取- -组元素节点对象
3. getElementsByName()
通过name属性获取一组元素节点对象

获取元素节点的子节点
●通过具体的元素节点调用
1. getElementsByTagName()
-方法,返回当前节点的指定标签名后代节点 2. childNodes
-属性,表示当前节点的所有子节点
3. firstChild
-属性,表示当前节点的第一个子节点
4. lastChild
-属性,表示当前节点的最后一个子节点

( 1 ) childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签间的空百也会当成文本节点，在IE8浏览器中不会将空白文本当成字节点
( 2 ) children属性可以获取当前元素的所有子元素
( 3 ) firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
( 4 ) firstElementChild获取当前元素的第一个子元素，但不支持IE8及一下的浏览器

获取父节点和兄弟节点
●通过具体的节点调用
1. parentNode
-属性,表示当前节点的父节点
2. previousSibling
-属性，表示当前节点的前一个兄弟节点3. nextSibling
-属性,表示当前节点的后-一个兄弟节点

/ /为id为btn01的按钮绑定一个单击响应函数
var btn01 = document. getElementById("btn01");
btn01.onclick =function(){

/ /查找#bj节点

var bj = document. getElementById("bj");
//打印bj
/ / innerHTML通过这个属性可以获取到元素内部的html代码alert(bj . innerHTML) ;}

innerHTML用于获取元素内部的HTML代码的

对于自结束标签，这个属性没有意义
如果需要读取元素节点属性，
直接使用元素.属性名

例子:元素.id元素. name元素. value

注意: class属性不能采用这种方式，
读取class属性时需要使用元素. className
alert (inputs [i]. className) ;

DOM剩余的查询方法

(1)获取body标签

●在document中有一个属性body，它保存的是body的引用
var body = document .body;
●document .documentElement保存的是html的根标签
var html = document .documentt Lementiconsole.log(html);

(2)document.all代表页面中所有的元素

var all = document.all;
for(var i =0; i < all.length;i++){console.log(all[i]);

(3)根据元素的class属性值查询一组元节点对象

●getElementByClassName() 可以根据class属性值苏取一组元素节点对象，但是该方法不支持IE8及以下的浏览器

ar boxI =document.
tElementsByClassName( boxI" )

(4 )document.querySelector()

●需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
●虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
●使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

(5)document.querySelectorAl()

●该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中.返回
●即使符合条件的元素只有一个，它也会返回数组.

var boxI = document.querySelectorAlL(" boxI”);console.log(boxI);

inner Text和innerHTML

●相同点:(1)都能修改元素内容(2)都是可读写的，可以获取元素里面的内容