前提:需要掌握的知识点

 
 
 
 
 
  1. 填写HTML代码
  1. Element元素中有一个innerHTML属性,这个属性可以填写一段html代码
  1. innerHTML = "<font color='red'>这是一段测试的文本内容</font>"
  1. 这样做可以修改body中所需要修改的内容
 
 
 
 
 
 
  1. 定时器:
  1.     setInterval();每隔多少毫秒去执行一个操作
  1.     setTimeout();每隔多少毫秒后去执行一个操作
  1.     clearInterval();取消由 setInterval()设置的 timeout
  1.     clearTimeout();取消由 setTimeout() 方法设置的 timeout
 
 
 
 
 
 
  1. 事件:
  1.     onload();页面加载事件
  1.     onclick():按钮事件
  1.     onfocus() : 获取到焦点
  1.     onblur():  失去焦点
  1.     onkeyup(): 当用户输入完成之后,按键弹起触发的事件.
 
 
 
 
 
 
  1. 打印方式:
  1. console.log("显示方法被调用了..."):在浏览器-->检查-->console中显示
  1. alert("显示方法被调用了..."):浏览器-->弹出页面提示
 
 
 
 
 
 
  1.     绝对定位:
  1.         position : absolute (必须先指定,才能使用left  top);
  1.         left:  距离左边的距离
  1.         top:  距离顶部
 

案例一,定时弹出广告**

 
 
 
 
 
  1. css属性: display
  1.     显示: block
  1.     隐藏: none;
 
 
 
 
 
 
  1. <!DOCTYPE html>
  1. <html>
  1.     <head>
  1.         <meta charset="UTF-8">
  1.         <title></title>
  1.         <!--每隔2秒弹出广告-->
  1.         <script type="text/javascript">
  1. /*      1. 确定事件 onload(页面加载完成)
  1.         2. 事件通常都会触发一个函数 
  1.             1. 首先都获取广告所在的img
  1.             2. 启动定时器,2秒之后显示广告
  1.             3. 修改它的属性值 style.display="block"*/
  1.             var i;
  1.             function dis(){
  1.                 var v = document.getElementById("picture");
  1.                 /*alert("消失");*/
  1.                 //将图片样式设置为消失
  1.                 v.style.display="none";
  1.                 setTimeout("show()",2000);
  1.             }
  1.             function show(){
  1.                 var v = document.getElementById("picture");
  1.                 /*alert("显示");*/
  1.                  //将图片样式设置为显示
  1.                 v.style.display="block";
  1.                 console.log("方法被调用了")
  1.                 //清除定时器setInterval()效果
  1.                 clearInterval(i);
  1.                 //2秒后执行dis()
  1.                 setTimeout("dis()",2000);
  1.             }
  1.             function init(){
  1.                 //每2隔秒调用show方法
  1.                 i = setInterval("show()",2000);
  1.             }
  1.         </script>
  1.     </head>
  1.     <body onload="init()">
  1.         <div>
  1.             <img id="picture" style="display: none;" src="img/1.jpg" width="100%"/>
  1.         </div>
  1.     </body>
  1. </html>
 

案例二,注册页面优化

 
 
 
 
 
  1. 需求:当用户输入的时候,我们需要对用户输入的内容进行表单的验证,这样可以减轻对服务器的压力
 

代码实现

 
 
 
 
 
  1. <!DOCTYPE html>
  1. <html>
  1.     <head>
  1.         <meta charset="UTF-8">
  1.         <title>网站注册页面优化</title>
  1.         <link rel="stylesheet" href="../css/main.css" />
  1.         <script type="text/javascript" src="../js/check.js" ></script>
  1.         <script>
  1.  
  1.             /*
  1.              1. 确认事件 onsubmit  并且注意onsubmit="return checkForm()"
  1.                 2. 实现checkForm这个方法
  1.                    1. 对用户名做非空判断,
  1.                    2. 对用户名进行输入长度判断
  1.                    3. 输入的密码长度不能少于8位
  1.                    4. 两次输入的密码必须一样
  1.                    5. 邮箱格式需要正确sdfasdf@qq.com.cn
  1.                 3.  当用户输入有问题的时候, 需要在后面给出友好提示
  1.                    1. 修改span的内容 使用innerHTML
  1. ​
  1.              */
  1.             function showTips(){
  1.                 var span = document.getElementById("spanId");
  1.                 span.innerHTML = "<font color='red'>用户名不能为空,长度须大于6</font>"
  1.             }
  1.  
  1.             function checkUsername(){
  1.  
  1.                 //1. 对用户名做非空判断,
  1.                 //先得获取用户输入
  1.                 var username = document.getElementById("username");
  1.                 //alert(username.value);
  1.                 var uValue = username.value;
  1.                 //类型的转换
  1. //              var i = 123;
  1. //              alert(i.toString());
  1. //              var j = "hello world";
  1. //              var m = j.substring(0,6);
  1. //              alert(m);
  1. ​
  1.                 //对用户名进行输入长度判断
  1.                 if(uValue == "" || uValue.length < 6){
  1.                     //在后面的span中填入给用户温馨提示
  1.                     /*
  1.                       1.首先获取span
  1.                       2. 修改span的innerHTML属性
  1.                      */
  1.                     var span = document.getElementById("spanId");
  1.                     span.innerHTML = "<font color='red'>用户名不合法</font>"
  1.  
  1.                     return false;
  1.                 }else{
  1.                     var span = document.getElementById("spanId");
  1.                     span.innerHTML = "<font color='red'>恭喜您,合法</font>"
  1.                 }
  1.  
  1.             }
  1.  
  1.             function checkForm(){
  1.                 //1. 对用户名做非空判断,
  1.                 //先得获取用户输入
  1.                 var username = document.getElementById("username");
  1.                 //alert(username.value);
  1.                 var uValue = username.value;
  1.                 //类型的转换
  1. //              var i = 123;
  1. //              alert(i.toString());
  1. //              var j = "hello world";
  1. //              var m = j.substring(0,6);
  1. //              alert(m);
  1. ​
  1.                 //对用户名进行输入长度判断
  1.                 if(uValue == "" || uValue.length < 6){
  1.                     //在后面的span中填入给用户温馨提示
  1.                     /*
  1.                       1.首先获取span
  1.                       2. 修改span的innerHTML属性
  1.                      */
  1.                     var span = document.getElementById("spanId");
  1.                     span.innerHTML = "<font color='red'>用户名不合法</font>"
  1.  
  1.                     return false;
  1.                 }
  1.                 /*
  1.                     输入的密码长度不能少于8位
  1.                     先获取到密码框输入的内容
  1.                     判断它的长度是否小于8
  1.                    4. 两次输入的密码必须一样
  1.                     获取重复密码框的内容
  1.                  * */
  1.                 var pValue = document.getElementById("password").value;
  1.                 var rePValue = document.getElementById("repassword").value;
  1.  
  1.                 if(pValue.length < 8){
  1.                     var span = document.getElementById("password_spanId");
  1.                     span.innerHTML = "<font color='red'>密码长度不够8位</font>"
  1.                     return false;
  1.                 }else{
  1.                     var span = document.getElementById("password_spanId");
  1.                     span.innerHTML="";
  1.                 }
  1.  
  1.                 if(pValue != rePValue){
  1.                     var span = document.getElementById("repassword_spanId");
  1.                     span.innerHTML = "<font color='red'>两次输入密码不一致</font>"
  1.                     return false;
  1.                 }else{
  1.                     var span = document.getElementById("repassword_spanId");
  1.                     span.innerHTML = ""
  1.                 }
  1.                 //邮箱校验 正则表达式
  1.                 var email = document.getElementById("email").value;
  1.                 //正则表达式
  1.                 /*var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
  1.                 if(! reg.test(email)){
  1.                     alert("邮箱表达式有问题")
  1.                     return false;
  1.                 }*/
  1.                 if(!checkEmail(email)){
  1.                     return false;
  1.                 }
  1.  
  1.  
  1.                 return true;
  1.             }
  1.         </script>
  1.  
  1.     </head>
  1.     <body>
  1.         <div style="width: 100%;">
  1.             <div>
  1.                 <div class="logo">
  1.                     <img src="../img/logo2.png" />
  1.                 </div>
  1.                 <div class="logo">
  1.                     <img src="../image/header.jpg" />
  1.                 </div>
  1.                 <div class="logo" style="padding-top: 20px;height: 40px;" >
  1.                     <a href="#">登录</a>
  1.                     <a href="#">注册</a>
  1.                     <a href="#">购物车</a>
  1.                 </div>
  1.             </div>
  1.             <div style="clear: both;"></div>
  1.             <!--第二行:导航栏-->
  1.             <div style=" height: 50px;">
  1.                 <ul>
  1.                     <li style="display: inline; color:white">首页</li>
  1.                     <li style="display: inline; color:white">手机数码</li>
  1.                     <li style="display: inline; color:white">电脑办公</li>
  1.                     <li style="display: inline; color:white">香烟酒水</li>
  1.                 </ul>
  1.             </div>
  1.  
  1.             <!--注册模块-->
  1.             <div style="height: 600px;border: 1px solid red;background: url(../image/regist_bg.jpg);">
  1.                 <div style="position:absolute;top:210px;left:360px;border: 5px solid gray; width: 50%;height: 60%;">
  1.                     <form  action="js输出.html" onsubmit="return checkForm()">
  1.                                     <table border="1px"  width="80%" height="90%" align="center">
  1.                                         <!--创建一个九行两列-->
  1.                                         <tr>
  1.                                             <td colspan="2">
  1.                                                 <h3>会员注册</h3>
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">用户名:</td>
  1.                                             <td>
  1.                                                 <input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="spanId"></span>
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">密码:</td>
  1.                                             <td>
  1.                                                 <input type="password" id="password"/><span id="password_spanId"></span>
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">确认密码:</td>
  1.                                             <td>
  1.                                                 <input type="password" id="repassword" /><span id="repassword_spanId"></span>
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">
  1.                                                 邮箱:
  1.                                             </td>
  1.                                             <td>
  1.                                                 <input type="text" id="email"/><span id="email_spanId"></span>
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">
  1.                                                 姓名:
  1.                                             </td>
  1.                                             <td>
  1.                                                 <input type="text" />
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">
  1.                                                 性别:
  1.                                             </td>
  1.                                             <td >
  1.                                                 <input type="radio" name="sex" />男
  1.                                                 <input type="radio" name="sex" />女
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">
  1.                                                 出生日期:
  1.                                             </td>
  1.                                             <td>
  1.                                                 <input type="date" />
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td align="right">
  1.                                                 验证码:
  1.                                             </td>
  1.                                             <td>
  1.                                                 <input type="text" />
  1.                                                 <img src="" />
  1.                                             </td>
  1.                                         </tr>
  1.                                         <tr>
  1.                                             <td>
  1.                                             </td>
  1.                                             <td>
  1.                                                 <input type="submit" value="注册"/>
  1.                                             </td>
  1.                                         </tr>
  1.                                     </table>
  1.                                 </form>
  1.                 </div>
  1.  
  1.             </div>
  1.             <div>
  1.                 <img src="../image/footer.jpg" width="100%" />
  1.             </div>
  1.             <!--8-->
  1.             <div style="text-align: center;">
  1.                 <a href="#">关于我们</a>
  1.                 <a href="#">联系我们</a>
  1.                 <a href="#">招贤纳士</a>
  1.                 <a href="#">法律声明</a>
  1.                 <a href="#">友情链接</a>
  1.                 <a href="#">支付方式</a>
  1.                 <a href="#">配送方式</a>
  1.                 <a href="#">服务声明</a>
  1.                 <a href="#">广告声明</a> <br />
  1.                 Copyright © 2005-2016 xx商城 版权所有
  1.             </div>
  1.         </div>
  1.     </body>
  1. </html>
 

案例三:表单的隔行换色&全选与全不选

 
 
 
 
 
  1. 需求:我们商品分类的信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色
 

技术分析

 
 
 
 
 
  1. 【HTML中checked属性】
  1. var ck1 = document.getElementById("ck1");
  1. alert(ck1.checked); 当被选中它就是true, 否则就是false
 

代码实现:

 
 
 
 
 
  1. <!DOCTYPE html>
  1. <html>
  1.     <head>
  1.         <meta charset="UTF-8">
  1.         <title></title>
  1.         <script type="text/javascript">
  1.             window.onload = function() {
  1.                 //返回对拥有指定 id 的第一个对象的引用。
  1.                 var table1 = document.getElementById("table1");
  1.                 //tBodies[0] 返回包含表格中所有 tbody 的一个数组。
  1.                 //rows[] 返回包含表格中所有行的一个数组。
  1.                 var rows = table1.tBodies[0].rows;
  1.                 //alert(rows);
  1.                 for(var i=0;i < rows.length;i++){
  1.                     var row = rows[i];
  1.                     if(i%2 == 0){
  1.                         row.style.backgroundColor = "red";
  1.                     }else{
  1.                         row.style.backgroundColor = "yellow";
  1.                     }
  1.                 }
  1.             }
  1.             function checkAll(){
  1.                 var ck1 = document.getElementById("ck1");
  1.                 //alert(ck1);
  1.                 //alert(ck1.checked);//勾选上为true,取消为false
  1.                 //返回带有指定名称的对象集合。
  1.                 var ck2 = document.getElementsByName("ck2");
  1.                 //alert(ck2.length);
  1.                 //遍历该名称对象的集合,获取每一个对象
  1.                 for(var i = 0; i <ck2.length; i++){
  1.                     //判断对象是否勾选,将表头的属性赋值过来
  1.                     ck2[i].checked = ck1.checked;
  1.                 }
  1.             }
  1.         </script>
  1.     </head>
  1. ​
  1.     <body>
  1.         <table id="table1" border="1px" width="700px" height="200px" align="center">
  1.             <thead>
  1.                 <tr>
  1.                     <td>
  1.                         <input type="checkbox" id="ck1" onclick="checkAll()"/>
  1.                     </td>
  1.                     <th>
  1.                         分类ID
  1.                     </th>
  1.                     <th>
  1.                         分类名称
  1.                     </th>
  1.                     <th>
  1.                         分类商品
  1.                     </th>
  1.                     <th>
  1.                         分类描述
  1.                     </th>
  1.                     <th>
  1.                         操作
  1.                     </th>
  1.                 </tr>
  1.             </thead>
  1.             <tbody>
  1.                 <tr align="center">
  1.                     <td>
  1.                         <input onclick="checkAll()" type="checkbox" name="ck2" />
  1.                     </td>
  1.                     <td>
  1.                         1
  1.                     </td>
  1.                     <td>
  1.                         手机数码
  1.                     </td>
  1.                     <td>
  1.                         三星NOTE7,IPhone7
  1.                     </td>
  1.                     <td>
  1.                         这里面放的都是最新手机
  1.                     </td>
  1.                     <td>
  1.                         <a href="#">修改</a>|
  1.                         <a href="#">删除</a>
  1.                     </td>
  1.                 </tr>
  1.                 <tr align="center">
  1.                     <td>
  1.                         <input onclick="checkAll()" type="checkbox" name="ck2" />
  1.                     </td>
  1.                     <td>
  1.                         2
  1.                     </td>
  1.                     <td>
  1.                         黄鹤楼,双喜,长白山,白沙
  1.                     </td>
  1.                     <td>
  1.                         分类商品
  1.                     </td>
  1.                     <td>
  1.                         这里面都是香烟
  1.                     </td>
  1.                     <td>
  1.                         <a href="#">修改</a>|
  1.                         <a href="#">删除</a>
  1.                     </td>
  1.                 </tr>
  1.                 <tr align="center">
  1.                     <td>
  1.                         <input onclick="checkAll()" type="checkbox" name="ck2" />
  1.                     </td>
  1.                     <td>
  1.                         3
  1.                     </td>
  1.                     <td>
  1.                         电脑办公
  1.                     </td>
  1.                     <td>
  1.                         MBP,联想
  1.                     </td>
  1.                     <td>
  1.                         电脑
  1.                     </td>
  1.                     <td>
  1.                         <a href="#">修改</a>|
  1.                         <a href="#">删除</a>
  1.                     </td>
  1.                 </tr>
  1.                 <tr align="center">
  1.                     <td>
  1.                         <input onclick="checkAll()" type="checkbox" name="ck2" />
  1.                     </td>
  1.                     <td>
  1.                         4
  1.                     </td>
  1.                     <td>
  1.                         冰箱洗衣机
  1.                     </td>
  1.                     <td>
  1.                         海尔,格力,三菱,美的
  1.                     </td>
  1.                     <td>
  1.                         冰箱洗衣机
  1.                     </td>
  1.                     <td>
  1.                         <a href="#">修改</a>|
  1.                         <a href="#">删除</a>
  1.                     </td>
  1.                 </tr>
  1.             </tbody>
  1.         </table>
  1.     </body>
  1. ​
  1. </html>
 

案例四:控制下拉列表的左右选择

 
 
 
 
 
  1. 需求:商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品
 

技术分析

 
 
 
 
 
  1. 1. 确定事件 onclick();
  1. 2. 实现全选checkbox 所要触发的函数
  1. 3. 获去最上面全选的checked属性
  1. 4. 修改列表中商品项的选中状态
 

代码实现:

 
 
 
 
 
  1. <!DOCTYPE html>
  1. <html>
  1. ​
  1.     <head>
  1.         <meta charset="UTF-8">
  1.         <title>商品左右选择页面</title>
  1.         <script type="text/javascript">
  1.         //商品的单个选择
  1.             function selectOne(){
  1.                 var left = document.getElementById("selectLeft");
  1.                 var right = document.getElementById("selectRight");
  1.                 var op = right.options;
  1.                 for(var i = 0; i < op.length; i++) {
  1.                     //通过selected判断某个对象是否被选中
  1.                     if(op[i].selected) {
  1.                         left.appendChild(op[i]);
  1.                     }
  1.                 }
  1.             }
  1.             //全选
  1.             function selectAll(){
  1.                 //获取左边商品的select
  1.                 var left = document.getElementById("selectLeft")
  1.                 //获取右边商品的select
  1.                 var right = document.getElementById("selectRight");
  1.                 //获取右边商品的所有option
  1.                 var op = right.options;
  1.                 //遍历options集合/数组
  1.                 for(var i = 0; i < op.length; i++){
  1.                     left.appendChild(op[i--]);
  1.                 }
  1.             }
  1.         </script>
  1.     </head>
  1. ​
  1.     <body>
  1.         <!--创建一个四行两列的表格-->
  1.         <table border="1px" width="300px">
  1.             <tr>
  1.                 <td>分类名称</td>
  1.                 <td>
  1.                     <input type="text" value="手机数码" />
  1.                 </td>
  1.             </tr>
  1.             <tr>
  1.                 <td>分类描述</td>
  1.                 <td>
  1.                     <input type="text" value="这里头满满的都是肾" />
  1.                 </td>
  1.             </tr>
  1.             <tr>
  1.                 <td>分类商品</td>
  1.                 <td>
  1.                     <div style="float: left;">
  1.                             已有商品<br />
  1.                             <select multiple="multiple" id="selectLeft">
  1.                                 <option>肾6</option>
  1.                                 <option>肾7</option>
  1.                                 <option>肾8</option>
  1.                                 <option>肾6</option>
  1.                                 <option>锤子</option>
  1.                             </select><br />
  1.                         <a href="#">&gt;&gt;</a><br />
  1.                         <a href="#">&gt;&gt;&gt;</a>
  1.                     </div>
  1. ​
  1.                     <div style="float: right;">
  1.                             未有商品<br />
  1.                             <select multiple="multiple" id="selectRight" ondblclick="selectOne()">
  1.                                 <option>三星note7</option>
  1.                                 <option>小米Mix</option>
  1.                                 <option>华为meta9</option>
  1.                                 <option>波导手机</option>
  1.                                 <option>oppoR9</option>
  1.                             </select><br />
  1.                         <a href="#" onclick="selectOne()">&lt;&lt;</a><br />
  1.                         <a href="#" onclick="selectAll()">&lt;&lt;&lt;</a>
  1.                     </div>
  1.                 </td>
  1.             </tr>
  1.             <tr>
  1.                 <td></td>
  1.                 <td></td>
  1.             </tr>
  1.         </table>
  1.     </body>
  1. ​
  1. </html>
 

案例五,省市联动

 
 
 
 
 
  1. 需求:在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
 

技术分析

 
 
 
 
 
  1. 1. 确定事件: onclick
  1. 2. 需要实现事件所触发的函数,selectOne
  1. 3. 找到已有商品这个Select
  1. 4. 从左边的select中,寻找哪一个选项,被选中了.
  1. 5. 找到未有商品所对应的select
  1. 6. 将左侧选中的商品,动态的添加到右侧未有的商品中
 

代码实现:

 
 
 
 
 
  1. <!DOCTYPE html>
  1. <html>
  1.     <head>
  1.         <meta charset="UTF-8">
  1.         <title></title>
  1.         <script type="text/javascript">
  1.         //创建包含城市名称的二维数组
  1.             var cites = new Array(3);
  1.             cites[0] = new Array("武汉", "黄冈", "黄石", "九江");
  1.             cites[1] = new Array("广州", "深圳", "佛山", "惠州");
  1.             cites[2] = new Array("长沙", "怀化", "衡阳");
  1.         //onchange事件对应的函数
  1.             function changePrince() {
  1.                 //获取指定 id 的第一个对象的引用。
  1.                 var prince = document.getElementById("changePrince");
  1.                 //获取省份的角标
  1.                 var index = prince.value;
  1.                 //alert(index);
  1.                 //根据角标找到该省的城市组
  1.                 var cite = cites[index];
  1.                 //找到放置城市的select
  1.                 var prince1 = document.getElementById("selectPrince");
  1.                 //alert(prince);
  1.                 //清空select中的option
  1.                 prince1.options.length=0;
  1.                 //遍历城市组,获取里面的城市
  1.                 for(var i=0;i<cite.length;i++){
  1.                     //创建option节点
  1.                     var op = document.createElement("option");
  1.                     //创建城市名称文本
  1.                     var tn = document.createTextNode(cite[i]);
  1.                     //将城市名添加进option中
  1.                     op.appendChild(tn);
  1.                     //将option添加进select中
  1.                     prince1.appendChild(op);
  1.                 }
  1.             }
  1.         </script>
  1.     </head>
  1. ​
  1.     <body>
  1.         <!--省份-->
  1.         <select id="changePrince" onchange="changePrince()">
  1.             <option value="0">湖北</option>
  1.             <option value="1">广东</option>
  1.             <option value="2">湖南</option>
  1.         </select>
  1.         <!--城市-->
  1.         <select id="selectPrince">
  1. ​
  1.         </select>
  1.     </body>
  1. ​
  1. </html>
 

带你玩转JavaWeb开发之三 -JS插件实战开发的更多相关文章

  1. 带你玩转JavaWeb开发之五-如何完成响应式开发页面

    响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad ...

  2. js模块化开发——require.js的实战写法1

    关于在Require.js使用一个JS插件的问题 我需要在项目中引用一个js控件,这个控件依赖于a.js,b.js,c.js,.....n.js N多个js以及jquery及jquery-ui,各js ...

  3. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  4. 带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验

    今日内容 使用JQuery完成页面定时弹出广告 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果 使用JQuery完成省市联动效果 使用JQuery完成下列列表左右选择 使用J ...

  5. 带你玩转JavaWeb开发之三 - CSS从基础到实战

    一,什么是CSS? Cascading Style Sheets层叠样式表           层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的 ...

  6. 带你玩转JavaWeb开发之六-mysql基本语法详解及实例(4)

    按照分类的名称统计每个分类商品所花的总钱数[排序查询] SQL中对查询的列进行排序,使用关键字order by.默认情况下是升序的排序(从小到大的排序顺序关键字 asc).使用降序排序需要使用关键字d ...

  7. 带你玩转JavaWeb开发之一 - HTML快速入门

    一,html简介 1,html是什么 Html是用来描述网页的一种语言. (1)HTML 指的是超文本标记语言 (Hyper Text Markup Language) (2)HTML 不是一种编程语 ...

  8. 带你玩转JavaWeb开发之六-mysql基本语法详解及实例(3)

    [语法] update 表名 set 列名=列值,列名=列值 -[条件]; [注意事项] * 修改的列的值需要与列的类型一致. * 修改的列的值的长度不能超过列的类型的最大长度. * 字符串类型和日期 ...

  9. 带你玩转JavaWeb开发之六-mysql基本语法详解及实例(2)

    1.1.1    对数据库中表的记录进行操作(*****) 1.1.1.1   对数据库中表记录插入操作 [语法] 向数据库表中插入某些列:insert into 表名 (列名1,列名2,列名3-) ...

随机推荐

  1. Func与Action

    平时我们如果要用到委托一般都是先声明一个委托类型,比如: private delegate string Say(); string说明适用于这个委托的方法的返回类型是string类型,委托名Say后 ...

  2. oracle中根据当前记录查询前一条和后一条记录

    select * from aa01_2014 where aaa001=(select c.p from (select aaa001,lag(aaa001,1,0)  over (order by ...

  3. sql 删除表中某字段的重复数据

    重复字段:BarCode SELECT * FROM dbo.AssetBarCode WHERE BarCode IN (SELECT BarCode FROM dbo.AssetBarCode G ...

  4. Ubuntu下三个实用的录屏软件

    Ubuntu下三个实用的录屏软件 Kazam 优点: 易安装 可选择区域录制,也可全屏录制 有录屏和截图功能 安装: sudo apt-get install kazam 展示: Simple Scr ...

  5. nodeJS搭建本地服务器

    准备工作: 安装Node JS: 1:安装全局express:在express4.x版本中,安装时语句变为了这样: npm install -g express-generator 2:创建项目: 选 ...

  6. 通过ios实现RSA加密和解密

    在加密和解密中,我们需要了解的知识有什么事openssl:RSA加密算法的基本原理:如何通过openssl生成最后我们需要的der和p12文件. 废话不多说,直接写步骤: 第一步:openssl来生成 ...

  7. spring mvc 请求转发和重定向(转)

    spring mvc controller间跳转 重定向 传参 url:http://zghbwjl.blog.163.com/blog/static/12033667220137795252845/ ...

  8. C语言中do...while(0)的妙用(转载)

    转载来自:C语言中do...while(0)的妙用,感谢分享. 在linux内核代码中,经常看到do...while(0)的宏,do...while(0)有很多作用,下面举出几个: 1.避免goto语 ...

  9. 【基础知识】UML基础

    http://www.ibm.com/developerworks/cn/rational/r-uml/

  10. 基于NPOI的报表引擎——ExcelReport

    前言 其实现在说ExcelReport是报表引擎还为时尚早,但该组件我既然要决心维护下去,这便算是初衷吧! 1.现在,ExcelReport能为你做什么呢? 如果,你有导出数据到Excel的需求,Ex ...