XML与Web_5 JAVASCRIPT(二)

最新推荐文章于 2024-09-05 11:00:53 发布
最新推荐文章于 2024-09-05 11:00:53 发布
阅读量75 收藏
点赞数
分类专栏： XML与Web复习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45488518/article/details/118053363
版权

JAVASCRIPT 二

多级联动

  • 系统中多级联动操作是重要的应用，其特点是：
    – 与服务器无关，实时更新
    – 无需刷新，无需Ajax
    – 更新速度快
    – 代码选项开放
  • 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:
    – 文档是一个文档
    – 所有的HTML元素都是元素节点
    – 所有 HTML 属性都是属性节点
    – 文本插入到 HTML 元素是文本节点
    – 注释是注释节点
属性方法用法
document.activeElement返回当前获取焦点元素
document.body返回文档的body元素
document.addEventListener()向文档添加句柄
document.createElement()创建元素节点
document.createTextNode()创建文本节点
document.write()向文档写 HTML 表达式 或 JavaScript 代码
<!DOCTYPE html>
<html>
<head>
    <script>
        function NewButton() {
            var elt=document.createElement("BUTTON");
            var t=document.createTextNode("CLICK ME");
            elt.appendChild(t);
            document.body.appendChild(elt);
        }
        function NewP() {
            var elt1=document.createElement("P");
            document.body.appendChild(elt1);
            var t1=document.createTextNode("this is a P");
            elt1.appendChild(t1);
            var elt2=document.createElement("Center");
            var t2=document.createTextNode("this is a Center");
            elt2.appendChild(t2);
            elt1.appendChild(elt2);
        }
        function NewSelect() {
            var elt=document.createElement("Select");
            var t=document.createTextNode("this is a Select");
            elt.appendChild(t);
            document.body.appendChild(elt);
            var opt1=document.createElement("Option");
            opt1.innerText = "option1";
            elt.appendChild(opt1);
            var opt2=document.createElement("Option");
            opt2.innerText = "option2";
            elt.appendChild(opt2);
        }
        function NewInput() {
            var elt=document.createElement("Input");
            var t=document.createTextNode("this is a Input");
            elt.appendChild(t);
            document.body.appendChild(elt);
        }
    </script>
</head>
<body>
<p><button onclick="NewButton()">Add a Button</button>
<p><button onclick="NewP()">Add a P</button>
<p><button onclick="NewSelect()">Add a Select</button>
<p><button onclick="NewInput()">Add a Input</button>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select>
    <option value="A" selected label="Apple">Apple</option>
    <option value="R" label="Raspberry">Raspberry</option>
    <option value="O" label="Orange">Orange</option>
    <option value="C" label="Cabbage">Cabbage</option>
    <option value="E" label="Eggplant">Eggplant</option>
    <option value="P" label="Potato">Potato</option>
    <option value="B" label="Beef">Beef</option>
    <option value="M" label="Mutton">Mutton</option>
    <option value="T" label="Turkey">Turkey</option>
</select>
<p>
    <select  size="5" multiple="true">
        <option value="A" selected label="Apple">Apple</option>
        <option value="R" label="Raspberry">Raspberry</option>
        <option value="O" label="Orange">Orange</option>
        <option value="C" label="Cabbage">Cabbage</option>
        <option value="E" label="Eggplant">Eggplant</option>
        <option value="P" label="Potato">Potato</option>
        <option value="B" label="Beef">Beef</option>
        <option value="M" label="Mutton">Mutton</option>
        <option value="T" label="Turkey">Turkey</option>
    </select>
<p>
    <select>
        <optgroup label="Fruit">
            <option value="A" selected label="Apple">Apple</option>
            <option value="R" label="Raspberry">Raspberry</option>
            <option value="O" label="Orange">Orange</option>
        </optgroup>

        <optgroup label="Vegetable">
            <option value="C" label="Cabbage">Cabbage</option>
            <option value="E" label="Eggplant">Eggplant</option>
            <option value="P" label="Potato">Potato</option>
        </optgroup>

        <optgroup label="Meat">
            <option value="B" label="Beef">Beef</option>
            <option value="M" label="Mutton">Mutton</option>
            <option value="T" label="Turkey">Turkey</option>
        </optgroup>
    </select>
<p>

    <select>
        <option disabled="disabled" value="">--Fruit--</option>
        <option value="A" selected label="Apple">Apple</option>
        <option value="R" label="Raspberry">Raspberry</option>
        <option value="O" label="Orange">Orange</option>
        <option disabled="disabled" value="">--Vegetable--</option>
        <option value="C" label="Cabbage">Cabbage</option>
        <option value="E" label="Eggplant">Eggplant</option>
        <option value="P" label="Potato">Potato</option>
        <option disabled="disabled" value="">--Meat--</option>
        <option value="B" label="Beef">Beef</option>
        <option value="M" label="Mutton">Mutton</option>
        <option value="T" label="Turkey">Turkey</option>
    </select>
</body>
</html>

在这里插入图片描述

区域响应

<img> <map> <area>

img

  • <img>元素中的usmap属性
    – 属性名：usemap
    – 值：#mapname
    – 描述：将图像定义为客户器端图像映射

map

  • 图像映射标签MAP
    – 唯一且必须的属性：mapname，为 image-map 规定的名称
    – <img> 中的 usemap 属性可引用 中的 id 或 name 属性（取决于浏览器）
    – 为了保证兼容性可以同时向     添加 id 和 name 属性

area

  • 元素
    – 定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）
    – 元素始终嵌套在元素内部
    – 在 HTML 中， 标签没有结束标签
    – 在 XHTML 中， 标签必须正确地关闭
属性值解释
hrefURL规定区域的目标 URL
alttext弹出文本,如果使用 href 属性，则该属性是必需的
shapedefault, rect, circle, poly规定区域的形状
coordscoordinates规定区域的坐标
target_blank,_parent,_self,_top, framename规定在何处打开目标 URL
  • 元素的shape和coords属性
shapeDescriptioncoordsDescription
default全部区域NULL
rect定义矩形区域x1,y1,x2,y2该值规定矩形左上角和右下角的坐标
circ定义圆形区域x,y,radius该值规定圆心的坐标和半径
poly定义多边形区域x1,y1,x2,y2,…,xn,yn该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标
<html>
<head>
    <script>
        function writeText(txt){
            document.getElementById("description").innerHTML=txt;
        }
    </script>
</head>



<body>
<img src ="5-2.png" width ="638" height ="357" alt="Nintendo" usemap="#nintendo" />
<map name="nintendo">
    <area shape ="rect" coords ="270,78,388,259"
          οnmοuseοver="writeText('This is Mario!')"
          href ="https://baike.baidu.com/item/%E9%A9%AC%E9%87%8C%E5%A5%A5/34197" target ="altFrame" alt="Mario" />
    <area shape ="circle" coords ="443,252,30"
          οnmοuseοver="writeText('This is Pikachu!')"
          href ="https://baike.baidu.com/item/%E7%9A%AE%E5%8D%A1%E4%B8%98/931437" target ="altFrame" alt="Pikachu" />
    <area shape ="rect" coords ="458,59,554,182"
          οnmοuseοver="writeText('This is Donkey Kong!')"
          href ="https://baike.baidu.com/item/%E5%A4%A7%E9%87%91%E5%88%9A/4378505" target ="altFrame" alt="Donkey Kong" />
    <area shape ="poly" coords ="392,335,403,169,392,145,416,129,455,200,452,220,396,197,392,335"
          οnmοuseοver="writeText('This is Link!')"
          href ="https://baike.baidu.com/item/%E6%9E%97%E5%85%8B/9336685" target ="altFrame" alt="Link" />
</map>
<p id="description">Mouse over the roles of Nintendo and see the different descriptions.</p>
<iframe src="about:blank" name="altFrame" width="638"></iframe>

</body>
</html>

在这里插入图片描述

正则表达式

  • RegExp修饰符用于执行不区分大小写和全文的搜索
    – i - 修饰符是用来执行不区分大小写的匹配
    – g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）
    – m - 执行多行匹配
  • RegExp对象的方法
    – test()：搜索字符串指定的值，根据结果并返回真或假
    – exec()：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null
  • 字符串处理正则表达式的方法
    – match()：用于匹配字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回字符串中的原始内容
    – search()：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置
    – replace()：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串
<!DOCTYPE html>
<html>
<head>
    <script>
        window.onload=function(){
            var str1 = "Welcome to McKinsey Greater China! We help industry shapers, innovators, and entrepreneurs take their ideas to market faster and generate enduring impact.";
            var patt1 = /we/gi;
            //var patt=/pattern/modifiers;
            //pattern：模式；modifiers：修饰符
            var patt2 = new RegExp("china","i");
            var patt3 = new RegExp("IDEA","i");
            document.write(str1.match(patt1)+"<p>");
            document.write(patt2.exec(str1)+"<p>");
            document.write(patt3.test(str1)+"<p>");
        }
    </script>
</head>
<body>
</body>
</html>


We,We
China

true

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

沙雕是沙雕是沙雕
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript学习笔记（九）——Javascript与XML
Snowzhao的博客
09-01 367
Javascript与XML 浏览器对XML DOM的支持 DOM2级核心 创建一个新的、文档元素为<root>的XML文档： let xmldom = document.implementation.createDocument("", "root", null); alert(xmldom.documentElement.tagName); let child = xmldom.createElement("child"); xmldom.document
18.JavaScript 与XML（2）
official business
06-05 144
3.浏览器对XSLT 的支持：XSLT 是与XML 相关的一种技术，它利用XPath 将文档从一种表现形式转换成另一种表现形式。与XML 和XPath 不同，XSLT 没有正式的API，在正式的DOM 规范中也没有它的位置。结果，只能依靠浏览器开发商以自己的方式来实现它。IE 是第一个支持通过JavaScript 处理XSLT 的浏览器。 IE中的XSLT：与IE 对其他XML 功能的支持一样，它对XSLT 的支持也是通过ActiveX 对象实现的。从MSXML 3.0（即IE6.0）时代起，IE 就支持
JavaScript阶段二之Web APIs
越努力 越自由
08-11 4147
目录 前言 API WebAPI DOM 获取页面元素 事件 前言 在之前我们已经了解js的组成：https://blog.csdn.net/qq_44159028/article/details/119454230 之前，我们学的是js的基础语法，即ECMAscript标准规定的基本语法，要求我们掌渥Js 基础语法。但是只学习基本语法，做不了常用的网页交互效果，所以需要学习Web APIs。 web APIs是w3c组织的标准。web APIs 我们主要学习DOM和BOM。w.
用JavaScript获取XML中的数据
神秘的小岛岛
09-15 2562
XML在Web开发中使用很广泛，通常作为数据传递的载体。一般将数据传递给前端的时候，需要用JavaScript解析后才能使用。所以，用JavaScript解析XML是使用得非常普遍的。   有以下一个XML文件：<?xml version="1.0" encoding="ISO-8859-1" ?> <note> <to>duncan</to> <from>John</from>
SpringMVC之web.xml，了解必要配置项
热门推荐
沉默王二
03-23 3万+
本篇先来介绍web.xml，了解其中必要的配置项，为以后顺利开发打下坚实基础。
xml.rar_javascript_javascript xml_xml javascript_xml文件
09-22
JavaScript，作为Web开发中的主要脚本语言，常常被用来解析和操作XML文档，以实现动态内容的生成和数据处理。 在JavaScript中处理XML，主要有两种方法：DOM（Document Object Model）和SAX（Simple API for XML）。...
XML.rar_crud_javascript_javascript xml_xml_增删改查英文
09-20
XML（eXtensible Markup Language）是一种用于存储和传输数据的标记语言，它在Web应用程序、数据交换和配置文件等领域广泛应用。在这个“XML.rar”压缩包中，我们重点关注的是使用JavaScript来操作XML，实现数据的增...
js-xml.rar_javascript_javascript xml_js xml_js解析xml_xml js
09-23
虽然XML用于数据交换，但JSON（JavaScript Object Notation）因其轻量级和易于处理的特性在现代Web开发中更受欢迎。JavaScript可以方便地将XML转换为JSON，反之亦然，以便在XML和JSON之间灵活切换。 9. 错误处理：...
XML.rar_T97Q_easy _javascript_xml
09-25
在实际应用中，XML常与JSON（JavaScript Object Notation）一起使用，作为Web服务的数据交换格式。JSON因为其简洁和易读性，通常用于前端和后端之间的通信，而XML则更多地用于跨平台和系统的复杂数据交换。 通过这...
XML.rar_javascript_xml
09-19
总的来说，JavaScript与XML的结合为Web应用提供了强大且灵活的数据处理能力。通过理解XML的结构和使用JavaScript进行解析、操作和显示，开发者可以创建出动态、数据驱动的Web界面。而XML Schema则为数据的准确性和...
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1458
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue双向绑定
m0_56131422的博客
09-01 756
简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。Vue 的双向绑定主要通过v-model。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 480
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
JS都有哪些操作数组的方法
ggq53219的博客
09-04 447
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2595
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 818
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
vue3使用-watch监听总结
weixin_44072254的博客
09-01 527
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1298
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
最新发布
央顺科技官方博客
09-05 418
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
HTML5与JavaScript web应用：Wesley Hales解读
JavaScript作为客户端脚本语言，与HTML5结合，使得开发者能够创建交互性更强的Web应用。JavaScript的异步处理能力，通过AJAX（异步JavaScript和XML）技术，可以实现页面数据的无刷新更新，提高用户体验。随着ES6...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值