文章目录
- 前端-HTML
- 标签
- head标签
- body标签
- 文本与实体字符
- 多媒体
- 超链接与锚点
- 列表
- 表格
- 内嵌框架
- 表单
- **表单元素**
- 前端-CSS
- 书写方式
- 选择器
- 基本选择器
- 关系选择器
- 伪选择器
- 浮动float
- 定位position
- 盒子模型
- 前端-JS
- 书写方式
- 数据类型
- 事件
- BOM
- DOM
- 前端-jQuery
- 页面加载
- 选择器
- 基本选择器
- 属性选择器
- 位置选择器
- 表单选择器
- DOM
- 动画效果
- 表单验证
前端-HTML
网络传输：客户端输入URL后根据HTTP协议在服务端请求资源，服务端响应给客户端HTML（描述网页的语言），通过浏览器自带的HTML解析器进行解析
标签
head标签
<title>、<meta>、<link>、<style>、 <script>、 <base>
<head>
<!--页面标题-->
<title>百度一下，你就知道</title>
<!--设置页面的编码，防止乱码现象
charset="utf-8" 这是属性，以键值对的形式给出 k=v a=b
-->
<meta charset="utf-8" /><!--简写-->
<!--繁写形式：content-type=text/html-->
<!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />-->
<!--页面刷新效果：3秒刷新到百度页面-->
<!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />-->
<!--页面作者-->
<meta name="author" content="msb;213412@qq.com" />
<!--设置页面搜索的关键字-->
<meta name="keywords" content="马士兵教育;线上培训;架构师课程" />
<!--页面描述-->
<meta name="description" content="马士兵教育详情页" />
<!--link标签引入外部资源-->
<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
</head>
body标签
文本与实体字符
<!--文本标签与实体字符-->
<!--标题标签：h1-h6 字号逐渐变小，每个标题独占一行，自带换行效果-->
<h5>媒体：为人父母，要不要“持证上岗”？</h5>
<!--横线标签
300px ：固定宽度
30%：页面宽度的百分比，会随着页面宽度的变化而变化
-->
<hr width="300px" align="center"/>
<hr width="30%" align="center"/>
<!--段落标签：段落效果：段落中文字自动换行，段落和段落之间有空行-->
<p> 5月 26日，“建议父母持合格<父母证>上岗©”。</p>
<!--加粗倾斜下划线-->
<i><u><b>加粗倾斜下划线</b></u></i>
<!--一箭穿心-->
<del>你好 你不好</del>
<!--预编译标签：在页面上显示原样效果-->
<pre>
System.out.println("hello msb....");
</pre>
<!--换行-->
5月26日，“建议父母持合格父母证上岗”冲上微博<br />热搜，迅速的全国两会上，全国政
<!--字体标签-->
<font color="#397655" size="7" face="萝莉体 第二版">建议父格证上岗</font>
多媒体
<!--图片
src:引入图片的位置
width:设置宽度 height:设置高度
注意:一般高度和宽度只设置一个即可，另一个会按照比例自动适应
title:鼠标悬浮在图片上的提示语
alt:图片加载失败的提示语
-->
<img src="img/s.jpg" width="300px" title="这是一个" alt="图片加载失败"/>
<!--音频-->
<embed src="music/我要你.mp3"></embed>
<!--视频-->
<embed src="video/周杰伦 - 说好的幸福呢.mp4" height="500px"></embed>
超链接与锚点
<!--
href:控制跳转的目标位置
target:_self 在自身页面打开
_blank 在空白页面打开
-->
<a href="">这是一个超链接02</a> <!--跳转到自身页面-->
<a href="https://www.baidu.com" target="_self">这是一个超链接04</a>
<a href="https://www.baidu.com" target="_blank">这是一个超链接05</a>
<!--锚点-->
<!--
name：设置锚点的名称
href="文档...#锚点名称"进行跳转
-->
<a name="1F"></a>
<h1>手机</h1>
<p>华为p40</p>
<a name="2F"></a>
<h1>化妆品</h1>
<p>大宝</p>
<a name="3F"></a>
<h1>母婴产品</h1>
<p>奶粉</p>
<a name="4F"></a>
<h1>图书</h1>
<p>thinking in java</p>
<a href="#1F">手机</a>
<a href="#2F">化妆品</a>
<a href="#3F">母婴产品</a>
<a href="#4F">书籍</a>
列表
<!--无序列表:
type:可以设置列表前图标的样式
更换图标样式，借助css技术： style="list-style:url(img/act.jpg) ;"
-->
<h1>起床以后需要做的事</h1>
<ul type="square">
<li>睁眼</li>
<li>穿衣服</li>
<li>上厕所</li>
<li>吃早饭</li>
<li>洗漱</li>
<li>出门</li>
</ul>
<!--有序列表:
type:可以设置列表的标号：1,a,A,i,I
start:设置起始标号
-->
<h1>学习java的顺序</h1>
<ol type="A" start="3">
<li>JAVASE</li>
<li>ORACLE</li>
<li>MYSQL</li>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
表格
<!--表格:
table:表格
tr:行
td:单元格
th:特殊单元格：表头效果：加粗，居中
rowspan:行合并
colspan：列合并
默认情况下表格是没有边框的，通过属性来增加表框：
border:设置边框大小
cellspacing：设置单元格和边框之间的空隙
align="center" 设置居中
background 设置背景图片 background="img/ss.jpg"
bgcolor :设置背景颜色
-->
<table border="1px" cellspacing="0px" width="400px" height="300px" bgcolor="darkseagreen" >
<tr bgcolor="bisque">
<th>学号</th>
<th>姓名</th>
<th>年纪</th>
<th>成绩</th>
</tr>
<tr>
<td align="center">1001</td>
<td>丽丽</td>
<td>19</td>
<td rowspan="3">90.5</td>
</tr>
<tr>
<td colspan="2" align="center">2006</td>
<td>30</td>
</tr>
<tr>
<td>3007</td>
<td>小明</td>
<td>18</td>
</tr>
</table>
内嵌框架
<iframe src="URL" name="myname"></iframe>
<a href="img/java核心技术.jpg" target="myname">在myname的内嵌框架打开img/java核心技术.jpg</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="书籍导航页面.html" height="700px" width="30%"></iframe>
<!--内嵌框架-->
<iframe name="iframe_my" width="67%" height="700px" src="img/think in java.jpg"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="img/java核心技术.jpg" target="iframe_my">java核</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--框架集合：和body是并列的概念，不要将框架集合放入body中-->
<frameset rows="20%,*,30%">
<frame />
<frameset cols="30%,40%,*">
<frame />
<frame src="index.html"/>
<frame />
</frameset>
<frameset cols="50%,*">
<frame />
<frame />
</frameset>
</frameset>
</html>
表单
<form action＝"url" method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和post两种，默认为get
https://www.baidu.com/s?wd=123123&rsv_spt=1&rsv_iqid=0xb7c24b2f08ce4098&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ib&rsv_sug3=6&rsv_sug1=1&rsv_sug7=100
action="https://www.baidu.com/s"
内容的name=wd value=123123
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--定义form表单:form表单会采集包含的有效数据，提交到后端，进行交互-->
<!--
【1】action属性
http://127.0.0.1:8020/Form表单/aaa?username=nana&pwd=123123
?之前是提交的资源的目标地址
?之后是提交的具体的数据
Form表单：指的是你的项目名字：Form表单
PS:可以使用在线解析工具查看：urlencode
aaa:目标资源 --》去当前项目下找aaa了
?后的内容：
我们写的文本框，密码框等必须要加入一个属性：name
多个键值对之间 ，用&符号进行拼接
只有放在form表单中的内容才会被收集并提交
【2】method属性：默认情况下不写method属性的时候就相当于method="get"
get方式：提交数据可见，不安全，提交数据长度有限制，效率高
post方式 ：提交数据不可见，安全，提交数据长度没有限制，效率低
-->
<form action="aaa" method="post">
用户名：<input type="text" name="username" /><br />
密码：<input type="password" name="pwd" /><br />
<input type="submit" />
</form>
</body>
</html>
表单元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<!--表单元素-->
<!--文本框:
input标签使用很广泛，通过type属性的不同值，来表现不同的形态。
readonly只读：只是不能修改，但是其他操作都可以，可以正常提交
disabled禁用：完全不用，不能正常提交
autofocus:自动获取焦点
required:必填项
-->
<input type="text" name="uname" placeholder="请录入身份证信息"/>
<input type="text" name="uname2" value="123123" readonly="true"/>
<input type="text" name="uname3" value="456456" disabled="disabled"/>
<!--密码框:效果录入信息不可见-->
<input type="password" name="pwd" />
<!--单选按钮-->
性别：
<input type="radio" name="gender" value="1" checked="checked"/>男
<input type="radio" name="gender" value="0"/>女
<!--多选按钮:
多个选项提交的时候，键值对用&符号进行拼接：例如：favlan=1&favlan=3
-->
你喜欢的语言：
<input type="checkbox" name="favlan" value="1" checked="checked"/>java
<input type="checkbox" name="favlan" value="2" checked="checked"/>python
<input type="checkbox" name="favlan" value="3"/>php
<input type="checkbox" name="favlan" value="4"/>c#
<!--文件-->
<input type="file" />
<!--隐藏域-->
<input type="hidden" name="uname6" value="123123" />
<!--普通按钮：普通按钮没有什么效果，就是可以点击，以后学了js，可以加入事件-->
<input type="button" value="普通按钮" />
<!--特殊按钮：重置按钮将页面恢复到初始状态-->
<input type="reset" />
<!--特殊按钮：图片按钮-->
<input type="image" src="img/java核心技术.jpg" />
<!--下拉列表
默认选中：selected="selected"
多选：multiple="multiple"
-->
<br/>你喜欢的城市：
<select name="city" multiple="multiple">
<option value="0">---请选择---</option>
<option value="1">哈尔滨市</option>
<option value="2" selected="selected">青岛市</option>
<option value="3">郑州市</option>
<option value="4">西安市</option>
<option value="5">天津市</option>
</select>
<!--多行文本框
利用css样式来控制大小不可变：style="resize: none;"
-->
<br/>自我介绍：
<textarea style="resize: none;" rows="10" cols="30">请在这里填写信息。。</textarea>
<br />
<!--label标签
点击label标签会根据for对应的id自动跟踪
-->
<label for="uname">用户名：</label><input type="text" name="uername" id="uname"/>
<!--HTML5新增:-->
<input type="email" name="email" />
<input type="url" />
<input type="color" />
<input type="number" min="1" max="10" step="3" value="4"/>
1<input type="range" min="1" max="10" name="range" step="3"/>10
<input type="date" />
<input type="month" />
<input type="week" />
<!--特殊按钮：提交按钮：具备提交功能-->
<input type="submit" />
</form>
</body>
</html>
前端-CSS
选择器+样式
书写方式
就近原则
- 内联样式
- 内部样式
- 外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style type="text/css">
h1{
color: yellow;
}
</style>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
<!--内联样式-->
<h1 style="color: red;">这是一个标题</h1>
</body>
</html>
选择器
基本选择器
id选择器>class选择器>元素选择器
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*将所有元素的样式：外边距，边框，内边距全部设置为0*/
*{
margin: 0px;
border: 0px;
padding: 0px;
}
<!--class选择器-->
.mycls{
color: red;
}
<!--id选择器-->
#myid{
color: yellow;
}
<!--元素选择器-->
h1{
color: greenyellow;
}
input[type="text"][value="zhaoss1"]{
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="mycls" id="myid">我是标题</h1>
用户名：<input type="text" value="zhaoss1" />
用户名2：<input type="text" value="zhaoss2" />
</body>
</html>
关系选择器
div占行，span占行内一部分
-
后代选择器
-
父 子代{ 样式 }
-
-
子代选择器
-
父>子代{ 样式 }
-
-
子代选择器 范围 包含于 后代选择器
伪选择器
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*设置静止状态*/
a:link{
color: yellow;
}
/*设置鼠标悬浮状态*/
a:hover{
color: red;
}
/*设置触发状态*/
a:active{
color: blue;
}
/*设置完成状态*/
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="index.html">超链接</a>
</body>
</html>
浮动float
使元素脱离文档流
style="float:left/right/none"
消除浮动
- 浮动父节点添加overflow:hidden
- 浮动父节点添加height
- 被影响物体添加clear:both
定位position
-
静态定位static
-
相对定位relative
-
使用：小范围/配合绝对定位使用 关键：保留原来的占位 position: relative;bottom: 10px;right: 20px;z-index:10; 向左上移动，覆盖z-index小于10的，被大于10的覆盖
-
-
绝对定位absolute
-
使用：父级节点relative定位，子级节点使用绝对定位（否则针对body进行偏移） 关键：释放原来的占位
-
-
固定定位fixed
盒子模型
- 控制当前元素相对于外部元素的位置：margin
- 控制内部元素相对于当前元素的位置：padding
- 控制当前元素的实际内容：width;height
- 控制当前元素的填充色：padding+width;height
前端-JS
- ECMAScript：JS的基础语法部分
- DOM：使用document对象操作文档内容的编程
- BOM：使用window对象操作浏览器行为的编程
书写方式
<!DOCTYPE html>
<html>
<head>
<!--内嵌式引入方式-->
<script type="text/javascript"></script>
<!--链接式引入方式-->
<script type="text/javascript" src="js/myjs.js"></script>
</head>
<body>
<input type="button" value="点我呀" onclick="fun1()" />
</body>
</html>
数据类型
-
数据定义
var 变量 = 值 String Number boolean null undefined object Math Date -
数据运算
/ mod 能除尽,则默认结果就是一个整数,不能除尽,结果默认就是浮点数 除零 => Infinity 和0取余数 => NaN(not a number) + 如果一段是字符串,就变成了文字拼接 数字和 boolean类型相加 true会转变成1 false会转变成0 再做数学运算 == 先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容 === 数据类型不同 直接返回false如果类型相同 才会比较内容 -
函数
/* * 第一种语法格式 常见 * function 函数名(参数列表){js代码} * 第二种语法 * var 函数名=function(参数列表){JS代码} * 第三种语法 不常用 了解 * var 函数名=new Function('js代码') * */ function fun1(){ alert("你好"); } var fun2=function(){ alert("你很好") } var fun3=new Function('alert("你非常好");'); /* * * 1传入的实参可以和形参个数不一致 * 2如果函数中有返回值,那么直接用return关键字返回即可 * */ function fun1(a,b,c){ alert("a:"+a); alert("b:"+b); alert("c:"+c); } //fun1(10,"hello js",false); // 少传参数 OK //fun1(1,2); // 多传参数 OK 多出来的参数相当于没传 -
数组
/* 创建 空数组 new Array(); 定长数组 new Array(5); var arr3=new Array("asdf",10,20.3,true); var arr4=["asdf",10,20.3,true]; */ /* 修改长度(length、索引) var arr = [1,2,3]; arr.length=5; arr[9]=99; */ /* 遍历 <script> var arr=[5,7,3,1,6,2,4,9,8]; for(var i=0;i<arr.length;i++){ console.log(arr[i]) } for (var i in arr){ console.log(arr[i]) } </script> */ /* <script> var arr=[1,2,3,4,5,6,7,8,9]; var index =arr.indexOf(7);//查询元素索引的方法 // 合并两个数组 var children = hege.concat(stale); // 合并三个数组 var family = parents.concat(brothers, children); // 合并字符串 var fruits = ["Banana", "Orange", "Apple", "Mango"]; var fs =fruits.join(); // 移除最后一个元素 var fruit=fruits.pop(); // 想结尾增加元素 fruits.push("Grape"); //反转数组 fruits.reverse(); //删除数组第一个元素 var ss =fruits.shift(); //向第一个位置添加元素 fruits.unshift("火龙果"); // 截取子数组 [) var citrus = fruits.slice(1,3); // 排序 var numbers=[5,7,9,6,1,8,3,4,2]; numbers.sort(function(a,b){return b-a}); </script> */ -
object
- 实例化
<script> // 1.实例化对象 var obj =new Object(); obj.name="张思锐"; obj.eat=function(food){ console.log(this.name+"正在吃"+food) } // 2.构造方法 function Person(pname,page){ this.pname=pname; this.eat=function(food){ console.log(this.pname+"正在吃"+food); } } var p1=new Person("张思锐",10); // 3.json var person ={ name:"晓明", eat:function(food){ console.log(this.name+"正在吃"+food) } }; </script>- 原型的_proto_属性执行Object(Object对象是所有的原型)
<script> // 准备一个构造方法 function Person(pname,page){ this.pname=pname; this.page=page; this.eat=function(food){ console.log(this.page+"岁的"+this.pname+"正在吃"+food); } } //给Person的原型增加属性 Person.prototype.gender="男"; //给Person的原型增加一个方法 Person.prototype.sleep=function(){ console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉"); } //给最终原型增加属性 Object.prototype.gender="男"; //给Person的原型增加一个方法 Object.prototype.sleep=function(){ console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉"); } </script>
事件
-
鼠标事件
onclike ondblclick双击 oncontextmenu右键 onmouse + down/enter/leave/over/mvove/out/up -
键盘事件
onkey + down/up/press -
表单事件
onblur失去焦点 onfocus获得焦点 onchange oninput onreset onsearch onselect onsubmit -
页面加载
<body onload="testFun()">
BOM
-
location
function fun1(){ console.log(location.host);// 服务器的IP+端口号 console.log(location.hostname);// IP console.log(location.port);// 端口号 console.log(location.href);// 地址栏中具体的文字 location.href="https://www.baidu.com" } -
history
function fun1(){ window.history.forward(); } function fun2(){ history.back(); } function fun3(){ history.go(2); // 正整数 向前跳转 * 页 负整数 向后跳转*页 } -
screen
console.info(window.screen.width) console.info(window.screen.height) console.info(navigator.userAgent) console.info(navigator.appName) -
弹窗
window.alert("你好呀");//普通信息提示框 var con =window.confirm("确定要删除***?"); // 确认框 var message =window.prompt("请输入3号名字","例如:小刚"); // 信息输入框 -
定时器
<script> var intervalIDS =new Array(); // [1,2,3 ] // 循环执行的定时器任务 function startInterval(){ // 2 var intervalID = window.setInterval( function(){ var today =new Date(); var hours=today.getHours(); var minutes=today.getMinutes(); var seconds =today.getSeconds(); var str = hours+"点"+minutes+"分"+seconds+"秒"; var ta =document.getElementById("timeArea"); ta.value =str; }, 1000 ); intervalIDS.push(intervalID); } function stopInterval(){ while(intervalIDS.length >0){ window.clearInterval(intervalIDS.shift()); } } var timeoutIDS =new Array(); // 执行一次的定时器任务 function startTimeout(){ var timeoutID =window.setTimeout( function(){ var today =new Date(); var hours=today.getHours(); var minutes=today.getMinutes(); var seconds =today.getSeconds(); var str = hours+"点"+minutes+"分"+seconds+"秒"; console.log(str) }, 5000 ); timeoutIDS.push(timeoutID); } function stopTimeout(){ while(timeoutIDS.length >0){ window.clearTimeout(timeoutIDS.shift()); } } </script>
DOM
-
获取节点
var element1 =document.getElementById("d1"); var elements =document.getElementsByClassName(className); var elements =document.getElementsByTagName("input"); var elements=document.getElementsByName("hobby"); for(var i =0;i<elements.length;i++){ console.log(elements[i]) } -
操作节点属性和样式
var node =document.getElementById("in1"); //改变属性值 node.type="button"; node.value="你好我也好"; //getAttribute setAttribute console.log(node.getAttribute("type")); node.setAttribute("value","大家好"); element.style.width="200px"; element.style.height="200px"; element.style.border="10px solid green"; -
操作标签文本
var element1=document.getElementById("d1"); /* * innerText 不包含HTML结构 * innerHTML 包含HTML结构 * */ console.log("innerText>>>"+element1.innerText); element1.innerText="一刻也不能分割" element1.innerHTML="<h1>一刻也不能分割</h1>" element1.value="无论我走到哪里"; -
修改节点
- 创建元素createElement()
- 增加元素appendChild()
- 删除元素removeChild()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #d1{ border: 1px solid red; width: 80%; height: 200px; } </style> <script> function fun1(){ var div1=document.getElementById("d1"); // 通过JS创建标签 var in1=document.createElement("input"); in1.setAttribute("type","text"); in1.setAttribute("value","请输入内容"); var in2=document.createElement("input"); in2.setAttribute("type","password"); in2.setAttribute("value","123456789"); var in3=document.createElement("input"); in3.setAttribute("type","button"); in3.setAttribute("value","删除"); var br=document.createElement("br"); in3.onclick=function (){ div1.removeChild(in1) div1.removeChild(in2) div1.removeChild(in3) div1.removeChild(br) } div1.appendChild(in1); div1.appendChild(in2); div1.appendChild(in3); div1.appendChild(br); } </script> </head> <body> <div id="d1"> </div> <input type="button" value="增加" onclick="fun1()" /> </body> </html>
前端-jQuery
页面加载
jQuery(document).ready(function(){});
$(document).ready(function({}));
$(function(){})
选择器
基本选择器
$(function(){
//标签选择器 $("a")
//$("h3").addClass("myClass");
//$("p").addClass("myClass");
//ID选择器 $("#id")
//$("#h31").addClass("myClass");
//$("h3#h31").addClass("myClass");
//类选择器 $(".class")
//$(".red1").addClass("myClass");
//通配选择器 $("*")
//$("*").addClass("myClass");
//并集选择器$("elem1,elem2,elem3")
//$("#h31,span,div").addClass("myClass");
//后代选择器$(ul li)
//$("p span").addClass("myClass");
//父子选择器 $(ul>li)
//$("p>span").addClass("myClass");
//后面第一个兄弟元素 prev + next
//$("h3+p").addClass("myClass");
//后面所有的兄弟元素 prev ~ next
$("h3~p").addClass("myClass");
})
属性选择器
$(function() {
//[attribute]
//$("a").addClass("myClass");
//$("a[href]").addClass("myClass");
//[attribute1][attribute2] a标签里有href和title属性的
//$("a[href][title]").addClass("myClass");
//[attribute=value]
//$("a[href='film-2.html']").addClass("myClass");
//[attribute!=value]
//$("a[href][href!='film-2.html']").addClass("myClass");
//[attribute^=value]
//$("a[href^='http']").addClass("myClass");
//[attribute$=value
//$("a[href$='htm']").addClass("myClass");
//[attribute*=value] a标签里href包含mashibing
$("a[href*='mashibing']").addClass("myClass");
});
位置选择器
$(function(){
//位置针对整个页面
//:first :last :odd :even
//$("p:first").addClass("myClass");
//$("p:last").addClass("myClass");
//$("p:odd").addClass("myClass");//索引从0开始 奇数的索引 1 3 5 第偶数的元素
//$("p:even").addClass("myClass"); //
//:eq(n) :gt(n) :lt(n)
//$("p:eq(4)").addClass("myClass"); //equals
//$("p:lt(4)").addClass("myClass");//less than
//$("p:gt(4)").addClass("myClass");//greater than
//位置针对上级标签(父节点的第n个标签)
//:first-child :last-child :only-child
//$("p:first-child").addClass("myClass");
//$("p:last-child").addClass("myClass");
//$("p:only-child").addClass("myClass");
//:nth-child(n) :nth-child(odd|even) :nth-child(xn+y)
//索引从0开始 只有此处从1开始
//$("p:nth-child(2)").addClass("myClass");
//$("p:nth-child(odd)").addClass("myClass");
//$("p:nth-child(even)").addClass("myClass");
//$("p:nth-child(3n+1)").addClass("myClass");//n=0,1,2,3
});
表单选择器
$(function() {
//:text :password :radio :checkbox :hidden :file :submit
//:input 匹配所有 input, textarea, select 和 button 元素
//var arr = $(":input");
//:selected :checked :enabled :disabled
//var arr = $(":disabled");
//var arr = $(":enabled");
//var arr = $(":input:not(:disabled)");
//var arr = $(":checked");
//var arr = $(":selected");
/* var arr = $(":input:visible")
for(var i = 0; i < arr.length; i++) {
console.info(arr[i]);
}*/
});
DOM
使用原生JSDOM对象转换成jQuery对象方式是$(dom对象)
jQuery对象转换成DOM对象的方式是jQuery对象[0]/.get(0)
-
操作属性和样式
$("#f1").attr("color") $("#f1").attr("color","green") $("#f1").removeAttr("color") $("#d1").css("width") $("#d1").css("width","200px") $("#d2").addClass("b") $("#d2").removeClass("b") $("#d2").toggleClass("b")// 原来有b 则删除,如果没有,则增加b -
文本与增添元素
$("#d1").text("<h1>牛气冲天</h1>"); $("#d1").html("<h1>牛气冲天</h1>"); $("#i1").val("你好"); $("#d1").empty(); $("#d1").remove(); // 移除当前元素本身 // 创建元素 var span1=$("<span></span>"); // 设置文字 span1.text("今天天气很好"); $('#d1').append(span1) var h =$("<h3>测试文字</h3>").css("color","red").css("border","1px solid green") h.appendTo($('#d1')) $("#d1").before(span1); span1.insertBefore($("#d1")); $("#d1").after(span1); span1.insertAfter($("#d1")); -
绑定和触发事件
<script> //原生JS /*var div1=document.getElementById("d1") div1.onmouseover=function (){ alert("悬停") }*/ /* bind 方法绑定事件(one绑定事件一次) * 在jQuery中,事件的名称= 原始名称去掉 on * */ $("#d1").bind('mouseover',function(){ $('#d1').css("background-color",'yellow') }); /*事件名作为方法*/ $("#d1").mouseleave(function(){ $('#d1').css("background-color",'lightgreen') }); $("#d1").unbind(); 接触绑定的所有事件 $("#d1").unbind("mouseover") // 接触绑定的指定事件 $("#i1").focus() </script> -
遍历
var $lis =$('li') for(var i = 0;i<$lis.length;i++){ /*遍历出的每个元素是DOM对象*/ console.info($lis[i].innerText) } for(var i in $lis){ console.info($lis[i].innerText) } /*遍历所有元素的方法*/ each每拿出一个元素 都会执行一次内部的function i 当前元素的所有 e 当前元素 DOM对象 * */ $lis.each(function (i,e){ console.info(i+'>>>'+$(e).text()) }) $.each($lis,function (i,e){ console.info(i+'>>>'+$(e).text()) })
动画效果
-
出现和隐藏
$("#d1").show(2000,'swing',function(){ alert("动画执行结束") }) $("#d1").hide(3000) $("#d1").toggle(5000) //show时hide，hide时show -
上下滑动
$("#d1").slideDown(2000); $("#d1").slideUp(3000) $("#d1").slideToggle(5000); -
淡入淡出
$("#d1").fadeIn(2000); $("#d1").fadeOut(3000) $("#d1").fadeToggle(5000); $("#d1").fadeTo(5000,0.2);// 0-1 -
自定义
$(function(){ //$("").animate({动画内容},执行时间,动画结束后要执行的方法) $("#d1").animate({ width:"100px", height:"100px", opcity:0.5, borderRadius:"50px" },2000,function(){ alert("动画执行结束了") }) })
表单验证
-
对于表单的提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件,onsubmit绑定的方法时要有return关键字,绑定的方法要返回true/false
-
表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP接收后都是String类型
-
表单的验证和String对象有密切关系 length charAt(i) indexOf(“@”)
-
如果表单项内容为空，js收到的不是null，而是空字符串。判断条件不能写 username == null，而要写username==""或username.length ==0
-
验证出错要return false，验证无错要return true，并且 οnsubmit="return checkForm()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function checkUsername(){
var reg1=/^\D{6,}$/
var username =$("#user").val();
if(!reg1.test(username)){
$("#usertip").html("<font color='red'>格式必须是至少六位的非数字</font>");
return false;
}
// 提示OK
$("#usertip").html("<font color='green'>OK</font>")
return true;
}
function checkPassword(){
var reg2=/^\S{5,}$/
var pwd =$("#pwd").val();
if(!reg2.test(pwd)){
$("#pwdtip").html("<font color='red'>至少为5位非空格</font>");
return false;
}
$("#pwdtip").html("<font color='green'>OK</font>");
return true;
}
function checkRepwd(){
var p1=$("#pwd").val();
var p2=$("#repwd").val();
if(p1.length< 5 || p1 != p2){
$("#repwdtip").html("<font color='red'>两次密码不一致</font>");
return false;
}
$("#repwdtip").html("<font color='green'>OK</font>");
return true;
}
function checkEmail(){
var em=$("#email").val();
var regex3 = /^\w{6,}@[0-9A-Za-z]{2,}(\.[a-zA-Z]{2,3}){1,2}$/;
if(!regex3.test(em) ){
$("#emailtip").html("<font color='red'>邮箱格式有误</font>");
return false;
}
$("#emailtip").html("<font color='green'>OK</font>");
return true;
}
function checkForm(){
return checkUsername()&&checkPassword()&&checkRepwd()&&checkEmail();
}
</script>
</head>
<body>
<table id="center" border="0" cellspacing="0" cellpadding="0">
<form action="http://www.baidu.com" method="get" onsubmit="return checkForm()">
<tr>
<td>您的姓名：</td>
<td>
<input id="user" type="text" name="username" onblur="checkUsername()"/>
<div id="usertip" style="display: inline;"></div>
</td>
</tr>
<tr>
<td>输入密码：</td>
<td>
<input id="pwd" name="pwd" type="password" onblur="checkPassword()"/>
<div id="pwdtip" style="display: inline;"></div>
</td>
</tr>
<tr>
<td>再输入一遍密码：</td>
<td>
<input id="repwd" type="password" onblur="checkRepwd()"/>
<div id="repwdtip" style="display: inline;"></div>
</td>
</tr>
<tr>
<td>您的Email：</td>
<td>
<input id="email" type="text" onblur="checkEmail()"/>
<span id="emailtip"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" class="rb1" />
</td>
</tr>
</form>
</table>
</body>
</html>
