適用人羣

本文適用於有一定的JavaScript基礎的人食用,

JQuery基礎

概念

一個JavaScript框架,簡化JS的開發.

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。

JavsScript框架:本質上就是一些JS的代碼,封裝了js的原生代碼.

JQuery的快速入門

步驟:
1. 下載JQuery
  
  1.x：兼容ie678,使用最爲廣泛的，官方只做BUG維護，
  功能不再新增。因此一般項目來說，使用1.x版本就可以了，
  最終版本：1.12.4 (2016年5月20日)
  2.x：不兼容ie678，很少有人使用，官方只做BUG維護，
  功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，
  最終版本：2.2.4 (2016年5月20日)
  3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，
  一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。
  
  jquery-xxx.js 與 jquery-xxx.min.js區別：
  1. jquery-xxx.js：開發版本。給程序員看的，有良好的縮進和註釋。體積大一些
  2. jquery-xxx.min.js：生產版本。程序中使用，沒有縮進。體積小一些。程序加載更快
2. 導入JQuery的js文件:注意導入的是xxxmin.js
3. 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery快速入門</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>



<script>
   //使用JQuery獲取元素對象
    var div1 = $("#div1");
   alert(div1.html());
    var div2 = $("#div2");

   alert(div2.html());

</script>

</body>
</html>

JQuery對象和JS對象的區別和聯繫

JQuery對象在操作時,更加方便
JQuery對象和js對象方法不通用
兩者可以互相轉換:
1. JQuery對象-------->JavaScript對象 :Jquery對象[索引]或者JQuery對象.get(索引)
2. JavaScript對象-------->JQuery對象: $(Js對象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer對象和js對象的轉換</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>



<script>
  //1. 通過js方式來獲取名稱叫div的所有html元素對象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以將其當做數組來使用
    //對divs中所有的div 讓其標籤體內容變爲"aaa"
  for (var i = 0; i < divs.length; i++) {
      //divs[i].innerHTML = "aaa";
      $(divs[i]).html("ccc");
  }

    //2. 通過jq方式來獲取名稱叫div的所有html元素對象
    var $divs = $("div");

  alert($divs.length);//也可以當做數組使用

  //對divs中所有的div 讓其標籤體內容變爲"bbb"  使用jq方式
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb";

  $divs[0].innerHTML = "ddd";
  $divs.get(1).innerHTML = "eee";


    /*
        1. JQuery對象在操作時，更加方便。
        2. JQuery對象和js對象方法不通用的.
        3. 兩者相互轉換
            * jq -- > js : jq對象[索引] 或者 jq對象.get(索引)
            * js -- > jq : $(js對象)
     */

</script>

</body>
</html>

選擇器

選擇器功能:篩選具有相似特徵的元素(標籤)

選擇器基礎知識:

事件綁定
//1.獲取b1按鈕
$("#b1").click(function(){
alert(“abc”);
});
入口函數

$(function () {
});
window.onload 和 $(function) 區別

window.onload 只能定義一次,如果定義多次，後邊的會將前邊的覆蓋掉
$(function)可以定義多次的。

樣式控制：css方法
// $("#div1").css(“background-color”,“red”);

$("#div1").css(“backgroundColor”,“pink”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件綁定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        // 給b1按鈕添加單擊事件
       /* window.onload = function(){
            //1.獲取b1按鈕
            $("#b1").click(function(){
                alert("abc");
            });

        }*/
     /*   //jquery入口函數(dom文檔加載完成之後執行該函數中的代碼)
       $(function () {
            //1.獲取b1按鈕
           $("#b1").click(function(){
               alert("abc");
           });
       });*/
       /* function fun1(){
            alert("abc");
        }

        function fun2(){
            alert("bcd");
        }
        window.onload = fun1;
        //window.onload = fun2;
*/

      /* $(function(){
           alert(123);
       });

       $(function(){
           alert(234);
       });
*/


      $(function(){
          // $("#div1").css("background-color","red");
          $("#div1").css("backgroundColor","pink");
      });
        /*
             window.onload  和 $(function) 區別
                 * window.onload 只能定義一次,如果定義多次，後邊的會將前邊的覆蓋掉
                 * $(function)可以定義多次的。
          */


    </script>

</head>
<body>

    <div id="div1">div1....</div>
    <div id="div2">div2....</div>
    <input type="button" value="點我" id="b1">




</body>
</html>

選擇器分類:

基本選擇器
1. 標籤選擇器（元素選擇器）
  1. 標籤選擇器:
    - 語法： $(“html標籤名”) 獲得所有匹配標籤名稱的元素
  2. id選擇器
    - 語法： $("#id的屬性值") 獲得與指定id屬性值匹配的元素
  3. 類選擇器
    - 語法： $(".class的屬性值") 獲得與指定的class屬性值匹配的元素
  4. 並集選擇器：
    - 語法： $(“選擇器1,選擇器2…”) 獲取多個選擇器選中的所有元素
2. 層級選擇器
  1. 後代選擇器
  * 語法： $("A B ") 選擇A元素內部的所有B元素
  1. 子選擇器
  - 語法： $(“A > B”) 選擇A元素內部的所有B子元素
3. 屬性選擇器
- 1.屬性名稱選擇器
  - 語法： $(“A[屬性名]”) 包含指定屬性的選擇器
  - 屬性選擇器
    語法： $(“A[屬性名=‘值’]”) 包含指定屬性等於指定值的選擇器
  - 複合屬性選擇器
    * 語法： $(“A[屬性名=‘值’][]…”) 包含多個屬性條件的選擇器
1. 過濾選擇器
  1. 首元素選擇器
    語法： :first 獲得選擇的元素中的第一個元素
  2. 尾元素選擇器
    語法： :last 獲得選擇的元素中的最後一個元素
  3. 非元素選擇器
    語法： :not(selector) 不包括指定內容的元素
  4. 偶數選擇器
    語法： :even 偶數，從 0 開始計數
  5. 奇數選擇器
    語法： :odd 奇數，從 0 開始計數
  6. 等於索引選擇器
    語法： :eq(index) 指定索引元素
  7. 大於索引選擇器
    語法： :gt(index) 大於指定索引元素
  8. 小於索引選擇器
    語法： :lt(index) 小於指定索引元素
  9. 標題選擇器
    語法： :header 獲得標題（h1~h6）元素，固定寫法
2. 表單過濾選擇器
  1. 可用元素選擇器
    語法： :enabled 獲得可用元素
  2. 不可用元素選擇器
    語法： :disabled 獲得不可用元素
  3. 選中選擇器
    語法： :checked 獲得單選/複選框選中的元素
  4. 選中選擇器
    語法： :selected 獲得下拉框選中的元素

DOM操作

內容操作
1. html(): 獲取/設置元素的標籤體內容內容 --> 內容
2. text(): 獲取/設置元素的標籤體純文本內容內容 --> 內容
3. val()：獲取/設置元素的value屬性值
屬性操作
1. 通用屬性操作
  1. attr(): 獲取/設置元素的屬性
  2. removeAttr():刪除屬性
  3. prop():獲取/設置元素的屬性
  4. removeProp():刪除屬性
  - attr和prop區別？
    1. 如果操作的是元素的固有屬性，則建議使用prop
    2. 如果操作的是元素自定義的屬性，則建議使用attr
對class屬性操作
1. addClass():添加class屬性值
2. removeClass():刪除class屬性值
3. toggleClass():切換class屬性
  - toggleClass(“one”):
    - 判斷如果元素對象上存在class=“one”，則將屬性值one刪除掉。如果元素對象上不存在class=“one”，則添加
4. css():
CRUD操作:
1. append():父元素將子元素追加到末尾
  - 對象1.append(對象2): 將對象2添加到對象1元素內部，並且在末尾
2. prepend():父元素將子元素追加到開頭
  - 對象1.prepend(對象2):將對象2添加到對象1元素內部，並且在開頭
3. appendTo():
  - 對象1.appendTo(對象2):將對象1添加到對象2內部，並且在末尾
4. prependTo()：
  - 對象1.prependTo(對象2):將對象1添加到對象2內部，並且在開頭
5. after():添加元素到元素後邊
  - 對象1.after(對象2)：將對象2添加到對象1後邊。對象1和對象2是兄弟關係
6. before():添加元素到元素前邊
  - 對象1.before(對象2)：將對象2添加到對象1前邊。對象1和對象2是兄弟關係
7. insertAfter()
  - 對象1.insertAfter(對象2)：將對象1添加到對象2後邊。對象1和對象2是兄弟關係
8. insertBefore()
  - 對象1.insertBefore(對象2)：將對象1添加到對象2前邊。對象1和對象2是兄弟關係
9. remove():移除元素
  - 對象.remove():將對象刪除掉
10. empty():清空元素的所有後代元素。
  - 對象.empty():將對象的後代元素全部清空，但是保留當前對象以及其屬性節點

案例

案例一:隔行換色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>
		
		<script>
			//需求：將數據行的奇數行背景色設置爲 pink，偶數行背景色設置爲 yellow
			$(function () {
				//1. 獲取數據行的奇數行的tr，設置背景色爲pink
				$("tr:gt(1):odd").css("backgroundColor","pink");
				//2. 獲取數據行的偶數行的tr,設置背景色爲yellow
                $("tr:gt(1):even").css("backgroundColor","yellow");
            });
		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="刪除"></td>
			</tr>
			<tr style="background-color: #999999;">
				<th><input type="checkbox"></th>
				<th>分類ID</th>
				<th>分類名稱</th>
				<th>分類描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>0</td>
				<td>手機數碼</td>
				<td>手機數碼類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>電腦辦公</td>
				<td>電腦辦公類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>家居飾品</td>
				<td>家居飾品類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
		</table>
	</body>
</html>

案例二:全選和全不選

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>
		<script>
			//分析：需要保證下邊的選中狀態和第一個複選框的選中狀態一致即可

            function selectAll(obj){
                //獲取下邊的複選框
				$(".itemSelect").prop("checked",obj.checked);
            }

		</script>
	</head>
	<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="刪除"></td>
			</tr>
			<tr>
				<th><input type="checkbox" onclick="selectAll(this)" ></th>
				<th>分類ID</th>
				<th>分類名稱</th>
				<th>分類描述</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>1</td>
				<td>手機數碼</td>
				<td>手機數碼類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>2</td>
				<td>電腦辦公</td>
				<td>電腦辦公類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>3</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>4</td>
				<td>家居飾品</td>
				<td>家居飾品類商品</td>
				<td><a href="">修改</a>|<a href="">刪除</a></td>
			</tr>
		</table>
	</body>
</html>

案例三:發送選擇的qq表情

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情選擇</title>
	 <script  src="../../js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}

    .emoji{margin:50px;}
    ul{overflow: hidden;}
    li{float: left;width: 48px;height: 48px;cursor: pointer;}
    .emoji img{ cursor: pointer; }
    </style>
	<script>
        //需求：點擊qq表情，將其追加到發言框中
        $(function () {
            //1.給img圖片添加onclick事件
            $("ul img").click(function(){
                //2.追加到p標籤中即可。
                $(".word").append($(this).clone());//JQuery對象有clone方法,JavaScript沒有clone方法
            });

        });

		
    </script>
	
</head>
<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
        <p class="word">
            <strong>請發言：</strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
</body>
</html>

案例四:多選下拉列表的左右移動

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery-3.3.1.min.js"></script>


		<style>
			#leftName , #btn,#rightName{
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top:100px ;
				margin-left:30px;
				width: 50px;
			}

			.border{
				height: 500px;
				padding: 100px;
			}
		</style>

		<script>

			//需求：實現下拉列表選中條目左右選擇功能
			
			$(function () {
				//toRight
				$("#toRight").click(function () {
					//獲取右邊的下拉列表對象，append(左邊下拉列表選中的option)
					$("#rightName").append($("#leftName > option:selected"));
                });

                //toLeft
                $("#toLeft").click(function () {
                    //appendTo   獲取右邊選中的option，將其移動到左邊下拉列表中
					$("#rightName > option:selected").appendTo($("#leftName"));

                });
            });
			

		</script>



	</head>
	<body>
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option>張三</option>
				<option>李四</option>
				<option>王五</option>
				<option>趙六</option>
			</select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">

			</div>

			<select id="rightName" multiple="multiple">
				<option>錢七</option>
			</select>

		</div>


	</body>
</html>

JQuery高級

動畫

三種方式顯示和隱藏元素
1. 默認顯示和隱藏方式
  1. show([speed,[easing],[fn]])
    - 參數：
    1. speed：動畫的速度。三個預定義的值(“slow”,“normal”, “fast”)或表示動畫時長的毫秒數值(如：1000)
    2. easing：用來指定切換效果，默認是"swing"，可用參數"linear"
    - swing：動畫執行時效果是先慢，中間快，最後又慢
    - linear：動畫執行時速度是勻速的
    1. fn：在動畫完成時執行的函數，每個元素執行一次。
  2. hide([speed,[easing],[fn]])
  3. toggle([speed],[easing],[fn])
2. 滑動顯示和隱藏方式
  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed,[easing],[fn]])
  3. slideToggle([speed],[easing],[fn])
3. 淡入淡出顯示和隱藏方式
  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed,[easing],[fn]])

遍歷

js的遍歷方式

for(初始化值;循環結束條件;步長)

jq的遍歷方式
jq對象.each(callback)
語法：
jquery對象.each(function(index,element){});
- index:就是元素在集合中的索引
- element：就是集合中的每一個元素對象
- this：集合中的每一個元素對象
回調函數返回值：
- true:如果當前function返回爲false，則結束循環(break)。
- false:如果當前function返回爲true，則結束本次循環，繼續下次循環(continue)
$.each(object, [callback])
for…of: jquery 3.0 版本之後提供的方式
for(元素對象 of 容器對象)

事件綁定

jquery標準的綁定方式
- jq對象.事件方法(回調函數)；
- 注：如果調用事件方法，不傳遞迴調函數，則會觸發瀏覽器默認行爲。
- 表單對象.submit();//讓表單提交
on綁定事件/off解除綁定
- jq對象.on(“事件名稱”,回調函數)
- jq對象.off(“事件名稱”)
  - 如果off方法不傳遞任何參數，則將組件上的所有事件全部解綁
事件切換：toggle
- jq對象.toggle(fn1,fn2…)
  - 當單擊jq對象對應的組件後，會執行fn1.第二次點擊會執行fn2…
- 注意：1.9版本 .toggle() 方法刪除,jQuery Migrate（遷移）插件可以恢復此功能。

案例

插件

1.實現方式：

$.fn.extend(object)
- 增強通過Jquery獲取的對象的功能 $("#id")
$.extend(object)

增強JQeury對象自身的功能 $/jQuery

JQuery絕不是最全的總結,但是絕對是思路賊清晰的總結

目錄

適用人羣

JQuery基礎

概念

JQuery的快速入門

JQuery對象和JS對象的區別和聯繫

選擇器

選擇器基礎知識:

選擇器分類:

DOM操作

案例

案例一:隔行換色

案例二:全選和全不選

案例三:發送選擇的qq表情

案例四:多選下拉列表的左右移動

JQuery高級

動畫

遍歷

事件綁定

案例

插件

Spring MVC訪問靜態資源總出錯?看這裏,原理給你講清楚

[框架]Spring整合Quartz(任務調度框架)

Spring MVC之Json處理

面試官問:訂單的定時提醒支付功能是怎麼實現的?我的回答讓我拿到了offer!

Spring MVC整合異常解析器和攔截器

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結