网站分享:
http://www.runoob.com/
回顾:
html:展示
文件 标签:
<html>
<head>
<title></title>
<meta>
<link> //导入外部css
<style></style> //直接写css
</head>
<body></body>
</html>
排版标签:
p 段落
hr 分割线
br 换行
字体标签:
<font></font>
h1~h6 标题标签 （独自占一行）
b strong
i
图片标签:
<img src="图片的路径" alt="替代文字" width="" height=""/>
超链接标签
<a href="跳转的路径" target="在那里打开">xx</a>
列表标签
<ul></ul>
<ol></ol>
子标签
<li></li>
表格★
<table border="1">
<tr>
<td></td>
</tr>
</table>
td的重要属性:
colspan:列合并
rowspan:行合并
表单标签:★
表单作用:收集用户信息
form:
常见的属性:
action:设置提交路径
method:提交方式
get和post GET比POST更不安全
，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
常见的子标签:
input
select
textarea
input标签:
属性:
type取值:(10)
text:文本框
password:密码
radio:单选框
checkbox:多选框
file:文件框
submit:提交
reset:重置
button:普通按钮
hidden:隐藏域
image:图片提交
name属性:
1.提交到服务器
2.将单选框或者复选框设置为一组
select:下拉选
格式:
<select name="">
<option>-请选择-</option>
<option value="">展示的信息</option>
</select>
textarea:文本域
格式:
<textarea rows="" cols="">默认值</textarea>
默认值:
text password:设置value属性
radio checkbox:设置 checked="checked"属性
select:在option上设置 selected="selected"属性
value可以设置按钮的展示文字
框架:
frameset:框架集
常用属性:
cols:
rows:
常用子标签:
frame
frame:
常用属性:
src:展示的页面
name:给当前的frame起个名字 方便a标签使用 target="name"
块标签:div+css布局
div 独自占一行，宽为浏览器宽
span 行内标签
//////////////////////////////////////////////////////
css:★
层叠样式表:渲染
格式:
选择器:{属性:值;属性1:值1}
html和css的整合
方式1:内敛样式表 通过标签的style属性
<xxx style="..."/>
方式2:内部样式表 通过head的style子标签
<style>....</style>
方式3:外部样式表 通过link标签导入
<link...> <link rel="stylesheet" type="text/css" href="../css/style.css" />
选择器:
id选择器 #id值
class选择器 .class值
元素选择器 标签名
属性选择器 标签名[属性="值"]
后代选择器
选择器 后代选择器
锚伪类
字体 文本 背景 列表(list-style-type:none) 浮动:float
清除浮动(分类) clear
显示(分类) display: none block inline
框模型:内边距 边框 外边距
////////////////////////////////////////
js:javascript 脚本 直接解释就可以
js和html整合:
方式1:在html页面中
<script></script>
方式2:外部的js文件
<script src=""></script>
js组成部分:
ECMAScript:语法
BOM:浏览器对象模型
DOM:文档对象模型
基础语法:
var 变量名=值;
数据类型:
原始类型
Undefined Null String Number Boolean
通过typeof判断属于那种类型
引用类型
Number Boolean
★String
属性:length
方法:
substring
★Array
属性:length
方法:
join(分隔符):打印数组
Math
Date
RegExp
直接量语法:
/正则表达式/
方法:
test()
全局
decodeURI
encodeURI
eval()
////////////////////////
函数:
function 函数名(参数列表){
函数体
}
匿名函数:
function(){....}
事件:
常见事件:
焦点:
onfocus
onblur
表单:
onsubmit
onchange
页面元素加载
onload
单击
onclick
绑定事件:
方式1:通过标签的事件属性
<xxx onxxx="函数(参数)"/> 参数若是:this 将当前的dom对象传递给函数
方式2:派发事件
dom对象.onxxx=function(){...}
///////////////////////
bom
window:窗口
常用属性:
window.location
//////
常用方法:
消息框
alert() confirm() prompt()
定时器
setInterval()
setTimeout()
打开关闭 open close
location:定位
location.href;获取当前的url
location.href="..";设置url 相当于a标签
history:历史
go()
/////////////////////////
dom
节点(Node)
元素节点
属性节点
文本节点
文档节点
获取其他节点
document.getElementById("id值"):一个元素
document.getElementsByTagName("标签名"):多个
document.getElementsByClassName("class值")多个
document.getElementsByName("name值")多个
操作属性
dom对象.属性:
例如
dom对象.value;
dom对象.value="";
dom对象.style.css属性="值";
操作标签体:
dom对象.innerHTML;获取
dom对象.innerHTML="";设置
/////////////////////////////
jquery: 百度 360 微软 >50% 都在用jquery
js类库:对原生js常见的方法和对象进行封装,方便使用
html和jquery整合:
通过script标签src属性
获取jquery对象:
$("选择器") jQuery("选择器")
dom对象和jquery对象转换
dom>>>jquery $(dom对象)
jquery>>>dom
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)
页面载入:
$(document).ready(function(){....})
$(function(){ ...})
事件和js中的事件一样:把on去掉即可
$("选择器").xxx(function(){...})
选择器:
$("#id") $(".class") $("元素") $("[属性]") $("[属性='值']")
a b: 后代 a>b:孩子 a+b:大弟弟 a~b:所有弟弟
:first :last :odd :even :eq(index)..
:has('选择器') //含有指定后
代的选择器(父元素)
:hidden :visible
:input
:checked :selected
属性和css操作:
attr|prop
prop("属性"):获取
prop("属性","值"):设置一个
prop({
"":"",
"":""
}):设置多个
removeAttr|removeProp(属性)
addClass("class名称")
removeClass("class名称")
css: 针对style属性
css("属性"):
css("属性","值"):
css({
"":"",
"":""
}):设置多个
height() width()
对value属性 标签体的操作
xxx():获取
xxx("笑嘻嘻的说法"):设置
val():
html():
text():
对文档操作:
内部插入
append
prepend
外部插入
after
before
删除
empty()清空
remove()删除
//////////////////////
效果:
hide() show() toggle()
滑入滑出
slideDown() slideUp()
淡入淡出
fadeIn() fadeOut()
////////////////////////
遍历
方式1:
jquery对象.each(function(){});
方式2:
$.each(jquery对象,function(){});
//////////////////////////////
案例1-表单校验
需求:
通过validate插件来校验表单
技术分析:
jqery validate
validate使用步骤:
validate是别人封装好的第三方工具
1.导入jquery.js
2.导入validate.js
3.在页面加载成功之后 对表单进行校验 $("选择器").validate()
4.在validate中编写校验规则
$("选择器").validate({
rules:{},
messages:{}
});
//////////////////////////////////////////
rules格式:
格式1:
字段的name属性:"校验器"
格式2:
字段的name属性:{校验器:值,校验器:值}
例如:
username:"required",
password:{
required:true,
digits:true
},
repassword:{
equalTo:"[name='password']"
},
zuixiaozhi:{
min:5
},
shuzhiqujian:{
range:[5,10]
}
///////////////////////////////////////////
messages的格式:
格式1:
字段的name属性:"提示信息"
格式2:
字段的name属性:{校验器:"提示信息",校验器:提示信息"}
例如:
username:"用户名不能为空",
password:{
required:"密码不能为空",
digits:"密码只能是数字"
},
repassword:{
equalTo:"两次输入的内容不一致"
},
zuixiaozhi:{
min:"最小值应该大于{0}"
},
shuzhiqujian:{
range:"输入的范围在{0}~{1}之间"
}
////////////////////////////////////////////