JavaWeb学习笔记分享(必看篇)
JavaWeb学习笔记分享(必看篇)
自定义列表
:表示列表的范围
**在里面
:上层内容
**在里面
:下层内容
有序列表
:有序列表的范围
--属性 type:设置排序方式,1(默认),a,i、、
**在ol标签里面
具体内容
无序列表
:无序列表的范围
--属性 type:circle(空心圆)、disc(默认的实心圆)、square(实心方块)
**在ul标签里面
具体内容
图像标签
--属性:src、width、height、alt(图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容 或者是图片显示出错时显示的文字,但有些浏览器不显示,没有效果)
**
路径的介绍
*分类:两类
**绝对路径 eg. http://www.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 :跨行(纵向合并)
13
**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标签里面的)
请选择
1991
1992
1993
****实现默认选中的属性
----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 :按照行进行划分
分成上下两部分,上边80,下边任意
**cols :按照列进行划分
分成左右两部分,左边80,右边任意
** 具体显示的页面
**
*使用框架标签的时候,不能写在head和body里面,使用了框架标签,需要把body去掉,写在head外边
*如果在左边的页面超链接,想让内容显示在右边的页面中,可以设置超链接里面的target属性,将target的值设置为框架中的名字
**百度
知识总结
1)html操作思想:使用标签把要操作的数据包起来,通过修改标签的属性值,来实现标签内数据样式的变化
2)font标签 属性:size 取值范围1-7 color:十六进制数 #ffffff
3)标题标签
...... :从h1到h6字体越来越小,自动换行
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;
}
aaaaaa
2)class选择器 .名称 {}
**每个html标签都有一个属性 class
**
div.test{
background-color:blue;
color:red;
}
p.test{
background-color:blue;
color:red;
}
可以简写为:
.test{
background-color:blue;
color:red;
}
**
aaaaaa
bbbbbbbbb
3)id选择器 #名称 {}
**每个html标签上面都有一个属性 id
--
cccccccccc
--
div#test{
background-color:blue;
color:red;
}
p#test{
background-color:blue;
color:red;
}
可以简写为:
#test {
background-color:blue;
color:red;
}
--
aaaaaa
bbbbbbbbb
**优先级 style > id选择器 > class选择器 > 标签选择器
css的扩展选择器(了解)
1)关联选择器 嵌套标签的样式的设置
**
**设置div标签里面p标签的样式,嵌套标签里面的样式
--
div p {
background-color:blue;
color:red;
}
--
aaaaaa
2)组合选择器 不同标签设置相同的样式
**
1111
2222
**把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
--
div,p {
background-color:blue;
color:red;
}
--
1111
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;
}
--
AAAAAAAAA
BBBBBBBBB
2) 内边距 padding :统一设置 内容距离上下左右四条边的距离
也可以分别设置:上下左右
div {
width: 200px;
height: 100px;
border: 2px solid blue;
}
#div21 {
padding: 20px;
}
#div22 {
padding-left: 30px;
}
AAAAAAAAA
BBBBBBBBB
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("
");
练习:实现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://www.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里面设置内容
AAAAA
// 获取div
var div11 = document.getElementById("div11");
div11.innerHTML = "
AAAAA "; // 设置内容
** 练习:向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来获取
2、判断该复选框是否选中 if条件 checked == true
3、如果是选中,下面是全选
4、如果不是选中,下面是全不选
*/
var box1 = document.getElementById("boxid");
if(box1.checked == true) {
selAll();
}
else {
selNo();
}
}
案例:下拉列表左右选择
** 下拉选择框
111
111
** 创建一个页面
** 两个下拉框 设置属性multiple
** 四个按钮, 都有事件
** 代码实现:
1111111
22222222
33333333
444444444
// 实现选中添加到右边
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);
}
}
}
}
以上这篇JavaWeb学习笔记分享(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
你可能感兴趣的:(JavaWeb学习笔记分享(必看篇))
mac+php5.3的docker-compose.yml分享
自娱自乐22
docker
version:'3'services:nginx:image:nginx:latestcontainer_name:nginx-composevolumes:-./wwwroot:/usr/share/nginx/html:rw-./nginx/nginx/:/etc/nginx/:rw-./log/nginx:/var/log/nginx:rwrestart:alwayslinks:-phpp
Python中的 redis keyspace 通知_python 操作redis psubscribe(‘__keyspace@0__ ‘)
2301_82243733
程序员 python 学习 面试
最后Python崛起并且风靡,因为优点多、应用领域广、被大牛们认可。学习Python门槛很低,但它的晋级路线很多,通过它你能进入机器学习、数据挖掘、大数据,CS等更加高级的领域。Python可以做网络应用,可以做科学计算,数据分析,可以做网络爬虫,可以做机器学习、自然语言处理、可以写游戏、可以做桌面应用…Python可以做的很多,你需要学好基础,再选择明确的方向。这里给大家分享一份全套的Pytho
DeepSeek原理介绍以及对网络安全行业的影响
AI拉呱
Deepseek 人工智能
大家好,我是AI拉呱,一个专注于人工智领域与网络安全方面的博主,现任资深算法研究员一职,兼职硕士研究生导师;热爱机器学习和深度学习算法应用,深耕大语言模型微调、量化、私域部署。曾获多次获得AI竞赛大奖,拥有多项发明专利和学术论文。对于AI算法有自己独特见解和经验。曾辅导十几位非计算机学生转行到算法岗位就业。关注评审分享一起学习更多知识。1.DeepSeek公司介绍1.1DeepSeek是什么:wh
《编程小白必看!字符加减法开启大小写转换之门,解锁数学分析方法密码,列方程思想》
1zero10
c语言 算法
字符加减法的应用1.输入小写字母,输出大写字母首先肯定有定义变量ch;并且让我们可以在黑框输入一个变量,也就是任意一个小写字母charch;scanf("%c\n",ch);接着分析小写字母和大写字母的联系:举例分析,比如b在小写字母表排第二位,而B在大写字母表里也排第二位小写字母和大写字母都有26个所以可以利用排位一致的特点进行方程的构造设小写字母为ch(上面已经设了)设大写字母为y到这里还毫无
域名被微信拦截与QQ拦截的对比分析
拦截器微信qq域名
微信与QQ作为腾讯旗下的两大社交平台,均会对存在风险的域名进行拦截,但两者在机制、表现及处理方式上存在显著差异。以下是两者的相同点与不同点,结合具体拦截表现进行解析:一、相同点触发原因相似域名历史问题:若域名曾因违规内容被举报或封禁,再次使用时可能被微信和QQ同时拦截。备案要求:未备案的域名或未加入腾讯白名单的域名,均可能被拦截。诱导分享与流量过大:频繁诱导用户分享(如“转发得红包”)或短时间内传
LTC流程概述与核心要点--华为LTC流程专家许浩明老师分享心得体会
华为LTC专栏流程管理专家许浩明
华为LTC 项目管理 数据库 经验分享 云计算 区块链
销售关乎企业生死,可是很多企业的销售流程体系是散乱无序、效率低下;没能洞察市场寻找更多商机,项目线索不够多,即便有了项目线索也因为没能尽早有效跟踪培育线索而失去项目机会;难以快速响应客户需求;面向客户界面混乱,销售人员基本是单兵作战,难以形成战斗力,很多销售人员销售经验能力又不足,直接导致的结果就是:市场中标概率小、中标了交付也存在各种各样风险与问题、回款缓慢甚至最后成为“烂尾工程”应收帐款巨大…
2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!
白帽安全-黑客4148
安全 web安全 网络 网络安全 CTF
目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、SQL注入(7-8天)2、文件上传(7-8天)3、其他漏洞(14-15天)4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
2025年全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!
白帽安全-黑客4148
网络安全 web安全 linux 密码学 CTF
目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、SQL注入(7-8天)2、文件上传(7-8天)3、其他漏洞(14-15天)4.3、后期五、CTF学习资源5.1、CTF赛题复现平台5.
如何备战软考网络工程师?
互联网之路.
知识点 网络
互联网各领域资料分享专区(不定期更新):Sheet前言软考网络工程师属于中级资格考试,通过这个考试来获得职称或者提升自己的专业技能。软考网络工程师的考试内容和结构。考试分为上午的综合知识和下午的案例分析,可能涉及计算机网络的基础知识、网络设备配置、网络安全、网络管理等方面。实践操作对下午的案例题很重要,可能需要配置模拟器来练习。但一般没有实际设备,所以模拟器是必要的。同时,真题的重要性不可忽视,需
pythonxml模块高级用法_Python minidom模块用法示例【DOM写入和解析XML】
Lucy-露西娅
pythonxml模块高级用法
本文实例讲述了Pythonminidom模块用法。分享给大家供大家参考,具体如下:一、DOM写XML文件#-*-coding:utf-8-*-#!python3#导入minidomfromxml.domimportminidom#1.创建DOM树对象dom=minidom.Document()#2.创建根节点。每次都要用DOM对象来创建任何节点。root_node=dom.createElemen
【2025年】全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!
网安詹姆斯
web安全 CTF 网络安全大赛 python linux
【2025年】全国CTF夺旗赛-从零基础入门到竞赛,看这一篇就稳了!基于入门网络安全/黑客打造的:黑客&网络安全入门&进阶学习资源包目录一、CTF简介二、CTF竞赛模式三、CTF各大题型简介四、CTF学习路线4.1、初期1、html+css+js(2-3天)2、apache+php(4-5天)3、mysql(2-3天)4、python(2-3天)5、burpsuite(1-2天)4.2、中期1、S
CTF学习法则——寒假篇 新手赶快收藏吧!
网络安全技术分享
学习 网络 安全 web安全 CTF
CTF(CapturetheFlag)是网络安全领域中的一种比赛形式,涵盖了漏洞利用、逆向工程、加密解密、编码解码等多方面的技术,参与者通过解决难题(称为“Flag”)获得积分。对于想要在寒假期间提升CTF技能的同学们,以下是一些有效的学习法则,可以帮助你高效地进行学习和提升:1.合理规划学习时间寒假时间有限,建议制定合理的学习计划:每天固定时间学习:保持稳定的学习节奏,避免临时抱佛脚。分阶段学习
java进阶篇--生产环境如何排查bug和优化 JVM?
爱分享的淘金达人
Java源码剖析(30讲) jvm优化 jvm调优 优化jvm 生产环境优化jvm 生产环境jvm优化
通过前面几个课时的学习,相信你对JVM的理论及实践等相关知识有了一个大体的印象。而本课时将重点讲解JVM的排查与优化,这样就会对JVM的知识点有一个完整的认识,从而可以更好地应用于实际工作或者面试了。我们本课时的面试题是,生产环境如何排查问题?回答:如果是在生产环境中直接排查JVM的话,最简单的做法就是使用JDK自带的6个非常实用的命令行工具来排查。它们分别是:jps、jstat、jinfo、jm
cmake linux模板 多目录_【转载】CMake 简介和 CMake 模板
weixin_39790738
cmake linux模板 多目录
如果你用Linux操作系统,使用cmake会简单很多,可以参考一个很好的教程:CMake入门实战|HaHack。如果你用Linux操作系统,而且只是运行一些小程序,可以看看我的另一篇博客:你就编译一个cpp,用CMake还不如用pkg-config呢。但如果你用Windows,很大的可能你会使用图形界面的CMake(cmake-gui.exe)和VisualStudio。本文先简单介绍使用CMak
【北上广深杭大厂编程面试题】C++篇...这里介绍new、delete、malloc free之间的关系?
努力毕业的小土博^_^
计算机基础知识和编程 c++ java 面试 开发语言 编程
【北上广深杭大厂编程面试题】C++篇…这里介绍new、delete、mallocfree之间的关系?【北上广深杭大厂编程面试题】C++篇…这里介绍new、delete、mallocfree之间的关系?文章目录【北上广深杭大厂编程面试题】C++篇...这里介绍new、delete、mallocfree之间的关系?前言1.`malloc`和`free``malloc`(MemoryAllocation
Java面试题中高级进阶(JVM篇Java内存)
李老头探索
java jvm 开发语言
前言本来想着给自己放松一下,刷刷博客,突然被几道面试题难倒!说说Java内存结构?说说对象分配规则?描述一下JVM加载class文件的原理机制?似乎有点模糊了,那就大概看一下面试题吧。好记性不如烂键盘***12万字的java面试题整理***Java内存结构方法区和堆是所有线程共享的内存区域;而java栈、本地方法栈和程序员计数器是运行是线程私有的内存区域。Java堆(Heap),是Java虚拟机所
JVM篇:内存分区及作用及各部分可能发生的异常
ashane1314
jvm
一、运行时数据区总览二、JVM内存分区及异常1.程序计数器(ProgramCounterRegister)作用:记录当前线程执行字节码的地址(行号),保证线程切换后能恢复到正确位置。特点:线程私有,唯一无内存溢出的区域。异常:无。由JVM规范严格管理,不会发生内存溢出。2.虚拟机栈(JavaVirtualMachineStack)作用:存储方法调用的栈帧(局部变量表、操作数栈、动态链接、方法出口等
vue制作导航栏html,Vue实现导航栏菜单
DataQueen
vue制作导航栏html
本文实例为大家分享了Vue实现导航栏菜单的具体代码,供大家参考,具体内容如下这里是刚学习vue的时候,没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好,用户!v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内
DeepSeek 助力 Vue 开发:打造丝滑的导航栏(Navbar)
宝码香车
# DeepSeek vue.js 前端 javascript ecmascript DeepSeek
前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦目录DeepSeek助力Vue开发:打造丝滑的导航栏(Navbar)前言页面效果指令输入属性定义1.导航栏样式相关2.导航项相关3.响应式相关4.对齐方式相关事件定义1.导航项点击事件2.菜单折叠切换事件其他建议1.可访问性2.动画效果3.图标支
教程分享:手机应用自动化
QH_ShareHub
自动化 运维
手机应用程序的自动化通常涉及使用专门设计的自动化框架和工具。对于Android和iOS平台,以下是一些常用的自动化工具:Android:Espresso:Espresso是谷歌官方支持的自动化测试框架。它适用于写UI测试来模拟用户对Android应用的交云。Espresso工作在应用程序的内存中,因此能够快速执行。UIAutomator:这个框架允许测试者创建自动化脚本来检测和操作用户界面元素。它
985大四科班生没有项目和实习,错过秋招,该准备如何春招?
程序员yt
c++
今天给大家分享的是一位粉丝的提问,985大四科班生没有项目和实习,错过秋招,该准备如何春招?接下来把粉丝的具体提问和我的回复分享给大家,希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问:yt哥你好,我是985大四计科学生,无项目无实习,想努力冲刺春招(清楚准备这么晚是找不到啥好工作了,已经面试了老家那边的银行业务岗,想着后续边工作边自学再跳槽也OK)秋招末班车才醒悟,知道自己没有准备,开发岗
27岁大龄转码秋招惨败,朋友劝我转Java来得及吗?还是继续走前端或机器学习?
程序员yt
java 机器学习 开发语言
今天给大家分享的是一位粉丝的提问,27岁大龄转码秋招惨败,朋友劝我转Java来得及吗?还是继续走前端或机器学习?接下来把粉丝的具体提问和我的回复分享给大家,希望也能给一些类似情况的小伙伴一些启发和帮助。同学提问:211建筑本科,22年毕业后gap一年转码去了英国读的QS100的it的水硕(24年12月份毕业),转码后对就业形势认知不足,时间全花在课业上,八股文和算法准备的不充足,秋招算是惨败。读研
INA226中文手册自译 - 高低端电流检测IC,电流电压测量芯片
盛郁舸Ferris
INA226中文手册自译-高低端电流检测IC,电流电压测量芯片【下载地址】INA226中文手册自译-高低端电流检测IC电流电压测量芯片分享INA226是一款分流和电源监控器,具有I2C或SMBUS兼容接口。该器件能够监控分流压降和总线电源电压,并通过可编程校准值、转换时间和均值,结合内部乘法器,直接读取电流(安培)和功率(瓦特)。INA226适用于高端或低端电流检测,检测共模总线电压上的电流,其变
腿足机器人之五- 粒子滤波
shichaog
腿足机器人 机器人
腿足机器人之五粒子滤波直方图滤波粒子滤波上一篇博客使用的是高斯分布结合贝叶斯准则来估计机器人状态,本篇是基于直方图和粒子滤波器这两种无参滤波器估计机器人状态。直方图方法将状态空间分解成有限多个区域,并用直方图表示后验概率。直方图为每个区域分配一个单独的累积概率;可以将其视为对连续密度函数的逐段常数近似。第二种技术通过有限多个样本来表示后验概率。由此产生的滤波器被称为粒子滤波器,在某些机器人问题中获
DeepSeek指导手册从入门到精通
向画
功能 java c语言 lua laravel eclipse github vue.js
第一章:准备篇(30分钟上手)1.1三分钟创建你的AI伙伴步骤详解访问官网:在浏览器输入「www.deepseek.com」。注册账号:点击右上角「笑脸图标」,选择「邮箱/手机注册」(建议使用常用邮箱)。验证身份:查看收件箱找到验证邮件,点击蓝色确认按钮(找不到可检查垃圾箱)。首次登录:输入密码时建议使用「大小写字母+数字」组合(例如:Deep2024@seek)。避坑指南如果遇到验证码不显示,尝
无人设备遥控器之通讯方式篇
SKYDROID云卓小助手
人工智能 计算机视觉 网络 目标检测 嵌入式硬件
一、无线电波传输无人设备遥控器通过无线电波将指令信号传输给无人设备。这些信号在无线通信频段内进行传输,常见的频段包括2.4GHz和5.8GHz。当飞手在遥控器上操作控制杆时,这些动作会被转换为无线电波信号,并发送给无人设备上的接收机。无人设备接收到信号后,再将其解码为可识别的指令,从而实现对无人设备的控制。根据《中华人民共和国无线电频率划分规则》和我国频谱利用现状,无人机系统还规划了840.584
无人设备遥控器之天线设计篇
SKYDROID云卓小助手
算法 网络 人工智能 计算机视觉 目标检测 嵌入式硬件
无人设备遥控器天线设计是一个复杂而关键的过程,它涉及到多个方面的考虑,包括天线的类型、工作频段、方向性、增益、尺寸、重量以及功耗等。一、天线类型无人设备遥控器天线的设计首先要确定天线的类型。常见的天线类型包括鞭状天线、螺旋天线、微带天线等。鞭状天线通常用于低频段,具有结构简单、易于制作和调试的优点;螺旋天线则适用于中高频段,具有较好的方向性和增益;微带天线则因其剖面低、体积小、重量轻、易共形和可集
无人设备遥控器之视频回传篇
SKYDROID云卓小助手
音视频 人工智能 计算机视觉 网络 目标检测 嵌入式硬件
无人设备遥控器的视频回传是指将无人设备(如无人机)采集到的视频信号传输回遥控器或其他接收设备的过程。这一过程在诸多应急情境中显得尤为重要,它能为指挥中心的决策者、调度系统以及AI分析等提供实时画面。一、主流回传方式目前,主流的视频回传方式是利用遥控器的4G/5G上网功能。无人机通过空中的图传系统将影像传输至遥控器,再经由遥控器重新编码后,利用4G/5G网络进行回传。这种方式具有覆盖范围广、传输速度
前端面试题(HTML篇)
每天一点点~
html css javascript
1.网络中使用最多的图片格式有哪些?JPEG,GIF,PNG最流行的是JPEG格式,可以把文件压缩到最小在PS以JPEG格式存储时,提供11级压缩等级2.Doctype作用?严格模式与混杂模式如何区分?它们有何意义?声明文档类型声明位于位于HTML文档中的第一行,处于标签之前DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式(严格模式)浏览器按照W3C的标准解析执行代码标准模式(严
【Java】Java 常用核心类篇(二)
hrrrrb
# Java 基础 java 开发语言
目录Math类Math类概述常用常量Math.PIMath.E常用方法三角函数方法反三角函数方法指数和对数方法取整方法绝对值和最值方法随机数方法角度转换方法Math类Math类概述在Java编程里,Math类是一个极其重要的工具类,它存于java.lang包下。java.lang包是Java语言的核心包,在使用其中的类时,无需额外导入,Java编译器会自动处理。Math类有两个显著特点:被fina
JAVA基础
灵静志远
位运算 加载 Date 字符串池 覆盖
一、类的初始化顺序
1 (静态变量,静态代码块)-->(变量,初始化块)--> 构造器
同一括号里的,根据它们在程序中的顺序来决定。上面所述是同一类中。如果是继承的情况,那就在父类到子类交替初始化。
二、String
1 String a = "abc";
JAVA虚拟机首先在字符串池中查找是否已经存在了值为"abc"的对象,根
keepalived实现redis主从高可用
bylijinnan
redis
方案说明
两台机器(称为A和B),以统一的VIP对外提供服务
1.正常情况下,A和B都启动,B会把A的数据同步过来(B is slave of A)
2.当A挂了后,VIP漂移到B;B的keepalived 通知redis 执行:slaveof no one,由B提供服务
3.当A起来后,VIP不切换,仍在B上面;而A的keepalived 通知redis 执行slaveof B,开始
java文件操作大全
0624chenhong
java
最近在博客园看到一篇比较全面的文件操作文章,转过来留着。
http://www.cnblogs.com/zhuocheng/archive/2011/12/12/2285290.html
转自http://blog.sina.com.cn/s/blog_4a9f789a0100ik3p.html
一.获得控制台用户输入的信息
&nbs
android学习任务
不懂事的小屁孩
工作
任务
完成情况 搞清楚带箭头的pupupwindows和不带的使用 已完成 熟练使用pupupwindows和alertdialog,并搞清楚两者的区别 已完成 熟练使用android的线程handler,并敲示例代码 进行中 了解游戏2048的流程,并完成其代码工作 进行中-差几个actionbar 研究一下android的动画效果,写一个实例 已完成 复习fragem
zoom.js
换个号韩国红果果
oom
它的基于bootstrap 的
https://raw.github.com/twbs/bootstrap/master/js/transition.js transition.js模块引用顺序
<link rel="stylesheet" href="style/zoom.css">
<script src=&q
详解Oracle云操作系统Solaris 11.2
蓝儿唯美
Solaris
当Oracle发布Solaris 11时,它将自己的操作系统称为第一个面向云的操作系统。Oracle在发布Solaris 11.2时继续它以云为中心的基调。但是,这些说法没有告诉我们为什么Solaris是配得上云的。幸好,我们不需要等太久。Solaris11.2有4个重要的技术可以在一个有效的云实现中发挥重要作用:OpenStack、内核域、统一存档(UA)和弹性虚拟交换(EVS)。
spring学习——springmvc(一)
a-john
springMVC
Spring MVC基于模型-视图-控制器(Model-View-Controller,MVC)实现,能够帮助我们构建像Spring框架那样灵活和松耦合的Web应用程序。
1,跟踪Spring MVC的请求
请求的第一站是Spring的DispatcherServlet。与大多数基于Java的Web框架一样,Spring MVC所有的请求都会通过一个前端控制器Servlet。前
hdu4342 History repeat itself-------多校联合五
aijuans
数论
水题就不多说什么了。
#include<iostream>#include<cstdlib>#include<stdio.h>#define ll __int64using namespace std;int main(){ int t; ll n; scanf("%d",&t); while(t--)
EJB和javabean的区别
asia007
bean ejb
EJB不是一般的JavaBean,EJB是企业级JavaBean,EJB一共分为3种,实体Bean,消息Bean,会话Bean,书写EJB是需要遵循一定的规范的,具体规范你可以参考相关的资料.另外,要运行EJB,你需要相应的EJB容器,比如Weblogic,Jboss等,而JavaBean不需要,只需要安装Tomcat就可以了
1.EJB用于服务端应用开发, 而JavaBeans
Struts的action和Result总结
百合不是茶
struts Action配置 Result配置
一:Action的配置详解:
下面是一个Struts中一个空的Struts.xml的配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
&quo
如何带好自已的团队
bijian1013
项目管理 团队管理 团队
在网上看到博客"
怎么才能让团队成员好好干活"的评论,觉得写的比较好。 原文如下: 我做团队管理有几年了吧,我和你分享一下我认为带好团队的几点:
1.诚信
对团队内成员,无论是技术研究、交流、问题探讨,要尽可能的保持一种诚信的态度,用心去做好,你的团队会感觉得到。 2.努力提
Java代码混淆工具
sunjing
ProGuard
Open Source Obfuscators
ProGuard
http://java-source.net/open-source/obfuscators/proguardProGuard is a free Java class file shrinker and obfuscator. It can detect and remove unused classes, fields, m
【Redis三】基于Redis sentinel的自动failover主从复制
bit1129
redis
在第二篇中使用2.8.17搭建了主从复制,但是它存在Master单点问题,为了解决这个问题,Redis从2.6开始引入sentinel,用于监控和管理Redis的主从复制环境,进行自动failover,即Master挂了后,sentinel自动从从服务器选出一个Master使主从复制集群仍然可以工作,如果Master醒来再次加入集群,只能以从服务器的形式工作。
什么是Sentine
使用代理实现Hibernate Dao层自动事务
白糖_
DAO spring AOP 框架 Hibernate
都说spring利用AOP实现自动事务处理机制非常好,但在只有hibernate这个框架情况下,我们开启session、管理事务就往往很麻烦。
public void save(Object obj){
Session session = this.getSession();
Transaction tran = session.beginTransaction();
try
maven3实战读书笔记
braveCS
maven3
Maven简介
是什么?
Is a software project management and comprehension tool.项目管理工具
是基于POM概念(工程对象模型)
[设计重复、编码重复、文档重复、构建重复,maven最大化消除了构建的重复]
[与XP:简单、交流与反馈;测试驱动开发、十分钟构建、持续集成、富有信息的工作区]
功能:
编程之美-子数组的最大乘积
bylijinnan
编程之美
public class MaxProduct {
/**
* 编程之美 子数组的最大乘积
* 题目: 给定一个长度为N的整数数组,只允许使用乘法,不能用除法,计算任意N-1个数的组合中乘积中最大的一组,并写出算法的时间复杂度。
* 以下程序对应书上两种方法,求得“乘积中最大的一组”的乘积——都是有溢出的可能的。
* 但按题目的意思,是要求得这个子数组,而不
读书笔记-2
chengxuyuancsdn
读书笔记
1、反射
2、oracle年-月-日 时-分-秒
3、oracle创建有参、无参函数
4、oracle行转列
5、Struts2拦截器
6、Filter过滤器(web.xml)
1、反射
(1)检查类的结构
在java.lang.reflect包里有3个类Field,Method,Constructor分别用于描述类的域、方法和构造器。
2、oracle年月日时分秒
s
[求学与房地产]慎重选择IT培训学校
comsci
it
关于培训学校的教学和教师的问题,我们就不讨论了,我主要关心的是这个问题
培训学校的教学楼和宿舍的环境和稳定性问题
我们大家都知道,房子是一个比较昂贵的东西,特别是那种能够当教室的房子...
&nb
RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系
daizj
oracle rman filesperset PARALLELISM
RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 转
PARALLELISM ---
我们还可以通过parallelism参数来指定同时"自动"创建多少个通道:
RMAN > configure device type disk parallelism 3 ;
表示启动三个通道,可以加快备份恢复的速度。
简单排序:冒泡排序
dieslrae
冒泡排序
public void bubbleSort(int[] array){
for(int i=1;i<array.length;i++){
for(int k=0;k<array.length-i;k++){
if(array[k] > array[k+1]){
初二上学期难记单词三
dcj3sjt126com
sciet
concert 音乐会
tonight 今晚
famous 有名的;著名的
song 歌曲
thousand 千
accident 事故;灾难
careless 粗心的,大意的
break 折断;断裂;破碎
heart 心(脏)
happen 偶尔发生,碰巧
tourist 旅游者;观光者
science (自然)科学
marry 结婚
subject 题目;
I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码 收藏代码
dcj3sjt126com
redis
wget http://download.redis.io/redis-stable.tar.gz
tar xvzf redis-stable.tar.gz
cd redis-stable
make
前面3步应该没有问题,主要的问题是执行make的时候,出现了异常。
异常一:
make[2]: cc: Command not found
异常原因:没有安装g
并发容器
shuizhaosi888
并发容器
通过并发容器来改善同步容器的性能,同步容器将所有对容器状态的访问都串行化,来实现线程安全,这种方式严重降低并发性,当多个线程访问时,吞吐量严重降低。
并发容器ConcurrentHashMap
替代同步基于散列的Map,通过Lock控制。
&nb
Spring Security(12)——Remember-Me功能
234390216
Spring Security Remember Me 记住我
Remember-Me功能
目录
1.1 概述
1.2 基于简单加密token的方法
1.3 基于持久化token的方法
1.4 Remember-Me相关接口和实现
位运算
焦志广
位运算
一、位运算符C语言提供了六种位运算符:
& 按位与
| 按位或
^ 按位异或
~ 取反
<< 左移
>> 右移
1. 按位与运算 按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时,结果位才为1 ,否则为0。参与运算的数以补码方式出现。
例如:9&am
nodejs 数据库连接 mongodb mysql
liguangsong
mongodb mysql node 数据库连接
1.mysql 连接
package.json中dependencies加入
"mysql":"~2.7.0"
执行 npm install
在config 下创建文件 database.js
java动态编译
olive6615
java HotSpot jvm 动态编译
在HotSpot虚拟机中,有两个技术是至关重要的,即动态编译(Dynamic compilation)和Profiling。
HotSpot是如何动态编译Javad的bytecode呢?Java bytecode是以解释方式被load到虚拟机的。HotSpot里有一个运行监视器,即Profile Monitor,专门监视
Storm0.9.5的集群部署配置优化
roadrunners
优化 storm.yaml
nimbus结点配置(storm.yaml)信息:
# Licensed to the Apache Software Foundation (ASF) under one
# or more contributor license agreements. See the NOTICE file
# distributed with this work for additional inf
101个MySQL 的调节和优化的提示
tomcat_oracle
mysql
1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多。 2. 不惜一切代价避免使用Swap交换分区 – 交换时是从硬盘读取的,它的速度很慢。 3. 使用电池供电的RAM(注:RAM即随机存储器)。 4. 使用高级的RAID(注:Redundant Arrays of Inexpensive Disks,即磁盘阵列
zoj 3829 Known Notation(贪心)
阿尔萨斯
ZOJ
题目链接:zoj 3829 Known Notation
题目大意:给定一个不完整的后缀表达式,要求有2种不同操作,用尽量少的操作使得表达式完整。
解题思路:贪心,数字的个数要要保证比∗的个数多1,不够的话优先补在开头是最优的。然后遍历一遍字符串,碰到数字+1,碰到∗-1,保证数字的个数大于等1,如果不够减的话,可以和最后面的一个数字交换位置(用栈维护十分方便),因为添加和交换代价都是1