适合后端开发人员的html笔记

最新推荐文章于 2024-04-12 10:32:21 发布

不知名的帅比

最新推荐文章于 2024-04-12 10:32:21 发布

阅读量696

点赞数

文章标签： html 学习 servlet

本文链接：https://blog.csdn.net/y3254160873/article/details/124081935

版权

1html

锚点

<a href="#bottom">跳转到底部</a>

<a href="#" id="bottom">跳转到顶部</a>

img 图片标签

h1:一级标题块级元素其他的都是行内元素

img同时具备行内元素和块级元素的特性

行内元素，块内元素

1.块元素，总是在新行上开始；内联元素，和其他元素都在一行上。

2.块元素，能容纳其他块元素或内联元素；内联元素，只能容纳文本或者其他内联元素。

3.块元素中高度，行高以及顶和底边距都可控制；内联元素中高，行高及顶和底边距不可改变。

块元素（block element）

address - 地址

blockquote - 块引q用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易，也是css layout的主要标签

dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容（对于不支持frame的浏览器显示此区块内容）
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序列表
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

内联元素（inline element）行内元素

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体（不推荐）
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码（在引用源码的时候需要）
dfn - 定义字段
em - 强调
font - 字体设定（不推荐）
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线（不推荐）
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

src:记载图片的路径，绝对路径，相对路径，

绝对路径：从盘符开始一直到文件的完整路径

相对独立：从当前文件开始查找，一直到文件的所在位置

width：设置图片的宽度

height：设置图片的高度

不会独占一行

img是一个单标签

p:段落标签

独占一行

段落之间会有间隙

a:链接标签

不会独占一行

href：表示要打开哪一个页面，可以使文件路径，也可以是域名

target:表示以什么方式跳转，默认值

_blank:表示在新窗口打开

_self：默认值，表示在当前窗口打开

ol:有序列表

li:列表项

type：设置序号的样式

1：默认值为1，表示按数字排列(1,2,3,4)

A:表示大写字母排序

a:表示小写字母排序

I:表示以大写的罗马数字排序

i：表示以小写的罗马数字排序

start: 表示从第几个开始排序，比如start=2,表示从2开始

ul:无序列表

li:列表项

type:设置列表序号的样式

disc:默认值，表示实心圆圈

circle：表示空心圆圈

square：表示实心方块

div:块级容器，经常与css结合使用,用来做页面布局

table：表格标签

tr：一行

td：一列

th：标题列

width：宽度

height：高度

cellspacing：表示边框的间距

border：边框的宽度,0不显示，大于0表示边框的宽度

cellpadding：单元格向内填充

align：对齐，left左对齐（默认值），center居中，right右对齐

rowspan：行合并

colspan：列合并

独占一行

form:表单标签

action：表示提交到那个地方

method：提交方式：get、post

input：文本输入框

type：

text：普通的文本输入框

password：密码框

radio：单选框

checkbox：复选框

submit：提交按钮

select：下拉列表框

option：下拉内容

textarea：文本域

rowspan：行

colspan：列

button:按钮，可以通过事件触发操作

span:把实际内容包含起来，不能控制宽高，宽高是由实际的内容撑起来的，不会独占一行。

hr：水平线标签

b:加粗

i:斜体

u:下划线

sup:上标

sub：下标

:空格

>:大于

<:小于

&ge：大于等于

&le：小于等于

®：注册商标

©：版权

iframe:内联标签，可以嵌套其他的页面

-frameborder：是否显示边框

-scrolling：是否有滚动条

-src：嵌套页面的路径

-width：宽度

-height：高度

2.css

选择器

内嵌>id选择器>类选择器>标签选择器

后代选择器：

选择元素后代元素后代的后代元素以此类推{

样式声明 }

选择元素：基本选择器（id class 标签）

css样式引入方式：

1.在标签上使用style属性来引入，比如：<div style="backgroud-color:red"

2.在head中的style标签对里编写css代码

3.创建css文件，在该文件中编写css代码，html文件通过link或者@import引入外部的css文件

link是在加载html的之前引入css文件，html文件加载完成时css样式也基本完成渲染

import 方式不推荐

加载逻辑：在html文件加载完成之后引入css文件

当网络条件差的时候，会出现页面短时间混乱的现象

属性选择器

标签名[属性名1=“属性值1”][属性名2=“属性值2”]..{}

通配：

标签名可以用*代替[属性名1=“属性值1”][属性名2=“属性值2”]..{}

属性明*=属性值表示属性名包含属性值

属性名^=属性值表示以属性值开头的字符串

属性名$=属性值表示以属性值结尾的字符串

群组选择器：

如果想让不同的标签使用相同的样式渲染，可以考虑使用群组选择器

选择器1，选择器2.。{ }

/* margin-top: 20px;

margin-bottom: 20px;

margin-left: 40px;

margin-right: 20px; */

/* 顺时针顺序，从top开始 */

/* margin: 20px 20px 20px 40px; */

/* 第一个是上,第二个是左右，第三个是下*/

/* margin: 20px 40px 20px; */

/* 第一个是上下，第二个是左右 */

/* margin: 30px 40px; */

/* 上下左右全部影响 */

margin: 20px;

/* border-top-width: 1px;

double双实线，dotted虚线

border-top-style: solid;

border-top-color: #dadada; */

/* border-top: 4px double solid;

border-bottom: 4px double solid;

border-left: 4px double solid;

border-right: 4px double solid; */

border: 4px double solid;

/* 用法同margin */

/* padding-top: 20px;

padding-bottom: 20px;

padding-left: 20px;

padding-right: 20px; */

/* 参数同margin */

padding: 20px;

元素的总宽度=width+左padding+ 右padding+左右border+左右margin

元素的总高度=height+上下padding+上下border+上下margin

元素的可见宽度=width+左右padding+左右border

元素的可见高度=height+上下padding+上下border

/* 设置块级元素为行级元素 */

/* display: inline; */

/* 把行内元素改变为块级元素 */

/* display: block; */

/* 既有行内元素的特效又有块内元素的特性 */

display: inline-block;

absolute:绝对定位

1.以父级元素为参照来偏移

2.如果父级元素没有做定位，那么继续向上找有定位的父级元素，直到body元素，然后以body为参照来偏移

3.absolute和float不能同时使用

设置父元素参照物

position: relative;

/* 相对父级元素定位 */

position:absolute;

/* 页面置顶 */

position: fixed;

设置文字居中

text-align: center;

/* 去除表格间隙 */

border-collapse: collapse;

/* 使用了fixed固定后在加上top和bottom */

position: fixed;

top:0px;

设置div上下居中，左右不居中（高度跟div高度一样）

line-height:50px;

设置字体加粗（100-900）

font-weight: 800;

/* 设置文本行内位置行内置顶 */

vertical-align:top;

3.js

console.log()控制台输出

typeof(a)输出a的类型

数据类型

// 字符串类型

var a = "";

a = '123';

// number类型

a = 0;

// object类型

a = null;

console.log("a=" + typeof (a));

// undefined类型

var b;

if (b) {

console.log(true)

}else {

console.log(false);

}

if (a) {

console.log(true);

}else {

console.log(false);

}

// number

a = 1.12;

console.log(typeof (a));

// boolean类型

// 为true：非0、非空字符串、非空对象

// 为false：0、空字符串、null、undefined

a = false;

console.log(typeof (a));

// 对象

var object = new Object;

object.name = 'aaa';

object.age = 20;

object.sex = "male";

console.log(object);

var object1 = {

"name": "list",

"age": 20,

"sex": "male"

};

console.log(object1);

//array数组

var arrs = new Array();

arrs[0] = 0;

arrs[1] = 1;

arrs[2] = 2;

console.log(arrs);

var arrs1 = new Array("a", "2", "3");

console.log(arrs1);

// 数组里可以存放不同类型的数据

var arrs2 = [0, "a", arrs1];

console.log(arrs2);

function add(a,b) {

returna+b;

}

var c = add(1, 2);

console.log(c);

// 打印时间

var date = new Date();

console.log(date);

// 打印四位年份

var year = date.getFullYear();

console.log(year);

// month是从0开始到11

var month = date.getMonth() + 1;

if (month < 10) {

month = '0' + month

}

console.log("month:" + month);

// 本月天数

var day = date.getDate();

console.log("本月天数" + day)

// 星期几

var dayN = date.getDay();

console.log(dayN);

// == 值比较，不管类型

console.log(123 == '123');

// ==== 值比较和类型比较

console.log(123 === '123');

var m = '123';

var n = parseInt(m);

console.log(typeof (n));

// 字符串转换为数字，从第一个字符串开始，如果是数字就继续转换，空格的话就会继续向后找，其他的就是NaN

var o = ' 123abca123';

n = parseInt(o);

console.log(n);

// Asdf是字符串开头，js在解析时发现第一个字符是字符串类型，

// 则丢掉，所以解析的类型是NaN

console.log(parseInt("Asdf"));

// Boolean :布尔类型转换

// 零、空字符串、null、undefined会被转换为false

//匿名函数

var x = function (a,b) {

returna*b;

}

var y = x(2, 3);

console.log(y);

// 警告框

// alert(你好);

// // 确认框

// var x = confirm("我是帅哥吗！");

// if (x) {

// alert("删除成功");

// } else {

// "删除失败".alert;

// }

// // 提示输入框

// var z = prompt("请输入一个数字");

// if (x) {

// alert("输入的值为：" + x);

// } else {

// alert("输入的值为空");

// }

// var s = "hello woRld";

// console.log(s);

// // 全部小写

// console.log(s.toLocaleLowerCase());

// // 全部大写

// console.log(s.toLocaleUpperCase());

// // 取下标为4的

// console.log(s.charAt(4));

// // substr是从下标1到下标6 相当于[1,6]

// var sub1 = s.substr(1, 6);

// console.log(sub1);

// // substring从1开始到6-1 相当于[1,6)

// var sub2 = s.substring(1, 6);

// console.log(sub2);

// //数组array

// var arrS = ["a", "b", "c"];

// // 数组长度

// console.log(arrS.length);

// // 数组转字符串，默认以英文逗号分隔，也可以自定义分隔符

// var s = arrS.join("-");

// console.log(s);

// // 数组反转

// console.log(arrS.reverse);

// // 删除最后一个，并且返回该元素，数组长度-1

// var c = arrS.pop();

// console.log(c + "," + arrS.length);

// // 删除第一个，返回该元素，数组长度-1

// var a = arrS.shift();

// console.log(a + "" + arrS.length);

// // 数组最前面添加可以多个添加逗号分隔

// arrS.unshift("a");

// console.log(arrS);

// // 数组最后面添加可以多个添加逗号分隔

// arrS.push("c");

// console.log(arrS);

// 在定义变量的时候如果没有var，则该变量的作用域自动提升为全局变量作用域

var result;

setTimeout和setinterval

function myTimeout() {

result = setTimeout(function () {

alert("这是Timeout");

},5000);

}

function clearMyTimeout() {

clearTimeout(result);

alert("取消延迟执行成功！");

}

// 定时执行

var res;

function myInterval() {

res = setInterval(function () {

console.log("定时打印");

},1000);

}

function clearMyInterval() {

clearInterval(res);

alert("取消定时执行成功");

}

<button id="btn4" οnclick="clearMyInterval()">取消定时执行</button>

cript>

// 主机名加端口号

console.log(location.host);

// 主机名

console.log(location.hostname);

// 端口号

console.log(location.port);

// 协议

console.log(location.protocol);

function myOnload(){

// 页面刷新

location.reload();

}

window对象

closed

返回窗口是否已被关闭。

defaultStatus

设置或返回窗口状态栏中的默认文本。

document

对 Document 对象的只读引用。(请参阅对象)

frames

返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口

中含有一个框架。

history

对 History 对象的只读引用。请参考History 对象。

innerHeight

返回窗口的文档显示区的高度。

innerWidth

返回窗口的文档显示区的宽度。

localStorage

在浏览器中存储 key/value 对。没有过期时间。

length

设置或返回窗口中的框架数量。

location

用于窗口或框架的 Location 对象。请参阅Location 对象。

name

设置或返回窗口的名称。

navigator

对 Navigator 对象的只读引用。请参数Navigator 对象。

opener

返回对创建此窗口的窗口的引用。

outerHeight

返回窗口的外部高度，包含工具条与滚动条。

outerWidth

返回窗口的外部宽度，包含工具条与滚动条。

pageXO៛?set

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYO៛?set

设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

parent

返回父窗口。

screen

对 Screen 对象的只读引用。请参数Screen 对象。

screenLeft

返回相对于屏幕窗口的x坐标

screenTop

返回相对于屏幕窗口的y坐标

screenX

返回相对于屏幕窗口的x坐标

sessionStorage

在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据。

screenY

返回相对于屏幕窗口的y坐标

self

返回对当前窗口的引用。等价于 Window 属性。

status

设置窗口状态栏的文本。

top

返回最顶层的父窗口。

window对象方法

alert()

显示带有一段消息和一个确认按钮的警告框。

atob()

解码一个 base-64 编码的字符串。

btoa()

创建一个 base-64 编码的字符串。

blur()

把键盘焦点从顶层窗口移开。

clearInterval()

取消由 setInterval() 设置的 timeout。

clearTimeout()

取消由 setTimeout() 方法设置的 timeout。

close()

关闭浏览器窗口。

con៯?rm()

显示带有一段消息以及确认按钮和取消按钮的对话框。

createPopup()

创建一个 pop-up 窗口。

focus()

把键盘焦点给予一个窗口。

getSelection()

返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。

getComputedStyle()

获取指定元素的 CSS 样式。

matchMedia()

该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。

moveBy()

可相对窗口的当前坐标把它移动指定的像素。

moveTo()

把窗口的左上角移动到一个指定的坐标。

open()

打开一个新的浏览器窗口或查找一个已命名的窗口。

print()

打印当前窗口的内容。

prompt()

显示可提示用户输入的对话框。

resizeBy()

按照指定的像素调整窗口的大小。

resizeTo()

把窗口的大小调整到指定的宽度和高度。

scroll()

已废弃。该方法已经使用了scrollTo()方法来替代。

scrollBy()

按照指定的像素值来滚动内容。

scrollTo()

把内容滚动到指定的坐标。

setInterval()

按照指定的周期（以毫秒计）来调用函数或计算表达式。

setTimeout()

在指定的毫秒数后调用函数或计算表达式。

stop()

停止页面载入。

postMessage()

安全地实现跨源通信。

window尺寸：

1. window.innerHeight:浏览器窗口的内部高度。

2. window.innerWidth:浏览器窗口的内部宽度。

window时钟函数:

setTimeout() : 在指定的毫秒数后调用函数或计算表达式，会返回一个ID值

clearTimeout()：方法可取消由 setTimeout() 函数设定的定时执行操作,方法的参数必须是由 setTimeout() 返回的

ID 值。

setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式

clearInterval() ：方法可取消由 setInterval() 函数设定的定时执行操作,方法的参数必须是由 setInterval() 返回的 ID

值。

history对象

length

返回浏览器历史列表中的 URL 数量。

History 对象方法

back()

加载 history 列表中的前一个 URL。

forward()

加载 history 列表中的下一个 URL。

go()

加载 history 列表中的某个具体页面。

location对象

hash

返回一个URL的锚部分

host

返回一个URL的主机名和端口

hostname

返回URL的主机名

href

返回完整的URL

pathname

返回的URL路径名。

port

返回一个URL服务器使用的端口号

protocol

返回一个URL协议

返回一个URL的查询部分

location对象方法：

assign()

载入一个新的文档

reload()

重新载入当前文档

replace()

用新的文档替换当前文档

事件

onabort

图像加载被中断

onblur

元素失去焦点

onchange

用户改变域的内容

onclick

鼠标点击某个对象，单机

ondblclick

鼠标双击某个对象

onerror

当加载文档或图像时发生某个错误

onfocus

元素获得焦点

onkeydown

某个键盘的键被按下

onkeypress

某个键盘的键被按下或按住

onkeyup

某个键盘的键被松开

onload

某个页面或图像被完成加载

onmousedown

某个鼠标按键被按下

onmousemove

鼠标被移动

onmouseout

鼠标从某元素移开

onmouseover

鼠标被移到某元素之上

onmouseup

某个鼠标按键被松开

onreset

重置按钮被点击

onresize

窗口或框架被调整尺寸

onselect

文本被选定

onsubmit

提交按钮被点击

onunload

用户退出页面

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

// 隐式调用

// btn1.onclick = function(){

// console.log("我被点击了");

// }

// 显示调用，funClick不能加上(),加上()会立即行

btn1.onclick = funClick;

function funClick(){

console.log("hello!");

}

// 如果btn1重复绑定相同的事件，会是什么效果

// 如果btn1重复绑定了相同事件，最后一个起作用，之前的被覆盖掉

btn1.onclick = funClick2;

function funClick2(){

console.log("world!!!!");

}

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

// addEventListener当绑定相同事件的时候，事件会顺序执行

btn1.addEventListener("click",function(){

console.log("事件1");

});

btn1.addEventListener("click",function(){

console.log("事件2");

})

DOM编程（理论看着头痛）

大概意思j就是一个html下有body，body里面有一些元素节点

获得dom节点，获得标签

// 通过标签的id获取的，类似于css中的id选择器，标签id

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

console.log("p1");

// 通过标签名获取，类似于css标签选择器，

var p2 = document.getElementsByTagName("p");

console.log(p2);

// 通过class获取的，类似于css中的类选择器

var p3 = document.getElementsByClassName("p20");

console.log(p3);

// 通过标签的name属性获取的，类似于css中的属性选择器

var p4 = document.getElementsByName("p1");

console.log(p4);

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

var d = div1.children;

// console.log(d);

// for(var i = 0; i < d.length;i++)

// console.log(d[i]);

// var d1 = div1.childNodes;

// console.log(d1);

// for(var i = 0;i<d1.length;i++)

// console.log(d1[i]);

// 获取所有节点的第一个节点,获得子节点第一个节点

// var c1 = div1.firstChild;

// console.log(c1);

// 获取元素节点的第一个节点，获得子节点第一个元素节点

// var c2 = div1.firstElementChild;

// console.log(c2);

// 获取所有节点的最后一个几点

// var c3 = div1.lastChild;

// console.log(c3);

// 获取元素节点的最后一个节点

// var c4 = div1.lastElementChild;

// console.log(c4);

// parentNode向上获取父元素节点，最高父节点是document子找父

var p1 = div1.parentNode.parentNode.parentNode;

console.log(p1);

// parentElement向上获取父元素节点，最高父节点是html在向上取就是null

var p2 = div1.parentElement.parentElement.parentElement;

console.log(p2);

获取兄弟节点

// nextElementSibling获取后边的兄弟元素节点

// nextSibling获取后边兄弟节点，不一定是元素节点

var p = document.getElementById("p1");

// 获取元素节点

var sep = p.nextElementSibling;

// 获取任意节点

var sp = p.nextSibling;

console.log(sep);

console.log(sp);

// previousElementSibling获取前一个兄弟元素节点

// previousSibling获前面的兄弟节点不一定是元素节点

p.previousElementSibling;

p.previousSibling;

注意：

children:只获取当前节点下的所有子元素节点

childNodes:获取当前节点下的所有节点，包括元素节点和文本节点；

innnerHTML/innerText

{

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

btn1.onclick = function(){

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

console.log(p1.innerHTML);

// p1.innerHTML = "<span style='background:red'>这是修改后的文字</span>";

// console.log(p1.innerHTML);

p1.innerText = "<span>这是修改后的文字</span>"

console.log(p1.innerText);

// innerHTML修改内容时，如果插入有标签，会把标签解析成DOM节点

// innerText修改内容时不会吧标签解析成DOM节点只是单纯的作为文本输入

}

//设置属性

setAttribute();

<style>

.p1{

background-color:red;

}

.p2{

background-color:blue;

}

</style>

<body>

<p class="p1" id="p1">这是第一段</p>

<p class="p2" id="p2">这是第二段</p>

</body>

onload = function(){

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

btn.onclick = function(){

// var p1 = document.getElementsByClassName("p1");

// var pp1 = p1[0];

// var p2 = document.getElementsByClassName("p2");

// var pp2 = p2[0];

// pp1.setAttribute("class","p2");//相当于class=p2

// pp2.setAttribute("class","p1");

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

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

// 设置元素节点的属性，可以修改，也可以新增属性

// 第一个参数是属性名，第二个参数是属性值

p1.setAttribute("class","p2");//相当于class=p2

p1.setAttribute("id","p2");

p2.setAttribute("class","p1");

p2.setAttribute("id","p1");

}

</script>

//删除子节点，删除节点，删除元素，移除节点，移除元素

remove/removeChild

<body>

</div>

</body>

onload = function(){

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

btn.onclick = function(){

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

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

// removeChild是通过父元素来删除指定的子元素

// div1.removeChild(p2);

// remove自直接删除自己

p2.remove();

}

</script>

节点.appendChild()在指定节点之后添加节点，插入节点

document.createElement（）创建节点

document.createTextNode() 创建文本节点

节点.insertBefore(p1,p2) 在指定节点中将p1插入到p2之前

onload = function(){

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

btn.οnclick=function(){

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

// 创建新节点

var p = document.createElement("p");

// 创建文本节点

var node = document.createTextNode("3333333");

p.appendChild(node);

// 把p节点插入到div的最后

div1.appendChild(p);

}

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

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

btn2.onclick = function(){

// 创建新节点

var p = document.createElement("p");

// 创建文本节点

var node = document.createTextNode("444444");

p.appendChild(node);

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

// 在p1之前插入p

div1.insertBefore(p,p1);

}

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

btn3.onclick = function(){

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

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

var p1 = div1.firstElementChild;

div1.insertBefore(p2,p1);

}

</script>

</head>

<body>

</div>

<button id="btn">appenchild俺妞妞</button>

<button id="btn2">insertbefoanniu</button>

</body>

document.write

cloneNode(bolean) 复制节点

onload = function(){

// document.write方法，会覆盖掉原来元素内容

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

btn.onclick = function(){

document.write("helloasdf");

}

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

btn2.onclick = function(){

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

var p1 = div1.firstElementChild;

// cloneNode(boolean)

// 复制元素节点

// 当参数为true时会复制所有节点和子孙

// 当参数为false时，则只复制当前元素，子孙节点不复制

var p2 = p1.cloneNode(true);

// var p2 = p1.cloneNode(false);

div1.insertBefore(p2,p1);

}

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

btn3.onclick = function(){

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

var html = div1.innerHTML;

html += "<p>这是新段落</p>"

div1.innerHTML = html;

}

</script>

<body>

<button id="btn">write</button>

</div>

<button id="btn3">innerHTML</button>

</body>

4.jquery

jquery引入

本地引入

js引入：<script src="./js/jquery-3.6.0.min.js"></script>

公网引入：

页面加载完成

window.onload =>οnlοad===$(document).read(function(){ })=>$().ready(function()){ }=>$(function(){ })

jquery选择器

标签选择器

$("p")

id选择器

$("#p1")

class选择器

$(".pp")

层次选择器

$("div p")

$("div>p")

简单过滤选择器

//示例1

$(function(){

// :first获取第一个父元素中的第一个子元素

// :first-child获取所有父元素中的第一个子元素

// :last获取最后一个父元素中的最后一个子元素

// :last-child获取每一个氟元素中的最后一个子元素

// console.log($("ul>li:first"));

// console.log($("ul>li:first-child"));

console.log($("ul>li:last").html());

$("ul>li:last-child").each(function(){

console.log($(this).html());

})

</script>

</head>

<body>

<ul>

</ul>

<ul>

<li>dsfsd</li>

<li>sdfsd</li>

</ul>

</body>

//示例2

<style>

.f20{

color: red;

}

.s{

color: green;

background-color: aqua;

}

</style>

$(function(){

// 简单过滤选择器：获取第一个元素、最后一个元素

$("ul>li:first").addClass("f20");

$("ul li:last").addClass("s");

下标是偶数的选择器

$("ul li:even").addClass("f20");

// 下标是奇数的选择器

$("ul li:odd").addClass("s");

$("input[name=userName]").css("background-color","yellow");

});

</script>

</head>

<body>

<ul>

<li>python</li>

</ul>

</body>

属性过滤器

$("input[name=userName]").css("background-color","yellow");

子元素过滤选择器

表单对象属性过滤选择器

选择器功能返回

:enabled 选取所有可用元素集合元素

:disabled 选取所有不可用元素集合元素

:checked 选取素有被选中的元素(单选框、复选框) 集合元素

:selected 选取所有选中的选项元素（下拉框）集合元素

$(function(){

var btn = $("#btn");

// 表单对象属性过滤选择器

btn.click(function(){

var s = $("input[name='sex']:checked").val();

console.log(s);

$("input[name='hobby']:checked").each(function(){

console.log($(this).val());

});

alert("Sdf")

// $("#star1").addClass("background-color","red");

console.log($("#star option:selected").val());

alert("asdf");

// 表单选择器

// console.log($(":input"));;

// console.log($(":radio:checked").val);

// console.log($(":checkbox:checked").val);

return false;

});

</script>

</head>

<body>

<form>

<input type="checkbox" name="hobby" value="basketball">篮球

<input type="checkbox" name="hobby" value="football">篮球

<input type="checkbox" name="hobby" value="game">游戏

</select>

</form>

</body>

表单选择器

选择器匹配类型

$(":input") 所有的input，textarea，select和button元素

$(":text") 所有文本框

$(":password") 所有密码框

$(":radio") 所有单选按钮

$(":checkbox") 所有复选框

$(":submit") 所有的提交按钮

$(":image") 所有图像域

$(":reset") 所有重置按钮

$(":button") 所有按钮

$(":file") 所有文件域

例子在上面

鼠标事件

<body>

</body>

click() 单击事件

$(document).ready(function(){

$("#btn1").click(function(){

console.log("Asdfsd");

});

})

dblclick() 双击事件

$().ready(function(){

$('#btn1').dblclick(function(){

alert("asdf");

})

mouseenter()鼠标移动到元素之上获得事件，获得鼠标箭头

$(function(){

$("#btn1").mouseenter(function(){

console.log("尼莫挨老子");

});

})

mouseleave()鼠标移出元素之上事件失去鼠标头

$(function(){

$("#btn1").mouseleave(function(){

console.log("赶快滚懂不");

});

})

hover()

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函

数(mouseleave)

// 鼠标悬停光标悬停

$(function(){

$("#btn1").hover(function(){

$(this).css("color","red");

});

})

键盘事件

keypress() 键盘事件

$(function(){

$("input").keypress(function(e){

console.log(e.which);

})

keydown() 键盘按下

$(document).keydown(function(e){

alert(e.which+":我被摸了");

})

keyup 键盘松开

$(document).keydown(function(e){

console.log(e.which+":我不干净了");

})

表单事件

submit

change

focus()获得焦点事件，点击选中，tab键定位

$(function(){

$("#btn1").focus(function(){

$(this).css("background-color","red");

});

})

blur()失去焦点事件

$(function(){

$("#btn1").blur(function(){

$(this).css("background-color","white");

})

dom对象与jquery对象转化

dom转jquery：$(dom)

jquery转dom:jquery[i]或jquery.get(i);

$("#btn").click(function(){

var hs = $("input[name=hobby]:checked");

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

console.log(hs[i]);

console.log($(hs[i]));

// console.log(hs[i].value);

// console.log(hs.get(i).value);

// console.log($(hs[i]).val());

}

})

获得dom节点

<body>

<p>

</p>

</body>

text()-设置或返回所选元素标签内的文本内容

$(function(){

$("#btn").click(function(){

console.log($("p span").text());

$("p span").text("dddddddd");

console.log($("p span").text());

})

</script>

html()-设置或返回所选元素的内容

$(function(){

$("#btn").click(function(){

console.log($("p").html());

$("p").html("<span>jjjjjjjjj</span>");

console.log($("p").html());

})

val()-设置或返回表单字段的值

$(function(){

$("#btn").click(function(){

console.log($(":text").val());

$(":text").val("ssssss");

console.log($(":text").val());

})

获得兄弟节点

$(function(){

$("#btn").click(function(){

// prev()获取当前节点的前一个兄弟节点

console.log($("#p2").prev().html());;

// next()获取当前节点的后一个兄弟节点

console.log($("#p2").next().html());

// prevAll()获取当前节点前边的所有兄弟节点

$("#p3").prevAll().each(function(){

console.log($(this).html());

})

// 获取当前节点后边的所有兄弟节点

$("#p1").nextAll().each(function(){

console.log($(this).html());

})

// 获取当前节点的所有兄弟节点，包括该节点前边和后边的兄弟节点

$('#p2').siblings().each(function(){

console.log($(this).html());

})

</script>

</head>

<body>

</div>

</body>

获取当前元素的子元素，获取子元素

children():获得当前元素的所有子元素

$("#div1").children().each(function(){

console.log($(this).html());;

});

find(“”)获得当前元素的指定子孙元素

$("#div1").find("p").each(function(){

console.log($(this).text());

})

CRUD节点

</p>

</div>

添加节点

append在满足条件的元素内部的最后追加/插入新元素，匹配条件

appendTo将新元素追加/插入到满足条件的元素内部最后

$("#div1").append("<p>新段落</p>");

$("<p>新段落22222</p>").appendTo("#div1");

prepend在满足条件的元素内部的最前面追加新元素，插入，匹配条件

prependTo将新元素追加到满足条件的元素内部最前面，插入，匹配条件

$("#div1").prepend("<p>asdf</p>");

$("<p>sadfawewef</p>").prependTo("#div1");

after:表示在当前元素的后边插入新元素，满足

insertAfter:表示把新元素插入到当前元素的后面

$("#div1").after("<p>aaaaaaaaaaaaaaa</p>");

$("<p>00000000000000000000</p>").insertAfter("#div1");

before:表示在当前元素的前边插入新元素

insertBefore：表示把新元素插入到当前元素的前边

$("#div1").before("<p>7777777777777</p>");

$("<p>bowjifwojfowefoiw</p>").insertBefore("#div1");

clone:复制元素节点

var v = $("#p1").clone();

$("#div1").after(v);

替换节点

$(function(){

$("#btn").click(function(){

// replaceWith():表示把当前元素替换为新元素，方法左边是被替换元素，括号内的是新元素

// $("#li1").replaceWith("<li>new li</li>");

// replaceAll():表示用新元素替换当前元素，左边是新元素，括号里是被替换元素

// $("<li>new lixw</li>").replaceAll("#li2");

// replaceAll方法可以用新元素替换多个元素

$("<li>new lixw</li>").replaceAll("li")

})

</script>

</head>

<body>

<ul>

</ul>

</body>

移除节点

$(function(){

$("#btn").click(function(){

$("#li1").hover(function(){

$(this).css("color","red");

},function(){

$(this).css("color","black");

});

// remove():删除元素,也会删除该元素绑定事件等

// var li1 = $("#li1").remove();

// detach:删除元素，会保留该元素绑定的事件等

// var li1 = $("#li1").detach();

// $("ul").append(li1);

// empty:删除该元素的所有子元素

$("ul").empty();

})

</script>

</head>

<body>

<ul>

</ul>

</body>

修改样式

<style>

.color1{

color: red;

}

</style>

$(function(){

// addClass:添加样式

$("#btn1").click(function(){

$("#p1").addClass("color1");

})

// removeClass:删除类样式

$("#btn2").click(function(){

$("#p1").removeClass("color1");

})

// toggleClass：添加/删除类样式的切换操作

$("#btn3").click(function(){

$("#p1").toggleClass("color1");

})

// css可以设置当前元素的样式

// 提供了json格式的参数，可以设置多个样式，每个样式以键值对的格式定义，样式之间以英文逗号分隔

$("#btn4").click(function(){

// $("#p1").css("background-color","green");

$("#p1").css({"background-color":"yellow","font-size":"20px"})

})

setInterval(function(){

$("#p1").toggleClass("color1");

},500)

})

</script>

</head>

<body>

<button id="btn1">addClass</button>

<button id="btn2">removeClass</button>

<button id="btn3">toggleClass</button>

</body>

动画

<style>

div{

width: 200px;

height: 200px;

background-color: red;

}

</style>

$(function(){

// hide:隐藏，height、width、opacity(透明度)逐渐减小

$("#btn1").click(function(){

// $("#div1").hide("slow");

// 单位毫秒

$("#div1").hide(5000);

})

// show:显示

$("#btn2").click(function(){

$("#div1").show(5000);

})

// toggle：hide和show的结合

$("#btn3").click(function(){

$("#div1").toggle(5000);

})

// fadeOut:淡出、修改了opacity，当为0的时候，display：none

$("#btn4").click(function(){

$("#div1").fadeOut(5000);

})

// fadeIn:淡入，opacity，从o增加到1

$("#btn5").click(function(){

$("#div1").fadeIn(5000);

})

// fadeToggle：淡入淡出的切换

$("#btn6").click(function(){

$("#div1").fadeToggle(5000);

})

// slideUp:向上滑动，height从1减小到0，最后样式设置为display：none

$("#btn7").click(function(){

$("#div1").slideUp(5000);

})

// slideDown:向下滑动，height从0到1

$("#btn8").click(function(){

$("#div1").slideDown(5000);

})

// slideUp和slideDown互相切换

$("#btn9").click(function(){

$("#div1").slideToggle(5000);

})

// animate:自定义动画参数是一个json格式的字符串

$("#btn10").click(function(){

$("#div1").animate({

"margin-top":"50px"

});

})

</script>

</head>

<body>

<button id="btn3">toggle</button>

<button id="btn4">fadeOut</button>

<button id="btn5">fadeIn</button>

<button id="btn6">fadeToggle</button>

<button id="btn7">slideUp</button>

<button id="btn8">slideDown</button>

<button id="btn9">slideToggle</button>

<button id="btn10">animate</button>

</body>

5.bootstrap

错误录：

js找不到，静态资源找不到

静态资源要重启软件，重新加载静态资源才能读取到js中的东西

颜色：

淡灰

#eeeeee

#dadada

#e2e2e2

亮蓝色 aqua

不知名的帅比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
适合后端开发人员的html笔记

<h1></h1> 标题标签定义标题标题是通过<h1>-<h6>定义的例：<h1>这是一个标题</h1><h2>这是一个标题</h2><h3>这是一个标题</h3><p></p>段落标签定义段落例：<p>这是一个段落。</p><p>这是另外一个段落。</p><a><
复制链接

扫一扫