1、jQuery中的事件javascript
- 綁定事件
方法1：click()、mousemove()、mouseout()、mouseover()；css
方法2：bind() 對後來加入的無效；html
live() 對後來加入的也有效 在jQuery1.7及以前的版本中使用, 1.9版本中淘汰了；java
one() 一次事件綁定；jquery
trigger() 在每個匹配的元素上觸發某類事件。
- 解除綁定unbind()：
不傳參表示解除全部事件,正則表達式
傳參表示解除指定的事件服務器
<!DOCTYPE html>網絡
<html>app
<head>框架
<meta charset="utf-8">
<title></title>
<!--網絡加載jquery.js-->
<script src="http://apps.bdimg.com/libs/jquery/1.7.0/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> /*等價於js中的onload*/ //$(document).ready(function() {}) //$(function() {}) //jQuery(function() {}) $(function() { /*事件的綁定*/ $("#bu1").click(function() { alert("單擊事件的綁定"); }) $("#bu1").dblclick(function() { alert("雙擊事件的綁定"); }) /******bind事件的綁定*********/ $("#bu2").bind('click', function() { alert("單擊事件的綁定"); }) /*綁定多個事件*/ $("#bu2").bind({ 'click': function() {}, dblclick: function() {}, blur: function() {} }) /****one事件的綁定***********/ $("#bu3").one("click", function() { alert("單擊一次執行效果"); }) /*******trigger事件的使用**************/ $("#bu4").click(function() { $("#bu1").trigger("click"); $("#bu3").trigger("click"); }) $("#bu5").click(function() { //解綁全部綁定事件 $("#bu1").unbind(); //解綁單個的事件 $("#bu1").unbind("click"); }) /***********live方法介紹********************/ $(".bb").click(function() { alert("live事件的添加"); }) $(".bb").bind('click', function() { alert("live事件的添加"); }) $(".bb").live('click', function() { alert("live事件的添加"); }) $("body").append("<input type='button' value='live事件' class='bb' />") }) </script>
</head>
<body>
<input type="button" name="bu1" id="bu1" class="bb" value="單擊事件的綁定" />
<input type="button" name="bu2" id="bu2" value="bind事件的綁定" />
<input type="button" name="bu3" id="bu3" value="one事件的綁定" />
<input type="button" name="bu4" id="bu4" value="trigger事件的綁定" />
<input type="button" name="bu4" id="bu5" value="事件的解綁" />
</body>
</html>
2、jQuery中的動畫
1.顯示隱藏：show()--hide()，改變width、height、opacity ；
2.淡入淡出：fadeIn()--fadeOut()，改變opacity ；
3.滑入滑出：slideDown()--slideUp()，改變height（對於img同時改變height和width）；
4.隱藏的顯示/顯示的隱藏：toggle()。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript"> $(function() { $("#bu1").click(function() { //得到div對象 var div1 = $("#div1"); /*隱藏的效果*/ div1.hide(3000); div1.show(3000); //顯示的隱藏-- 隱藏的顯示 $("div").toggle(3000); //滑動上 div1.slideUp(3000); //滑動下 div1.slideDown(3000); //淡出 div1.fadeOut(3000); //淡入 div1.fadeIn(3000); }) }) </script>
<style> #div1 { height: 300px; background-color: red; } #div2 { height: 300px; background-color: gold; } </style>
</head>
<body>
<input type="button" name="bu1" id="bu1" value="動畫的測試" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
3、jQuery實現表單校驗
1.爲何要進行表單驗證：保證數據符合要求。
2.爲何要進行JavaScript或者jQuery表單驗證：下降服務器端負擔。
3.還能夠進行服務器驗證（JSP） 
4.正則表達式
推薦兩篇文章：
https://www.jb51.net/article/72044.htm
https://www.jb51.net/article/76901.htm
（1）爲何使用正則表達式：簡潔的代碼、嚴謹的驗證文本框中的內容。
（2）正則表達式舉例：
匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}；
匹配騰訊QQ號：[1-9][0-9]{4,}；
匹配中國郵政編碼：\d{6}；
匹配身份證：\d{15}|\d{18}；
匹配由數字和26個英文字母組成的字符串 ^[A-Za-z0-9]+$；
匹配Email地址：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*；
匹配中文字符的正則表達式： [\u4e00-\u9fa5]。
（3）什麼是正則表達式：
Regular Expression，在代碼中常簡寫爲regex。
正則表達式使用單個字符串來描述、匹配一系列符合某個句法規則的字符串。
在不少文本編輯器裏，正則表達式一般被用來檢索、替換那些符合某個模式的文本。
（4）如何建立正則表達式：
var reg=/china/;
var reg=new RegExp(" china ");
var reg=/^\w+$/;
var reg=new RegExp("^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$";
（5）正則表達式中經常使用的符號和用法：
（6）正則表達式的重複字符：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script> /*****驗證碼產生****************/ function yzm() { var ran = Math.floor(Math.random() * 9000 + 1000); //document.getElementById("yzm1").innerHTML=ran; var span = document.getElementById("yzm2"); span.innerHTML = ran; } $(function() { /*********姓名的校驗**************/ $("#uname").blur(function() { //姓名的正則表達式 2-4位的漢字 var reg = /^[\u4e00-\u9fa5]{2,4}$/; checkData("uname", reg); }) /**********密碼的校驗****************/ $("#pwd").blur(function() { var reg = /^\d{4,6}$/; checkData("pwd", reg); }) /**********郵箱的校驗****************/ $("#email").blur(function() { //郵箱的正則表達式 var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; checkData("email", reg); }) /**********手機的校驗****************/ $("#phone").blur(function() { var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; checkData("phone", reg); }) /**********提取公共的方法***************/ function checkData(id, reg) { //得到用戶名的值 var us = $("#" + id); //得到span對象 var span = $("#span_" + id); if(us.val() == "" || us.val() == null) { span.html("× " + us.attr("alt") + "不能爲空").css("color", "red").addClass("error"); } else if(reg.test(us.val())) { //符合要求的格式 span.html("√ " + us.attr("alt") + "合法").css("color", "green").removeClass(); } else { span.html("× " + us.attr("alt") + "不合法").css("color", "red").addClass("error"); } } /********愛好的校驗***************/ $("input[name=fav]").click(function() { var che = $("input[name=fav]:checked"); if(che.length > 0) { $("#span_fav").html("愛好選擇成功").css("color", "green").removeClass(); } else { $("#span_fav").html("請選擇愛好").css("color", "red").addClass("error"); } }) /********籍貫的選擇***************/ $("#sel").change(function() { var val = $("#sel").val(); if(val == "0") { $("#span_sel").html("請選擇籍貫").css("color", "red").addClass("error"); } else { $("#span_sel").html("籍貫選擇成功").css("color", "green").removeClass(); } }) /********驗證碼的校驗**************/ $("#yzm1").blur(function() { //[1]隨機產生的驗證碼 var yz = $("#yzm2").html(); //[2]輸入的值 var yz2 = $("#yzm1").val(); if(yz == yz2) { $("#yzm3").html("驗證碼輸入正確").css("color", "green").removeClass(); } else { $("#yzm3").html("驗證碼輸入錯誤").css("color", "red").addClass("error"); } }) /******贊成協議*********/ $("#check").click(function() { var flag = $("#check").prop("checked"); /*if(flag){ $("#sub").prop("disabled",false); }else { $("#sub").prop("disabled",true); }*/ $("#sub").prop("disabled", !flag); }) /******校驗表單的提交***********/ $("form").submit(function() { $("#uname").trigger("blur"); $("#pwd").trigger("blur"); $("#email").trigger("blur"); $("#phone").trigger("blur"); /*執行兩次*/ $("input[name=fav]").trigger("click"); $("input[name=fav]").trigger("click"); var err = $(".error"); if(err.length > 0) { return false; } else { return true; } }) }) </script>
<!-- 正則表達式學習 ^：開始 數字：[0-9] $：結束 \d：表明[0-9] \w [0-9][A-Z][a-z]以及下劃線 {n}:段域 ^[0-9]{7}$ ^[0-9]{4,7}$ ^\w{5}$ 快速去除字符串操做 var a="abcdefg"; var jj=/[b|c]/ while(jj.test(a)){ a= a.replace(jj,""); } alert(a); -->
</head>
<body onload="yzm()">
<center>
<h3>註冊頁面</h3>
<hr />
<form action="" method="get">
<table>
<tr height="35px">
<td width="150px">用戶名：</td>
<td width="400px">
<input type="text" name="uname" id="uname" value="張三三" alt="用戶名" />
<span id="span_uname"></span>
</td>
</tr>
<tr height="35px">
<td>密碼：</td>
<td>
<input type="password" name="pwd" id="pwd" value="123456" alt="密碼" />
<span id="span_pwd"></span>
</td>
</tr>
<tr height="35px">
<td>手機號：</td>
<td>
<input type="text" name="phone" id="phone" value="18231932733" alt="手機號" />
<span id="span_phone"></span>
</td>
</tr>
<tr height="35px">
<td>郵箱：</td>
<td>
<input type="text" name="mail" id="email" value="2767501426@qq.com" alt="郵箱" />
<span id="span_email"></span>
</td>
</tr>
<tr height="35px">
<td>性別：</td>
<td>
男：<input type="radio" name="sex" value="1" /> 女：
<input type="radio" name="sex" value="0" />
</td>
</tr>
<tr height="35px">
<td>愛好：</td>
<td>
<input type="checkbox" name="fav" value="1" />唱歌
<input type="checkbox" name="fav" value="2" />睡覺
<input type="checkbox" name="fav" value="3" />LOL<br />
<input type="checkbox" name="fav" value="4" />旅遊
<input type="checkbox" name="fav" value="5" />高爾夫
<input type="checkbox" name="fav" value="6" />籃球
<span id="span_fav"></span>
</td>
</tr>
<tr height="35px">
<td>籍貫：</td>
<td>
<select name="adress" id="sel">
<option value="0">--請選擇--</option>
<option value="1">安徽</option>
<option value="2">北京</option>
<option value="3">上海</option>
<option value="4">山東</option>
<option value="5">天津</option>
</select>
<span id="span_sel"></span>
</td>
</tr>
<tr height="35px">
<td>驗證碼：</td>
<td>
<input type="text" style="width: 100px; height: 60px;" id="yzm1" />
<span id="yzm2" onclick="yzm()"></span>
<span id="yzm3"></span>
</td>
</tr>
<tr height="35px">
<td>我的介紹：</td>
<td>
<textarea name="intro" rows="8" cols="30"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="" id="check" value="">是否同一本公司協議
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" id="sub" value="註冊" disabled="true" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
4、jQuery實現樹形菜單
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樹形菜單－1</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js" ></script>
<style type="text/css"> div { font-size: 12px; color: #000000; line-height: 22px; } img { vertical-align: middle; } a { font-size: 13px; color: #000000; text-decoration: none; } a:hover { font-size: 13px; color: #999999 } .red { color: #FF0000 } </style>
<script type="text/javascript"> $(function() { $(".fir").click(function() { //parent() 得到父節點對象 next() 獲得下一個節點 var dis = $(this).parent().next().css("display"); if(dis == "none") { $(this).parent().next().css("display", "block"); children() 得到子節點 $(this).children().attr("src", "img/minus.gif"); } else { $(this).parent().next().css("display", "none"); find() 查找到指定的節點 $(this).find("img").attr("src", "img/plus.gif"); } }) }) </script>
</head>
<body>
<div id="div1" style="padding-left:100px;">
<div>
<a href="javascript:void(0)" class="fir"><img src="img/plus.gif" border="0">分類討論區</a>
</div>
<div id="1" style="display: none; padding-left:15px;"><img src="img/z-top.gif">BBS 系統
<BR><img src="img/z-top.gif">共建水木
<BR><img src="img/z-top.gif">站務公告欄
<BR><img src="img/z-top.gif">妝點水木
<BR><img src="img/z-end.gif">申請版主
</div>
<div>
<a href="javascript:void(0)" class="fir"><img src="img/plus.gif" border="0">分類討論區</a>
</div>
<div id="2" style="display: none; padding-left:15px;"><img src="img/z-top.gif">BBS 系統
<BR><img src="img/z-top.gif">共建水木
<BR><img src="img/z-top.gif">站務公告欄
<BR><img src="img/z-top.gif">妝點水木
<BR><img src="img/z-end.gif">申請版主
</div>
<div>
<a href="javascript:void(0)" class="fir"><img src="img/plus.gif" border="0">分類討論區</a>
</div>
<div id="3" style="display: none; padding-left:15px;"><img src="img/z-top.gif">BBS 系統
<BR><img src="img/z-top.gif">共建水木
<BR><img src="img/z-top.gif">站務公告欄
<BR><img src="img/z-top.gif">妝點水木
<BR><img src="img/z-end.gif">申請版主
</div>
</div>
</body>
</html>
5、Query中的框架--圖片放大器插件
https://www.oschina.net/p/jqzoom
官方網址：https://jquery-plugins.net/jqzoom
jQZoom是一個基於最流行的jQuery的圖片放大器插件。它功能強大，使用簡便。
支持標準模式、反轉模式、無鏡頭、無標題的放大，並能夠自定義jQZoom的窗口位置和漸隱效果，修正IE6的select bug。
配置參數
· zoomType，默認值：’standard’，另外一個值是’reverse’，是否將原圖用半透明圖層遮蓋。
· zoomWidth，默認值：200，放大窗口的寬度。
· zoomHeight，默認值：200，放大窗口的高度。
· xOffset，默認值：10，放大窗口相對於原圖的x軸偏移值，能夠爲負。
· yOffset，默認值：0，放大窗口相對於原圖的y軸偏移值，能夠爲負。
· position，默認值：’right’，放大窗口的位置，值還能夠是:’right’ ,’left’ ,’top’ ,’bottom’。
· lens，默認值：true，若爲false，則不在原圖上顯示鏡頭。
· imageOpacity，默認值：0.2，當zoomType的值爲’reverse’時，這個參數用於指定遮罩的透明度。
· title，默認值：true，在放大窗口中顯示標題，值能夠爲a標記的title值，若無，則爲原圖的title值。
· showEffect，默認值：’show’，顯示放大窗口時的效果，值能夠爲: ‘show’ ,’fadein’。
· hideEffect，默認值：’hide’，隱藏放大窗口時的效果: ‘hide’ ,’fadeout’。
· fadeinSpeed，默認值：’fast’，放大窗口的漸顯速度(選項: ‘fast’,'slow’,'medium’)。
· fadeoutSpeed，默認值：’slow’，放大窗口的漸隱速度(選項: ‘fast’,'slow’,'medium’)。
· showPreload，默認值：true，是否顯示加載提示Loading zoom(選項: ‘true’,'false’)。
· preloadText，默認值：’Loading zoom’，自定義加載提示文本。
· preloadPosition，默認值：’center’，加載提示的位置，值也能夠爲’bycss’，以經過css指定位置。