html,css
- 超文本标记语言,是一种标签语言
- 由单独的或者成对的标签组成
- 文本编辑器打开就是一些标签文本,浏览器打开会渲染成网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
- 常见的标签
标题标签:<h1>一号标题</h1>
区域标签:<div>一段内容</div>
段落标签:<p>段落</p>
图片标签:<img src="图片路径" alt"图片描述">
链接标签:<a href=“链接地址”>链接描述</a>
换行:<br>
行内一块内容:<span></span>
列表标签:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
```
- 字符实体:一些符号已经被使用了,如><,如果还想使用,在HTML中就使用这些符号的字符实体形式
-  :空格
- <:<
- >:>
- css,层叠样式表,是对标签的样式化处理文件
- 有了css,HTML专心堆叠网页结构,网页内每一个标签的样式就交给css文件了。
- 格式
```
选择器{
属性1:值;
属性2:值;
属性3:值;
}
```
- css 引用方式
- 1.内联式:直接写在标签的属性里:`<div style="width:100px; height:100px; background:red ">......</div>`
- 2.嵌入式:`<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>`
- 3.外链式:通过link标签,链接外部样式文件到页面中。`<link rel="stylesheet" type="text/css" href="css/main.css">`
- css 选择器
- 标签选择器:直接使用标签类型名进行所有这个类型标签的样式设置,范围最大。
- `div {color:red}`
- 类选择器:使用标签里的class属性名对标签进行选择
- `.blue{color:blue}`
- 层级选择器:利用标签的包含关系对标签进行选择
- `div .bule{color:blue}`
- id 选择器:利用标签中的id属性对标签进行选择,一般标签的id属性是唯一的
- `#box{color:red}`
- 组选择器:一次性选择多个标签,进行相同的设置
- `#box1,.blue,#box2{color:blue}`
- 伪类选择器:在类选择器的基础上再加一个:hover,增加了,当鼠标放在这个标签上时的样式
- `.box1:hover{color:red}`
- 伪元素选择器:在常规选择器的基础上加上:before/:after,可以在css里标签的行首或者行尾增加文字。
- `.box:before{content:"行首文字"}`
- `.box:after{content:"行尾文字"}`
- css 属性
- width:设置标签的宽度,单位为px(像素数),如:`width:100px`
- height:设置标签的高度,单位为px(像素数),如:`height:200px`
- backround:设置元素的背景颜色或者图片,如: `background:gold`
- border:设置元素四周的边框,如:`border:1px solid black`
- border可以分开设置:border-top,border-left, border-right, border-bottem
- padding:设置元素的内边距,如:`padding:20px`,padding也可以拆分分别设置,同border
- margin:设置元素的外边距,如:`margin:20px`,margin的四个边也可以分别设置,同上
- float:设置元素浮动,浮动可以让元素排在一行,分为左浮动:`float:left`和右浮动`float:right`
- list-style:设置无序列表中的小圆点,一般设置为‘无’,如:list-style:none
- 其中,文本常用的属性
- color:设置文本的颜色,如:color:red
- font-size:设置文本的大小,如:font-size:12px
- font-family:设置文字的字体,如:font-family:'Microsoft Yahei'
- line-height:设置文字的行高,如:line-height:24px
- font-weight:设置文字时都加粗,如:font-weight:bold
- test-align:设置文字水平对齐方式,如:text-align:center
- text-indent:设置文字首行缩进,如:text-indent:24px
- font-style:设置文字是否倾斜,如:font-style:'italic'
- font同时设置几个属性:font:是否加粗 字号/行高 字体;如: font:normal 12px/36px '微软雅黑';
- 元素溢出
- 子元素的大小超过父元素,默认就会出超出显示,也可以,设置溢出的显示方式
- overflow:visible:默认值
- overflow:hidden:内容被修剪,即溢出内容不可见
- overflow:scroll:浏览器以滚动条形式查看溢出内容,不溢出也显示滚动条
- overflow: auto:浏览器自动判别是否需要显示滚动条来显示溢出内容
- css盒子模型
- 元素在页面中的显示,类似一个盒子从里到外为:内容,内边距,边框,外边距,可以分别设置,整体显示
- chrome开发者工具,可以快速查看元素的结构,样式,以及盒子模型结构和尺寸
- 常用图片格式
- psd:ps专用,图片信息完整
- jpg:网页制作使用最普遍的,优点:压缩效率高,容量小;缺点:有损压缩,失真,并不支持透明背景,不能做成动画
- gif:制作网页小动画常用格式。优点:无损压缩,图像容量小,可以制作成动画,支持透明背景;缺点:图像色彩范围小,不支持半透明
- png :网页制作及日常使用常用格式。优点:无损压缩,图像容量小,支持透明,半透明,透明图像的边缘光滑;缺点:不能制作成动画
- 总结
- 网页制作,如果需要使用半透明,透明,使用.png,不使用,用.jpg
- 动画使用gif
- html表单
- 表单类似平时填写的申请表,信息表。用于搜集不同类型的用户输入,由不同类型的标签组成。
- 例子
```
<form action="http://www..." method="get">
<p>
<label>姓名:</label><input type="text" name="username" />
</p>
<p>
<label>密码:</label><input type="password" name="password" />
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
- 其中
- 标签定义表单的整体区域
- action属性 定义表单数据的提交地址
- method属性 定义表单的提交方式,一般有GET,POST方式
<label></label>
标签为表单元素定义文字标注<input />
标签定义通用的表单元素- 其中type属性
- text:单行文本输入框
- password:密码输入框
- radio:单选框
- checkbox:复选框
- file:上传文件
- submit:提交按钮
- reset:重置按钮
- button:普通按钮
- name属性:定义表单元素的名称,为提交数据时的键名
- value属性:定义表单元素的值,为提交数据时的值
<textarea>
标签:定义多行文本输入框<select><option></option>...</select>:
定义下拉元素的选项- 搜索框就是一个表单提交的例子
表单中的元素可以拿出来单独使用
块元素
- 也叫行元素,独占一行的元素
- 有:div,p, ul,li,h1`h6
- 特点是:支持全部样式;没有设置宽度,宽度为父级宽度的100%;盒子模型占据一行
- 一些块元素是包含默认样式的
- 如:p:默认外边距,ul:默认外边距和内边距,以及条目符号;h1-h6:外边距和字体大小;body:默认外边距
为了可以自定义,一般会重置这些元素的默认样式,叫样式重置
/* 清除标签默认的外边和内边距 */
body,p,h1,h2,h3,h4,h5,h6,ul{
margin:0px;
padding:0px;
}
/* 清除标签默认条目符号 */
ul{
list-style:none;
}
/* 将h标签的文字大小设置为默认大小 */
h1,h2,h3,h4,h5,h6{
font-size:100%;
/* 根据实际需求来加 */
font-weight:normal;
}
内联元素
- 行内元素,可以多个在一行显示
- a,span
特点:
- 不支持宽,高,margin上下,padding上下
- 宽高由内容决定
- 盒子并在一行
- 代码换行,盒子之间会产生间距
子元素是内联元素,父元素可以用text-align属性设置子元素水平对齐方式
解决内联元素之间间隙方法
- 去掉内联元素之间的换行
将内联元素父级样式中font-size设置为0,内联元素自身再设置font-size
其他内联元素
- :强调词
- :专业词汇
- :关键字/产品名
:表示非常重要的内容
包含默认样式的内联元素
- a:含有下划线及文字颜色
- em,i:默认为斜体
b,strong:默认为加粗
实际开发中,会进行样式重置
/* 去掉a标签默认的下划线 */ a{ text-decoration:none; } /* 去掉标签默认的文字倾斜 */ em,i{ font-style:normal; } /* 去掉标签默认的文字加粗(按实际需求) */ b,strong{ font-weight:normal; }
内联元素的特性,类型转换
- 内联块元素
- 可以在一行展示的块元素
- img input
- 特点:支持全部样式;如果没有设置宽高,宽高由内容决定;代码换行,盒子会产生间距
- 子元素是内联块元素,父元素可以用text-align设置子元素水平对齐的方式
块元素,内联元素,内联块元素,可以通过display属性来回转换
display属性
- none:元素隐藏且不占位置
- block:以块元素显示
- inline:以内联元素显示
- inline-block:以内联块元素显示
浮动
- 元素在一行中的展示方式
- 左浮动:float:left;右浮动:float:left
- 特性:
- 浮动的时候,碰到父元素的边界,其他元素才停下来
- 块元素浮动会变成内联块元素
- 父元素如果没有设置尺寸(一般是高度不设置),父元素内的整体浮动的子元素无法撑开父元素,解决办法是父元素清除浮动:父元素增加属性overflow:hidden
定位
- 文档流:每个盒子好好的占据自己的位置
可以利用元素的Position属性来设置元素的定位状态
- relative:相对于自己原位置进行偏移,元素原位置文档流位置保留
- absolute:相对于上一个设置了定位元素的父级元素进行定位,如果找不到,相对于body元素进行定位,是脱离文档流的
- fixed:相对于浏览器窗口进行定位。脱离文档流,像漂浮在文档流的上方
- static:默认值,没有定位
定位元素的偏移
- 需要定位的元素,需要用Left,right,top,bottom来设置相对于参照元素的偏移值
定位元素的层级
- 定位元素是浮动在正常的文档流之上的,可以用z-index属性来设置元素的层级
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
background属性
- 是给盒子设置背景图片和背景颜色的属性
是一个复合属性,包括以下几个设置项
- url:背景图片的地址
- position:背景图片的位置
- repeat:背景图片的如何平铺
- color:背景的颜色
backgroud:url(文件路径) left center no-repeat #00FF00
位置也可以用具体的位置点,是背景图片相对于元素的左上角进行移动.先左右,再上下,正值左下,负值右上
background:url(location_bg.jpj) -110px -150px
,表示图片相对于元素向左移动100像素,向上移动150像素
雪碧图
css权重
- 是指样式的优先级。
- 当有两条或者多条元素作用于一个元素的术后,权重高的样式先起作用。权重相同的,后面定义的样式会覆盖前面的样式。
权重的大小以数值的形式体现,计算样式的优先级,计算他们的权重值的和即可,大的,先执行,小的后执行
- !impport,加载样式属性值后,权重值为10000
- 内联样式,如:Style=” ,权重为1000
- id选择器,如:#content,权重值为100
- 类,伪类选择器,如:.content:hover,权重值为10
- 标签选择器,如,div,p 权重值为1
示例
<style type="text/css">
div{
color:red !important;
}
</style>
......
<div style="color:blue">这是一个div元素</div>
<!--
两条样式同时作用一个div,上面的样式权重值为10000+1,下面的行间样式的权重值为1000,
所以文字的最终颜色为red
-->
表格元素
指在HTML中定义像excel那样的表格
标签
- <table></table>:声明一个表格
- <tr></tr>:定义表格中的一行
- <td></td>,<th></th>:定义一行中的一个单元格,td代表普通单元格,th代表头单元格
表格整体的样式属性设置
- border-collapse:设置表格的边线合并,如:border-collapse:collapse;
单元格的常用属性
- colspan:设置单元格的水平合并,设置值是合并的单元格数量
- rowspan:设置单元格的垂直合并,设置值是合并的单元格数量
页面开发流程
- 1.创建项目目录
- 一般先创建一个总目录,然后在此目录下创建images,css,js三个目录,分别存储图片,css文件和js文件
- 2.切图
- ps,制作需要的各种图
- 3.制作雪碧图
- 将小的装饰图合并成一张大图
- 4.新建HTML文件,新建和编写,reset.css
- 5.参照效果图,编写HTML和css代码
javascript
前端三大块:html,css,js
- html负责页面的结构
- css负责页面的样式
- js负责处理页面本身的行为,如动画和元素与用户的交互
javaScript是一种运行在浏览器的脚本语言。
解决的问题是前端页面与用户交互的问题,如点击按钮,移动鼠标等
js是需要浏览器解释执行的。
- 前端脚本语言还有:JScript(微软,IE独有);ActionScript(Adobe公司)
js嵌入页面的方式
行间事件。用于简单的事件
<input type="button" name="" onclick="alerk('ok!')">
页面script标签嵌入。用于简单的交互逻辑
<script type="text/javascript"> alert('ok!') </script>
外部引用,一般用法
<scipt type="text/javascript" src="js/index.js"></script>
js基本语法
注释
- 单行注释:
//单行注释
- 多行注释
/* 多行注释 1、... 2、... */
- 单行注释:
变量定义
- js是一种弱类型语言,变量的类型由它的值来决定
- var:用var 来声明要定义一个变量
var iNum = 123; var sStr1 = "michael"; //多个变量定义可以使用同一个var var iNum=123, sStr1="michael";
- 变量类型
5 种基本数据类型 1:number :数字类型 2:string:字符串类型 3:boolean:布尔类型 4:undefined:undifined类型,变量声明但是未初始化 5:null:nulll类型,变量声明了,是为了存储对象的,还没存储,返回的就是 null 1 中复合类型 object:对象类型
命名规范
- 1.区分大小写
- 2.第一个字符必须是字母,下划线,或者$(python中没有)
3.其他字符可以是字母,下划线,数字或者$(python中没有)
匈牙利式命名规范:
对象o Object 比如:oDiv 数组a Array 比如:aItems 字符串s String 比如:sUserName 整数i Integer 比如:iItemCount 布尔值b Boolean 比如:bIsComplete 浮点数f Float 比如:fPrice 函数fn Function 比如:fnHandler 正则表达式re RegExp 比如:reEmailCheck
- 注意点
- 结束一句代码要用;
- js不想求缩进,但是为了美观,易于阅读,还是要缩进
函数
是什么
- 可以重复执行的代码块
定义与执行
<script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello'); } // 函数执行 fnAlert() </script>
预解析
- js代码解析过程分为两个阶段,预解析和执行
- 预解析会将定义的函数和变量加载一遍
- 就是说,函数可以在定义前使用;变量的如果没有赋值,先赋值为undefined
<script type="text/javascript"> fnAlert(); // 弹出 hello! alert(iNum); // 弹出 undefined function fnAlert(){ alert('hello!'); } var iNum = 123; </script>
函数传参
- 像python一样进行传参
- 参数不能设置为缺省值
函数返回值
- 像python中一样使用
条件语句
- 需要控制语句的走向,就需要用到条件语句
if ; if else;
条件判断时的运算符
- ==,===,>,>=,<,<=,!=,&&,||,!
获取元素的方法
- 根据元素的id值进行元素的获取
- 使用内置对象document的getElementById方法获取
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div
- 这样有一个问题,在获取元素前必须定义,所以代码必须在html该元素之后获取,比较不方便
结局办法:将获取元素语句放在 wIndow.onload(){}函数中即可,表示在页面加载的时候再运行,而此时,该元素肯定已经被编译过了
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); } </script> .... <div id="div1">这是一个div元素</div>
操作元素的属性
- 对获取到的页面元素进行操作,操作方式包括读和写
- 读:
var 变量名 = 元素对象.属性名
写:
元素对象.属性名 = 新的属性值
- 注意有些属性名在js中的写法个html中不一样
"class" 在js 中写成 ”className“ "style" 属性里面的属性,有横杠的改成驼峰式,如:”font-size“,改成"fontSize"
例子:
<script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('input1'); var oA = document.getElementById('link1'); // 读取属性值 var sValue = oInput.value; var sType = oInput.type; var sName = oInput.name; var sLinks = oA.href; // 写(设置)属性 oA.style.color = 'red'; oA.style.fontSize = sValue; } </script> ...... <input type="text" name="setsize" id="input1" value="20px"> <a href="http://www.itcast.cn" id="link1">巴拉拉小魔仙</a>
innerHTML
- 标签包裹里的内容‘
- 可以获取和写入标签包裹里的内容
# 获取 var sTxt = oDiv.innerHTML # 写入 oDiv.innerHTML = '<span>这是新增加的一段内容</span>'
事件属性
- 一个元素(标签)除了有,id,class,style这些属性,还有事件属性
- 事件:发生的动作,如:点击事件(onclick),鼠标移入事件(mouseover),鼠标移出事件(mouseout)…
- 事件属性就是标签一旦发生了某些事件,起作用的属性
- 一般,事件属性都会关联相关函数
格式:
元素对象.事件属性=函数名
<script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); oBtn.onclick = myalert; function myalert(){ alert('ok!'); } } </script>
匿名函数
- 没有名字的函数
- 用于直接将函数体传给元素事件属性的时候
- 可以减少函数名的命名数
格式:
对象名.事件名= function(){函数体}
- 例子
oBtn.onclick = function (){ alert('ok!'); }
数组
一组数据的集合
- 在js中数组中的类型可以是不一样的
- 像python中的List类型:
[1,2,3,"abc"]
定义数组
- 对象实例创建:
var alist = new Array(1,2,3)
- 直接创建:var aList = [1,2,3,”abc”]
- 对象实例创建:
操作数组
- 获取长度:
aList.length
- 用下标查询某个值:
aList[2]
- 将数组元素串成字符串:
aList.jin('-')
- 从数组最后增加或者删除元素:
aList.push(5)
,aList.pop()
- 将数组反转:
aList.reverse()
- 返回数组中元素第一次出现的索引值:
aList.indexOf("a")
- 在数组中删除插入元素
var aList = [1,2,3,4]; alist.splice(2,1,5,6,7);//从数组的第2个元素开始(不包括第2个元素),删除1个元素,并且将5,6,7加入到数组中去 alert(aList);//弹出1,2,5,6,7,4
- 多维数组
- 数组的成员也是数组
var aList = [[1,2,3],[4,5,6]]
- 获取长度:
循环语句
- 一种代码结构
- 有需要重复执行的语句时,使用循环语句
while 循环
while(条件) { 需呀循环执行的语句 }
for 循环
for(var i=0; i<len; i++) { 需要循环的语句 }
字符串处理
对js里的字符串可进行一系列操作
- 字符串合并:
var sTr1 = "12"; var iNum1 = 23; var iNum2 = 25; var sTr2 = "abc" alert(iNum1+iNum2);//弹出48 alert(iNum1+sTr1);//弹出 2312,字符串和数字相加,会将数字转换为字符串 alert(sTr1+sTr2);//弹出 12abc
- 将数字字符串转换为整数:parseInt()
var sTr1 = "12"; var iNum1 = 23; alert(parseInt(sTr1)+iNum1); //弹出35
- 将数字字符串转换为小数:parseFloat()
var iNum1 = 12; var sTr2 = "23.22"; alert(iNum1+parseFloat(sTr2));//弹出25.22
- 将一个字符串分割成字符串组成的数组 :split()
var sTr = '2017-4-22'; var aRr = sTr.split("-"); var aRr2= sTr.split(""); alert(aRr); //弹出['2017','4','2'] alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
- 查找字符串是否含有某字符:indexOf()
var sTr = "abcdefgh"; var iNum = sTr.indexOf("c"); alert(iNum); //弹出2
- 截取字符串:substring(start, end),不包括end
var sTr = "abcdefghijkl"; var sTr2 = sTr.substring(3,5); var sTr3 = sTr.substring(1); alert(sTr2); //弹出 de alert(sTr3); //弹出 bcdefghijkl
- 字符串反转:转换为数组后使用.revese()在转换为字符串
var sStr = "asdfasdf123asdf" var sStrReverse = sStr.split('').reverse().join('') alert(sStrReverse)
调试程序的方法
- alert
- console.log()
- document.title
定时器
- 定时器是在js中用于定时调用函数和制作动画的功能类
//定时器:
setTimeout :只执行一次的定时器
clearTimeout:关闭只执行一次的定时器
setInterval:反复执行的定时器
clearInterval:关闭反复执行的定时器
*/
var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
alert('ok!');
}
变量作用域
变量的作用范围,分为全局变量和局域变量
- 全局变量:在函数之外定义,在整个页面公用的变量
- 局域变量:在函数内部定义的变量,只能在定义该变量的函数内部访问,外部无法访问
<script type="text/javascript"> // 定义全局变量 var a = 12; function myalert() { // 定义局部变量 var b = 23; alert(a); // 修改全局变量 a++; alert(b); } myalert(); // 弹出12和23 alert(a); // 弹出13 alert(b); // 出错 </script>
封闭函数
- 定义好就执行的函数
- 格式
//封闭函数定义
(function(){
函数体 })();
// 一般函数定义
function func1 (){
函数体
};
- 作用
- 创造一个独立的空间,在封闭函数里定义的变量和函数跟外面的同名的话,不会影响外面的变量或者函数
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();
JQuery
是什么?
- 是应用最广泛的javascript函数库
愿景:Write Less, Do More
导入:将这个文件导入到HTML文件中即可
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
解决需要先解析才能执行的问题
- 和原生js一样,直接使用Jquery,如果写在HTML代码的上面,也会出现因为没有定义就使用的错误
- 解决办法,更简单的.read(),比window.onload()更快
$(document).read(function(){
jQuery代码;
});
更可以简写成
$(funcition(){
jQuery代码
});
jQuery选择器
- 选择某个网页元素的方式
然后对这个元素进行操作
- 格式:$(‘选择器’);用法和css选择器一样
$('#myId') //选择id为myId的元素 $('.myclass') //选择class为myclass的元素 $('li') //选择所有的li元素 $('#ur1 li span')//选择id为ur1元素里的 所有li标签 里的所有span标签 $('input[name=first]')//选择name属性为first的input元素
对选择集进行过滤
$('div').has('p');//选择包含p元素的div元素 $('div').not('.myClass');//选择不class属性不等于myClass的div元素 $('div').eq(5);//选择第6个div元素
选择集转移
$('#box').prev();// 选择id是box的元素的上一个同辈元素 $('#box').prevall();//选择id是box的元素之前所有的同辈元素 $('#box').next();//选择id是box的元素的后面的一个同辈元素 $('#box').nextall();//选择id是box的元素的后面的所有同辈元素 $('#box').parent();//选择id是box的元素的父级元素 $('#box').children();//选择id是box元素的所有子元素 $('#box').siblings();//选择id是box元素的所有同级元素 $('#box').find('.myClass');//选择id是box元素内的class属性为myClass的元素
判断是否选择到了元素
- 使用length属性判断
var $div1 = $('#div1'); var $div2 = $('#div2'); alert($div1.length);// 弹出1 alert($div2.length);// 弹出0 ... <div id=”div1“>这是一个div</div>
jQuery样式操作
- 用JQuery语法对获取到的元素的样式进行读写操作
- 核心思想:同一个函数完成取值和赋值
// 获取div的样式
var sTr = $('div').css('width')
var sTr1 = $('div').css('color')
// 设置div的样式
$('div').css("width","30px");
$('div').css("height","30px");
$('div').css({fintSize:"30px",color:"red"});
选择器获取的多个元素,获取信息获取的是第一个,比如$(“div”).css(“width”),获取的是第一个div的width
操作样式类名
$("#div1").addClass("divClass2") // 为id为div1的元素增加类名 divClass2 $("#div1").remove("divClass") // 为id为div1的元素删除类名divClass $("#div1").remove("divClass divClass2") // 为id为div1的元素删除类名 divClass 和 divClass2 $("#div1").toggleClass("anotherClass") // 重复切换anotherClass的选择器(使用/不使用)
绑定事件
- 给获取到的元素绑定一个事件
$(#btn1).click(function(){
// 内部的this指的是原生对象
// 使用 JQuery对象用$(this)
})
- 获取元素的索引值
- 获取一个元素在其同胞元素的索引值
$li.index()
jquery动画
- 使用jquery函数库里的animate方法完成一些动画的效果
$('#div').animate({
width:300,
height:300},
1000,
'swing',
function(){
alert('done!');
}
});
其中:
参数1:要改变的样式属性值。写成字典的形式,注意是动画结束的终止位置的样式
参数2:动画持续的事件。单位为毫秒
参数3:动画曲线。默认为’swing‘,缓冲运动,还可以设置成’linear‘,匀速运动
参数4:动画回调函数。动画完成后执行的匿名函数
jquery的特殊效果
fadeIn():淡入
$btn.click(function(){
$('#div1').fadeIn(1000,'swing',function(){
alert('ok!');
});
});
fadeOut():淡出
fadeToggle:切换淡入淡出
hide():隐藏元素
show():显示元素
toggle():切换元素的可见状态
slideDown():向下展开
slideUP():向上卷起
slideToggle():依次展开或者卷起某个元素
jquery的链式调用
- jquery对象在执行完方法后会回到这个jquery这个对象,可以继续使用其他方法,完成后再次回到当前的对象,可以继续使用方法,可以将一系列的方法调用和对象间跳转写在前后依次写在一起用’.’连起来读。这种调用方式,叫做链式调用
$('#div1')//获取id为div1的元素
.children('ur')//获取该元素下面的ul元素
.slideDown('fast')//高度从零变到实际高度来显示ul元素
.parent()//跳到ul的父级元素,也就是一开始的id为div1的元素
.siblings() //跳到与id=div1的元素平级的所有兄弟元素上
.children('ul') //这些兄弟元素里的ul元素
.slipUp('fast'); //高度从实际高度变换到0来隐藏元素
jquery属性操作
- html():取出或者设置html内容
//取出html内容
var $htm = $('#div1').html()
// 设置html内容
$('#div1').html('<span>一段文字<span>')
- prop():取出或者设置某个属性的值
// 取出图片的地址
var $src = $('#imag1').prop('src')
// 设置图片的地址和alt属性
$('#imag1').prop({src:"test.jpg", alt:"Test Image"})
jquery循环
- 使用each方法对获取到的多个元素进行分别操作
$(function(){
$('.list li').each(function(){
alert($(this).html())
})
})
...
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
jquery事件
- 一些常用的jquery事件
blur():元素失去焦点
focus():元素获得焦点
click():鼠标点击
mouseover():鼠标进入(进入子元素也触发)
mouseout():鼠标离开(离开子元素也触发)
mousenter():鼠标进入(进入子元素不触发)
mouseleave():鼠标离开(离开子元素不触发)
hover():同时为mouseenter()和mouseleave()事件指定处理函数
read():Dom加载完成
submit():用户提交表单
事件冒泡
是什么
- 在一个对象上触发某类事件,如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回True,那么这个事件会向这个对象的父级对象传播,从里到外,直到它被处理(父级对象所有同类事件都会被激活),或者它到达了对象的顶层,即document对象(有些浏览器是window)
作用
- 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件添加到多个子元素上),它还可以让你在对象的不同级别捕获事件
如何阻止
event.stopPropagation()
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div
- 阻止默认行为
// 阻止表单的提交
$('#form1').submit(function(event){
event.preventDefaut();
)
合并阻止操作
- 实际开发中,一般把阻止冒泡行为和阻止默认行为合并起来写
// 单独写法 event.stopPropagation event.preventDefault // 合并写法 return false
事件委托
时间委托是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行响应的操作
事件委托的作用
- 极大的减少事件的绑定次数,提高性能
- 可以让新加入的元素也可以拥有相同的操作
// 一般事件写法
$(function(){
$ali = $('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
//事件委托的写法
$(function(){
$list = $('#list');
$list.delegate('li', 'click', function() {
$(this).css({background:'red'});
});
})
...
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
jquery 元素节点操作
- 元素节点:就是之间的结合点
元素节点操作,就是通过删除增加元素的方式,改变原HTML文件的结构
常见的操作
- 移动现有标签的内容
- 将新创建的标签插入到现有标签中
创建新标签
var $div = $('<div>'); //创建一个空的div
var $div2 = $('<div>这是一个div元素</div>')
移动或者插入标签的方法
- append(),appendTo():在现存的元素内部,从后面放入元素
var $span = $('<span>这是一个span元素<span>') $('#div1').append($span) ... <div id="div1"></div>
- prepend(),prependTo():在现存元素的内部,从前面放入元素
- after(),insertAfter():在现存元素的外部,从后面放入元素
- before(),insertBefore():在现存元素的外部,从前面放入元素
删除标签
- $(‘#div1’).remove();
表单验证
- 就是使用正则表达式验证表单中的提交数据是否符合要求
- 正则表达式
- 可以对字符串进行匹配,处理的格式字符表达式
- 定义
-
var reO1 = new RegExp('规则','可选参数');
-
var re01 = /规则/参数
-
var sTr01 = '123456asdf';
var re01 = /\d+/;
//匹配纯数字字符串
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //弹出true
alert(re02.test(sTr01)); //弹出false
修饰参数
- g:global,全文搜索,默认搜索到第一个结果就停止
- i:ignore case,忽略大小写,默认是大小写敏感的
常用函数
- 正则.test() :匹配 成功,返回 true;失败,返回 False
常用正则匹配规则
// 用户名验证(数字,字母,下划线,6-20位)
var reUser = /^\w{6,20}$/;
// 邮箱验证
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i
// 密码验证
var rePass = /^[\w!@#$%^&*]{6,20}$/;
// 手机号验证
var rePhone = /^1[34578]\d{9}$/;