文章目录
- 前端-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>
