Web前端学习笔记
程序员文章站
2022-04-22 13:39:16
...
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中.
- 标题弄标签常用的属性
- <meta>的四个作用：
1. 设置 网页的字符集.
2. 搜索引擎优化.
3. 设置 自动刷新网页.
4. 禁止网页缓存.
- <hr/> 标签常用属性
水平线
常用属性：
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 : 表单体检的地址.可以是本地的也可以是网络的.
<form action="https://so.csdn.net/so/search/s.do?" method="get">
<input type="text" name="q" />
<input type="submit" value="CSDN一下"/>
</form>
使用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
-->
<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的声明和引入
<script src="js/test.js"></script>
<script type="text/javascript">
alert("测试");
</script>
注意： 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 用户退出页面
-
BOM对象中包含的对象内容
- History
- navigator
- document
- location
- screen
蓝色框内是归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中判断性别是够选择
function checksex(){
var che = document.getElementsByName("sex");
var sex =document.getElementById("span_sex");
for(var i in che){
if(che[i].checked){
sex.style.color='green';
sex.innerHTML="√性别选择成功";
return true;
}
}
sex.style.color='red';
sex.innerHTML="请选择性别！";
return false;
}
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 属性的标签。
(“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. 读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.