首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

javaWeb核心技术第四篇之Javascript第二篇事件正则表达式

(文档对象模型):操作html文档 "html加载到内存时,是以一棵树形式存在,可以通过document操作所有的节点" - html文档与dom关系:理解 - html里所有的标签...、标签属性、文本都会转换成dom树里节点 - a.整个html文档抽象成对象,叫作document 文档节点 - b.标签转换成节点对象,叫作Element...作用: 渲染页面 提供工作效率,将html样式分离 html整合 方式1:内联样式表 通过标签style属性 方式2:内部样式表...> 方式3:外部样式表 有一个独立css文件.后缀名:.css 在html通过link标签导入 选择器: id选择器 html元素有id属性且有值 <xx id="...(获取元素值,操作标签体,操作标签value属性) ///////////////// 步骤分析: 1.表单 2.表单提交时候 确定事件 onsubmit() 3.校验用户名密码 4.获取用户名密码对象及值

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

微前端学习笔记(5):从import-html-entry发微DOMJSCSS隔离

import-html-entry 是 qiankun 中一个举足轻重依赖,用于获取子应用 HTML JS,同时对 HTML JS 进行了各自处理,以便于子应用在父应用中加载。...整个流程是这样:首先当解析 html stylesheet link 标签时,就会将这个标签注释起来 ,然后再通过 fetch 将此 href 对应 css 获取到,然后再使用正则将这个被注释标签替换成由...=  ?!, ?=为正向预查,在任何开始匹配圆括    号内正则表达式模式位置来匹配搜索字符串,?!为负向预查,在任何开始不匹配该正则表达式模    式位置来匹配搜索字符串。    .../is;/** 匹配包含src属性script标签  ^ 匹配输入字符串开始位置,但在方括号表达式中使用时,表示不接受该方括号表达式字符集合。...ShadowDOM 模式:该模式主要原理是通过对于所有被挂载应用 DOM,该模式会把根 DOM 放入到一个 ShadowDOM ,通过 ShadowDOM 自身能力来做到样式隔离。

11310

Web 框架替代方案

具有稳定 Dom级联反应性 让我们回到错误标签示例上。在 ReactJS SolidJS ,我们会创建声明性代码,并将其转化为命令性代码,向 DOM 中加入标签或者删除标签。...变化传播经过优化良好测试,在本地浏览器代码,避免了不必要昂贵 DOM 操作,如追加删除。 选择器是稳定。在这种情况下,你可以指望标签元素存在。...表单带有内置输入验证特性:通过 regex 模式进行验证,对 CSS 无效有效表单进行反应性验证,处理必需表单可选表单,等等。为了享受这些特性,你不需要看起来像表单东西。...默认情况下,元素与它们所包含表单相关联,但也可以使用 form 属性与文档任何其他表单相关联。这使我们能够在不对 DOM 树产生依赖情况下进行表单关联。...但请记住,替代模式是存在,通常成本较低,而且不一定需要较少开发者经验。允许自己对这些模式感到好奇,即使你决定在使用框架时从它们挑选。 模式概述 保持 DOM稳定。

2.5K10

JavaDOMJavascript技术

JavaDOMJavascript技术 DOM是一门技术,是文档对象模型.所需文档只有标记型文档,如我们所学html文档(文档所有标签都封装成为对象了) DOM: 为Document Object...把标签文档中所有的标签封装成对象, 文档也封装成对象,DOM技术(标记型文档封装成对象) DOM技术存在浏览器,内置了DOM技术解析器,变对象是需要进行解析,描述进行封装.在内存当中进行解析,为Demo.html...(HTML,CSS,JAVASCRIPT,DOM + xmlHTTPRequest为AJAX) HTML:提供标签,用于封装数据. css:提供样式....DOM:提供解析,将标记文档以及文档内容都封装成为对象,这样就可以操作对象属性行为....-- 因为标签都在文档,所以想要获取标签需要先有document对象    getElementById 获取对 ID 标签属性为指定值第一个对象引用    getElementsByName

64230

第61节:JavaDOMJavascript技术

JavaDOMJavascript技术 DOM是一门技术,是文档对象模型.所需文档只有标记型文档,如我们所学html文档(文档所有标签都封装成为对象了) DOM: 为Document...把标签文档中所有的标签封装成对象, 文档也封装成对象,DOM技术(标记型文档封装成对象) DOM技术存在浏览器,内置了DOM技术解析器,变对象是需要进行解析,描述进行封装.在内存当中进行解析,为Demo.html...(HTML,CSS,JAVASCRIPT,DOM + xmlHTTPRequest为AJAX) HTML:提供标签,用于封装数据. css:提供样式....DOM:提供解析,将标记文档以及文档内容都封装成为对象,这样就可以操作对象属性行为....-- 因为标签都在文档,所以想要获取标签需要先有document对象 getElementById 获取对 ID 标签属性为指定值第一个对象引用 getElementsByName

60420

Jsoup选择器语法

站在巨人肩膀上才能看更远 jsoup 是一款基于Java HTML解析器,可直接解析某个URL地址或HTML文本内容。...它提供了一套非常省力API,可通过DOM,CSS以及类似于jQuery操作方法来取出操作数据。...1、Selector选择器基本语法 tagname: 通过标签查找元素,比如:a ns|tag: 通过标签在命名空间查找元素,比如:可以用 fb|name 语法来查找 元素 #id:...g)] *: 这个符号将匹配所有元素 2、Selector选择器组合使用语法 el#id: 元素+ID,比如: div#logo el.class: 元素+class,比如: div.masthead...el:多个选择器组合,查找匹配任一选择器唯一元素,例如:div.masthead, div.logo 3、Selector伪选择器语法 :lt(n): 查找哪些元素同级索引值(它位置在DOM是相对于它父节点

1.6K30

jQuery

文档处理 事件 动画效果 插件 each、data、Ajax jQuery语法 $符号事jQuery重要标识 //在JS可以通过获取先获取标签,然后去使用对应方法,在jQuery中一样,...获取到元素是DOM对象,那么在jQuery获取到元素属于jQuery对象,两者之间方法有差别,虽然 jQuery对象是包装 DOM对象后产生,但是 jQuery对象无法使用 DOM对象任何方法...,同理 DOM对象也没不能使用 jQuery里方法 对比DOM对象jQuery对象 DOM对象:var variable = DOM对象 jQuery对象:var $variable = jQuery...添加到指定元素外部前面 $(A).before(B)// 把B放到A前面 $(A).insertBefore(B)// 把A放到B前面 移除清空元素 remove()// 从DOM删除所有匹配元素...> ps : 像click、keydown等DOM定义事件,我们都可以使用.on()方法来绑定事件,但是hover这种jQuery定义事件就不能用.on()方法来绑定了。

6.7K10

jsDOM理解

URIError:URI处理函数使用不当 复制代码 es5严格模式 “use strict” 不再兼容es3一些不规则语法。使用全新es5规范。...DOM对象即为宿主对象, 由浏览器厂商定义,用来操作htmlxml功能一类对象集合。 也有人称DOM是对HTML以及XML标准编程接口。...复制代码 DOM基本操作 1.对节点增删改查 查看元素节点 document代表整个文档 document.getElementById() //元素id 在Ie8以下浏览器, 不区分id大小写,而且也返回匹配...name属性元素 .getElementsByTagName() // 标签名 getElementsByName(); //,需注意,只有部分标签name可生效(表单表单元素,img,iframe...ie7以下版本没有,非实时 .querySelectorAll() // css选择器 在ie7ie7以下版本没有,非实时 复制代码 DOM基本操作 遍历节点树: parentNode ->

4.2K30

Xpath、Jsoup、Xsoup(我Java爬虫之二)

语法 选取结点 表达式 描述 / 从根节点选取 // 从匹配选择的当前节点选择文档节点,而不考虑它们位置。 . 选取当前结点 .....)设置元素内HTML内容 outerHtml()获取元素外HTML内容 data()获取数据内容(例如:scriptstyle标签) tag() and tagName() 操作HTML和文本 append...比如:a ns|tag: 通过标签在命名空间查找元素,比如:可以用 fb|name 语法来查找 元素 #id: 通过ID查找元素,比如:#logo .class: 通过class名称查找元素...g)] *: 这个符号将匹配所有元素 Selector选择器组合使用 el#id: 元素+ID,比如: div#logo el.class: 元素+class,比如: div.masthead el[attr...el:多个选择器组合,查找匹配任一选择器唯一元素,例如:div.masthead, div.logo 伪选择器selectors :lt(n): 查找哪些元素同级索引值(它位置在DOM是相对于它父节点

1.3K20

面向对象

对象概念 创建对象字面量语法 访问成员运算符 创建对象构造函数语法 this关键字 添加删除属性 delete关键字 全局对象 Number / String / Boolean Date /...Math / RegEx / Array BOM window对象属性方法 history对象 forward() / back() / go() location对象 navigator对象 screen...:input / change / submit / reset / cut / copy / paste / select 事件绑定 HTML事件处理程序(不推荐使用,因为要做到标签与代码分离) 传统...DOM事件处理程序(只能附加一个回调函数) 事件监听器(旧浏览器不被支持) 事件流:事件捕获 / 事件冒泡 事件对象(低版本IEwindow.event) target(低版本IEsrcElement...) type cancelable preventDefault() stopPropagation()(低版本IEcancelBubble) 鼠标事件 - 事件发生位置 屏幕位置:screenX

47940

java使用Jsoup精准爬取招聘信息

它提供了一套非常省力API,可通过DOM,CSS以及类似于jQuery操作方法来取出操作数据。 jsoup主要功能如下: 1. 从一个URL,文件或字符串解析HTML; 2....使用DOM或CSS选择器来查找、取出数据; 3....Selector选择器概述 tagname: 通过标签查找元素,比如:a ns|tag: 通过标签在命名空间查找元素,比如:可以用 fb|name 语法来查找元素 #id: 通过ID查找元素,比如...g)] *: 这个符号将匹配所有元素 Selector选择器组合使用 el#id: 元素+ID,比如: div#logo el.class: 元素+class,比如: div.masthead..., el:多个选择器组合,查找匹配任一选择器唯一元素,例如:div.masthead, div.logo 伪选择器selectors :lt(n): 查找哪些元素同级索引值(它位置在DOM是相对于它父节点

19140

高亮搜索关键字怎么实现

以下是一个基本步骤示例,说明如何实现这一功能: HTML结构:首先,你需要在HTML设置一个搜索框一个包含文本容器。...函数首先获取搜索框值,并创建一个正则表达式对象用于搜索。 然后,它获取包含文本容器HTML内容,并使用replace方法正则表达式来查找所有匹配文本。...注意事项: 如果你文本内容包含HTML标签,直接使用innerHTMLreplace可能会导致标签被错误地处理。...在这种情况下,你可能需要使用更复杂HTML解析库,或者确保你正则表达式不会匹配HTML标签。...如果你文本内容很大或者需要频繁进行搜索高亮操作,你可能需要考虑性能优化,比如使用虚拟滚动、文本分割等技术来减少DOM操作。

15810

WebAPIs学习笔记

WebAPIs基本学习笔记 作用:使用JS操作html浏览器 分类:DOM(文档对象模型)、BOM(浏览器对象模型) DOM内容 DOM(Document Object Model——文档对象模型...('id名') document.getElementByTagName('标签名') document.getElementByClassName('类名') 设置修改DOM元素 修改标签文本内容...用法跟localStorage 基本相同 自定义属性 固有属性: 标签天生自带属性 比如class id title等, 可以直接使用点语法操作 自定义属性: 由程序员自己添加属性,在DOM对象找不到...dataset对象方式获取 ---- 正则表达式 正则表达式(Regular Expression)是用于匹配字符串字符组合模式。...在 JavaScript,正则表达式也是对象 正则表达式在 JavaScript使用场景: 例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框可以输入中文(匹配) 比如用户名

1K30

JavaScript学习笔记1

JavaScript技术 1.DOM相关知识 什么是DOM:Document Object Model,文档对象模型 文档:指的是标记型文档(html,xml) 对象:可以使用dom里面的相关属性方法来解析标记型文档...Dom组成:核心DomHtml Dom,XML Dom。...Dom如何解析html文档: Dom会根据html层次结构,在内存形成一个树形结构,树形结构里面有标记元素树形和文本等元素 整个html文档对应一个document对象,通过document文档对象...3.获取文档元素: 下面的方法是html dom方法 根据标记id属性值获取元素对象:document,getElementById(id属性对应值) 根据标记名称获取元素对象:document.getElementsByTagName...版权信息 2.传智书城注册页面设计: 表单校验:1.用户输入数据符合咱们定义规范,允许用户提交表单,如果用户输入数据不符合规范

1.7K40

JavaScript基本入门教程

JavaScript基本入门 一、JavaScript语法详解 1.JavaScript组成 ECMAScript(核心):规定了JS语法基本对象 DOM文档对象模型:处理网页内容方法接口,...标签函数,不允许调用后面的...标签函数。...Model) 文档对象模型 文档:标记型文档(HTML等) DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象,通过操作对象属性或者方法,来达到操作或者改变HTML展示效果目的。...2.获取元素对象四种方法 在JavaScript,我们可以通过DOM对象4种方式获取对应元素对象: getElementById();   ---通过元素ID获取对应元素对象,可以通过ID获取对应元素对象...> 2)绑定DOM对象属性 代码案例:表单校验 HTML代码: <!

4K20

ASP.NET验证控件学习总结与正则表达式学习入门

正则表达式全面模式匹配表示法使您可以快速分析大量文本以找到特定字符模式;提取、编辑、替换或删除文本子字符串;或将提取字符串添加到集合以生成报告。...下面是一些常见限定符(下表nm都是表示整数): 限定浮 说明 * 匹配0到多个元字符,相当于{0,} ?...比如上面的提取链接源字符串,统计标签出现次数,一般来说,如下代码即可达到目的了。...对于这个需求,可以先提取出所有region,再对每个region标签提取它属性属性值,但这样做比较麻烦,可以考虑在一个正则表达式中提取。...比如根据用户输入id取相应div标签id没有元字符时,可以取得正确结果。

2.5K30

JS魔法堂:属性、特性,傻傻分不清楚

可以看到元素“属性”被分为三块   1. standard attribute:标准属性(或固有属性),如id、name等DTD/Scheme定义标签属性。     ...空字符串 空字符串     注意:IE8—11下,当通过setAttribute设置异常样式规则时,html标签style属性会被删除,因此无法通过outerHTML来萃取异常样式规则字符串值...SELECT标签         下拉框有单选(select-one)多选(select-multiple)两种模式。...console.log(id.name);// 返回id   也许大家会疑惑,这最多就是通过点方式获取FORM元素属性值而已,为什么会获取其下id或name属性值匹配表单元素呢?...或name属性值匹配表单元素。

1.7K70
领券