Web前端学习笔记

tech2024-06-07 62

Web前端学习笔记

2020-9-3整理 2019-9月-19学完作者:小宇

HTML 基础知识

互联网中的三大基石

Html (HyperText Markup Language) 超文件标记语言

Http (HyperText Transfer Protocol)超文本传输协议

Url (Uniform Resource Locator) 统一资源定位符

HTML、CSS、JS之间的关系

如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有Javascript、CSS是个毁容的植物人

HTML 的作用

HTML是一种专门对网页信息进行规范化展示的语言，把网页的信息格式化展现的语言

基本标签一

HTML中 <meta charset="utf-8" />标签的作用

将网页的字符集设置为 UTF-8

<head>标签和<body>标签的作用：

<head> 标签代表了浏览器的头部. 修饰头部的写在 head 中

<body> 标签代表了浏览器的身体. 修饰身体的写在body中.

标题弄标签常用的属性

水平线

常用属性：

align =”center” 水平居中 color =”red” 颜色设置为红色 Width = “500px” 宽度设置为 500px Size =20 px 设置水平线的高度.

基本标签二

<h1> ~ <h6> :用于设置文本的样式. 每个标签占一行.字体加粗逐渐变小   空格符 <br> 换行符 <pre> 预文本标签将输入在 pre 标签中的内容原样不动的显示在浏览器中.

小标签

<u> 给字体添加下划线 <b> 给字体添加加粗效果 <i> 添加倾斜的效果 <del> 添加删除线的效果 <small> 字体变小的标签 <big> 字体变大的标签 <sup>/<sub> 添加字体的上下标 2<sup>3</sup> = 2³ log<sub>2</sub> = log₂ <font face:”宋体”> 字体标签 face:设置字体的风格. //列表标签 (1.有序标签 2.无序标签 3.自定义标签) <ol type =”a”> 有序标签 <li> 这是子标签<li> <ol> 设置从 a 开始排序 <ul> 无序标签子标签<li> <dl> 自定义标签 <dt>java</dt> 设置java为一类 <dd>javaSE</dd> <dd>javaEE</dd> <dd>javaME</dd> <marquee> 跑马灯设置文字滚动的效果超链接标签的用法 <a href="body常用标签.html">小标签</a> 指向本地资源 <a href="http://www.baidu.com">百度首页</a> 指向网络资源 <a name="top" href="#bottom">返回底部</a> 返回底部设置返回底部锚点时,需要给返回的位置的标签设置name,返回在超链接中 #name,单击即可到达超链接的位置.

target="_blank" 设置在新网页中打开.

图片标签网络路径相对路径绝对路径

图片常用属性：

<title> 设置鼠标移动到图片上显示的文字 <height> <width> 设置图片的长宽若只改变个,另一个等比例自动改变. <border> 设置网页的边框 <alt> 设置图片加载错误后显示的文字 <align> 设置图片的水平位置 ,但是需要一个参照,不然没有效果. 表格标签 table>tr*3>5*th 快捷生成一个 3行5列的表格. tr 行标签 td 列表签 th 列标签一般作为表头使用,th 中的内容自动居中加粗. Bgcolor : 设置表格的背景色. <td Rowspan =” 2”> : 设置列标签占2列 <tr colspan =” 2”>: 设置列占2行表格会对内容自适应,如果没有内容表格将会很小. 表单标签

action : 表单体检的地址.可以是本地的也可以是网络的.

使用csdn搜索案列.

常用表单项的属性账号: <input type="text" name="zh" value="123" /><br/> 密码: <input type="password" name="psd" value="123" /><br/> 男<input type="radio" name="sex" value="1" /> 女<input type="radio" name="sex" value="0" /><br /> 中国<input type="checkbox" checked="checked"/> 美国<input type="checkbox" /><br /> <select name=""> <option value="1">吸烟</option> <option value="2" selected="selected">烫头</option> </select><br />  <textarea rows="13" cols="15">这是默认值</textarea><br /> <input type="file" name="file" id="file" value="file" /> <input type="hidden" /> 隐藏域 type=”button“ 和 type=”submit“的区别

Button 只是普通的按钮.

Submit 是可以提交数据的按钮，通常用于表单中。

IFrame 标签

在一个网页中嵌套另一个网页. 让网页在 iframe 框架中显示.

<ul> <li><a href="http://www.baidu.com" target="ifr">百度</a></li> <li><a href="http://www.taobao.com" target="ifr">淘宝</a></li> <li><a href="http://www.jd.com" target="ifr">京东</a></li>  <iframe width="1200" height="800" name="ifr" src="http://www.baidu.com"></iframe> </ul> Src : 默认显示的地址.

效果图：

Nosesize = “nosesize” 设置为不可变动 Iframe 是在网页中嵌套另一个网页, 而frameset 是对网页进行划分. <frameset rows="10%,*,15%" > <frame src="up.html" noresize="noresize" /> <frameset cols="20%,*"> <frame src="left.html"/> <frame src="right.html" name="rig"/> </frameset> <frame src="down.html"/> </frameset>

get 和post 的区别：

Get:

参数会依附于url地址.利用get方式提交数据,数据的长度有限制.利用get方式提交数据,是不安全的.

Post:

请求不会依附于地址利用post处理参数不受限制Post提交数据比较安全

div 标签[^简单来说就是一个容器。 ]

HTML5相比HTML4的区别去除了HTML4中不常用的标签HTML5新增了一些语义标签功能强大

HTML5 增强标签

<form action="" method="get"> 邮箱: <input type="email" name="eam" placeholder="请输入邮箱地址!" autofocus="autofocus"/> <br/> 数字: <input type="number" max="25" min="10" /><br/> 文本: <input type="text" maxlength="5" minlength="1" /><br/> 日期: <input type="date" /><br/> <input type="range" /><br/> 滑动条颜色: <input type="color" /><br/> <input type="month" /><br/> <input type="submit" /> <input type="reset" /> </form> 新增的结构标签的作用

和 div一样的效果,可以代替div 使用,但是一般还是使用div.

音频标签

<audio controls="controls"> <source src="/H5/img/程佳佳 - 山楂树之恋.flac""></source> 浏览器版本过低,请升级后再打开!!! </audio>

视频标签

<video src="/H5/img/00a发刊词：为什么人人都要懂点犯罪心理学？.mp4" controls="controls"> 浏览器版本过低,请升级后再打开!!! </video>

视频标签的使用

Embed 可以添加为视频,也可以是音频. <embed src="/H5/img/00a发刊词：为什么人人都要懂点犯罪心理学？.mp4" controls="controls" > </embed>

绘图标签和其他标签

相当于 select option 标签, 但是details 中可以放很多不同的标签.更加灵活.

<details >  <summary>点击打开下拉框</summary> <img src ="img/QQ.png" /> <p> 使用<qq></qq></p> 点击打开 </details>

刻度标签

Max: 设置刻度标签的最大值 Min: 最小值 Low: 最低界限 (低于变色) High: 最高界限 (高于变色) Value: 设置标签的当前值 <meter max="100" min="0" value="20" low="30" high="70"> </meter>

CSS 基础知识

CSS 的作用

CSS灵活多变，能够指定的样式类型除了通用的颜色、字体、背景等等，还可以控制字符间距、填充距、大小等等，显示出了强大的定义能力。可以将所有有关文档的样式指定内容全部脱离出来，在行定义、在标题中定义，甚至作为外部样式文件供HTML调用。

引入CSS样式

内联样式只能使用于当前网页外联样式相当于独立出来的css样式,可以用于多个HTML行内样式只能用于此标签行,会产生大量的代码.导入样式(不推荐使用.) <head> <meta charset="utf-8"> <title>引入css样式</title>  <style > span{ color: yellow ; font-size: x-large; } </style> </head> <body>  <p style=" color :red ; font-size: initial; "> css 行内样式的使用 </p> <span > css 内联样式的使用 </span> <link rel="stylesheet" type="text/css" href="css/c1.css"/> <p> 外联样式的使用</p> </body>

CSS选择器

优先级： ID 〉 lass 〉标签〉通用选择器

通用选择器: 可以适用于所有的标签.

元素/标选择器：可以对一类元素进行设置

ID 选择器：对单个标签进行设置

类选择器：可以对多个不同的标签进行设置

子选择器和后代选择器的区别

后代选择器会将父元素中的某一种的所有子元素进行设置.

子选择器父元素的某一种第一代子元素进行设置

CSS常用属性

Font-size : 12px 设置字体大小 Font-wight：bold 字体加粗 Font-family ：宋体设置字体样式 Text-decoration: none 去除下划线 Text-align :center 设置字体水平居中 Line -height ：40 px Background-img: url(网络地址) Background-repeat : no-repeat 设置图片不重复 Background-position : center 设置位置居中 ` background-size : 200px 300px 设置宽高的长度 Background-color : rgb(255,0,0,.0.5) 0.5 是设置不透明度. Opacity :设置内容的整体透明度 Display:block 将行内元素块级元素 Inline 块级元素行内元素 Float:left 设置浮动到左侧 Padding-left:15px 设置内间距为15px

当行号和容器的高度相同时，字体会自动垂直居中。

CSS 中的定位

绝对定位: absolute 定位离开之后释放之前的位置基于外层父级标签来说

相对定位: relative 定位离开之后之前位置不释放基于之前的位置而言

固定定位: fixed 始终是基于浏览器的左上角定位适合做广告

默认定位 :static 初始化定位的操作

盒子模型

margin: 50px 40px 30px 20px;

给容器设置外边距可以有四个参数参数以顺时针进行设置.

padding 和 margin 的特点和特性是什么

margin 是设置外部的间距

padding 设置内部的间距

JS基础知识

JavaScript的特点

脚本语言是一种简单的程序，是由一些ascll字符构成，可以使用任何一种文办编辑器编写。一些程序语言（如 C，C++，java 等）都必须能经过编译，将源代码变异成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只有一个与其相适应的解释器就可以执行。

脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会吧程序代码翻译成可执行的格式。

JavaScript的作用

HTML+css 只是可以实现静态的页面无法实现动态的效果。表单的效验背景图片的更换操作节点的信息。

缺点：

各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的浏览器在浏览同一带有JavaScript 脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。

JS的声明和引入

注意： javascript的引入方式不可以综合书写

javaScript 标签的type="text/javascript"属性和charset="UTF-8"属性的作用

charset 的作用：

设置字符集，防止出现乱码。

type=“text/javascript” 的作用：

指定类型写不写都可以。

JS中的变量

区分大小写，命名规则和Java一致，但是可以重复声明变量。写表达式结束可以把分号省去

数据类型

NAN这种数据类型

不是一个数字，将非数字类型的字符，转换成数字造成的。

列如： number（“123a”）

undefined这种数据类型

只是定义没有赋值就使用的变量

列如： var aa;

JS中的运算符

””和”=”的区别

等值符：

如果类型一致，直接比较内容

如果类型不一致，则两者都转换为number在进行比较

等同符

类型不一致直接返回flase

JS 的控制语句

if (){} 和if(){} else if(){}…else{}的区别

if(条件){ 内容 } else if (条件){ 内容 }else{ 内容 }

JS函数

声明方式 3种 function demo(a){ console.log(a) } var m =function(){ alert("55"); } var s =new Function("alert('77')");

注：双引号中使用单引号。

函数执行符 return 返回函数的返回值，如果函数没有返回值，将返回undefined。 console.log（）将内容输出在浏览器的控制台上。 document.write() 将内容输出在浏览器页面上。 Date和Math对象 var date = new Date(); document.write(date.getDate()+"<br />") document.write(date.getDay()+"<br />") document.write(date.getMonth()+"<br />") document.write(date.getFullYear()+"<br />") document.write(date+"<br />")

Math对象常用的方法：

var m = Math.random(); console.log(m) console.log(m*1000) console.log(Math.floor(m*1000))

JS中String

var b = new String("bjsxt" +"<br/>"); document.write(b.charAt(1)+"<br/>"); document.write(b.indexOf("sxt")+"<br/>") document.write(b.substr(2,3)+"<br/>") document.write(b.substring(2,3)+"<br/>") document.write(list.split("-"))

eval() 方法

将字符串转为对象

var a = "var b= 123" eval(a)

Array对象

JS中的数组下标是否可以不连续

创建Array对象的四种方式：

var arr =new Array() //此时数组的长度为0，没有内容 var arr =new Array(5) //此时数组的长度为5，没有内容（empty） var arr =[1,2,3,4,5] //此时数组的长度为5，有内容（1,2,3,4,5） var arr =new Array(1，2，“3”，new Date（）)

JS中数组的长度是可变的

arr.length =10; 此时就把数组改变为长度为10了。

JS中数组的遍历方式

for（）循环 for（var a in arr ）加强for循环

JS中数组的常用方法

var arr =[1,2,3,4,5] arr.push("wo "); arr.pop(); arr.shift() arr.unshift() 重点记忆： arr.splice(1,2) 从下标为1开始删除 2个元素 arr.splice(1,0,"哈哈") 向下标为1 添加 “哈哈”

JS中的事件

onabort 图像加载被中断 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onerror 当加载文档或图像时发生某个错误 onfocus 元素获得焦点 onkeydown 某个键盘的键被按下 onkeypress 某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标从某元素移开 onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击 onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit 提交按钮被点击 onunload 用户退出页面

DOM对象和BOM对象的关系

BoM包含DOM。

BOM对象中包含的对象内容

Historynavigatordocumentlocationscreen

蓝色框内是归DOM管的，红色框内归BOM管的；也可以说DOM 也是归BOM管的

常见的弹框方式

window.alert("这是一个框的") window.confirm("这是两个按钮的") window.prompt("请输入内容：","例如：李白") 带有输入框的弹窗。

setTimeout和setInterval的区别

setTimeout("f4()",1000) 执行一次 f4()函数在1S后 setInterval("f4()",1000); 执行多次 f4()函数间隔1S。

open方法的作用和使用场景

window.open("http://www.baidu.com"); 打开一个网页 window.close(); 关闭当前网页。

location对象中常用的方法

var href = window.location.href ; var host = location.hostname ; var port = location.port ; var url =location.URL;

window.history.go(args); args值分取 0 , 2 , -2 的含义

0: 刷新当前网页

2：前进两个网页

-2：退后两个网页。

获得屏幕的分辨率

var wid = screen.width var len = screen.height alert("宽度为："+wid+"长度为："+len)

DOM结构节点类型

元素节点 element node 属性节点 attribute node 文本节点 text node

节点之间的关系

父子关系（parent-child）：<html> 元素作为父级， <head> 和 <body> 元素作为子级兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系

我们都可以操作DOM对象的哪些内容?

1.查询元素（进行操作元素、或者元素的属性、文本）

2.操作文本

3.操作属性

4.操作CSS样式（一个特殊的属性style）

5.操作元素

DOM编程获得元素的方式

获得id 名称为 inw2的所有元素对象

document.getElementsById =”inw2”

获得当前节点对象的下一个节点对象，不包含空白节点元素 var node = Document.getElementsById =”inw2” node.nextSibling；间接获得对象的方式首先获取父节点 var node = Document.getElementsById =”inw2” 获取子节点 node.childNodes 操作元素属性直接获取 var inp1 = document.getElementById("t1"); var ty= inp1.type; 间接获取 var inp1 = document.getElementById("t1"); var ar = inp1.getAttribute("value"); 操作元素属性的方式 inp1.value =哈哈哈; 将value的值修改为哈哈 var ar = inp1.getAttribute("value"); inp1.setAttribute("value","hahahah") 将value的值修改为 hahah js的方式在获得元素css样式的时候有什么缺点只能获取行内标签的style样式的属性。 innerHTML和innerText的区别 innerHTML 获得的是标签中的所有内容，包括空白和其他子标签 innerText 获取的是标签中的文本内容 innerHTML 会识别HTML标签，但是innerText 不会识别HTML标签。 select、textarea 这两个标签如何取值只能获取它们的value 属性，不可以使用 innerHTML 和innerText获取。使用appendChild()方法的时候是追加到指定元素的什么位置? 当前标签的最后的位置。请问replaceChild(arg1,arg2)在使用的时候参数的含义是什么? 使用 arg1元素，替换arg2元素。请问如何删除一个节点对象 remove（）删除当前节点，以及子节点 removeChild（）删除子节点。

表单元素操作

readonly和disabled的区别

相同点：可以看到数据，但是无法修改数据不同点：readonly（只读）：可以将数据提交到后台 Disabled（不可用）：数据不会提交到后台

使用JS提交表单的方式

document.getElementById("f1").submit(); <form action="" onsubmit="return lea() " id="f1">

使用js 产生一个4位随机数验证码

/********验证码生成********/ function yzm(){ ran = Math.floor(Math.random()*10000); if(ran<1000){ ran = Math.floor(Math.random()*10000); } var yzm1 = document.getElementById("span_yzm"); yzm1.innerHTML = ran; }

Js中判断性别是够选择

jQuery的学习

$的作用和意义 1. 相当于window.onload = function(){} 2. 功能比 window.onload更强大， Window.onload一个页面只能写一个，但是可以写多个$（）而不冲突 Window.onload要等整个页面加载完后在执行（包括图片，超链接，音视频等）但$的执行时间要早完整形式 $(document).ready(…);

window.onload 的作用是什么？和Js中的onload事件有什么区别？

都是页面加载时执行的事件。但是 window.onload在一个页面中只能执行一次。

$(“tr:odd”).css(“background-color”,“red”); 代码的含义

将 tr标签为奇数的背景颜色设置为红色。

jQuery的选择器

JS对象和JQ对象之间是如何相互转化的

var t = $("#tex"); 首先通过id 回去 jq对象（这里获取的是数组） alert(t[0].value); t[0] 这里将 jq对象—》js对象，可实用js方法。 var ty = document.getElementById("tex"); 这里是js 对象 var ty1 =$(ty); 这里将js –》 jq对象。

常用选择器

Id选择器标签选择器 class 类选择器 //使用id获取元素 var t = $("#tex"); alert(t[0].value); alert( tt.length); //通过类型获取元素 var tt =$("input"); //通过类获取元素 var pw = $(".pwd"); alert(pw.length);

html() text() 和 val()方法之间的区别

.html()是用来读取元素的HTML内容（包括其Html标签）对应js中的innerHTML html()方法使用在多个元素上时，只读取第一个元素 .text()用来读取元素的纯文本内容，包括其后代元素对应js中的innerText text()方法不能使用在表单元素上如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。 .val()是用来读取表单元素的"value"值　　 val()只能使用在表单元素上 val()方法使用在多个元素上时，只读取第一表单元素的"value"值

后代选择器和子父选择器的区别

后代选择器会选择所有的某一种标签。字符选择器只会选择直接自带的某一种标签。 $("div span").css("background-color","red"); 后代选择器 $("div>span").css("background-color","green"); 父子选择器

prev + next 选择器在使用的时候需要注意什么

必须是相邻的元素，中间不能相隔任何元素比如<br/>

prev ~ next 这个选择器的作用

选择后面所有的同级的next元素。

获得ul中所有下标(0开始)为奇数的li对象

$("ul li :even").css("background-color","red");下标从0开始，表面为奇

$(“ul li:lt(4)”).css(“color”,“green”);这个选择器的含义是什么？

$("ul li :gt(1)").css("background-color","blue"); 所有下标大于1的 $("ul li :lt(1)").css("background-color","blueviolet"); 小标小于1的

获得input标签中name属性名字包含a 的标签对象

$("input[name*=a]").css("background-color","green");

$(“input[type=text][name^=z]”)选择器的含义

Input标签中type是text类型的，且 name以z开头的。注：如果两个条件中间有 “，”逗号，则是或的意思

$(“input:disabled”)这个选择器的作用是什么？

选择input 中有disabled 属性的标签。

$(" : i n p u t ") 和$ (“input”);这两个选择器的区别是什么

$(“:input”): 获取表单中的所有标签。 $(“input”) ：获取所有input 标签。

JQ获得方式和JS获得方式之间的差异

使用js获取只能获取行内样式。而jq 样式获取可以获取各种方式设置的样式.

通过增加class的方式给指定元素增加样式

dv1.attr("class","text"); #第一种 dv1.addClass("text"); #第二种

attr(“value”)和val()的区别

attr(“value”): 获取的是 value 默认的值,不会随value 的改变而改变. val() :获取的是value 实时的值,会随value 的值的改变而改变.

操作元素的属性有几种方式

两种: 一种是一次只操作一种属性. tt.attr("value","被修改的值"); 另一种是一次操作多个属性(json方式操作). tt.attr({'value':'哈哈哈', 'type':'button'})});

attr(“checked”)和prop(“checked”)这两个操作方式有什么区别？使用场景是什么？

attr(“checked”):获取的是checked的内容 “checked” prop(“checked”):获取的结果是 true 或 false .

html()和text()在获得值得时候两者的区别

Html():赋值时,可以识别 html标签,可以操作标签以及标签中的内容. Text():赋值时,不能识别 HTML标签.只能操作文本内容

val()和html()在赋值得时候两者的差异

Val():一般用于操作单标签的值. Html():操作双标签中的所有内容,可以识别标签.

appendTo 和append两个方法之间的区别

两个方法效果一样. d.append(b); 向d中添加 b(在末尾) b.appendTo(d); 把 b添加在d 中(在末尾)

before和after的使用场景

同级之间的添加. b.insertBefore(d); 把 b添加到d之前(同级之间) d.before(b); 同上

replaceAll(“div p:nth-child(5)”);代码是什么意思？

but.replaceAll($("div span:nth-child(1)")); but替换div中第一个span标签

replaceWith()和replaceAll()方法之间的区别

两者效果一样.使用方式有些区别 $("div span:nth-child(1)").replaceWith(but); but.replaceAll($("div span:nth-child(1)"));

remove()和empty()之间的区别

div.empty(); #清空div 中所有的内容. div.remove(div); #删除div这个元素

事件处理

bind() 事件的作用和使用场景

由于绑定事件,可以绑定多个事件. $("#bu1").bind({ 'click':function(){alert("单击事件")}, })

请说出trigger()这个事件的作用和使用

单击按钮2时, 触发按钮1和按钮3的单击事件. $("#bu2").click(function(){ $("#bu1").trigger("click"); $("#bu3").trigger("click"); })

解绑一个对象上的所有事件以及单个事件

$("#bu1").unbind(); 解绑按钮1的所有事件. $("#bu1").unbind('click'); 只解绑单击事件

live这个方法是解决什么问题的

现在不用了. 以前用于解决使用$() –jQuery 方式创建的标签无法绑定事件.

动画功能

var div1 =$("#div1"); div1.hide(3000); div1.show(3000); div1.hide(3000); #点击后需要3秒完全隐藏 div1.show(3000); #点击后3秒后完全显示

动画效果中toggle()这个方法的作用

如果此时是隐藏的话,就会显示. 显示的话,就会隐藏.

slideToggle()这个方法的作用

$("#bu6").click(function(){ $(".div").slideToggle(1000); }) 反复上下滑动.

小作业: 一个div元素对象3s内淡出，然后3s内淡入

$("#bu7").click(function(){ $(".div").fadeIn(3000); $(".div").fadeOut(3000); })

匿名有参函数的使用

(function(a,b,c){ alert("我是匿名函数"+a+b+c) })(100,200,300)

闭包原理的作用是什么

粗略的理解就是将一个函数封装在另一个函数中,以减少全局变量的使用.

简述闭包的优点

1. 可以减少全局变量的对象,防止全局变量过去庞大,导致难以维护. 2. 防止修改变量,因为内部的变量是无法访问的,并且也不可能修改的,安全. 3. 读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.

最新回复(0)

Web前端学习笔记

Web前端学习笔记

HTML 基础知识

基本标签 一

基本标签二

小标签

get 和post 的区别：

div 标签[^简单来说就是一个容器。 ]

HTML5 增强标签

音频标签

视频标签

视频标签的使用

绘图标签和其他标签

刻度标签

CSS 基础知识

CSS 的作用

引入CSS样式

CSS选择器

CSS常用属性

CSS 中的定位

盒子模型

JS基础知识

JavaScript的特点

JavaScript的作用

JS的声明和引入

JS中的变量

数据类型

JS中的运算符

JS 的控制语句

JS函数

JS中String

eval() 方法

Array对象

JS中数组的遍历方式

JS中数组的常用方法

JS中的事件

DOM对象和BOM对象的关系

常见的弹框方式

setTimeout和setInterval的区别

open方法的作用和使用场景

location对象中常用的方法

window.history.go(args); args值分取 0 , 2 , -2 的含义

获得屏幕的分辨率

DOM结构节点类型

节点之间的关系

我们都可以操作DOM对象的哪些内容?

DOM编程获得元素的方式

表单元素操作

readonly和disabled的区别

使用JS提交表单的方式

使用js 产生一个4位随机数验证码

Js中判断性别是够选择

jQuery的学习

window.onload 的作用是什么？和Js中的onload事件有什么区别？

$(“tr:odd”).css(“background-color”,“red”); 代码的含义

jQuery的选择器

JS对象和JQ对象之间是如何相互转化的

常用选择器

html() text() 和 val()方法之间的区别

后代选择器和子父选择器的区别

prev + next 选择器在使用的时候需要注意什么

prev ~ next 这个选择器的作用

获得ul中所有下标(0开始)为奇数的li对 象

$(“ul li:lt(4)”).css(“color”,“green”);这个选择器的含义是什么？

获得input标签中name属性名字包含a 的标签对象

$(“input[type=text][name^=z]”)选择器的含义

$(“input:disabled”)这个选择器的作用是什么？

( " : i n p u t " ) 和 (":input")和 (":input")和(“input”);这两个选择器的区别是什么

JQ获得方式和JS获得方式之间的差异

通过增加class的方式给指定元素增加样式

attr(“value”)和val()的区别

操作元素的属性有几种方式

attr(“checked”)和prop(“checked”)这两个操作方式有什么区别？使用场景是什么？

html()和text()在获得值得时候两者的区别

val()和html()在赋值得时候两者的差异

appendTo 和append两个方法之间的区别

before和after的使用场景

replaceAll(“div p:nth-child(5)”);代码是什么意思？

replaceWith()和replaceAll()方法之间的区别

remove()和empty()之间的区别

基本标签一

获得ul中所有下标(0开始)为奇数的li对象

$(" : i n p u t ") 和$ (“input”);这两个选择器的区别是什么