前端（HTML5、CSS、JS、JQ）学习笔记

最新推荐文章于 2024-03-30 21:07:42 发布

夏初末未始

最新推荐文章于 2024-03-30 21:07:42 发布

阅读量746

点赞数 3

文章标签： html5 css js jq

本文链接：https://blog.csdn.net/weixin_41530824/article/details/82261561

版权

前端

注意，非完整版，完整版请查阅上传的文件

https://download.csdn.net/download/weixin_41530824/10638918

HTML

C/S 客户端、服务端 client、server

桌面应用程序

1、使用前安装。

2、不能跨平台。

3、软将更新时，Client和Server要同时更新。

4、软件采用的是自有协议，比较安全。

B/S 浏览器、服务器 Browser、Server

1、使用前不需要安装，使用浏览器直接输入网址访问。

2、能够跨平台（靠的是浏览器）。

3、更新时，客户端无需更新。

4、采用HTTP协议，相对来说不安全。

PS HTML JSP

网页设计师前端工程师后台工程师

设计网页静态网页改为动态

文本：只能放文字

超文本：图片，视频，文本。

HTML

是超文本标语言Hyper Text Markup Language

标记语言是一套标记标签

标签不是直接显示的，是帮助浏览器解析网页的

Meta是元标签，对应了HTML的相关信息，客户端浏览器会根据这些信息进行处理

作用：搜索引擎优化

Link 标签定义了文档与外部资源的关系

Link常用于链接到样式表

头部可以放置哪些标签

meta、title、link、style、script

标题

注意：h1只能在网页中出现一次，前提是外面没有hgroup

段落

独占一行

<p></p>

<p>白日依山尽</p>

<p>黄河入海流</p>

<p>欲穷千里目</p>

<p>更上一层楼</p>

链接

title:定义元素的替换文本

target 属性

_blank:在新窗口中打开链接文档

_top:在整个窗口中打开被链接文档

_self:默认值在相同框架中打开被链接文档

我想在本网页的某个区域显示另外的网页

frameborder:是否显示边框默认显示边框 0代表不显示 1代表显示

列表

有序列表

<li>

无序列表

<ul> style="list-style-type: circle;" 和type="circle"作用一样

<li>

自定义列表

<dl>

<dt>成龙成龙

<dd>很帅很帅

图像

height与width属性用于设置图像的高度和宽度

alt属性用来为图像定义一串预备可以替换的文本

src:图片路径

title：鼠标放到图片上，提示文本

换行

<br />

水平线

<hr />

HTML区块

块级元素：以新行来开始和结束

实例:<h1> p ul table div

内联元素:不会以新行开始

实例:b td a img span input

注意：

div元素：块级元素可用于组合其他HTML元素的容器 div+css文档布局,独占一行

span元素:内联元素:用作文本的容器

检验方法：

表格

HTML表结构:从语义结构上划分表格为：表头、表主体、表尾

caption：表格的标题 <caption><h2>学生成绩表</h2></caption>

thead标签标识表格头部元素

<tr>

tbody标签标识表格表体元素

<tr>

tfoot标签标识表格表尾部分

cellpadding:表格中内容和单元格之间的距离

cellspacing:表格中单元格和单元格之间的距离

在默认情况下，如果不设置表格的边界，表格不显示边界的，可以用border属性设置表格边框 <table border="1">

HTML跨行和跨列

colspan:跨列(合并列）

rowspan:跨行(合并行)

下一个tr中相同的td省略

同理

颜色的设置（表头，标体和表尾的概念）

表单

form表单的属性

Name:表单的识别名称。通过表单的名称来辨认页面提交的是哪个表单的数据。

Action:处理表单程序的地址。action="index.html"(提交后的)

Method:将表单中的数据提交到服务器的方法。Method是常用的两个取值get和post

get方法：默认的一种传递数据的方法(查询用get)

特点：

通过地址传递表单中的数据

不能传递敏感信息，密码，泄漏

不能传递大量数据，每次1024字节

不能上传附件

post方法:不是通过地址传递数据,数据传给文件处理程序。（增删改用post）

特点：

相对安全

可以传递海量数据

能上传附件

示例代码：

表单元素

常用的元素类型type:

text:单行文本框 (用户名)

textarea:多行文本框

password:密码文本框

submit:提交按钮

image:图片按钮

reset:重置按钮，重设表单内容。

button:普通按钮

radio：单选框

hidden:隐藏元素

checkbox:复选框

file:文件域

select:列表框

使用上传必须改一下表单的enctype="multipart/form-data"

示例代码

form表单中enctype属性可以用来控制对表单数据的发送前的如何进行编码

form表单中enctype属性的三种类型:

application/x-www-form-urlencoded 默认类型

发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码

multipart/form-data不对字符编码，用于发送二进制的文件，其他两种类型不能用于发送文件
text/plain用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，一般用于email之类的

fieldset:对表单元素进行分组，一个表单里可以有多个

legend标签：对没组的内容进行说明

HTML5新特性

新的语义元素，比如 <header>, <footer>, <article>, and <section>。

新的表单控件，比如数字、日期、时间、日历和滑块

强大的图像支持（借由 <canvas> 和 <svg>）

强大的多媒体支持（借由 <video> 和 <audio>）

强大的新 API，比如用本地存储取代 cookie。

article：定义页面独立的内容区域。

aside：定义页面的侧边栏内容。

<header>:定义了文档的头部区域

<footer>:定义 section 或 document 的页脚。

<nav>:定义导航链接的部分

HTMLweb存储

cookie来做存储，就是最多只能存4kb数据

HTML5提供了两种在客户端存储数据的新方法:

localStorage:没有时间限制的数据存储

sessionStorage:针对一个session的数据存储,存储在当前页面的内存中，不是存在浏览器内容中, 存储容量在5m左右

sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后(当前页面),数据会被删除。

setItem(key,value):存储数据，以键值对的方式存储

getItem(key):获取数据，通过指定名称的key获取对应的value值

removeItem(key):删除数据，通过指定名称key删除对应的值

clear():清空所有存储的内容

统计在线人数

CSS

概念：css：层叠样式表（Cascading Style Sheets）

css可以分别为网页的各个层次设置样式

优势:内容与表现分离

网页的表现统一，容易修改

丰富的样式，使得页面布局更加灵活

减少网页的代码量，增加网页的浏览速度，节省网络带宽

运用独立于页面的CSS，有利于网页被搜索引擎搜录

基本语法

CSS由两个主要的部分构成：选择器，以及一条或多条声明

（选择器通常是您需要改变样式的 HTML 元素）

CSS声明总是以分号(;)结束，声明组以大括号({})括起来

实例：

p {color:red;text-align:center;}

样式

行内样式

表现和内容混杂在一起，行内样式会损失掉样式表的很多优势

用于仅对当前适用一次时，多个样式之间用(;)隔开

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表

外部样式

严格遵循就近原则！！！！！！！！！！！

文件中不能包含任何的HTML标签

样式表应该以.css扩展名进行保存

文本样式

text-align:设置文本水平对齐方式，常用值：
1. left
2. right
3. center
line-height:设置文本行高属性
text-indent：设置文本首行缩进
text-decoration:设置文本装饰

背景样式

链接样式

/*顺序：爱恨原则 LoVe HAte*/

遵循顺序（为了浏览器兼容）

a:link{}

a:visited{}

a:hover{}

a:active{}

列表样式

去序号

表格样式

如果需要把表格显示为单线条边框，请使用 border-collapse 属性

标签选择器

元素选择器，文档元素最基本的选择器

ID选择器

为标有特定ID的HTML元素指定特定的样式(独一无二)

Class选择器

给要添加样式的标签加上一个类名，关键字class

class选择器有别于id选择器，class可以在多个元素中使用

并集选择器

由逗号隔开的多个选择器应用同样的样式定义

后代选择器

多个选择器以空格分开，组合成包含关系

且右边的选择器从属于左边

即右边的选择器只能在左边的选择器范围内选择

此处定位到“家用家电”这列。

子代选择器

目标元素为匹配第一个选择器的元素的直接后代

且匹配第二个选择器用于选择指定标签元素的第一代子元素

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素

伪类选择器

属性选择器

对带有指定属性的 HTML 元素设置样式

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性

JAVAScript

脚本语言

不能独立运行
面向对象，有语句和java类似
有程序代码组成
解释语言，不需要编译，不需要指定类型
文本形式，类似于一种命令

简介：

优点：

快速开发、容易部署，大多数脚本语言都能够随时部署，而不需要耗时的编译/打包过程。

变量：

Js是一种弱类型语言，在定义变量的时候，不需要指定变量的类型，统一用var

对象：

属性和方法

属性是与对象相关的值。

方法是能够在对象上执行的动作。

JavaScript中的对象

属性：txt.length=5;

方法:txt.indexof() 返回某个指定的字符串中首次出现的位置

txt.replace() 字符串中用一些字符替换另一些字符

数组：

创建js对象

JSON

JSON 是轻量级的文本数据交换格式

JSON 比 XML 更小、更快，更易解析。

创建json对象

JSON对象

JSON 对象使用在大括号({})中书写。

key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。

每个 key/value 对使用逗号(,)分割。

json 对象和 json 字符串的区别：

使用for遍历循环数组

使用for in 遍历循环数组

删除数组元素

delete json2.hobby[0];

将字符串转换为JSON对象

eval()

把 JSON 文本转换为 JavaScript 对象

加载事件、

HTML DOM (文档对象模型)

查找 HTML 元素

通过 id 找到 HTML 元素 document.getElementById("txtName")

通过标签名找到 HTML 元素 getElementsByTagName("p");返回的是数组

通过类名找到 HTML 元素 document.getElementsByClassName("p1")

文档中的每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象。返回数组

getElementsByName() 方法可返回带有指定名称的对象的集合

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

document.getElementById(id).style.property=新样式

getAttribute方法只有一个参数，我们要查询的属性的名字

该方法不属于document对象

只能通过元素节点对象调用。比如与getElementById方法合用

DOM常用属性

nodeName 属性 :节点名称

nodeValue 属性：节点的值。

nodeType属性，可以使用nodeType属性来获取节点类型。

childNodes属性,任何一个元素的所有的子元素

firstChild、lastChild属性

DOM 动态创建节点

创建一个元素节点

createElement(“标签名”)

创建一个文本节点

createTextNode(“文本值”)

为元素节点添加子节点

appendChild()

插入节点

insertBerfore()

var reference = element.insertBefore(newNode,targetNode);

删除节点

var reference = element.removeChild(node);

正则表达式

正则表达式，又称规则表达式。

通常被用来检索、替换那些符合某个模式(规则)的文本。

数据发送到数据库前进行的验证，是否符合规范。

第一步

第二步

第三步

注意：

动态添加员工

第一步，表单验证，获取输入框，正则表达式验证

第二步，添加员工，

获取用户的输入的值，

创建一个员工对象来存值

创建元素节点

分别append相应的位置

JQuery

简介

Jq是js的类库

理念: 写得少, 做得多.

特点：兼容各大浏览器

用前需要导入类库

页面加载事件的区别

JQuery对象

Jq的对象是jq独有的，jq只能使用jq的方法，同理dom也不能使用jq 的方法

但是两者可以互相转化

Dom和jq对象展示

互相转化问题

改变p标签内容

$(document).ready()和Window.onload区别

执行事件不同
1. window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
2. $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
编写个数不同
1. window.onload不能同时编写多个，多个时执行最后一个
2. $(document).ready()可以同时编写多个，并且都可以得到执行
简写方法
1. window.onload没有简化写法
2. $(document).ready(function(){})可以简写成$(function(){});

4、$(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高 Web 应用程序的速度。

选择器

基本选择器

JQuery选择器基于元素的Id、类型、属性、属性值等(查找或选择)HTML元素。

它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

ID选择器

隐藏元素、显示元素、设置样式、增加单击事件,设置用户名和清空年龄

类选择器

（包括设置多个css样式）

标签选择器

通配符选择器

设置多个元素

层次选择器

后代元素、子元素、相邻元素和同辈元素等

1、$("ancestor descendant") 选取ancestor元素里的所有后代元素

例：$("div span") 返回div里所有<span>元素

$(".container p")返回class为container的所有p元素。

2、$("parent>child") 选取parent元素下的child子元素

例:$("div>span")选取<div>元素下的元素名是<span>的子元素。

$("#main> *")选择id值为main的所有子元素。

3、$("prev+next")选取紧接在prev元素后的next元素

例:$(".one+div")选取class为one的下一个<div>同辈元素。

$("#prev~#div1 ")选择id为prev的元素后面所有id为div1的div同辈元素。

过滤选择器

主要是通过特定的过滤规则来筛选出所需的DOM 元素

过滤规则与css 中的伪类选择器语法相同，即选择器都以一个冒号（：）开头。

按照不同的过滤规则，过滤选择器可以分为：

基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

基本过滤选择器

1、:first

示例:$("p:first") 选取第一个<p>元素

2、:last

示例：$("p:last") 选取最后一个<p>元素

3、：even

示例:$("tr:even") 所有偶数<tr>元素

4、：odd

示例:$("tr:odd") 所有奇数 <tr> 元素

5、eq(index)

示例:$("ul li:eq(3)") 列表中第四个元素(index从0开始)

6、:gt(no)

示例:$("ul li:gt(3)") 列出 index 大于 3 的元素

7、:hidden

示例: $("p:hidden") 所有隐藏的 <p> 元素

8、:visible

示例:$("table:visible")所有可见的表格

9、[attribute]

示例:$([href]) 所有带有href属性的元素

10、[attribute=value]

示例:$([href='#']) 所有 href 属性的值等于 "#" 的元素

11、[attribute!=value]

可视化过滤器

属性过滤器

$("input[id][name$='man']") 可以使用多个属性进行联合选择，

子元素过滤选择器

表单选择器

利用表单选择器，能够极其方便地获取到表单的某个或某些类型的元素

元素选择方法

可以使用next（）方法来代替$（＇prev + next＇）选择器

nextAll（）方法来代替$（＇prev～siblings’）选择

siblings()方法来补充nextAll()方法的不足

选择方法

JQueryDOM

查找元素节点

通过jQuery选择器，直接可以获取到节点元素。

例1：查找元素节点p返回p内的文本内容$("p").text();

查找节点属性

获取到需要的元素节点后，可以使用attr()方法来获取它的各种属性值。

attr()方法的参数可以是一个，也可以是两个，当参数为一个时，是要查询的属性名字。（一个是查询，两个是修改）

DOM创建节点

创建元素节点使用Jquery的工厂函数$()来完成

该方法会根据传入的html字符串返回一个DOM对象

并将DOM对象包装成一个JQuery对象后返回

$li1=$("<li></li>")//直接在里面写html语句就行

DOM插入节点

append() 向每个匹配的元素内部追加内容
appendTo()将所有匹配的元素追加到指定的元素中。

将A 追加到B 中。

prepend() 向每个匹配的元素内部前置内容
prependTo() 将所有匹配的元素前置到指定的元素中。
after() 在每个匹配的元素之后插入内容
insertAfter() 将所有匹配的元素插入到指定元素的后面。
before() 在每个匹配元素之前插入内容
insertBefore()将所有匹配的元素插入到指定的元素的前面，

注意：

DOM删除节点

jQuery 提供了三种删除节点的方法，即remove(), detach()和empty()。

remove()方法从DOM 中删除所有匹配的元素

$("ul").remove();

empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。

DOM修改节点

修改文档中的元素节点可以使用多种方法:复制节点、替换节点、包裹节点。

复制节点$(element).clone()

能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为

替换节点$(element被替换的元素).repalcewith()、$(element).repalceAll()

replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM 元素。

replaceAll()方法与replaceWith（）方法的作用相同，只是颠倒了replaceWith（）操作

包裹节点$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()

包裹节点有三种实现形式：wrap();wrapAll();wrapInner();

wrap()方法如下：$(dstelement).wrap(tag);
wrapAll()方法如下：$(dstelement).wrapAll(tag);
wrapInner()方法如下：$(dstelement).wrapInner(tag);

DOM元素的属性操作

Dom元素的其他操作:属性操作、样式操作、设置和获取HTML,文本和值、遍历节点操作、Css-Dom操作

1、属性操作attr()和removeAttr()
(1)attr()方法能够获取元素属性，也能能够设置元素属性。

(2) removeAttr()方法用于删除特定的属性，方法是在参数中指定属性名。

CSS操作

css()方法用于获取、设置元素的一个或多个属性。

对于高度和宽度的操作，jQuery提供了height()和width()方法直接获取和设置(都可以)。

设置和获取HTML、文本和值

html()方法获得或设置某个元素的html元素。(可以获取，可以设置)

text()方法获得或设置某个元素的文本值。

val()方法获得或设置某个元素的值，如果元素值是多选则以数组形式返回

例：在下拉框下的多选赋值应用

Checkbox和radio设置被选中打印时的区别

DOM样式操作

设置样式和获取样式

class 也是节点元素的属性，因此获取class 和设置class 都可以使用attr()方法来完成。

追加样式

移除样式

判断是否含有某个样式

hasClass()方法可以用来判断元素中是否包含某个class，如果有则返回true，否则返回false。

DOM加载事件

使用Javascript时候使用的是window.onload方法，而Jquery使用的是$(document).ready()方法

$（document) .ready（）方法和window.onload 方法之间的细微区别：

事件绑定

元素绑定事件完成某些操作

则可以使用bind（）方法来对匹配元素进行特定事件的绑定

bind(type,[data], fn);

unbind()方法为元素取消事件绑定，unbind()方法的格式如下：

$(selctor).unbind([type],[data]);

unbind()方法是元素bind()方法的反向操作，从每个匹配的元素中删除绑定的事件。

当没有参数时候删除所有的绑定事件。

bind()方法可以为任何元素绑定事件。

常用的事件，jQuery还提供了更加简便的事件方法来完成相就的操作

合成事件

jQuery 有两个合成事件hover()方法和toggle()方法

hover()方法和toggle（）方法都属于jQuery 自定义的方法。

hover（）方法

toggle()方法

按钮自动消失

显示和隐藏

show（）方法和hide（）方法是jQuery 中最基本的动画方法。

为一个元素调用hide()方法，会将该元素的display 样式改为“none''

当把元素隐藏后，可以使用show（）方法将元素的display 样式设置为先前的显示状态（ “block ”或“ inline ”或其他除了“none ”之外的值，说明可以改变很多值的显示状态）。

元素慢慢地显示出来，可以为show（）方法指定一个速度参数，

指定一个速度关键字“ slow 、normal、 fast”。应时间为0.6秒、0.4秒和0.2秒

也可以("p").show(1000);

也能添加回调事件函数。

夏初末未始

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端（HTML5、CSS、JS、JQ）学习笔记

前端注意，非完整版，完整版请查阅上传的文件https://download.csdn.net/download/weixin_41530824/10638918HTML C/S 客户端、服务端 client、server 桌面应用程序 1、使用前安装。 ...
复制链接

扫一扫