Web阶段学习总结 （华清远见）
Web阶段学习总结
HTML
通过此次对HTML的简单学习，粗略掌握了使用它来编写简单的网页。
HTML的文档整体有关说明：
整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成；
一个元素由开始标签，内容，结束标签组成；
对整个HTML文档进行整理分析，大致包含以下部分：
DOCTYPE html>: 声明文档类型。可有可无;
<html>html>:包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中;
<head>head>:包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容;
<meta charset="utf-8">:设置文档使用utf-8字符集编码;
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">:指定页面的图标，出现在浏览器标签上;
<title>title>:设置页面标题，出现在浏览器标签上;
<body>body>:包含能在页面看到的所有内容;
同大部分编程语言一样也包含注释，用包裹起来；
元素放在元素之中，称为嵌套；
元素的属性包含元素额外信息，不会在浏览器中显示，但在属性和元素名称之间包含一个空格，而且属性名称后面有一个=号，并且一个属性值由一对引号包裹。
各种语法说明：
标题：h1-h6 分为六级标题，一级最大，六级最小；
文本格式：
<p>p>显示文本内容
<del>del>划掉文本内容
<strong>strong>加粗文本内容
<em>em>斜体
<a href="http://www.baidu.com/" target="_blank">百度一下a>
超链接：a标签 百度一下。（其中_blank表示在新的页面打开_self表示当前页面打开）；
图片：img标签 
；
表格：使用table标签
tr表示表格的每一行
th表示表头
td表示表的数据；
tfoot、thead、
列表：
1.无序列表使用
<ul>
<li>HTML1li>
<li>HTML2li>
ul>
有序列表使用
<ol>
<li>HTML1li>
<li>HTML2li>
ol>
//表单以及input标签
表单：使用<form>form>标签；
下拉列表：
使用<select>select>标签,
选项使用<option>option>标签；
input中的类型说明：
文本为text
密码为password
数字为number
单选为radio
多选为checkbox；等等
input中的placeholder为占位符，checked为默认选项；
区块元素：<div>div>,<h1>h1>,<pre>pre>等自动分行（其中<pre>pre>标签可以用来展示特别格式的文本）；
内联元素：<span>span>,<input>,<a>a>等不会新起一行
css知识总结
一、基础选择器(以jquery对象选择器为例)
标签选择器: ( " s p a n " ) 、 ("span")、 ("span")、(“div”)、 ( " p " ) . . . . . . ∗ ∗ 类选择器 : ∗ ∗ ("p")...... **类选择器:** ("p")......∗∗类选择器:∗∗(“.box”)
多类名: ( " . b o x , . b o x 1 , . b o x 2...... " ) ∗ ∗ i d 选择器 ∗ ∗ : (".box,.box1,.box2......") **id选择器**: (".box,.box1,.box2......")∗∗id选择器∗∗:(“#ipt”)
二、复合选择器
后代选择器(重要)： ( " d i v s p a n " ) ∗ ∗ 子选择器 ∗ ∗ ( 重要 ) : ("div span") **子选择器**(重要): ("divspan")∗∗子选择器∗∗(重要):(“div>span”)
并集选择器(重要)
链接伪类选择器
…
更多选择器点击查看：jQuery API 中文文档
三、文本属性
字体复合属性：font-size 、font-weight、font-color、font-style…
关于颜色：color
对齐文本：text-align
装饰文本：text-decoration：underline、overline、line-through…
文本缩进:text-indent:2em
行间距:line-height
四、CSS引入方式
1.行内样式
行内样式是直接把css代码放到HTML标签里面，作为style属性的属性值。
"color:blue" >这是一个span标签
2.内嵌式
内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，通常写在head标签内。
3.外链式
外链式是把css样式写入.css文件内，然后通过link标签链接。
"../xxx.css"/>
五、元素显示模式
显示模式（display属性进行设置）
块元素 block: div、p、h…
行内元素 inline: input、img、span…
行内块元素（特殊）inline-block
行内转块级: display:block;
块级转行内: display:inline;
块级转行内块 :display:inline_block;
六、背景属性
通过CSS背景属性，可以给页面元素添加背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
1.背景颜色
background-color属性定义了元素的背景颜色
background-color: 颜色值；
一般情况下元素背景颜色默认值是transparengt（透明），可以手动指定背景颜色为透明色
2.背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）
background-image: none | url (url)
3.背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png)
/* 背景图片不平铺 */
background-reprat: no-repeat;
/* 默认情况下，背景图片是平铺的 */
background-reprat: repeat;
/* 沿着x轴平铺 */
background-reprat: repeat-x;
/* 沿着y轴平铺 */
background-reprat: repeat-y;
}
4.背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position: x y;
参数是方位名词
如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
参数是精确单位
如果参数是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标
5.背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
6.背景色半透明
CSS3提供了背景颜色半透明的效果。
background: rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值在0~1之间
通常会把0.3的0省略，写为background:rgba(0,0,0,.3);
7.背景复合写法
为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中。从而节约代码量。
当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；
background: transparent url(image.jpg) repeat-y fixed top;
七、盒子模型
个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
八、美化网页
圆角边框:border-radious
盒子阴影:box-shadow
文字阴影(了解即可)…
九、浮动
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：
选择器{float ： 属性值}
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动（默认值）
浮动详细内幕特性:
1.浮动脱离标准流不占位置，会影响标准流，浮动只有左右浮动。
2.浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离他最近的父级元素对齐。但是不会超出内边距的范围。
浮动的清除
选择器{clear ： 属性值}
属性值 描述
left 清除左浮动
right 清除右浮动
both 清除左右浮动
十.定位
元素的定位属性
元素的定位属性主要包括定位模式和边偏移两个部分。
1、边偏移
边偏移属性 描述
top 顶端偏移量，定义元素相对于其父元素上边线的距离
bottom 底部偏移量，定义元素相对于其父元素下边线的距离
left 左侧偏移量，定义元素相对于其父元素左边线的距离
right 右侧偏移量，定义元素相对于其父元素右边线的距离
2、定位模式
在CSS中，position属性用于定义元素的定位模式，基本语法如下：
选择器 ： {position ： 属性值}
position属性的常用值：
值 描述
static 自动定位（默认定位方式）
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于上一个已经定位的父元素进行定位
fixed 固定定位，相对于浏览器窗口进行定位
(1)静态定位
当position设置为static时，可以将元素定位于静态位置。即默认位置。
在静态定位状态下，无法通过边偏移属性改变元素的位置
(2)相对定位（relative）
相对定位最重要的一点事，他可以通过边偏移移动位置，但是原来所占的位置继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流的方式对待他。如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要加害者就是移动位置，让盒子到我们想要的位置上去。
(3)绝对定位（absolute）
绝对定位可以他通过边偏移移动位置，但是他会完全脱标 ，完全不占位置。
3.叠放（z-index）
当多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素使用zindex层叠等级属性，其取值可以为正整数负整数和零
z-index的默认值是0，取值越大，定位元素在层叠元素中越居上
JS 的总结
什么是JS？
HTML定义了网页的内容，CSS定义了网页的布局，那么JavaScript定义了网页的行为。
将静态的网页转化动态类型。JavaScript可以跨平台使用，和java没有任何关系。当浏览器显示该网页时，浏览器就会执行js程序。来达到动态的效果。
JS的用法
JS的执行顺序（JS可以放在页面的任何地方 包括页面外）
- 部分JS的代码将在页面之前被载入
- 部分js代码将在页面载入的时候被执行
- 标签后的代码将在页面载入完成之后被执行
JS的注释
- 单行注释 //
- 多行注释 /* */
- 注释的快捷键 CRTL + SHIFT +/
JS的定义变量
- 定义变量 必须以字母或下划线开头，由字母下划线数字组成
- 定义变量 一般采用驼峰式命名法 即 第一个首字母小写 其余首字母大写
- 一般显示定义 let
- 不能使用JS的关键字 以及保留字
JS 的数据类型
- JS 总共由五大类型 数值类型、 布尔型、字符串类型、undefined类型 null类型
- undefined类型 是 已经创建但是没有初值的类型
- null 用来表达某个变量的值为空
- 数组的三种说明方式
- var arr= new Array（）； arr[0]=1,i[1]=2;
- var arr= new Array(“a”,“b”,“c”);
- var arr = [3,5,1];
- 函数的声明方式 functicon name（）{}
- 对象
- 对象的声明方式
- var 变量名 = {属性名 ：值，属性名：值，…}
- var 变量名 = new Object（）； 变量名.属性名 = 值；变量名.属性名 = 值；
- 通过构建模板来说明对象
<script>
//模板
let MyObject = function (name1,age){
//属性 this：指当前对象
this.name = name1; // name1 代表参数 name创建出来的对象 当前的对象
this.age = age;
//方法
this.info = function(){
alert(this.name+" , "+this.age);
}
}
// 对象 p1
let p1= new MyObject("zs","12");
p1.info();
let p2 = new MyObject("zd","20");
p2.info();
</script>
-JS的模板相当于 Java的类
- 对象的获取方式
- object.属性名
- object[“属性名”] object是顶级父类
JS数据类型的转化
- 获取数据变量的数据类型 typeof +let 可以显示数据类型
- Number（）函数
- 如果转换的内容就是一个数值类型的字符串没那么将来再转换的时候会返回自己 let i = “2”; alert(i);//2
- 如果转换内容本身不是一个数值类型的字符串，那么在转换的时候结果就是NaN
- 如果转换的内容是空 则输出0
- 如果是布尔型，true转换为1，flase转换为0
- parselnt（）函数
- 忽略字符串前面的空格，直至找到第一个非空字符，还会将数字后面的非数字的字符串去掉
- 如果第一个字符不是数字独好或者负号，返回NaN
- 如果转换的内容是空字符串，那么转换的结果是0
- 如果是布尔值 NaN
- 由于一般的除法 在JS中并不是整除 所以可以使用toFixed（）函数 来保留几位小数
- parselnt（）函数 运算规则与parseint（）相同
- 字符串类型
- String类型
- 转化 ” “+i 则可以转化成字符串类型
- 主要常用的函数
- str.substring（2，8）；是截取字符串中的字符串（按照顺序截取）这个函数是左闭又开 空格也算一个字符
- str.substr(2,8);是截取长度 不是字符串数组的顺序
- str.replace(“ok”,“China”);更换字符串 第一个是字符串原先的字符串 第二个是替换的字符串
- 正则表达 /ok/g 更换字符串 ， 第一个是将ok的所有字符串进行 更换
- toString类型
- undefined 和 null 不能用toString（）转化成 String类型
- toString（）方法可以把一个逻辑值转化为字符串，并返回结果。 booleanObject.toSteing（）
JS的算数运算符
- JS的除法 / 并不是整除
- ++ 单独放在一行 作用 var i++； i= i+1
- ++i+i++ 运算顺序 先进行 i= i+1 然后在进行 i+i 最后 i= i+1
- x +=y 等价于 x= x+ y；
- === 表示值和数据类型相等判断
- && 、 || 、 ！ 与非或 逻辑运算符
- 注意 70
- 三目运算符 条件?满足条件一：不满足则条件二
username = {name:"zhangsan",password:123456,name1:"lihua",password1:1234};
console.log(username.name);
username1 = {name:"zhangsan",password:123456};
username.name == username1.name&&username1.password == username.password? console.log("1"):console.log("0");
- if else 与switch case 语句
- 当有范围的时候 选择 if else 语句 当有准确选项时选择 switch case 语句
JS 的 Date的用法
1.Date（） 作用是获取时间
<title>Data的用法</title>
<script>
let a =new Date();
a.getMonth();
document.writeln(a.getFullYear()+"年");
document.writeln(a.getMonth()+1+"月");
document.writeln(a.getDate()+ "号");
document.writeln(" "+a.getHours()+" 时");
document.writeln(" "+a.getMinutes()+" 分");
document.writeln(" "+a.getSeconds()+" 秒");
</script>
- 制作一个定时器
<head>
<meta charset="UTF-8">
<title>JS02定时器</title>
<script>
let Timer;
function showTime(){
let a = new Date();
let b =document.getElementById("myTime");
b.innerHTML= a.getFullYear()+ "年"+a.getMonth()+ 1 + "月"+a.getDate() + "号"+" " + a.getHours() + " 时"+ " " + a.getMinutes() + " 分"+" " +a.getSeconds()+ " 秒";
}
// b.innerHTML只能运行一次
timer = setInterval(function () {
showTime();
},1000);
</script>
</head>
<body>
<span id="myTime"></span>
</body>
制作定时器时候 可以通过 span 然后 先定义一个展示时间的函数
这个函数只能展示一次时间，通过document.getElementById（）获取span的id
然后进行innerHTML进行插入 ，插入只能一次插入
然后 在使用 setInterval功能函数 每隔一段时间就运行一次来进行
Math
<script>
document.writeln(Math.PI+"
");//圆周率
document.writeln(Math.ceil(3.1415)+"
");// 向上取整
document.writeln(Math.round(3.1415)+"
");//四舍五入
document.writeln(Math.floor(3.1415)+"
");//向下取整
document.writeln(Math.random()+"
");//生成一个随机数
document.writeln(Math.random().toFixed(2)*100+"
");//生成一个随机数
document.writeln(Math.random().toFixed(2)*100+1+"
");//生成一个随机数
document.writeln(Math.ceil(Math.random().toFixed(3)*100)+"
");//生成一个随机数
</script>
- Math常用的函数
- Math.PI表示 圆周率
- Math.ceil表示向上取整
- Math.round表示四舍五入
- Math.floor表示向下取整
- Math.random（）表示生成一个随机数 范围0-1 左闭又开
- 用 向上取整 在包含 random 可以实现 0-100随机数
JS的判断一个变量是不是同一类型
- 使用 arr instanceceof Array 前面是自己定义的 后面是电脑已有类型 相同为 true
- typeof obj 表示显示数据类型
JS 的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script>
/* 页面加载完后立即执行该数据*/
window.onload= function (){
alert(页面加载完后立即执行该数据);
}
function f() {
document.write("div的点击事件");
}
function f2() {
alert("获取焦点事件");
}
function f1() {
alert("响应")
}
</script>
<style>
/* 改变鼠标样式*/
div:hover{
cursor:pointer;
}
</style>
</head>
<br>
这是一个body
<div onclick="f()">点击</div>
<input type="button" value="点击" onclick="f()"/>
/* onblur 失去焦点事件*/
用户名：<input type="text" name="username" onblur="checkUsername()"></br>
密码： <input type="password" name="password" onfocus="f2()"><br>
密码1： <input type="password" name="password" onchange="f1()"><br>
<select onchange="f1()">
<option>nihao</option>
<option>nilll</option>
</select>
</body>
</html>
- window.onload = function(){}表示页面加载完成立即执行该数据
- onblur 失去焦点事件
- onfocus 获取焦点事件
- onchange 常用于 中
- onclick 为点击事件
- css中的改变鼠标样式 变成一个手型
<style>
/* 改变鼠标样式*/
div:hover{
cursor:pointer;
}
</style>
JS的获取HTML的元素
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS09获取HTML元素</title>
<script>
window.onload = function (){
let inputNode = document.getElementById("username");
console.log(inputNode.value);
/* 获取标签中的值可以用 value 或者 inHTML inTEXT*/
let div1 = document.getElementById("div0").innerHTML;
let div1 = document.getElementById("div0").innerText;
console.log(div1);
let textarea1 =document.getElementById("ok").innerHTML;
console.log(textarea1);
let textarea2 = document.getElementById("ok").value;
console.log(textarea2);
}
function f(){
let a = document.getElementsByClassName("inp")[0];
console.log(a);
}
function f1() {
let a = document.getElementsByName("sex");
console.log(a);
}
function f2() {
let input1 = document.getElementsByTagName("input");
console.log(input1);
}
</script>
</head>
用户名：<input type="text" class="inp" id="username" value="张三">
文本域 没有vale 而且 文本域是标签
<textarea col="5" rel="5" id="ok" > hello </textarea>
<div id="div0" class="inp"> 这是一个div</div>
<input type="button" value="帮过class获取标签" onclick="f()">
<br>
女：<input type="radio" name="sex" value="1">
男：<input type="radio" name="sex" value="0">
<input type="button" onclick="f1()">按钮</input>
<input type="button" onclick="f2()">按钮2</input>
</body>
</html>
-
document.getElementsByName();
-
document.getElementsTagName();
-
document.getElementById();
-
document.getElementsByClassName();
-
innerHTML和 innerText的区别？
innerHTML可以对元素进行修饰，innerText只能获取元素内容，但是div盒子innerHTML不可以获取，可以通过innerText获取JS的 访问或修改HTML的属性
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问或修改HTML的属性</title>
<script>
function f() {
console.log(document.getElementById("username").type = "button");
console.log(document.getElementById("username").name= "name");
console.log(document.getElementById("username"));
}
function f1() {
var a = document.getElementById("div0");
a.style.width= "100px";
a.style.high = "200px";
a.style.backgroundColor="red";
a.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="访问或修改属性" onclick="f()">
<input type="button" value="脚本框CSS" onclick="f1()">
<br>
<input type="text" name="username" id="username"><hr/>
<div id="div0">
这是一个div；
</div>
</body>
</html>
- 可以直接通过 document.getElementById().type对HTML的元素进行修改
- 也可以直接对样式进行修改
1. 1
JS的脚本化的语言
JS11脚本化事件
这是一个div
- 脚本化事件 就是不需要点击 直接出触发 一般都在 window.onload = function（）{}中运行 window.onload意思是页面加载完毕后在运行
- 触发事件时 先获取元素 然后再进行操作 为有效操作。
JS的正则表达
\w(字符)
n+(匹配至少一个)
n*（匹配任意个）
\d(数字)
i(忽略大小写)
g(全局匹配)
.(任意字符)
/^ &/(开头至结尾)
......
JS BOM模型
JS BOM的概述
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。例如：获取浏览器窗口的尺寸、获取浏览器访问过的历史记录
- window 表示浏览器窗口
- history 表示浏览器的历史 包含访问过的URL
- history.back（）回退
- history.go()加载history列表中的某个具体页面
- 浏览器的对话框
- confirm 表示确认提示框
- prompt 表示 输出弹框 并输入信息返回到页面
- alert 提示框
- 浏览器的定位
- location.href 属性返回当前的网址信息
- location.assign() 方法加载新的文档
jQuery总结
1、$其实就是一个函数名，是jQuery的所缩写
2、$可以作为选择器，获取DOM对象对应的jQuery对象
3、$可以将一个DOM对象，转换成一个jQuery对象
4、事件中的this，指向DOM对象，所以需要使用$（this）做转换
5、什么时候使用jQuery，什么时候使用 js？其实本质上jQuery就是js，只是我们可以使用一些现成的方法而已
jQuery常用方法
1、index()；获取元素索引
2、text()；获取和设置文本节点
<script type="text/javascript">
$("#btn2").click(function (){
console.log($(".demo").text());
});
</script>
3、css()；获取和设置样式
添加单个class：$("div").addClass("class1")
添加多个class：$("#div").addClass("class1 class2");
4、val()；获取和设置value属性
<script type="text/javascript">
$("#ipt").val();
</script>
5、attr()；获取和设置属性值，例如src
<body>
<div class="demo">
<input type="text" id="input1" value="文本输入框" />
</div>
<button type="button" id="btn2" value="JQuery">实现方法</button>
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo #input1").attr({value:'改变文本框的值'});
});
</script>
</body>
removeAttr()
删除被选元素的属性值，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo #input1").removeAttr("value");
});
</script>
6、addClass()；添加class
添加单个class：$("div").addClass("class1")
添加多个class：$("#div").addClass("class1 class2");
7、removeClass()；删除class
removeClass() 方法:
删除指定的 class 属性：$("h1").removeClass("blue");
对被选元素进行添加/删除类的切换操作：
8、toggleClass()；切换class
$("h1").toggleClass("blue");
9、siblings()；获取同级其他元素
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").siblings().css({"border":"2px solid red"});
});
</script>
10、find(“选择器”)；获取子级
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").find("span").css({"border":"2px solid red"});
});
</script>
11、parent()；获取父级
<script type="text/javascript">
$("#btn2").click(function (){
$(".getParent").parent().css({"border":"2px solid red"});
});
</script>
12、childre(): 获取子集
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo").children("span").css({"border":"2px solid red"});
});
</script>
DOM操作
1、
append():添加元素节点
向每个匹配的元素内部后置添加内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").append("添加元素");
});
</script>
after():在每个匹配的元素之后插入内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").after("添加元素 ");
});
</script>
before():在每个匹配的元素之前插入内容，如：
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").before("添加元素 ");
});
</script>
2、remove(): 删除元素节点,从DOM中删除所有匹配的元素，可以移除元素，包括文本和子节点，还有元素的数据和事件。
<script type="text/javascript">
$("#btn2").click(function (){
$(".demo1").remove()
});
</script>
jQuery事件
1、click()
2、mouseenter()
3、mouseleave()
4、mousemove()
5、on()；事件委托
…
事件绑定bind()：绑定事件处理函数的最基本方式是使用.bind()方法。接受两个参数：
.bind(event type, event handler)
$(document).ready(function(){
$('.mydiv').bind('click',test);
function test(){
alert("Hello World!");
}
});
jQuery动画方法
1、show()；
<p style="display: none">Hello</p>
$("p").show("slow");
2、hide()；
$("p").hide("slow");
3、fadeln()；(淡入)
jQuery 代码:
$("p").fadeIn("slow");
4、fadeOut()；（淡出）
$("p").fadeOut("slow")
5、slideDown()；（下滑显示）
$(".btn2").click(function(){
$("p").slideDown();
});
6、slideUp()；（上滑隐藏）
$("p").slideUp("slow")
7、animate()；
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
8.stop（停止动画）
停止所有在指定元素上正在运行的动画。
HTML 代码:
$("#stop").click(function(){
$("#box").stop();
});