前端知识点总结

最新推荐文章于 2022-10-27 16:54:19 发布

沉陳辰

最新推荐文章于 2022-10-27 16:54:19 发布

阅读量243

点赞数

文章标签： html css jquery

本文链接：https://blog.csdn.net/chenhanch/article/details/108577746

版权

一、HTML

1、块级元素

块级元素:每一个块级元素占一行，紧跟的块级元素其在下一行，可以自己定义宽高、边距：
（1）独占一行空间；
（2）默认宽度为100%；
（3）高度由子元素或者内容决定；
（4）可以通过css为其指定宽度；
常见的HTML块级元素有:div,ol,il,h1~h6,p,table,form,noform,td等；

2、行内元素

行内元素:在同一行内可以有多个行内元素，紧跟第一个行内元素的后面，不可以自己定义宽高、边距，要靠内容撑起来：
（1）与其他行内元素共享一行空间；
（2）不能通过css为其指定宽高；
（3）宽高由内容决定，相当于内容的容器；
常见的HTML内联元素有:a,img,input,select,span,option,textarea等；

3、表格

< table>标签用于显示表格
< tr> 表示行
< td> 表示列又叫单元格

1、使用属性 border=“1” 能使表格加上边框

<table border=“1” width=“200px”></table>

2、设置td的属性colspan，能使表格水平合并

<td colspan=“2”></td>

3、设置td的属性rowspan，能使表格垂直合并

<td rowspan=“2”></td>

4、设置属性bgcolor，能给表格加上背景颜色

<tr bgcolor=“gray”>

5、< ul >实现无序表

<ul >
	<li>1</li>
	<li>2</li>
</ul>

6、< ol >实现有序表

<ol>
	<li>1</li>
	<li>2</li>
</ol>

4、表单

所有表单控件（如文本框、文本域、按钮、单选框、复选框等）都必须放在< form>< /form>标签之间。
< form method=“传送方式” action=“服务器文件”>< /form>

< form> ：< form>标签是成对出现的，以< form>开始，以< /form>结束。
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method ：数据传送的方式(get/post)。

< input>为表单的输入控件
根据input里的type的值来设置属性：

普通文本框：创建单行文本输入框

<input type="text" name="" value="" placeholder />

密码框：输入的内容会被隐藏

<input type="password" name="pwd" />

单选框：value属性中的值用来设置用户选中改项后提交到数据库中的值，拥有相同name属性的单选框为同一组，一个组里只能同时选中一个选项

<input type="radio" name="" value="" />

复选框：用户可以进行多个选项，其中value属性中的值用来设置用户选中改项目后提交到数据库中的值，name为复选框的名称

<input type="checkbox" name="" value="" />

提交按钮：提交按钮不需要设置onclick参数，在单击提交按钮时可以向服务器发送表单数据，数据会发送到表单的action属性中指定的页面，value属性中的值为按钮上显示的文字

<input type="submit" name="提交" />

普通按钮：在value属性中输入的值为按钮上显示的文本，name代表该按钮的名称

<input type="button" name="提交" value="提交" />

重置按钮：重置按钮的作用是点击之后表单会刷新回到默认状态，在value属性中输入的值为按钮上显示的文本

<input type="reset" value="" />

上传文件：用于从本地硬盘中上传文件并提交。

<input type="file" name="" />

图像按钮：将图片转为图片形式按钮，其中src是链接图片的路径，name为图片名称，width为图片宽度，height为图片高度，当按下图片按钮会以name中的值向服务器发送信息

<input type="image" src="图片URL" name="Yes" width="80" height="25" />
<input type="image" src="图片URL" name="No" width="80" height="25" />

< select> 为表单里的下拉列表，需要配合< option>一起使用
使用下拉列表框，节省空间
语法：

<selected>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</selected>

1.将选项二设置为未选择之前显示在框内的选项的方法：

<option selected="selected">选项二</option>

2.下拉菜单多选项的操作方法：在windows系统下，按住ctrl，点击，在Mac系统下，按住command，单击
语法:

<selected multiple="multiple">
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</selected>

5、常见标签

标签	描述	标签	描述
<!DOCTYPE>	定义文档类型。	< form>	定义供用户输入的 HTML 表单。
< html>	定义 HTML 文档。	< input>	定义输入控件。
< title>	定义文档的标题。	< textarea>	定义多行的文本输入控件。
< body>	定义文档的主体。	< button>	定义按钮。
< h1> ~ < h6>	定义 HTML 标题。	< select>	定义下拉列表。
< p>	定义段落。	< optgroup>	定义选择列表中相关选项的组合。
< br>	定义简单的折行。	< option>	定义选择列表中的选项。
< hr>	定义水平线。	< label>	定义 input 元素的标注。
< !–…-->	定义注释。	< fieldset>	定义围绕表单中元素的边框。
< b>	定义粗体文本。	< legend>	定义 fieldset 元素的标题。
< img>	定义图像。	< a>	定义锚。
< link>	定义文档与外部资源的关系。	< video>	定义视频。
< audio>	定义声音内容。	< ul>	定义无序列表。
< ol>	定义有序列表。	< li>	定义列表的项目。
< dl>	定义定义列表。	< dt>	定义定义列表中的项目。
< dd>	定义定义列表中项目的描述。	< table>	定义表格
< caption>	定义表格标题。	< th>	定义表格中的表头单元格。
< tr>	定义表格中的行.	< td>	定义表格中的单元。
< thead>	定义表格中的表头内容。	< style>	定义文档的样式信息。
< div>	定义文档中的节。	< span>	定义文档中的节。
< header>	定义 section 或 page 的页眉。	< footer>	定义 section 或 page 的页脚。
< section>	定义 section。	< head>	定义关于文档的信息。
< script>	定义客户端脚本。	< object>	定义嵌入的对象。

二、CSS

1、外联样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
外联样式表语法：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2、内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过

<head>
<style type="text/css">
body{
	background-color: red
}
p{
	margin-left: 20px
}
</style>
</head>

3、内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
内联样式语法：

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

4、选择器

①通配符选择器
html代码

<div>
	div标签 通配符选择器
</div>

css代码

div{
    width: 500px;
    height: 500px;
    background-color: red;
}

*{
    margin: 0;
    padding: 0;
}

②id选择器
html代码

<div id="demo1">
	id选择器
</div>

css代码

#demo1{
    color: red;
}

③类选择器
html代码

<div class="demo2">
	类选择器
</div>

css代码

.demo2{
    color: red;
}

④后代选择器
html代码

<div class="demo1">
	<p>1 Welcome to Join!</p>
	<ul>
		<li>
			<p>2 Welcome to Join!</p>
		</li>
		<li>
			<li>
				<p></p>
			</li>
		</li>
		<li>
			<p>3 Welcome to Join!</p>
		</li>
	</ul>
</div>
<p>4 Welcome to Join!</p>

css代码

.demo1 p{
    color: red;
}

⑤子元素选择器
html代码

<div class="demo1">
	<p>1 Welcome to Join!</p>
	<ul>
		<li>
			<p>2 Welcome to Join!</p>
		</li>
		<li>
			<p>3 Welcome to Join!</p>
		</li>
	</ul>
	<p>4 Welcome to Join!</p>
</div>

css代码

.demo1>p>ul>li>p{
    color: red;
}

⑥交集选择器
html代码

<div>Welcome to Join!</div>
<p>Welcome to Join!</p>
<p>Welcome to Join!</p>
<p>Welcome to Join!</p>
<p>Welcome to Join!</p>
<div class="red">Welcome to Join!</div>
<div class="red">Welcome to Join!</div>
<p class="red">Welcome to Join!</p>
<p class="red">Welcome to Join!</p>

css代码

div.red{
    color: red;
}

⑦并集选择器
html代码

<h1 class="title">
		我是标题
	</h1>
	<p class="text">
		我是段落
	</p>

css代码

.title,.text{
    color: red;
}

等等

三、JS

--------------待定---------------

四、JQ

1、入口函数

入口函数写法一：

$(document).ready(function(){
});

入口函数写法二：

$(function(){
});

jq入口函数和window.onload的区别：
区别1：jQuery入口函数可以书写多次，window.onload只能书写一次；
区别2：执行的时机不同，jQuery的入口，一旦dom结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成；而window.onload 的是等页面文档、外部的js、css、img加载完毕才执行内部代码。

2、内部插入

append(content|fn)：向每个匹配的元素内部追加内容，将content内容插入到匹配元素内容的最后

$("p").append("<span>appent</span>")

prepend(content)：将content内容插入到匹配元素内容的最前
appendTo(content) ：把所有匹配的元素追加到另一个指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

$("p").appendTo("div");
      $ ("<p>pppppppp</p>").appendTo("div").addClass("active");

prependTo(content) ：把所有匹配的元素前置到另一个、指定的元素元素集合中。

$("p").prependTo("div");

3、外部插入

after(content|fn) ：在每个匹配的元素之后插入内容

$("p").after("<span>after</span>");

before(content|fn) ：在每个匹配的元素之前插入内容

$("p").after( $("#id")[0] );
$("p").after( $("span") );

insertAfter(content) ：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

$("<span>insertAfter</span>").insertAfter("p");

insertBefore(content) ：把所有匹配的元素插入到另一个、指定的元素元素集合的前面

$("<span>insertBefore</span>").insertBefore("p");

after/insertAfter区别：

var $A = $("s1");
var $B = $("s2");
// 将$A插入到$B之后
$B.after( $A ); // 返回$B
// 将$A插入到$B之后
$A.insertAfter( $B ); // 返回表示插入内容的jQuery对象( 匹配所有$B之后插入的$A元素 )

4、包裹

wrap(html|element|fn) ：把所有匹配的元素用其他元素的结构化标记包裹起来。

$("p").wrap("<div class="wrap"></div>");
$("p").wrap(document.getElementById('content'));

unwrap() ：这个方法将移出元素的父元素。

 $("p").unwrap();

wrapAll(html|elem) ：将所有匹配的元素用单个元素包裹起来

$("p").wrapAll("div");

wrapInner(html|element|fn) ：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

$("p").wrapInner("<b></b>");
$("p").wrapInner(document.createElement('b'))

wrap/wrapAll/wrapInner区别：

wrap()：将这些被选中的节点各自都用进行包裹
wrapAll()：这个函数的作用是将所匹配到的节点统一到一起，使用一个元素来包裹，因此只包裹了一次。另外倘若所匹配到的节点并没有紧挨在一起，那么这个函数会将其他的节点迁移到第一个节点所在的位置，使之与第一个节点成为兄弟节点，然后进行包裹。
wrapInner()：用元素对内部的内容进行包裹。

5、替换

replaceWith(content|fn) ：将所有匹配的元素替换成指定的HTML或DOM元素

$("p").replaceWith("<b>replaceWith</b>");
   $("p").replaceWith(function(){
            return '<div>$(this).text()</div>';
        });

replaceAll(selector) ：用匹配的元素替换掉所有 selector匹配到的元素。

$("<b>replaceAll</b>").replaceAll("p");

6、删除

empty() ：删除匹配的元素集合中所有的子节点。

 $("p").empty()

remove([expr]) ：从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

$("p").remove();
$("p").remove(".remove");

detach([expr]) ：从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$("p").detach();
$("p").detach(".detach");

7、复制

clone([even[,deepEven]]) ：克隆匹配的DOM元素并且选中这些克隆的副本。
Even 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

$("b").clone().prependTo("p");//克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
$("button").click(function(){//创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
$(this).clone(true).insertAfter(this);
});

8、事件的绑定

对匹配元素进行特殊事件绑定
对于click、mouseover、mouseout这类常用事件类型，可简写减少代码量
eg：

$("#head").bind("click",function(){
});
$("#head").click(function(){
});

9、常用的事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

鼠标事件
click事件的定义和用法
当单击时触发click事件
出发被选元素的click事件：

$(selector).click()

添加函数到 click 事件：

$(selector).click(function)

dblclick事件的定义和用法
双击元素时触发dblclick事件
触发被选元素的 dblclick 事件：

$(selector).dblclick()

添加函数到 dblclick 事件：

$(selector).dblclick(function)

提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，则会产生问题。
Mouseenter的定义和用法
当鼠标指针穿过（进入）被选元素时，会触发 mouseenter 事件。
触发被选元素的 mouseenter 事件：

$(selector).mouseenter()

添加函数到 mouseenter 事件：

$(selector).mouseenter(function)

！提示：该事件通常与 mouseleave 事件一起使用。
注意：与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。
Hover的定义和用法
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数，触发 mouseenter 和 mouseleave 两个事件。
注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

$(selector).hover(inFunction,outFunction)

调用：

$(selector).hover( handlerIn, handlerOut )

等同：

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

注意：如果只规定了一个函数，则它将会在 mouseenter 和 mouseleave 事件上运行

键盘事件
Keypress的定义和用法
按下键盘触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
与 keypress 事件相关的事件顺序：
①keydown - 键按下的过程
②keypress - 键被按下
③keyup - 键被松开
keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
注意：keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。可以使用 keydown() 方法来检查这些键。
表单事件
Submit的定义和用法
提交表单时会发生 submit 事件，且该事件只适用于元素。
触发被选元素的 submit 事件：

$(selector).submit()

添加函数到 submit 事件：

$(selector).submit(function)

10、事件的冒泡

事件冒泡：事件按照DOM层次像水泡一样由下至上，点击内部元素，会触发其外部元素的事件
事件捕获：由上至下开始触发，jQuery不支持捕获，要用原生js。

事件对象（函数参数）
如果想阻止事件冒泡，想触发某元素事件，而不想触发其外部元素时间
事件对象只有处理函数时才能访问，函数执行完毕后事件对象被销毁

$(“#example”).click(function(event){ 
})

stopPropagation()方法：停止时间冒泡

preventDefault()方法:阻止元素的默认行为。
网页中的元素存在默认行为，如点击超链接会跳转，点击提交按钮会表单提交。

11、事件对象的属性

jQuery对事件对象的常用属性进行封装，可以兼容各种浏览器

event.type()方法：获取到事件类型
event.preventDefault()方法：阻止默认事件行为
event.stopPropagation()方法方法：阻止事件冒泡
event.target()方法：获取到触发事件的元素
event.relatedTarget()方法：获取到触发事件的相关元素
event.pageX()方法/event.pageY()方法：
event.which()方法：鼠标点击事件中获取到鼠标左中右键（1、2、3）键盘事件中获取键盘按键
event.metaKey()方法：键盘事件中获取按键
event.originalEvent()方法：指向原始的事件对象

12、自带的基础动画

一、隐藏/显示动画

hide()
show()
toggle()

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

二、淡入淡出动画

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

三、滑动动画

slideDown()
slideUp()
slideToggle()

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

13、自定义动画

$(selector).animate({params},speed,callback);

参数：

params 参数定义形成动画的 CSS 属性。
speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
callback 参数是动画完成后所执行的函数名称。

一、在一个元素上的动画效果：

同时执行（异步）：将所有动画写在一个对象中（一个animate）
顺序执行（同步）：
①回调函数（不推荐回调地狱）
②将所有动画写在多个对象中（多个animate）tip：可以链式调用√
二、在多个元素上的动画效果：

同时执行（异步）：默认的就是，正常写就行
顺序执行（同步）：回调函数

14、停止动画

$(selector).stop(stopAll,goToEnd);

参数：

stopAll 参数规定是否应该清除动画队列。默认是 false。
goToEnd 参数规定是否立即完成当前动画。默认是 false。

沉陳辰

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端知识点总结

前端知识点总结一、HTML1、块级元素2、行内元素3、表格4、表单二、CSS1、选择器①通配符选择器②id选择器③类选择器④后代选择器⑤子元素选择器⑥交集选择器⑦并集选择器创建一个表格设定内容居中、居左、居右新的甘特图功能，丰富你的文章UML 图表一、HTML1、块级元素块级元素:每一个块级元素占一行，紧跟的块级元素其在下一行，可以自己定义宽高、边距：（1）独占一行空间；（2）默认宽度为100%；（3）高度由子元素或者内容决定；（4）可以通过css为其指定宽度；常见的HTML块级元素有:d
复制链接

扫一扫