Web前端笔记--html，css，javascript，jquery
HTML
- HyperText超文本 Mark标记 Language语言。
- 什么是超文本？ 不仅仅是纯文本，除了文本之外还包括字体信息，还包括多媒体信息（图片、音频、视频）。
- 和XML的不同点： xml的标签是可以扩展的,html标签是固定的。
常用标签
1. 文本标签
- 内容标题：h1-h6 属性 align:left/right/center 独占一行，上下留有空白
- 段落标签：p 独占一行 上下留有空白
- 水平分割线 hr
- 换行：br
2. 列表标签
- 无序列表
- 有序列表
- 定义列表
- 凉菜
- 拍黄瓜
- 芥末鸭掌
- 花毛一体
- 炒菜
- 宫保鸡丁
- 木须肉
- 水煮肉
- 列表嵌套
无序列表和有序列表可以任意无限嵌套
分区元素
- 分区元素自身没有显示效果用于把页面中的多个元素进行统一管理，类似于一个容器
- 一个页面一般分为三大区：
- h5标准中新增了几个和div功能一样的分区元素
- div和span
1. div：独占一行
2. span：共占一行
元素的分类
1. 块级元素:独占一行 包括：h1-h6,p, div , hr
2. 行内元素:共占一行 包括：span，斜体i和em，加粗b和strong，删除线s和del，下划线u
特殊字符 实体引用
1. 空格折叠现象 通过 ; 替换空格 牛逼是屁
2. 小于号和大于号 < > 老铁干他
3. 换行
图片标签![]()
- 常用属性：
1. scr：图片的路径
-相对路径：访问站内资源
1. 同级 直接写图片名
2. 上级 ../图片名
3. 下级 文件夹名/图片名
-绝对路径：访问站外资源 ，称为盗链，节省自己网站的资源，但是有可能出现找不到图的情况
2. alt：当图片不能正常显示的时候显示的文本
3. title：当鼠标悬停时显示的文本
4. width：设置宽度
两种赋值方式：1.像素 2.百分比 如果只设置宽度高度会自动等比缩放
5. height：设置高度
- 图片支持的格式：jpg/jpeg png gif
图像地图
-
- 范围 属性：
1. shape形状(circle/rect)
2. coords坐标（rect四个值 两个对角线点的坐标，circle三个值 圆心坐标和半径）
3. href路径 设置点击的行为， 该路径指向的资源如果浏览器能够浏览则直接浏览，如果不能浏览则下载此文件
超链接
- xxx
- href属性和图像地图里面的href一样
- target="_blank" 从新的窗口中显示页面
- a标签可以包裹文本也可以包裹图片
- 锚点的使用：
1. html结构
2. head里面的标签
- meta：charset name="keywords" content="a,b,c"
- title：页面标题
3. body里面的标签
- h1-h6 属性： align=“left/center/right”
- p 段落 上下有空白
- 列表： 有序列表 ol-li 无序 ul-li
- 分区元素： div：独占一行 和span 非独占一行
- 块级元素：独占一行，div, p, h1-6,hr
- 行内元素：非独占一行,span, i和em, b和strong,u,del和s
- 换行 br
- 特殊字符 空格： < > br
- 图片标签: img 属性： src路径（相对和绝对）alt，title，width、height
###注释
- 格式： 快捷键：control+shift+/
图像地图 map
- 什么是图像地图：可以将图片中的某个部分作为可点击的链接。
- 使用方式：
usemap="#mymap">
<area alt="圆形" shape="circle" coords="100,200,50" href="2.gif">
- 如果使用shape=rect，coords的值所代表的意思是左上角点的x和y，还有右下角点的坐标x和y。如果shape=circle coords值表示圆心坐标(x和y)和半径
- href属性：值为一个路径，相对路径和绝对路径，区域被点击时会直接访问此路径的内容，路径可以指向页面，也可以指向图片资源，也可以指向其它类型的文件会下载此文件。
超链接
- 在网页中经常使用超链接进行链接导航，语法：链接
- target属性：控制从什么位置跳转，值为_self是从当前页面跳转（默认）,值为_blank是跳转到一个新窗口显示页面
- a标签可以支持以下几种写法：
a标签锚点的使用
- 通过锚点可以实现页面内部位置的跳转
- 操作方式：
1. 在页面中的某个位置设置锚点：
2. 通过超链接跳转到锚点的位置
-锚点练习：
图片1 图片2 图片3 图片4
表格标签
- 什么是表格：由单元格的矩形框按照从左到右从上到下的顺序排列组成的内容为表格
- 作用：以一定的结构来显示信息
- 表格的格式：
1-1 1-2
2-1
2-2
3-1
3-2
- 表格属性：
1. cellspacing：每个单元格之间的间距和单元格距表格边框的距离
2. cellpadding: 内容与单元格边框的距离
3. width/height:表格的宽高
4. border：边框的宽度
5. colspan: column(列) span 合并列
6. rowspan: row span 合并行
行分组
在前端编程的时候，使用分组便于整体操作表格的头部体部和尾部
- 格式：
table-head
- caption标签，写在table标签内部，起到表格标题的作用
表单 form
- 在浏览器中，浏览器向服务器发送数据，一般使用的都是表单
表单内部的控件有：文本框，密码框，单选框，多选框，下拉列表，文件选择，时间选择，提交按钮。
###文本框
- 用于获取用户输入的单行数据
- 格式：
- 属性：name ,values：默认值，maxlength：最大长度，readonly：只读
###密码框
- 格式：
###单选
- 格式：性别："radio">男女
- 属性：name：多个单选控件的name值要一致，value:提交数据时会把value的值提交到服务器，checked:设置选中
###复选框（多选）
- 格式：
爱好："checkbox" name="hobby" value="dy">电影
唱歌
篮球
###标签 label
- 格式：
###文件选择
- 选择上传的文件
- 格式:靓照:
###日期选择
- 格式:生日:
###隐藏域
- 格式：
- 作用：此控件用户看不到，有些场景需要提交一部分用户不需要看到的数据，比如修改数据时的id
###文本域 textarea
- 输入多行数据时使用
- 格式：
个人介绍:
###下拉选
- 格式：
按钮
- 提交按钮：
- 重置按钮：
- 普通按钮：
##作业：把form和table结合一起写个注册页面
CSS
- Casecading层叠 Style样式Sheet表，层叠样式表，用于美化页面
引入方式
- 三种引入方式
1. 内联：把样式代码写在标签内部的style属性里面，弊端：不能复用
2. 内部：在head标签里面添加style标签通过选择器给元素添加样式，好处是可以在当前页面复用，弊端：只能在当前页面复用
3. 外部：在一个单独的css文件中写样式代码，在页面中head标签里面通过link标签把css文件引入到页面中，好处：可以多页面复用，把css样式代码和html代码分离
- 三种引入方式的优先级： 内联样式优先级最高 ，内部和外部优先级一样，后执行的覆盖先执行的。
###选择器
####标签名选择器
- 格式： div{} span{} h3{}
- 范围：会把所有该类型的标签全部选中
####id选择器
- 格式： #id{}
- 将页面中某一个元素选中
####类选择器
- 格式： .class{}
- 选中页面中一类的多个元素
####属性选择器
- 格式： 元素名[属性名='属性值']{}
####分组选择器
- 格式： #id,.class,div{}
- 将多个选择器选择的内容合并到一个选择器里面
####子孙后代选择器
- 格式： div p h1
- 选择div里面p里面的所有子孙h1
####子元素选择器
- 格式： div>p>h1
- 选择div里面p里面的h1子元素
####伪类选择器
- 用于选择元素的状态
- 未访问状态 a:link
- 访问过状态 a:visited
- 悬停状态 a:hover
- 点击时状态 a:active
####任意元素选择器
- 格式： *{}
- 选择页面中所有的元素 包括：body和html
###CSS中常用的样式
####颜色的赋值方式
- 三原色rgb红绿蓝 red green blue 每一个颜色的取值范围0-255
1. 通过颜色名称赋值 red blue yellow pink....
2. 6位的16进制赋值 #ff0000
3. 3位的16进制赋值 #f00
4. 3位的十进制 rgb(255,0,0)
5. 4位的十进制 rgba(255,0,0,0.5) 最后一位表示透明度取值0-1，越小越透明
####设置元素的宽高
- width、height
####背景图片
- backgroud-image 设置背景图片
- background-size 设置背景图片尺寸
- background-repeat 禁止重复
- background-position 设置背景图片的位置
- background-color: green;
/* 设置背景图片 */
background-image: url("../imgs/k.jpg");
/* 修改背景图片尺寸 */
background-size: 100px 100px;
/* 禁止重复 */
background-repeat: no-repeat;
/* 修改图片位置
水平方向(left center right)
垂直方向(top center bottom)
可以控制9个位置*/
/* background-position: right bottom; */
/* 通过百分比控制位置
第一个0代表最左边 100%代表最右边
第二个0代表最上面 100%代表最下面 */
background-position: 90% 90%;
布局相关属性（盒子模型）
- 盒子模型由： 宽高+外边距+内边距+边框 组成
#####盒子模型之元素宽高
- 宽度width
- 高度height
- 可以通过百分比或像素的形式赋值
- 块级元素可以修改元素的宽高，行内元素不能修改宽高，宽高只能由内容决定
#####盒子模型之外边距(margin)
- 什么是外边距： 元素距上级元素或相邻兄弟元素的距离称为外边距
- 赋值方式：
margin-left/right/top/bottom:10px
margin:10px; //给四个方向外边距全部赋值为10px
margin: 20px 40px; /* 上下20 左右40 */
margin: 0 auto; /* 水平居中 */
margin: 10px 20px 30px 40px;/* 上右下左 */
- 块级元素相邻元素添加外边距取最大值，行内元素相邻元素外边距相加
- 行内元素上下外边距不生效
- 如果元素的上边缘和上级元素的上边缘重叠，则给元素添加上外边距时会出现粘连问题 通过给上级元素添加overflow:hidden 解决
####盒子模型之边框
- 赋值方式：
border: 1px solid red; 四个方向赋值
border-bottom/top/right/left: 1px solid red; 指定给某一个方向赋值
块级元素四个方向边框全部生效，会影响元素所占宽高
行内元素四个方向边框全部生效，但是左右边框影响所占宽度，上下边框不影响高度
####盒子模型之内边距
什么是内边距： 元素边框距内容的距离
- 块级元素内边距全部生效 也会影响元素所占的宽高
- 行内元素内边距全部生效 但影响所占宽度不影响所占高度
####盒子模型总结：
行内元素需要记住的点：
1. 不能修改宽高
2. 外边距上下没效果
3. 边框上下不影响高度
4. 内边距上下不影响高度
###文本相关样式
1. 文本对齐 text-align: left/right/center
2. 文本修饰 text-decoration:overline/underline/line-through/none
3. 行高 line-height
4. 颜色 color：red;
5. 文本阴影 text-shadow: 颜色 x偏移 y偏移 阴影浓度(值越小越清晰)
####圆角
- border-radius 值越大 越圆
####字体相关样式
/* 字体大小 */
font-size: 10px;
/* 字体加粗 */
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 字体样式 */
font-family: "simhei", Arial, Helvetica, sans-serif;
####溢出设置 overflow
- 设置超出元素范围的内容如何显示
1. visible（默认值） 超出显示
2. hidden 超出隐藏
3. scroll 超出滚动显示
显示方式 display
1. block：块级元素的默认值，独占一行,可以修改宽高
2. inline：行内元素的默认值，共占一行
3. inline-block:行内块,共占一行并且可以修改宽高
###定位
####文档流定位(静态定位)
- 默认的定位方式
- position:static(默认)
- 块级元素从上到下，行内元素从左向右
- 通过外边距控制元素的位置
####相对定位
- position:relative;
- 元素不脱离文档流
- 应用场景：当元素需要从当前位置做偏移，但不影响其它元素的时候使用相对定位
- 通过top/left/right/bottom 控制元素的偏移，偏移值相对于元素的初始位置
####绝对定位
- position:absolute;
- 元素脱离文档流
- 应用场景：但需要往页面中添加一个元素这个元素显示或不显示不影响其它元素的效果
- 通过top/left/right/bottom控制元素的位置，位置相对于窗口(默认)或某一个上级元素
- 如果需要相对于某一个上级元素，需要让上级元素做非static定位(推荐使用relative相对定位)
####固定定位
- position：fixed;
- 脱离文档流
- 通过top、left、right、bottom控制元素的位置，位置相对于窗口
- 应用场景：当需要把某个元素固定在窗口的某个位置时使用固定定位
####浮动定位
- float:left/right;
- 脱离文档流，元素从当前所在行向左或向右浮动，当碰到上级元素边框或其它浮动元素时停止
- 一行装不下会自动换行，换行时有可能被卡住
- clear：left/right/both 禁止元素某个方向出现浮动元素
- 如果元素的所有子元素全部浮动，此时自动识别的高度为0，如果希望元素正好包裹所有子元素则给元素添加overflow:hidden解决
- 应用场景：当需要将纵向排列的元素改成横向排列时使用浮动定位
####行内元素垂直对齐
垂直对齐方式
bottom底部
top顶部
middle中间
baseline 基线(默认)
vertical-align: middle;
###CSS的三大特性
1. 继承性： 子元素可以继承上级元素的部分属性，只能继承文本和字体相关的属性，部分元素的显示效果不受继承影响比如：超链接a的字体颜色不受影响，h1-h6的字体大小不受继承影响
2. 层叠性： 如果有多个选择器选择同一元素但设置的样式不同，则所有样式全部层叠到一起全部生效,如果多个选择器设置的样式相同则由优先级决定。
3. 优先级： 作用范围越小，优先级越高 id>class>标签名
JavaScript
简称JS 给页面添加动态效果或内容
###JS特点
1. JS属于脚本语言，不需要编译直接解析执行
2. JS可以嵌入到html中由浏览器解析执行
3. JS属于弱类型语言
4. JS基于面向对象
###如何在HTML中引入JS
- 三种引入方式：
1. 内联：在标签内部，通过事件属性引入。
2. 内部：在head标签内部添加script标签，在标签内部写js代码。
3. 外部：在单独的js文件中写js代码，通过script标签引入。
###数据类型
- js中所有类型都是对象类型，对象类型分为三种：
1. JS语言内置对象： 字符串,数组,日期等
2. 浏览器内置对象： 可能存在兼容性问题
3. 自定义对象：程序员自己创建的对象
####JS内置对象的几种常见类型
1. 数值类型 number
2. 字符串类型 string
3. 布尔值类型 boolean
4. 未定义类型 undefined
####变量的声明和赋值
- js属于弱类型语言
var x = 18;
x="abc";
var name = "张三";
var b = true/false;
var z; //未定义类型
var p = new Person();
#####数值类型
- js中数值类型的底层都是浮点型，使用过程中会自动转换整数和小数
-java:
int x = 5; int y = 2;
int z = x/y; z=2
-js:
var x = 5; var y = 2;
var z = x/y; z=2.5
var x = 4; var y = 2;
var z = x/y; z=2- NaN: Not a Number(不是一个数),isNaN(变量)用于判断变量的类型是否是个数
var s = 18; isNaN(s)=false var s="abc"; isNaN(s)=true
####字符串string
- 用单引号或双引号修饰字符串
var s1 = "abc";####布尔值 boolean
var b = true; ###常见数据类型间的隐式转换
1. 数值类型：
- 转字符串：直接转 "abc"+18 = "abc18"
- 转布尔值: 0和NaN转false 其它转true
if(18){alert('abc')}else{alert('lalala')}
2. 字符串
- 转数值： 能转直接转 "18"->18 不能转转成NaN "abc"->NaN
var x = "66"+6; 666
var y = "66"-6; 60 //只有加法是把数值转字符串，其它运算都是把字符串转成数值
任何数值和NaN进行任何运算结果都是NaN
- 转布尔值： 空字符串""转false 其它true
3. 布尔值
- 转字符串：直接转 "abc"+true = "abctrue"
- 转数值： true->1 false->0
4. 未定义
- 转字符串：直接转 "abc"+undefined="abcundefined"
- 转布尔值：false
- 转数值：NaN
5. null
- 转字符串：直接转 "abc"+null = "abcnull"
- 转布尔值：false
- 转数值：0
###运算符
- js中的运算符和Java大体相同
==和===:
==会先统一等号两端变量的类型,然后再比较值是否相等
===会先比较类型如果类型相同再比较值是否相等
"66"==66 true
"66"===66 false
-练习：创建demo02 页面中添加两个按钮，按钮1：在点击事件里面执行alert("666"==666) 按钮2：在点击事件里面执行alert("666"===666)
- typeof x ： 获取变量的类型
var x = typeof 66 + 6 结果： "number6"
###语句 if else, switch case, while , for, do while
- 和Java大体相同
- 不同点：
1. if条件里面的内容如果不是布尔值会自动隐式转换成布尔值
2. for循环把int i改成 var i 不支持增强for循环
###函数(方法)
- java方法格式：public void 方法名(参数列表){ 方法体 }
- js方法格式一：function 方法名(参数列表){方法体}
- js方法格式二：var 方法名 = function(参数列表){方法体}
- js方法格式三：var 方法名 = new Function("参数1","参数2","方法体");
###页面相关方法
1. 通过id获取页面中的元素
var mydiv = document.getElementById("d1");
2. 给文本框赋值和取值
myinput.value = "abc"; //赋值
alert(myinput.value)； //取值
3. 给div、h1-h6、p、span等元素添加文本内容
mydiv.innerText = "abc"; //赋值
alert(mydiv.innerText);
4. 给元素添加html内容
mydiv.innerHTML= "
abc
";mydiv.innerHTML+= "
abc
";//追加###String相关内容
1. 创建字符串的两种方式
- var s1 = "abc";
- var s2 = new String("abc");
2. 把字符串转换成数值
- parseInt(num) 转成整数
- parseFloat(num) 转成小数或整数
- Number(num) 等效parseFloat
3. 字符串转大小写
- str.toUpperCase();
- str.toLowerCase();
4. 获取字符串出现的位置
- str.indexOf("a");
- str.lastIndexOf("a");
5. 截取字符串
- str.substring(start,?end);
6. 替换字符串
- str.replace(old,new);
7. 拆分字符串
- str.split(",");
###数组相关
1. 创建数组的两种方式
- var arr1 = ["小明",18,true];
- var arr2 = new Array(); //创建一个空数组
2. 往数组中添加内容
- arr2.push("abc");
3. 修改数组的长度(Java中数组长度是不可以修改的)
arr1.length=1;
4. 数组遍历和Java一样
5. 数组反转
var arr = [1,2,3];
arr.reverse();
6. 数组排序
- 数组默认的排序规则是按 数组排序
var arr = [10,18,5,22,21,52];
arr.sort();照数组内元素的unicode编码进行排序比完第一个字符比第二个
- 自定义排序：
var arr = [58,51,8,2,23,66];
//创建一个自定义的排序方法
function sortfn(a,b){
//return a-b;//升序
return b-a; //降序
}
//使用自定义方法排序 如果数组中装的是自定义对象
//可以通过对象的任意属性进行排序，比较灵活
alert(arr.sort(sortfn));
###日期相关内容
- 服务器时间和客户端时间
1. 获取客户端时间(得到当前系统时间)
var d1 = new Date();
2. 把字符串时间转成Date对象
2019/1/4 15:20:00
var d2 = new Date("2019/1/4 15:20:00");
3. 获取和设置时间戳(时间戳是距离1970年1月1日 0点的毫秒数)
d1.getTime( );
d1.setTime(1000); //1970/1/1 08:00:01
4. 获取时间分量 单独年 月 日 时 分 秒 星期
d1.getFullYear();//年
d1.getMonth();//月 从0 开始
d1.getDate();//日
d1.getDay();//星期
d1.getHours();//时
d1.getMinutes();//分
d1.getSeconds();//秒
5. 从完整时间中获取年月日、获取时分秒
d1.toLocaleDateString();
d1.toLocaleTimeString();
###正则表达式
- 应用场景：
1. 查找内容
2. 校验文本
. :匹配任意字符除了换行
\w:匹配任意数字、字母、下划线
\d:匹配任意数字
\s:匹配任意空白
^ :开头
$ :结尾
- js创建正则表达式的两种方式
- var reg1 = /规则/模式;
- var reg2 = new RegExp("规则",?"模式");
- 正则相关的方法：
1. reg.exec(str); //查找内容 一次执行只找一个 找不到时返回null
2. reg.test(str); //校验str是否符合规则
3. var arr = str.match(reg); //查找 一次性找到所有内容
4. str.replace(reg,"新的内容"); //替换 替换正则匹配的所有内容
###通过js代码给元素添加或修改class值
- div.className="xxx";
###隐藏元素的方式
1. display:none/block/inline/inline-block 脱离文档流
2. visibility:hidden/visible; 不脱离文档流
###事件的取消
- 在事件中执行 return false; 则可以将此事件取消掉
- confirm("您确认离开吗？")
###新的事件
- 失去焦点事件 onblur
- 表单提交事件 onsubmit
###自定义对象（了解）
- 第一种声明方法的方式创建对象：
//创建Person对象 有age和name属性
function Person(name,age){
//声明属性并赋值
this.name=name;
this.age=age;
//声明方法
this.run = function(){
alert("name:"+this.name
+" age:"+this.age);
}
}
- 第二种声明变量的形式创建对象：
var p1 = {
"name":"关羽",
"age":18,
"run":function(){
alert("姓名："+this.name
+"年龄："+this.age);
}
}
//调用方法
p1.run();
###DHTML
- 简介： Dynamic（动态）HTML，这并不是新的技术，而是把html+css+JavaScript一起实现的页面称为动态的html
- DHTML包括：BOM和DOM
- BOM：Browser（浏览器）Object（对象）Model（模型），浏览器对象模型，在BOM中存
在一些和浏览器相关的对象
- DOM：Document Object Model：文档对象模型，在DOM中包含一些和页面相关的对象
####BOM
#####Window
- window对象中包含的属性称为全局属性，方法称为全局方法,调用window里面的属性和方法时可以把window省略
- window里面常用的方法：
window.alert("");提示框
confirm()确认框
parseInt/Float();
isNaN();
prompt(); 弹出文本框
- window里面常用的属性
1. location：位置
location.href 获取浏览器访问的地址
location.href="http://www.baidu.com" 修改浏览器访问的地址
location.reload(); //页面刷新
2. history:历史
history.length //获取历史页面数量
history.back() //返回上一页面
history.forward() //前往下一页面
history.go(num) 负值代表 返回 正值前进 0刷新
3. screen：屏幕
width/height 宽高
availWidth/availHeight 可用宽高 高度减去开始菜单栏
4. navigator：导航/帮助
navigator.userAgent 得到浏览器的版本信息
5. document：文档 里面包含页面相关的对象 DOM指的就是document对象里面的内容，而document又属于window里面的对象 所以 BOM包含DOM
###window相关的事件
1. 页面加载完成事件 onload
2. 页面点击事件 onclick
3. 失去焦点事件 onblur
4. 获取焦点事件 onfocus
###eval()方法
- 可以将字符串以执行js代码形式执行
###通过js代码给元素添加样式
div.style.样式名称="值";
###图片移动练习
创建demo02.html 在页面中添加一张图片
在页面加载完成的时候通过js代码修改图片的尺寸为50*50
当点击屏幕时让图片往右侧移动5个像素
###轮播图练习步骤：
1. 通过css调整图片和div的大小
2. 把图片修改成绝对定位 位置相对于div
3. 添加script标签 在页面加载完成时 获取所有图片并遍历设置每一个图片的left值分别为0w 1w 2w
4. 开启定时器一秒执行100次，每次执行的时候获取所有的图片，然后遍历得到图片之前的left值 然后-4 再赋值回去 ，在赋值回去之前判断如果新的left值<=-200把新的left值改成400，同时把定时器停止
5. 把移动一张图片的代码放到一个方法中，然后再开启定时器每隔2秒调用一次这个方法
6. 给div添加鼠标移入和移出事件，在事件中对应的这关闭定时器 和重新开启定时器
####定时器
1. 开启重复执行的定时器
var t = setInterval(function(){},时间间隔)
2. 停止定时器
clearInterval(t);
3. 开启只执行一次的定时器
setTimeout(function(){},时间间隔);
###DOM
- DOM 文档对象模型，学习DOM主要是学习如果对页面中的元素进行增删改查操作
####查找页面中的元素
1. 通过id查找
var div = document.getElementById("id");
2. 通过标签名
var arr= document.getElementsByTagName("标签名");
3. 通过name查找
var arr = document.getElementsByName("name");
4. 通过class查找
var arr = document.getElementsByClassName("class");
####创建元素
var d = document.createElement("div");
d.innerText = "哈哈哈";
####添加元素
- 格式： 父元素.appendChild(d);
document.body.appendChild(d);
####插入元素
- 格式：父元素.insertBefore(新元素,弟弟元素);
####删除元素
- 格式：父元素.removeChild(被删除的元素);
###事件
点击onclick
移入onmouseover
移出onmouseout
页面加载完成oload
获得焦点 onfocus
失去焦点onblur
值发生改变 onchange
表单提交 onsubmit
窗口尺寸改变 onresize
- 什么是事件：一些特定的时间点，包括：状态改变事件，鼠标事件，键盘事件
####鼠标事件
- 点击事件 onclick
- 鼠标移入 onmouseover
- 鼠标移出 onmouseout
- 鼠标按下 onmousedown
- 鼠标抬起 onmouseup
- 鼠标移动 onmousemove
####状态改变事件
- 页面加载完成事件 onload
- 获取焦点事件 onfocus
- 失去焦点事件 onblur
- value值改变事件 onchange
- 提交事件 onsubmit
- 窗口尺寸改变事件 onresize
####键盘事件
- 键盘按下事件 onkeydown
- 键盘抬起事件 onkeyup
###事件的绑定
1. 在元素内部通过事件属性添加事件 事件中的this代表的是window对象
2. 通过js代码动态绑定事件 事件中的this代表的是事件源
###事件的取消
- 在事件中执行 return false; 则可以取消当前的事件
###事件对象event
- event对象中保存着和事件相关的信息
1. 鼠标事件可以获得鼠标的坐标 event.clientX/Y
2. 键盘事件可以获得键盘的编码 event.keyCode
3. 在任何事件中可以通过event得到事件源
event.target event.srcElement
//解决兼容性问题的写法 获得事件源
var obj = event.target||event.srcElement;
- 事件源获取方式：
1. 在动态绑定的事件中 this就是事件源
2. 非动态绑定的事件中可以将事件源传递过去
3. 通过event对象获取事件源
###事件的传递（事件冒泡）
- 如果同一个区域内有过个元素的事件需要响应，响应顺序从最底层开始向上级元素传递，传递过程类似于冒泡，所以称为事件冒泡
jQuery
####什么是jQuery
- 是一个js语言写的关于js的框架
- 可以让程序员写的更少但实现的更多
####jQuery优势
1. 简化js代码
2. 可以像CSS一样获取元素
3. 可以直接修改元素的样式
4. 解决部分兼容性问题
- CSS写法
.class{
color:red;
}
- JS写法
var arr = document.getElementsByClassName("class");
for(var i=0;i arr[i].style.color = "red"; } - jq写法 $(".class").css("color","red"); ###选择器 ####基本选择器 1. 标签名选择器 $("div") 匹配页面中所有的div 2. id选择器 $("#id") 3. 类选择器 $(".class") 4. 分组选择器 $("div,#id,.class") 5. 任意元素选择器 $("*") ####层级选择器 1. $("div span") 匹配div下所有的span 2. $("div>span") 匹配div的所有span子元素 3. $("div+span") 匹配div的span弟弟元素 4. $("div~span") 匹配div的span弟弟们元素 ####层级方法 - 当得到某一个元素之后可以通过调用以下方法获得该元素的相关元素 1. 获取元素的兄弟元素 $("#abc").siblings("span"); //得到id为abc元素的所有兄弟元素 2. 获取元素的哥哥元素 $("#abc").prev(); 3. 获取元素的哥哥们元素 $("#abc").prevAll(); 4. 获取元素的弟弟元素 $("#abc").next(); 5. 获取元素的弟弟们元素 $("#abc").nextAll(); ####过滤选择器 1. $("div:first") 匹配所有div中的第一个 2. $("div:last") 匹配所有div中的最后一个 3. $("div:even") 匹配所有div中的所有偶数 从0开始 4. $("div:odd") 匹配所有div中的所有奇数 从0开始 5. $("div:eq(n)") 匹配所有div中下标为n的元素 从0开始 6. $("div:lt(n)") 匹配所有div中下标小于n的元素 7. $("div:gt(n)") 匹配所有div中下标大于n的元素 8. $("div:not(.abc)") 匹配所有div中 class值不为abc的所有元素 ####内容选择器 1. $("div:has(p)") 匹配所有包含p子元素的div 2. $("div:empty") 匹配所有空的div 3. $("div:parent") 匹配所有非空的div 4. $("div:contains('abc')") 匹配所有包含abc文本的div ####可见选择器 1. $("div:hidden") 匹配所有隐藏的div元素 2. $("div:visible")匹配所有显示的div元素 - 隐藏显示相关的方法 1. $("#abc").hide();//隐藏 2. $("#abc").show();//显示 3. $("#abc").toggle(); //隐藏显示切换 ####属性选择器 1. $("div[id]") 匹配所有包含id属性的div 2. $("div[id='abc']") 匹配所有id=abc 的div 3. $("div[id!='abc']") 匹配所有id不等于abc的div ####子元素选择器 1. $("div:first-child") 匹配是子元素 并且是第一个div子元素 2. $("div:last-child") 匹配是子元素 并且是最后一个div子元素 3. $("div:nth-child(n)") n从1开始 匹配是子元素并且是第n个div子元素 ####表单选择器 1. $(":input") 匹配form表单中的所有控件 包括：文本框 密码框、单选、多选、下拉选 等 2. $(":password") 匹配所有密码框 3. $(":radio")匹配所有单选 4. $(":checkbox")匹配所有多选 5. $(":checked") 匹配所有选中的单选、多选、下拉选 6. $("input:checked") 匹配所有选中的单选和多选 7. $(":selected") 匹配所有选中的下拉选 ####js对象和jq对象互相转换 1. js对象转jq var jq = $(js); 2. jq对象转js var js = jq[0]; ###jq的文档相关操作 DOM相关 1. 创建元素 var js = document.createElement("div"); var jq = $("
2. 添加元素
$("#big").append(myh1);
3. 插入元素
- 弟弟元素.before(新元素)
- 哥哥元素.after(新元素)
4. 删除元素
$("#id").remove();
5. css样式相关
- 获取样式值 var color = $("#id").css("color");
- 设置样式 $("#id").css("样式名称","值");
$("#id").css({"width":"100px","height":"200px"});
6. 文本相关
- 获取元素的文本内容
$("#id").text();
- 给元素文本赋值
$("#id").text("内容");
7. html相关
- 获取元素的html内容
$("#id").html();
- 给元素html赋值
$("#id").html("hehe
");
- 获取元素的子元素 .children()
8. 属性相关
- 获取元素的属性值
$("#id").attr("class");
- 给元素添加或修改属性值
$("#id").attr("class","值");
###事件相关
1. 常见事件
- 页面加载完成事件 $(function(){})
- 点击事件 click
- 获取失去焦点 focus blur
- 鼠标事件 mouseover mouseout mousedown mouseup mousemove
- 键盘事件 keydown keyup
- 屏幕尺寸改变 resize
- 表单提交 submit
2. 获取事件源的方式和js一样
3. 事件模拟
$("input").trigger("click");
4. hover事件合并
//鼠标移入和移出事件
$("span").hover(function(){
$("span").css("color","red");
},function(){
$("span").css("color","blue");
});
###和动画相关
if(this.value=="隐藏"){
$("img").hide(3000,function(){
alert("xxx");
});
}else if(this.value=="显示"){
$("img").show(3000);
}else if(this.value=="上滑"){
$("img").slideUp(2000);
}else if(this.value=="下滑"){
$("img").slideDown(2000);
}else if(this.value=="淡出"){
$("img").fadeOut(2000);
}else if(this.value=="淡入"){
$("img").fadeIn(2000);
}else{//自定义
$("img").animate({"left":"250px"},1000)
.animate({"top":"250px"},1000)
.animate({"left":"0px"},1000)
.animate({"top":"0px"},1000)
.animate({"width":"100px",
"height":"100px"},1000)
.fadeOut(2000,function(){
$(this).remove();
});
}