余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

全面!JS+XML总结(xmlsljs)

xiyangw 2022-11-25 11:37 82 浏览 0 评论

HTML

表单标签

<form></form>

-属性

action:提交到地址,默认提交到当前的页面

method:表单提交方式

-常用的方式有两种 get和post 默认是get

get和post的区别:

1.get请求地址栏会携带提交的数据,post不会携带(在请求体里面)

2.get请求安全级别较低,post较高

3.get请求数据大小有限制,post没有限制

enctype:一般请求不需要这个属性,做文件上传时候需要设置这个属性

JavaScript

脚本放置在body标签最后

放在head处的缺点:js中使用了html中的元素,但是还未加载html

先加载js,后加载html,导致页面空白或者反应很久才显示出来

js的使用方法有两种

第一种:写在srcipt标签之间

第二种:写在js文件中,通过<srcipt src="z.js"></script>将js文件引入

链入外部js,则body里面的js无效

基本数据类型

五种基本数据类型:number,string,boolean,null,undefined

undefineed:表示变量不含有值、未声明的变量或者用var声明但未初始化的变量

null:空,可以将变量的值设置为null来清空变量

数字:isNaN()判断是否为数值、parseInt()、parseFloat()用来转化成数值

布尔:true(非空字符串、非零数值、非空对象)、false(空字符串、0、null和undefined)

字符串:使用单引号或双引号包括

变量作用域

全局变量:在函数外声明的变量是全局变量或在函数内没有用var声明的变量,网页上的所有脚本和函数都能访问它。

局部变量:在函数内声明的变量(使用var)是局部变量,只能在函数内部访问它。

==与===的区别:两者都可以做比较,前者只是单纯地作值的比较,后者要值与类型均相等才判断为true

2 == '2' true

2 === '2' false

数组

js数组的三种定义方式

第一种:var arr=[1,2,3]; var arr = [1,"abc",true];

第二种(使用内置对象 Array对象):var arr = new Array(5);

第三种:var arr = new Array(1,2,3);

增加数组元素:使用"[ ]"运算符置顶一个新下标

push() :在数组末尾添加元素

unshift():在数组头部添加元素

concat():合并数组

删除数组元素:delete 数组名[下标];

pop() : 删除并返回数组最后一个元素

shift():删除并返回数组第一个元素

遍历数组:

for(var i=0;i<arr.length;i++){}

for(var 数组元素变量 in 数组)

获取数组片段

slice(start,end):从数组中返回选定的元素

splice() :方法向/从数组中添加/删除项目,然后返回被删除的项目

删除任意数量的项:splice(要删除的起始下标,要删除的项数)

在指定位置插入指定的项:splice(起始下标, 0 , 要插入的项)

替换任意数量的项:splice(起始下标, 要删除的项数 , 要插入的项)

其他

join(separator):把数组中的所有元素放入一个字符串

reverse() : 颠倒数组中元素的顺序

sort(sortby): 方法用于对数组的元素进行排序。

函数

js定义函数的三种方式

第一种方式:使用到一个关键字 function

function 方法名(参数列表){ //参数不需要写类型

方法体;

返回值可有可无(根据实际需要);

}

第二种方式:匿名函数

var add = function(参数列表){

方法体和返回值

}

第三种方式(用得少):使用js里面的一个内置对象Function

动态函数

var add = new Function("参数列表","方法体和返回值");

数据验证

前端验证:避免将数据传给服务器,给服务器带来麻烦

服务端验证:在服务器端对数据进行验证

前端验证:节约资源;

不可靠,容易篡改

服务端验证:

--> 前端验证了,后台还要验证

String对象

属性:

length:字符串长度

方法:

charAt(index):返回指定位置的字符 或直接使用arr[i]

indexOf(searchvalue,fromindex) :返回某个指定的字符串值在字符串中首次出现的位置,未找到返回-1,第二个参数可以省略

lastIndexOf(searchvalue,fromindex):反向检索

replace(regexp/substr,replacement):在字符串中用一些字符替换另一些字符

split(separator,howmany):把一个字符串分割成字符串数组

substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符

toLowerCase():把字符串转换为小写

toUpperCase():把字符串转换为大写

BOM模型(浏览器模型)

bom中的window对象----------------------

页面加载完才会触发这个事件

window.onload = function(){

----javascript代码-----

这样可以将js代码放在头部,会先执行完html代码再执行这个函数

}

window的属性:

window.opener 跨页面操作,得到创建这个窗口的窗口

-做定时器

** setInterval("js代码",毫秒数) 1秒=1000毫秒

- 表示每三秒执行一次alert()

window.setInterval("alert('123')",3000);

** setTimeout("js代码",毫秒数)

- 表示在毫秒数之后执行,但是只会执行一次

- 表示四秒之后执行js代码,只会执行一次

window.setTimeout("alert('abc')",4000);

** clearInterval():清除setInterval设置的定时器

** clearTimeout():清除setTimeout设置的定时器

location 用来打开新连接

location.url('链接地址');

location.href=地址

history

go(-1)上一个页面

back()上一个页面

DOM模型(文档模型)

js中的dom对象--------------------------

(文档对象模型,用来操作内容文档内容)

document对象

---获取操作元素---

** getElementById();

- 通过id得到元素(标签)

- //使用getElementById的到input标签对象

var input1 = document.getElementById("nameid");

//得到input里面的value值

alert(input1.name); //标签对象.属性名称

//向input里面设置一个值value

input1.value = "bbbb";

** getElementsByName();

- 通过标签的name属性值得到标签

- 返回的是一个集合(数组)

- //使用getElementsByName得到input标签

var inputs = document.getElementsByName("name1"); //传递的参数是标签里面name的值

//alert(inputs.length);

//遍历数组取值

for(var i = 0;i < inputs.length;i++){

alert(inputs[i].value);

}

** getElementsByTagName("标签名称");

-通过标签名称的到元素

var inputs = document.getElementsByTagName("input");

//alert(inputs.length);

for(var i = 0;i < inputs.length;i++){

var input = inputs[i];

alert(input.value);

}

document.getElementsByClassName(class);

-通过类名来获取dom元素集合,ie9以上支持

获取元素后的操作:

改变 HTML 元素的内容 (innerHTML)

改变 HTML 元素的属性

改变 HTML 元素的样式(CSS)

document.getElementById(id).style.border = '5px solid #00f';

采用驼峰写法,- 会被认为是减号

.style.backgroundColor

对 HTML DOM 事件对出反应:

HTML 事件属性来绑定函数

<button onlick="displayDate()">单击这里</button>

使用 HTML DOM 来分配事件

document.getElementById("myBtn").onclick=function(){displayDate()};

常用事件:

onload:页面加载

onchange:内容改变

onmouseover:鼠标进入

onmouseout:鼠标移出

onmousedown:鼠标按下

onmouseup:鼠标释放

onclick:鼠标单击

onfocus:获得焦点

onblur:失去焦点

案例:在末尾添加节点

第一步:获取到ul标签

第二步:创建li标签对象

document.createElement("标签名称");

第三步:创建文本对象

document.createTextNode("文本内容");

第四步:把文本添加到li下面

appendChild();

第五步:把li添加到ul的下面

//添加li项

function add1(){

//获取到ul标签

var ul1 = document.getElementById("ulid");

//创建标签

var li1 = document.createElement("li");

//创建文本

var tex1 = document.createTextNode("5555");

//把文本加入到li下面

li1.appendChild(tex1);

//把li加入到ul下面

ul1.appendChild(li1);

}

element对象

** 要操作element对象,首先必须要获取到element对象

- 使用document里面相应的方法获取

** 方法

** 获取属性里面的值

getAttribute("属性名称")

var input1 = document.getElementById("inputid");

//alert(input1.value);

alert(input1.getAttribute("value"));

//alert(input1.class);//class属性必须通过下面方法获取

alert(input1.getAttribute("class"));

input1.setAttribute("class","haha");

//alert(input1.getAttribute("class"));

alert(input1.getAttribute("name"));

input1.removeAttribute("name");

alert(input1.getAttribute("name"));

** 获取标签下面的子标签

** 使用属性childNodes,但是这个属性兼容性很差

** 获得标签下面的子标签的唯一有效的办法,使用getElementsByTagName方法

var ul1 = document.getElementById("ulid1");

//var lis = ul1.childNodes;

//alert(lis.length);

var lis = ul1.getElementsByTagName("li");

alert(lis.length);

Node对象属性

* nodeName

* nodeType

* nodeValue

*标签节点对应的值

nodeType : 1

nodeName : 大写标签名称 比如SPAN

nodeValue : null

*属性结点对应的值

nodeType : 2

nodeName : 属性名称

nodeValue : 属性的值

*文本节点对应的值

nodeType : 3

nodeName : #text

nodeValue : 文本内容

操作dom对象:

appendChild() 添加子结点

insertBefore() 插入子结点

removeChild() 删除结点

1、获取父节点

2、获取要删除的结点

3、执行删除

cloneNode(boolean) 复制结点到剪切板

操作dom总结

*获取节点使用方法

getElementById():通过结点的id属性,查找对应结点

getElementsByName():通过结点的name属性,查找对应结点

getElementsByTagName():通过结点名称,查找对应结点

*插入结点的方法

insertBefore():在某个结点之前插入

appendChild():在末尾添加,剪切黏贴

*删除结点方法

removeChild():通过父节点删除

*替换结点的方法

replaceChild():通过父节点替换

innerHTML属性

*这个属性不是dom的组成部分,但是大多数浏览器都支持的属性

第一个作用:获取文本内容

var span1 = document.getElementById("span1");

alert(span1.innerHTML);

第二个作用:向标签里面设置内容

var div1 = document.getElementById("div1");

div1.innerHTML = "<h1>aaaa</h1>"

表单提交方式

* 使用submit提交

<form>

...

<input type="submit" />

</form>

* 使用button提交表单

- 代码

//实现提交方法

function submit1(){

//获取form

var form1 = document.getElementById("form1");

设置action

form1.action = "https://www.baidu.com";

//提交form表单

form1.submit();

}

* 使用超链接提交

-代码

<a href="https://www.baidu.com?username=1234">使用超链接进行提交</a>

* onclick:鼠标点击事件

onchange:改变内容(一般和select一起使用)

onfocus:得到焦点

onblur:失去焦点

XML

*CDATA区

*可以解决多个字符都需要转义的操作 if(a<b && b<c){}

*把这些内容放到CDATA区里面,不需要转义了

** 写法

<![CDATA[内容]]>

-代码

<![CDATA[ <b>if(a<b && b<c){}</b>]]>

**把特殊字符,当作文本内容,而不是标签

*PI指令(处理指令)

* 可以在xml中设置样式

* 写法:<?xml-stylesheet type="text/css" href="css的路径"?>

* 设置样式,对英文元素起作用,对中文不起作用

*dtd的快速入门

步骤:

(1)看xml中有多少个元素,有几个元素,在dtd文件中写几个<!ELEMENT>

(2)判断元素是简单元素还是复杂元素

- 复杂元素:有子元素的元素

<!ELEMENT 元素名称(子元素)>

- 简单元素:没有子元素

<!ELEMENT 元素名称(#PCDATA)>

(3)需要在xml文件中引入dtd文件

<!DOCTYPE 根元素名称 SYSTEM "dtd文件路径">

**打开xml文件使用浏览器打开的,浏览器只负责校验xml的语法,不负责校验约束

**如果想要校验xml约束,需要使用工具(myeclipse工具)

*dtd的三种引入方式

(1)引入外部的dtd文件

<!DOCTYPE 根元素名称 SYSTEM "dtd路径">

(2)使用内部的dtd文件

<!DOCTYPE 根元素名称 [

<!ELEMENT person (name,age)>

<!ELEMENT name (#PCDATA)>

<!ELEMENT age (#PCDATA)>

]>

(3)使用外部的dtd文件(网络上的dtd文件)

<!DOCTYPE 根元素 PUBLIC "DTD名称" "DTD文档的URL">

struts2 使用配置文件 使用 外部的dtd文件

*使用dtd定义元素

* 语法:<!ELEMENT 元素名 约束>

* 简单元素:没有子元素的元素

<!ELEMENT name (#PCDATA)

*** (#PCDATA):约束name是字符串类型

*** EMPTY:元素为空(没有内容)

- <sex></sex>

*** ANY:任意

* 复杂元素:

<!ELEMENT person (name,age,sex,school)>

-子元素只能出现一次

* <!ELEMENT 元素名称 (子元素)>

* 表示子元素出现的次数

+:表示一次或多次

*:表示零次或多次

?:表示零次或一次

, :逗号表示出现的顺序

|:子元素之间使用|隔开,表明列出的对象中只能出现其中一个

*使用dtd定义元素属性

*语法 <!ATTLIST 元素名称

属性名称 属性类型 属性的约束

>

* 属性类型

-CDATA:字符串

<!ATTLIST birthday

ID1 CDATA #REQUIRED

>

- 枚举:表示只能在一定的范围内出现值,但是只能每次出现其中的一个

** 红绿灯效果

** (aa|bb|cc)

<!ATTLIST age

ID2 (AA|BB|CC) #REQUIRED

>

- ID: 值只能是字母或者下划线开头

<!ELEMENT name (#PCDATA)>

<!ATTLIST name

ID3 ID #REQUIRED

>

*属性的约束

- #REQUIRED:属性必须存在

<!ATTLIST birthday

ID1 CDATA #REQUIRED

>

- #IMPLIED:属性可有可无

- #FIXED:表示一个固定值 #FIXED "AAA"

-属性的值必须是固定的值

<!ATTLIST sex

ID4 CDATA #FIXED "AAA"

>

- 直接值(默认值)

<!ATTLIST school

ID5 CDATA "WWWW"

*实体的定义

*语法:<!ENTITY 实体名称 "实体的值">

*** <!ENTITY TEST "zzy">

***使用实体:<name ID3="A1">&TEST;</name>

** 注意:

定义实体需要写在内部dtd里面,如果写在外部的dtd里面,在某些浏览器下,内容得不到

xml的解析的简介

** xml的解析方式(技术):dom和sax

** dom解析和sax解析的区别:

* dom方式解析

* 根据xml的层级结构在内存中分配一个树形结构,把xml的标签,属性和文本都封装成对象

* 缺点:如果文件过大,造成内存溢出

* 优点:很方便实现增删改操作

* sax方式解析

* 采用事件驱动,边读边解析

- 从上到下,一行一行的解析

* 缺点:不能实现增删改操作

* 优点:如果文件过大,不会造成内存溢出,方便实现查询操作

相关推荐

高效删除文件名中的指定内容,祛除烦恼

如何快速批量删除文件名中的指定字符?在电脑整理文件时,我们常常需要进行批量重命名操作。如果文件名中含有不必要或重复的字符,这将影响文件的识别和查找。因此,删除这些文字或字符是非常必要且有效的。本文将分...

你的手机是不是经常提示存储空间不足?Python帮你清理重复文件

  最近我的手机经常提示存储空间不足,主要是微信和QQ群里接收的文件太多了,平时也没怎么整理。我把这些文件从手机里拷出来,打算整理一下,把该删的文件都删掉,把要备份的文件分门别类存到电脑或网盘上。我突...

从零开始打造云端AI管理调度平台(四)如何设计主页_1

最近闲来无事,想着把自己工作正在做的一个项目做一个简单的分享与实战教程,该项目不困难但是由于涉及要素过多所以比较复杂。所以这里分享出来也是为了帮助新手小白能在实战当中快速了解python知识。主要内容...

「万能Python」-17-标准库OS_python2.7标准库

Python的库是指预先编写好的代码集合,可以用来处理特定的任务或实现特定的功能。Python的标准库提供了许多常用的标准库,无需安装引入使用。Python3的标准库提供了许多常用的功能,包括...

十多行代码生成原帖和临写对照图_几十行代码可以申请软著吗

介绍这个小工具把原帖和临写分解成多列对照的形式。输入原帖图片,和输入临写图片,生成对照图片。使用说明运行compare.py文件,输入参数为:原帖图片文件名,临写图片文件名,列数。python3co...

Python合集之目录操作(四)_python之文件操作大全

1.删除目录删除目录可以通过os模块提供的rmdir()函数实现。通过rmdir()函数删除目录时,只有当要删除的目录为空时才起作用。os.rmdir(path)path为要删除的目录,可以使用绝对路...

excel办公自动化,自动合并excel表格

平时时收到不同人反馈的excel表格,需要将其合并在一个excel中,每个excel打开复制粘贴会很慢,如下脚本可一键合并所有的exceldefauto_merge():try:print('...

批量打开一个文件夹下面所有的excel表格

如果现在有一个文件夹,名称叫做“练习表格”,路径名是'C:\Users\123\Desktop\练习表格',现在的要求是打开这个文件下面所有的excel表格,后缀名字为“xlsx”,我...

500行代码,教你用python写个微信飞机大战

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手/右手...

python 日志写入_python日志文件写入

1.第一步,新建日志文件路径,如下图:2.日志模块封装,代码如下:importlogging,oslogs_path=os.path.join(os.path.dirname(__file...

Python os.path模块使用指南:轻松处理文件路径

前言在Python编程中,文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作,Python标准库提供了os模块。其中,os.path子模块提供了一些处理文件路径的函数和方法。本文主要...

Python中获取当前路径之pathilb和os的区别

20230114星期六:1,直接在py脚本中,执行,没有区别;2,打包成exe文件以后,在本机执行,有区别,这时,不能使用os.path.dirname(__file__),只能使用pathlib.P...

Python(办公自动化编程系列)学习笔记1

1、获得当前程序工作目录importos#os.getcwd()函数可以取得当前工作路径的字符串print(os.getcwd())运行结果2、获得程序文件夹相对路径#相对路径都用/表示#../...

文件路径名Pathnames的操作_路径和文件名是什么意思

1.现象问题使用路径名来获取文件名,目录名,绝对路径等等2.原因分析无3.问题解决使用os.path模块中的函数来操作路径名importos.path#查看标准化的绝对路径print...

关于《Python入门:os常用函数》中复制文件(夹)函数从简到繁

基本考虑练习os模块及file读写操作:将给定的源路径的文件(夹)复制到目标路径简单实现#文件到文件的复制path_src='E:\src.txt'path_tar='D...

取消回复欢迎 发表评论: