java中的接口是类吗
198
2023-07-13
JavaWeb学习笔记分享(必看篇)
自定义列表
**在里面
**在里面
有序列表
--属性 type:设置排序方式,1(默认),a,i、、
**在ol标签里面
无序列表
--属性 type:circle(空心圆)、disc(默认的实心圆)、square(实心方块)
**在ul标签里面
图像标签
--属性:src、width、height、alt(图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容 或者是图片显示出错时显示的文字,但有些浏览器不显示,没有效果)
**
路径的介绍
*分类:两类
**绝对路径 eg. http://baidu.com/b.jpg
***三种相对路径 一个文件相对于另外一个文件的位置
--html文件和图片在同一个路径(目录)下,可以直接写文件名称
--在html文件中,使用与其在同一个路径下的img文件夹下的a.jpg文件 使用方法:img\a.jpg
**d:\htmlstudy\code\4.html
**d:\htmlstudy\code\img\a.jpg
--图片在html文件的上层目录中,此时图片使用方法:../c.png ../表示上层路径
超链接标签
**链接资源
-- 显示在页面上的内容
**href:链接的资源的地址
**target:设置打开的方式,默认是在当前页打开
--_blank :在一个新窗口打开
--_self :在当前页打开 默认的
--链接标题:当超链接不需要跳转到页面时,在href中添加#(占位符)就可以了
**定位资源
--如果想要定位资源:定义一个位置
--回到这个位置
--原样输出标签:
表格标签
*作用:可以对数据进行格式化,使数据显示更加清晰
*属性 border(表格线粗细) bordercolor(表格线颜色) cellspacing(单元格间距离) width height
*
**在table里面,表示一行
--设置对齐方式 align :left center right
***在tr里面,表示一行里边的单元格
**使用th也可以表示单元格:表示可以实现居中和加粗
*表格的标题,放在table里边
*操作技巧:
**首先数有多少行,在数每行里面有多少个单元格
*合并单元格
**rowspan :跨行(纵向合并)
**colspan :跨列(横向合并)
表单标签
*例如注册开心网时,可以提交数据到开心网的服务器,这个过程可以使用表单标签实现
*
*属性:
** action :提交到的地址,默认提交到 当前的页面
** method : 表单的提交方式
--常用的有两种: get 和 post ,默认是get请求
** get 和 post 的区别
1)get请求地址栏会携带提交的数据,post不会携带(数据在请求体里面)
2)get请求安全级别较低,post较高
3)get请求数据大小有限制,post没有限制
** enctype :一般请求下不需要这个属性,做文件上传时候需要设置这个属性
**输入项:可以输入内容或者选择内容的部分
--大部分的输入项可使用
********在输入项里面需要有一个name属性
***普通输入项:
***密码输入项:
***单选输入项:
--在里边需要属性 name
--name的属性值必须要相同
--必须要有一个value值
****实现默认选中的属性
***checked="checked"
***复选输入项:
**在里边需要属性 name
**name的属性值必须要相同
**必须要有一个value值
****实现默认选中的属性
----checked="checked"
***文件输入项:
***下拉输入项(不是在input标签里面的)
****实现默认选中的属性
----selected="selected"
*** 文本域(如:注册账号时填写个人信息简介的方框)
***隐藏项(不会显示在页面上,但是存在于 html代码里面)
***提交按钮
--提交之前地址:C:\Users\HappyDog\Desktop\index.html
**当在输入项里面写了name属性之后
--file:///c:/users/happydog/desktop/index.html?phone=123123&pwd=12321312&sex=man&love=y&love=pp&birth=1992&tex=1231245
**?输入项name的值=输入的值&
**参数类似于key-value形式
***使用(点击)图片来提交
***重置按钮 :回到输入项的初始状态
***普通按钮(和js在一起使用的)
案例:使用表单标签实现注册页面
表格单元格内容为空时,一般用占位符( (转义空格))来填充
html中的其他的常用标签的使用
** b(加粗) s(删除线) u(下划线) i(斜体) pre(原样输出) sub(下标) sup(上标) div(自动换行) span(在一行显示) p(段落标签)
html的头标签的使用
**html两部分组成 head 和 body
**在head里面的标签就是头标签
**title标签:表示在标签上显示的内容
**标签 :设置页面的一些相关内容
--
--定时跳转到指定页面
**base标签 :设置超链接的基本的设置
--可以统一设置超链接的打开方式
**link标签 :引入外部文件
框架标签的使用
**
**rows :按照行进行划分
**cols :按照列进行划分
** 具体显示的页面
**
*使用框架标签的时候,不能写在head和body里面,使用了框架标签,需要把body去掉,写在head外边
*如果在左边的页面超链接,想让内容显示在右边的页面中,可以设置超链接里面的target属性,将target的值设置为框架中的名字
**百度
知识总结
1)html操作思想:使用标签把要操作的数据包起来,通过修改标签的属性值,来实现标签内数据样式的变化
2)font标签 属性:size 取值范围1-7 color:十六进制数 #ffffff
3)标题标签
4)注释
css的简介
**CSS:层叠样式表
** 层叠:一层一层的
** 样式表:很多的属性和属性值
**使页面显示效果更加好
**CSS将网页内容和显示样式进行分离,提高了显示功能
CSS和html的结合方式(四种结合方式)
1)在每个html标签上面都有一个属性 style,把CSS和html结合在一起
--
2)使用html的一个标签实现
----代码实现
div{
background-color:blue;
color:red;
}
天之道,损有余而补不足,是故虚胜实,不足胜有余。
3)在style标签里面 使用语句
@import url(css文件的路径);
-- 第一步:创建一个css文件
----
@import url(div.css);
4)使用头标签 link,引入外部css文件 放在
-- 第一步:创建一个css文件
--
****第三种结合方式的缺点:在某些浏览器下不起作用,一般使用第四种方式
****优先级(一般)
由上到下,由内到外,优先级由低到高。
后加载的优先级高
****格式:选择器名称{属性名:属性值;属性名:属性值;......}
css的基本选择器(三种)
**要对那个标签里面的数据进行操作
1)标签选择器 div {css代码}
--使用标签名作为选择器的名称
div{
background-color:blue;
color:red;
}
2)class选择器 .名称 {}
**每个html标签都有一个属性 class
**
div.test{
background-color:blue;
color:red;
}
p.test{
background-color:blue;
color:red;
}
可以简写为:
.test{
background-color:blue;
color:red;
}
**
bbbbbbbbb
3)id选择器 #名称 {}
**每个html标签上面都有一个属性 id
--
--
div#test{
background-color:blue;
color:red;
}
p#test{
background-color:blue;
color:red;
}
可以简写为:
#test {
background-color:blue;
color:red;
}
--
bbbbbbbbb
**优先级 style > id选择器 > class选择器 > 标签选择器
css的扩展选择器(了解)
1)关联选择器 嵌套标签的样式的设置
**
wwwwwwwwww
**设置div标签里面p标签的样式,嵌套标签里面的样式
--
div p {
background-color:blue;
color:red;
}
--
wwwwwwwwww
aaaaaa
2)组合选择器 不同标签设置相同的样式
**
2222
**把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
--
div,p {
background-color:blue;
color:red;
}
--
2222
3)伪(类)元素选择器
** css里面提供了一些定义好的样式,可以拿过来使用
**比如 超链接
**超链接的状态
--原始状态 鼠标放上去 点击 点击之后
:link :hover :active :visited
代码实现:
/*原始状态*/
a:link {
background-color:red;
}
/*悬停状态*/
a:hover {
background-color:green;
}
/*点击状态*/
a:active {
background-color:blue;
}
/*点击之后状态*/
a:visited {
background-color:gray;
}
css的盒子模型(了解) 对数据进行操作,需要把数据放到一个区域里面(div)
1)边框 border :统一设置
也可以分别设置:上 border-top 下:border-bottom 左:border-left 右:border-right
--
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div12 {
border-right: 2px dashed yellow;
}
--
2) 内边距 padding :统一设置 内容距离上下左右四条边的距离
也可以分别设置:上下左右
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div21 {
padding: 20px;
}
#div22 {
padding-left: 30px;
}
3) 外边距 margin :统一设置 div距离最外边四条边的距离
也可以分别设置:上下左右。。。
css的布局的漂浮(了解) float :left right
css的布局的定位 (了解)
*position
**属性值:
--static:默认值,无特殊定位
--absolute:
将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其进行绝对定位
--relative:不会将对象从文档流中拖出,对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置。
案例:图文混排案例
**图片和文字在一起显示
案例:图像签名
javascript的简介:是基于对象和事件驱动的脚本语言,主要应用在客户端
*基于对象:提供好了很多对象,可以直接拿过来使用
*事件驱动:html做网站静态效果,javascript动态效果
*客户端:专门指的是浏览器
* js的特点:
1)交互性 信息的动态交互
2)安全性 js不能访问本地磁盘的文件
3)跨平台性 java里面跨平台性,虚拟机;只要能够支持js的浏览器,都可以运行
*javascript和java的区别:两者之间没有什么任何关系
1)java是sun公司,现在是Oracle;js是网景公司
2)java是面向对象的,js是基于对象的
3)java是强类型的语言,js是弱类型的语言
--比如:java里面 int i = "10";会报错
--js: var i = 10; var i = "10";都不报错
4)js只需要解析就可以执行,而java需要先编译成字节码文件,在执行
*js的组成(三部分):
1)ECMAScript
-- ECMA :欧洲计算机协会
--由ECMA组织制定的js语法,语句...
2)BOM
--broswer object model:浏览器对象模型
3)DOM
--document object model:文档对象模型
js与html的结合方式(两种)
1)使用一个标签
2)使用script标签,引入一个外部的js文件
-- 创建一个js文件,写js代码
--
注意:使用第二种方式的时候,就不要在script标签里面写js代码了,不会执行
js的原始类型和声明变量
*java的基本数据类型:byte short int long float double char bolean
*js定义变量 都是用关键字 var
*js的原始类型(五个)
--string 字符串 var str = "abc";
--number 数字类型 var m = 123;
--boolean true和false var flag = true;
--null var date = new Date();
**获取对象的引用,null表示对象引用为空,所有对象的引用也是object
--undifined 定义一个变量,但是没有赋值 var aa;
* typeof(变量名称) 查看当前变量的数据类型
js的语句
**java里面的语句 if判断("="表示赋值;"=="等于,表示判断) switch语句 循环语句(for while do-while)
**js里面的这些语句
--if判断语句
--switch(a) {
case 5: ...
break;
case 6: ...
break;
default:...
........
}
**循环语句 for while do-while
--var i = 5;
while(i>0) {
alert(i);
i--;
}
--for(var i = 0;i<=5;i++){
alert(i);
}
js的运算符
**js里面不区分整数和小数
--var j = 123;
alert(j/1000*1000);
** j/1000*1000 在java里面得到结果是0
** 在js里面不区分整数和小数, 123/1000*1000 = 0.123*1000 = 123
**字符串的相加和相减的操作
--var str = "123";
alert(str + 1); 在java和js中的结果都是1231,做的是字符串的连接
alert(str - 1); 相减时候,执行减法的运算,如果str中不是数字,会提示NaN:表示不是一个数字
**boolean类型也可以操作
***如果设置成true,相当于这个值是1;如果设置成false,相当于这个值是0;
** == 和 === 区别
**都是做判断
** == 比较的只是值; === 比较的是值和类型
**直接向页面输出的语句(可以把内容显示在页面上),可以向页面输出变量,固定值和html代码。Document.write("") 里面是双引号,如果设置标签的属性需要使用单引号。
-- document.write("aaaa");
-- document.write("
***document.write("
***document.write("
练习:实现99乘法表
js的数组
*java里面的数组 定义 int[] arr = {1,2,3};
*js数组的定义方式(三种)
1)var arr = [1,2,3];var arr = [1,"2",3];var arr = [1,2,true]; 都可以
2)使用内置对象 Array对象
var arr1 = new Array(5); // 定义一个数组,数组的长度是5
arr1[0] = "1";
......
3)使用内置对象 Array对象
var arr2 = new Array(3,4,5); // 定义一个数组,数组里的元素是3,4,5
* 数组里面有一个属性 length :获取到数组的长度
* 数组的长度是可变的,数组可以存放不同的数据类型的数据。
js的函数(方法)
**在js里面定义函数(方法)有三种方式 函数的参数列表里面,不需要写var,直接写参数名称
1)使用到一个关键字 function
*** function 方法名(参数列表) {
方法体;
返回值可有可无(根据实际需要);
}
代码实现:// 使用第一种方式创建函数
function test() {
alert("qqqqqq");
}
// 调用方法
test();
// 定义一个有参数的方法 实现两个数的相加
function add1(a,b) {
var sum = a+b;
alert(sum);
}
add1(3,5);
function add2(a,b,c) {
var sum1 = a+b+c;
return sum1;
}
alert(add2(7,8,9));
2)匿名函数
var add = function(参数列表) {
方法体和返回值;
}
代码实现: var add3 = function(m,n) {
alert(m+n);
}
// 调用方法
add3(8,9);
3)一般也称为动态函数,用的少,了解即可
*使用到js里面的一个内置对象 Function
var add = new Function("参数列表","方法体和返回值");
var add4 = new Function("x,y","var sum;sum=x+y;return sum;");
alert(add4(9,10));
// 或者下边的代码
var canshu = "x,y";
var fangfati = "var sum;sum=x+y;return sum;";
var add4 = new Function(canshu,fangfati);
alert(add4(5,3));
js的全局变量和局部变量
**全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
--在方法外部使用,在方法内部使用,在另一个script标签使用
**局部变量:在方法内部定义一个变量,只能在方法内部使用
--只能在方法内部使用,如果在方法的外部调用这个变量,提示出错
--ie自带了一个调试工具,ie8以上的版本中,键盘上的F12,再页面下方出现一个条 看控制台可以看到错误
script标签应该放置的位置
**建议把script标签放到
后面
**如果现在有这样一个需求:
--在js里面需要获取到input里面的值,如果把script标签放在head里面,会出现问题
--html解析是从上到下解析的,script标签放到的是head里面,直接在里面取input的值,因为页面还没有解析到input那一行,肯定取不到
js的重载 js不存在重载,但是可以模拟实现
例子:function add11(a,b) {
return a+b;
}
function add11(a,b,c) {
return a+b+c;
}
function add11(a,b,c,d) {
return a+b+c+d;
}
alert(add11(2,2)); // NaN
alert(add11(2,2,3)); // NaN
alert(add11(2,2,4,5)); // 13
js的String对象
** 创建String对象 var str = "abc';
**方法和属性(文档)
--属性 length :字符串的长度
--方法
1)与html相关的方法
-- bold():加粗 fontcolor():设置字符串的颜色 fontsize():设置字体的大小 link():将字符串显示成超链接
2)与java相似的方法
--concat():连接字符串 charAt():返回指定位置的字符串 indexOf():返回字符串位置 split():切分字符串 成数组 replace("",""):替换字符串--传递两个参数:第一个参数是原始字符,第二个参数是要替换成的字符 substr(5,3)从第五位开始,向后截取三个字符 substring(3,5) 从第三位开始包括第三位到第五位结束,不包括第五位 [3,5)
js的Array对象
**创建数组的三种方法
1)var arr1 = [1,2,3];
2)var arr1 = new Array(3); // 长度是三
3)var arr1 = new Array(1,2,3); // 元素是1,2,3
var arr = []; //创建一个空数组
**属性 length:查看数组的长度
**方法
concat();连接数组 join();根据指定的字符分割数组 push();向数组末尾添加元素,返回数组的新的长度**如果添加的是一个数组,这个时候把数组当做一个整体字符串添加进去 pop();删除并返回数组的最后一个元素 reverse();颠倒数组中的元素的顺序
js的Date对象
** 在java里面获取当前时间
Date date = new Date();
// 格式化 //toLocaleString()
** js里面获取当前时间
var date = new Date();
// 转换成习惯的格式 date.toLocaleString();
js的Math对象 数学的运算
** 里面的都是静态方法,使用可以直接使用 Math.方法();
js的全局函数
**由于不属于任何一个对象,直接写名称使用
** eval(); 执行js代码(如果字符串是一个js代码,使用方法直接执行)
-- var str = "alert('1234');";
// alert(str); //alert('1234');
eval(str); // 1234
** .....
js的函数的重载 什么是重载?方法名相同,参数不同
*js不存在函数的重载,只会调用最后一个方法,但是可以通过其他方式模拟重载。js的函数把传递的参数保存到 arguments数组里面 可以利用判断arguments数组的长度 来对应返回不同的处理结果
模拟重载效果代码实现:
function add1() {
if(arguments.length ==2 ) {
return arguments[0] + arguments[1];
} else if ( arguments.length == 3) {
return arguments[0] + arguments[1] + arguments[2];
} else if ( arguments.length == 4) {
return arguments[0] + arguments[1] + arguments[2] + arguments[3];
} else {
return 0;
}
}
// 调用
alert(add1(1,2)); //3
alert(add1(1,2,3)); //6
alert(add1(1,2,3,4)); //10
alert(add1(1,2,3,4,5)); //0
js的bom对象
**bom :broswer object model:浏览器对象模型
**有哪些对象?
-- navigator :获取客户机的信息(浏览器的信息)
-- screen : 获取屏幕的信息
-- location :请求的url地址
*** href属性
1)获取到请求的url地址
--document.write(location.href);
2)设置url地址
--页面上安置一个按钮,按钮上绑定一个事件,当点击这个按钮,页面可以跳转到另外一个页面
function href1() {
//alert("aaaa");
location.href = "http://baidu.com";
}
-- history :请求的url的历史记录
-- 创建三个页面(模拟上下历史的效果)
1)创建一个页面a.html 写一个超链接 到 b.html
2)创建 b.html 超链接到 c.html
3)创建 c.html
-- 到访问的上一个页面
history.back();
history,go(-1);
-- 到访问的下一个页面
history.forward();
history.go(1);
-- window(重点掌握) 窗口对象 顶层对象(所有bom对象都是在window里面操作的)
**方法
-- window.alert(); 简写为:alert(); 页面弹出一个窗口,显示内容
-- confirm("显示的消息内容"); 确认提示框 有返回值 true和false
-- prompt(); 输入的对话框(现在使用的不多) ,有两个参数:显示内容和默认值
-- open("url地址","","窗口特征,比如窗口宽度和高度"); 打开一个新窗口
-- close(); 关闭窗口(浏览器兼容性比较差)
-- 做一些定时器
*** setInterval("js代码",毫秒数); window.setInterval("alert('123');",3000); 表示每三秒执行一次alert方法
*** setTimeout("js代码",毫秒数); 表示在毫秒数之后执行,但是只会执行一次
***clearInterval(); 清除掉setInterval设置的定时器
-- var id1 = setInterval("alert('123');",3000);
clearInterval(id1);
***clearTimeout(); 清除掉setTimeout设置的定时器
js的dom对象
**dom :document object model: 文档对象类型
**文档:超文本文档(超文本标记文档) html、xml
**对象:提供了属性和方法
**模型:使用属性和方法操作超文本标记型文档
***可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作
***想要对标记型文档进行操作,首先需要把标记型文档里面的所有内容封装成对象
-- 需要把html里面的标签、属性、文本内容都封装成对象
***要想对标记型文档进行操作,解析标记型文档
***解析过程:根据html的层级结构,会在内存中分配一个树形结构,需要把html中的每部分封装成对象
*只能有一个根节点
在根节点下面可以有多个子节点,没有子节点的节点称为叶子节点
-- document对象:整个html文档
-- element对象:标签对象
-- 属性对象
-- 文本对象
** Node节点对象:是这些对象的父对象
DHTML:是很多技术的简称
** html:封装数据
** css:使用属性和属性值设置样式
** dom:操作html文档(标记型文档)
** javascript:专门指的是js的语法语句(ECMAScript)
document对象 表示整个文档
**常用方法
-- write()方法:1)向页面输出变量 2)向页面输出html代码
-- getElementById(); 表示通过id得到元素(标签)
// 使用getElementById得到input标签的对象
var input1 = document.getElementById("nameid");
// 得到input里面的value值
alert(input1.value);
// 向input里面设置一个值value
input1.value = "bbbbbbb";
-- getElementsByName(); 通过标签的name的属性值得到标签,返回的是一个集合(数组)
var input1 = document.getElementsByName("name1"); // 传递的参数是标签里面的name的值
for(var i =0;i var inputs = input1[i]; // 每次循环得到input对象,赋值到inputs里面 alert(inputs.value); // 得到每个input标签里面的value值 } -- getElementsByTagName("标签的名称"); 返回的是一个集合(数组) var inputs1 = document.getElementsByTagName("input"); //传递的参数是标签的名称 for(var i =0;i var input1 = inputs1[i]; alert(input1.value); } ****注意的地方:只有一个标签,这个标签只能使用name获取到,这个时候,使用getElementsByName返回的是一个数组,但是现在只有一个元素,这个时候不需要遍历,而是可以直接通过数组的下标获取到值 var input1 = document.getElementsByName("name1")[0]; alert(input1.value); 案例:window弹窗案例 **实现过程:1)需要创建一个页面:两个输入项和一个按钮,按钮上边有一个事件,作用是弹出一个新窗口 2)创建弹出页面:表格 每一行表格上有一个按钮和编号和姓名;按钮上有一个事件:把当前的编号和姓名,赋值到第一个页面相应的位置 **跨页面的操作 opener :可以得到创建这个窗口的窗口,也就是可以得到父窗口 案例:在末尾添加节点 1)创建li标签 2)创建文本 3)把文本加入到li下面 4)把li加入到ul下面 function add1() { // 获取到ul标签 var ul1 = document.getElementById("ulid"); // 创建标签 var li1 = document.createElement("li"); // 创建文本 var tex1 = document.createTextNode("4444"); // 把文本加入到li下面 li1.appendChild(tex1); // 把li加入到ul下面 ul1.appendChild(li1); } 元素对象(element对象):要操作element,首先必须要获取到element 使用document里面相应的方法获取 **方法 ****获取属性里面的值 getAttribute("属性名称"); ****设置属性的值 setAttribute(name,value); ****删除属性 removeAttribute("属性名称"); 不能删除value // 先要获取input标签 var input1 = document.getElementById("inputid"); // alert(input1.value); alert(input1.getAttribute("value")); //获取属性里面的值 alert(input1.getAttribute("class")); input1.setAttribute("class","haha"); // 设置属性的值 alert(input1.getAttribute("class")); input1.removeAttribute("name"); ** 想要获取标签下面的子标签 **使用属性 childNodes,但是这个属性兼容性很差 **获得标签下面子标签的唯一有效方法,使用getElementsByTagName方法 // 获取到ul标签 var ul1 = document.getElementById("ulid1"); // 获取ul下面的子标签 // var lis = ul1.childNodes;//兼容性很差 // alert(lis.length); // 有的显示的是3 有的显示的是7 var lis = ul1.getElementsByTagName("li"); alert(lis.length); Node对象的属性 **nodeName **nodeType **nodeValue **使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象 **标签节点对应的值 nodeType : 1 nodeName : 大写标签名称,比如SPAN nodeValue : null **属性节点对应的值 nodeType : 2 nodeName : 属性名称 nodeValue : 属性的值 **文本节点对应的值 nodeType : 3 nodeName : #text nodeValue : 文本内容 ** 文本内容 // 获取标签对象 var span1 = document.getElementById("spanid"); // alert(span1.nodeType); // 1 // alert(span1.nodeName); // SAPN // alert(span1.nodeValue); // null // 属性 var id1 = span1.getAttributeNode("id"); // alert(id1.nodeType); // 2 // alert(id1.nodeName); //id // alert(id1.nodeValue); // spanid //获取文本 var text1 = span1.getfirstChild; // alert(text1.nodeType); // 3 // alert(text1.nodeName); //#text // alert(text1.nodeValue); // 文本内容 Node对象的属性二 **父节点 ul是li的父节点 *** parentNode :父节点 **子节点 li是ul的子节点 *** childNodes : 得到所有子节点,但是兼容性很差 *** firstChild : 获取第一个子节点 *** lastChild : 获取最后一个子节点 **同辈节点 li与li之间是同辈节点 **nextSibling : 返回一个给定节点的下一个兄弟节点 **previousSibling : 返回一个给定节点的上一个兄弟节点 /* // 得到li1 var li1 = document.getElementById("li1"); // 得到ul var ul1 = li1.parentNode; alert(ul1.id); */ /* // 获取ul的第一个子节点 // 得到ul var ul1 = document.getElementById("ulid"); // 第一个子节点 var li1 = ul1.firstChild; alert(li1.id); var li4 = ul1.lastChild; alert(li4.id); */ //获取li的id是li3的上一个和下一个兄弟节点 var li3 = document.getElementById("li3"); var li4 = li3.nextSibling; var li2 = li3.previousSibling; alert(li4.id); alert(li2.id); 操作dom树 ** appendChild方法: *** 添加子节点到末尾 *** 特点:类似于剪切粘贴的效果 ** insertBefore(newNode,oldNode); *** 在某个节点之前插入一个新的节点 通过父节点添加 *** 两个参数 1)要插入的节点 2)在谁之前插入 *** 插入一个节点,节点不存在,创建 1)创建标签 2)创建文本 3)把文本添加到标签下面 **代码实现:(在 之前添加 ) // 在 function insert1() { // 1、获取到li13标签 var li13 = document.getElementById("li13"); // 2、创建li var li15 = document.createElement("li"); // 3、创建文本 var text15 = document.createTextNode("董小宛"); // 4、把文本添加到li下面 li15.appendChild(text15); // 5、获取ul var ul21 = document.getElementById("ulid21"); // 6、把li添加到ul下面(在
ul21.insertBefore(li15,li13);
}
**removeChild方法:删除节点
***通过父节点删除,不能自己删除自己
**代码实现 : 删除
// 删除
function remove1() {
// 1、获取到li24标签
var li24 = document.getElementById("li24");
// 2、获取父节点ul标签
// 有两种方式 1)通过id获取 2)通过属性 parentNode获取
var ul31 = document.getElementById("ulid31");
// 3、执行删除(通过父节点删除)
ul31.removeChild(li24);
}
** replaceChild(newNode,oldNode); 替换节点
***两个参数:1)新的节点(替换成的节点) 2)旧的节点(被替换的节点)
***不能自己替换自己,通过父节点替换
** cloneNode(boolean) : 复制节点
**代码实现:把ul列表复制到另外一个div里面
// 把ul列表复制到另外一个div里面
/*
1、获取到ul
2、执行复制方法 cloneNode方法复制 参数true
3、把复制之后的内容放到div里面去
** 获取到div
** appendChild方法
*/
function clone1() {
// 1、获取ul
var ul41 = document.getElementById("ulid41");
// 2、复制ul,放到类似剪切板里面
var ulcopy = ul41.cloneNode(true);
// 3、获取到div
var divv = document.getElementById("divv");
// 4、把副本放到div里面去
divv.appendChild(ulcopy);
}
**操作dom总结:
**获取节点使用方法
getElementById() : 通过节点的id属性,查找对应节点
getElementsByName() : 通过节点的name属性,查找对应节点
getElementsByTagName() : 通过节点名称,查找对应节点
**插入节点的方法
insertBefore方法 : 在某个节点之前插入
appendChild方法 : 在末尾添加,类似于剪贴粘贴
**删除节点的方法
removeChild方法 : 通过父节点删除
**替换节点的方法
replaceChild方法 : 通过父节点替换
innerHTML属性(重点)
** 这个属性不是dom的组成部分,但是大多数浏览器都支持的属性
** 第一个作用:获取文本内容
var span1 = document.getElementById("sid");
alert(span1.innerHTML);
** 第二个作用:向标签里面设置内容(可以是html代码)
测试文本
// 获取span标签
var span1 = document.getElementById("sid");
//alert(span1.innerHTML); // 测试文本
// 向div里面设置内容
// 获取div
var div11 = document.getElementById("div11");
div11.innerHTML = "
** 练习:向div里面添加一个表格
var tab = "
";
div11.innerHTML = tab;
案例:动态显示时间
** 得到当前时间
var date = new Date();
var d1 = date.toLocaleString();
** 需要让页面每一秒获取时间
setInterval方法 定时器
** 显示到页面上
每一秒向div里面写一次时间 使用innerHTML属性
** 代码实现 动态显示时间
function getD1() {
// 当前时间
var date = new Date();
// 格式化
var d1 = date.toLocaleString();
// 获取div
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
// 使用定时器实现每一秒写一次时间
setInterval("getD1();",1000);
案例:全选练习
** 使用复选框上面一个属性判断是否选中
** checked 属性
** checked = true; 选中
** checked = false; 未选中
** 创建一个页面
** 复选框 和 按钮
***四个复选框表示爱好
***还有一个复选框操作全选和全不选 有一个事件
***三个按钮 全选 全不选 反选 每个按键都分别有事件
**代码实现
全选/全不选
篮球
排球
羽毛球
乒乓球
// 实现全选操作
function selAll() {
/*
1、获取要操作的复选框 使用getElementsByName();
2、返回的是数组
**属性 checked 判断复选框是否选中
** checked = true; // 表示选中
** checked = false; // 表示未选中
**遍历数组,得到的是每一个checkbox
** 把每一个checkbox属性设置为true 即checked = true;
*/
// 获取要操作的复选框
var loves = document.getElementsByName("love");
// 遍历数组,得到每一个复选框
for(var i=0;i var love1 = loves[i]; // 得到每一个复选框 love1.checked = true; // 设置属性为true } } // 实现全不选操作 function selNo() { /* 1、获取到要操作的复选框 2、返回的是数组,遍历数组 3、得到每一个复选框 4、设置复选框的属性 checked = false; */ // 获取要操作的复选框 var loves = document.getElementsByName("love"); // 遍历数组,得到每一个复选框 for(var i=0;i var love1 = loves[i]; // 得到每一个复选框 love1.checked = false; // 设置属性为true } } function selOther() { // 实现反选 var loves = document.getElementsByName("love"); // 遍历数组,得到每一个复选框 for(var i=0;i var love1 = loves[i]; // 得到每一个复选框 if(love1.checked == true) { love1.checked = false; } else { love1.checked = true; } } } function selAllNo() { // 一个多选框实现全选 全不选切换 /* 1、得到上边的复选框 通过id来获取 http:// 2、判断该复选框是否选中 if条件 checked == true 3、如果是选中,下面是全选 4、如果不是选中,下面是全不选 */ var box1 = document.getElementById("boxid"); if(box1.checked == true) { selAll(); } else { selNo(); } } 案例:下拉列表左右选择 ** 下拉选择框 ** 创建一个页面 ** 两个下拉框 设置属性multiple ** 四个按钮, 都有事件 ** 代码实现:  atIfmcnw; // 实现选中添加到右边 function selToRight() { /* 1、获取 select1 里面的 option * 使用getElementsByTagName(); 返回的是数组 * 遍历数组,得到每一个 option 2、判断option是否被选中 * 属性 selected ,判断是否被选中 ** selected = true; 选中 ** selected = false;未选中 3、如果选中,把选择的添加到右边去 4、得到 select2 5、添加选择的部分 * appendChild 方法 */ // 获取到 select1 里面的option // 得到 select1 var select1 = document.getElementById("select1"); // 得到 select2 var select2 = document.getElementById("select2"); // 得到 option var options1 = select1.getElementsByTagName("option"); // 遍历数组 for(var i=0;i // 第一次循环 i=0 length:5 // 第二次循环 i=1 length:4 // 第三次循环 i=2 length:3 // 再往后就不满足条件了 后边的都循环不到了 var option1 = options1[i]; // 得到每一个option对象 // 判断是否被选中 if(option1.selected == true) { // 添加到 select2 里面 select2.appendChild(option1); i--; // 注意这一点,不写 会出问题 } } } // 全部添加到右边 function allToRight() { var select2 = document.getElementById("select2"); var select1 = document.getElementById("select1"); var options1 = select1.getElementsByTagName("option"); for(var i=0;i var option1 = options1[i]; select2.appendChild(option1); i--; } } // 右边的添加到左边的操作类似 案例:下拉框联动效果(省市联动) ** 创建一个页面,有两个下拉选择框 ** 在第一个下拉框里面有一个事件:改变事件 onchange事件 ** 方法 add1(this.value); 表示当前改变的 option 里面的value值 ** 创建一个二维数组,存储数据 ** 每个数组中第一个元素是国家名称,后面的元素是国家里面的城市 **代码实现: // 创建一个数组存储数据 // 使用二维数组 var arr = new Array(4); arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"]; arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"]; arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"]; arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"]; function add1(val) { /* 实现步骤: 1、遍历二维数组 2、得到的也是一个数组(国家对应关系) 3、拿到数组中的第一个值和传递过来开的值作比较 4、如果相同,获取到第一个值后面的元素 5、得到 city 的 select 6、添加过去 使用 appendChild 方法 ** 需要创建option (三步操作) */ // 由于每次都要向city里面添加option,第二次添加,前边第一次的会保留,追加 // 所以每次添加之前,判断一下city里面是否有option,如果有,删除 // 获取 city 的 select var city1 = document.getElementById("cityid"); // 得到 city 里面的 option var options1 = city1.getElementsByTagName("option"); // 遍历数组 for(var k=0;k // 得到每一个 option var op = options1[k]; // 删除这个 option 通过父节点删除 city1.removeChild(op); k--;// 每次删除 长度都会减一 k都会增加一 不执行此操作 会出错 } // 遍历二维数组 for(var i=0;i // 得到二维数组里面的每一个数组 var arr1 = arr[i]; // 得到遍历之后的数组的第一个值 var firstvalue = arr1[0]; // 判断传递过来的值和第一个值是否相同 if(firstvalue == val) { // 相同 // 得到第一个值后面的元素 // 遍历数组 arr1 for(var j=1;j var value1 = arr1[j]; // 得到国家之后 城市的名称 // alert(value1); // 创建 option var option1 = document.createElement("option"); // 创建文本 var text1 = document.createTextNode(value1); // 把文本添加到option里面 option1.appendChild(text1); // 添加值到 city 的 select 里面 city1.appendChild(option1); } } } }
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~