JavaWEB開發04——JQuery

今日任務

使用JQuery完成頁面定時彈出廣告

定時器:

​ setInterval clearInterval

​ setTimeout clearTimeout

顯示: img.style.display = "block"

隱藏: img.style.display = "none"

img 對象

​ style屬性: style對象

使用JQuery完成表格的隔行換色

得到全部的行

​ table.rows[]

修改行的顏色

​ row.bgColor ="red"

​ row.style.backgroundColor = "black"

​ row.style.background = "red"

​ "background-color:red"

​ "background:red"

使用JQuery完成複選框的全選效果

checked屬性

如何獲取全部複選框:

​ document.getElementsByName get Elements By Name 數據庫裏面

使用JQuery完成省市聯動效果

​ JS中的數組: ["城市"]

​ new Array()

​ DOM樹操做:

​ 建立節點: document.createElement

​ 建立文本節點: document.createTextNode

​ 添加節點: appendChild

使用JQuery完成下列列表左右選擇

​ select下拉列表

​ multiple 容許多選

​ ondblclick : 雙擊事件

​ for循環遍歷,一邊遍歷一邊移除出現的問題

使用JQuery完成表單的校驗(擴展)

​ 事件:

​ 得到焦點事件: onfocus

​ 失去焦點事件: onblur

​ 按鍵擡起事件: onkeyup

​ 鼠標移入: onmouseenter

​ 鼠標移出: onmouseout

​ JS引入外部文件 : script

今日目標：

掌握JQuery的基本使用

掌握JQuery的基本選擇器,層次選擇器

會使用JQuery完成DOM的基本操做

1. 使用JQuery完成頁面定時彈出廣告

1.1 需求分析：

當用戶打開界面，3秒鐘以後彈出廣告，這個廣告顯示5秒鐘，隱藏廣告

1.2 技術分析

定時器: setTimeout

顯示和隱藏: style.display = "block/none"

什麼JQuery:

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

jQuery的核心特性能夠總結爲：具備獨特的鏈式語法和短小清晰的多功能接口；具備高效靈活的css選擇器，而且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各類主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

JQuery的做用:

​ 1. 寫更少的代碼,作更多的事情: write Less ,Do more

2. 將咱們頁面的JS代碼和HTML頁面代碼進行分離

爲何學習JQuery:

​ 提升咱們的工做效率

JQ的入門

<script>
            //js文檔加載完成的事件
            window.onload = function(){
                alert("window.onload   111");
            }
            
            window.onload = function(){
                alert("window.onload   222");
            }
            
            /*文檔加載完成的事件*/
            jQuery(document).ready(function(){
                 alert("jQuery(document).ready(function()");
            });
            /*
                 jQuery  簡寫成 $
             */
            $(document).ready(function(){
                 alert("$(document).ready(function()");
            });
            
            /*
                最簡單的寫法 
            */
            $(function(){
                alert("$(function(){");
            });
            
        </script>

【JQ中根據ID查找元素】

全都是根據選擇器去找的
#ID{}
.類名{}
$("#ID的名稱")

【JQ和JS之間的轉換】

• JQ對象,只能調用JQ的屬性和方法
• JS對象 只能調用JS的屬性和方法

function changeJS(){
                var div = document.getElementById("div1");
//                div.innerHTML = "JS成功修改了內容"
                //將JS對象轉成JQ對象
                $(div).html("轉成JQ對象來修改內容")
            }
            
            $(function(){
                //給按鈕綁定事件
                $("#btn2").click(function(){
                    //找到div1
//                    $("#div1").html("JQ方式成功修改了內容");
                    //將JQ對象轉成JS對象來調用
                    var $div = $("#div1");
//                    var jsDiv = $div.get(0);
                    var jsDiv = $div[0];
                    jsDiv.innerHTML="jq轉成JS對象成功";
                });
            });

JQ的開發步驟: (將咱們頁面的JS代碼和HTML頁面代碼進行分離)

1. 導入JQ相關的文件
2.  文檔加載完成事件: $(function)  : 頁面初始化的操做: 綁定事件, 啓動頁面定時器
3. 肯定相關操做的事件
4. 事件觸發函數
5. 函數裏面再去操做相關的元素

顯示和隱藏 img.style.display

【JQ中的動畫效果】

show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定義動畫

1.3 步驟分析：

1. 導入JQ的文件
2. 編寫JQ的文檔加載事件
3. 啓動定時器 setTimeout("",3000);
4. 編寫顯示廣告的函數
5. 在顯示廣告裏面再啓動一個定時器
6. 編寫隱藏廣告的函數

1.4 代碼實現

<script>
            //顯示廣告
            function showAd(){
                $("#img1").slideDown(2000);
                setTimeout("hideAd()",3000);
            }
            //隱藏廣告
            function hideAd(){
                $("#img1").slideUp(2000);
            }
            $(function(){
                setTimeout("showAd()",3000);
            });
        </script>

JQuery中的選擇器

讓咱們可以更加精確找到咱們要操做的元素

基本選擇器

• ID選擇器 : #ID的名稱
• 類選擇器: 以 . 開頭 .類名
• 元素選擇器: 標籤的名稱
• 通配符選擇器: *
• 選擇器,選擇器: 選擇器1,選擇器2

基本選擇器的案例

<!--
            - ID選擇器 :     #ID的名稱
            - 類選擇器:     以 . 開頭  .類名
            - 元素選擇器:    標籤的名稱
            - 通配符選擇器:   * 
            - 選擇器,選擇器:  選擇器1,選擇器2
        -->
        <script>
            //文檔加載事件,頁面初始化的操做
            $(function(){
                //初始化操做: 給按鈕綁定事件
                $("#btn1").click(function(){
                    $("#two").css("background-color","palegreen");                    
                });
                
                //找出mini類的全部元素
                $("#btn2").click(function(){
                    $(".mini").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("div").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("*").css("background-color","palegreen");
                    
                });
                /*選擇器分組*/
                
                //找出mini類 和 span元素
                $("#btn5").click(function(){
                    $(".mini,span").css("background-color","palegreen");
                });
            });
        </script>

JQ中的層級選擇器

• 子元素選擇器: 選擇器1 > 選擇器2
• 後代選擇器: 選擇器1 兒孫
• 相鄰兄弟選擇器 : 選擇器1 + 選擇器2 : 找出緊挨着的一個弟弟
• 找出全部弟弟: 選擇器1~ 選擇器2 : 找出全部的弟弟

<script>
            //文檔加載事件,頁面初始化的操做
            $(function(){
                //初始化操做: 給按鈕綁定事件
                //找出body下面的子div   
                $("#btn1").click(function(){
                    $("body > div").css("background-color","palegreen");                    
                });
                //找出body下面的全部div
                $("#btn2").click(function(){
                    $("body div").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("#one+div").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("#two~div").css("background-color","palegreen");                    
                });
                
            });
        </script>

JQ中的基本過濾器

<script>
            $(function(){
                /<script>
            //文檔加載事件,頁面初始化的操做
            $(function(){
                
                //初始化操做: 給按鈕綁定事件
                //過濾出全部div中第一個元素
                $("#btn1").click(function(){
                    $("div:first").css("background-color","palegreen");                    
                });
                
                //過濾出全部div中偶數位的div
                $("#btn2").click(function(){
                    $("div:even").css("background-color","palegreen");                    
                });
                $("#btn3").click(function(){
                    $("div:odd").css("background-color","palegreen");                    
                });
                $("#btn4").click(function(){
                    $("div:gt(2)").css("background-color","palegreen");                    
                });
            
            });
        </script>

JQ中的屬性選擇器

$(function(){
                //找到有name屬性的input
                $("#btn1").click(function(){
                    $("input[name]").attr("checked",true);
                });
                $("#btn2").click(function(){
                    $("input[name='accept']").attr("checked",true);
                });
                $("#btn3").click(function(){
                    $("input[name='newsletter'][value='Hot Fuzz']").attr("checked",true);
                });
            });

JQ中的表單過濾器

<script>
  //1.文檔加載事件    
  $(function(){
    $(":text").css("background-color","pink");
  });
</script>

上午的內容回顧:

什麼是JQ: write less , do more: 寫更少的代碼,作更多的事

​ javascript函數庫

1.11版本

定時器:

動畫效果:

​ show : 顯示

​ hide : 隱藏

​ slideDown:

​ slideUp: 向上滑動

​ fadeIn

​ fadeOut

JQ選擇器:

基本選擇器:

​ ID選擇器: #ID的名字

​ 類選擇器: .類名

​ 元素選擇器: 標籤名稱

​ 通配符選擇器: *

​ 選擇器分組: 選擇器1,選擇器2

層級選擇器:

​ 後代選擇器: 選擇器1 兒孫

​ 子元素選擇器: 選擇器1 > 兒子

​ 相鄰兄弟選擇器: 選擇器1 + 選擇器2 找出緊挨着它的弟弟

​ 全部弟弟選擇器: 選擇器1~選擇器2 找出全部弟弟

基本過濾器:

​ 選擇器:first : 找出的是第一個

​ :last

​ :even 找出索引爲偶數

​ :odd 找出奇數索引

​ :gt(index) : 大於索引

​ :lt(index) 小於

​ :eq(index) 等於

屬性選擇器:

​ 選擇器[href] : 單個屬性

選擇器[href][title] : 多個屬性
選擇器[href][title='test'] : 多個屬性,包含值

表單過濾器:

​ :input 找出全部輸入項: input textarea select

​ :text

​ :password

表單對象屬性:

​ 找出select中被選中的那一項:

​ option:selected

JQ的開發步驟:

1. 導入JQ相關的包
2. 文檔加載文成的事件:  頁面初始化:  綁定事件, 啓動定時器
3.  肯定事件
4. 實現事件索要觸發的函數
5. 函數裏面再去操做咱們要操做的元素

使用JQ完成表格的隔行換色

需求分析:

在咱們的實際開發過程當中,咱們的表格若是全部的行都是同樣的話,很容易看花眼,因此咱們須要讓咱們的表格隔行換色

技術分析:

獲取全部行 table.rows

遍歷全部行

根據行號去修改每一行的背景顏色: bgColor

​ style.backgroundColor = "red"

步驟分析:

1. 導入JQ的包
2. 文檔加載完成函數: 頁面初始化
3. 得到全部的行 : 元素選擇器
4. 根據行號去修改顏色

代碼實現:

$(function(){
                //得到全部的行 :   元素選擇器
                $("tbody > tr:even").css("background-color","#CCCCCC");
                //修改基數行
                $("tbody > tr:odd").css("background-color","#FFF38F");
//                $("tbody > tr").css("background-color","#FFF38F");
                
                
            });

使用JQuery完成表單的全選全不選功能

需求分析

​ 在咱們對錶格處理的時,有些狀況下,咱們須要對錶格進行批量處理,

技術分析:

代碼實現:

使用JQ完成省市聯動效果

需求分析:

​ 在咱們的註冊表單中,一般咱們須要知道用戶的籍貫,須要一個給用選擇的項,當用戶選中了省份以後,列出省下面全部的城市

技術分析:

1. 準備工做 : 城市信息的數據

2. 添加節點 : appendChild (JS)

   1. append : 添加子元素到末尾
   2. appendTo : 給本身找一個爹,將本身添加到別人家裏
   3. prepend : 在子元素前面添加
   4. after : 在本身的後面添加一個兄弟
3. 遍歷的操做:

   ​

步驟分析:

1. 導入JQ的文件
2. 文檔加載事件:頁面初始化
3. 進一步肯定事件: change事件
4. 函數: 獲得當前選中省份
5. 獲得城市, 遍歷城市數據
6. 將遍歷出來的城市添加到城市的select中

代碼實現:

$(function(){
                $("#province").change(function(){
//                    alert(this.value);
                    //獲得城市信息
                    var cities = provinces[this.value];
                    //清空城市select中的option
                    /*var $city = $("#city");
                    //將JQ對象轉成JS對象
                    var citySelect = $city.get(0)
                    citySelect.options.length = 0;*/
                    
                    $("#city").empty();  //採用JQ的方式清空
                    //遍歷城市數據
                    $(cities).each(function(i,n){
                        $("#city").append("<option>"+n+"</option>");
                    });
                });
            });

使用JQ完成下拉列表左右選擇

需求分析

咱們的商品一般包含已經有了的, 還有沒有的,如今咱們須要有一個頁面用於動態編輯這些商品

技術分析

步驟分析

1. 導入JQ的文件
2. 文檔加載函數 :頁面初始化
3.肯定事件 :　點擊事件　onclick
4. 事件觸發函數
1. 移動被選中的那一項到右邊

代碼實現

<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
        <script>
            $(function(){
                $("#a1").click(function(){
                    //找到被選中的那一項
                    //將被選中項添加到右邊
                    $("#rightSelect").append($("#leftSelect option:selected"));
                });
                
                //將左邊全部商品移動到右邊
                $("#a2").click(function(){
                    $("#rightSelect").append($("#leftSelect option"));
                });
            });
        </script>

今天內容總結:

定時器

動畫效果: show hide slideDown slideUp fadeIn fadeOut animate

基本選擇器:

​ ID選擇器: #ID名稱

​ 類選擇器: .類名

​ 元素選擇器: 元素/標籤名稱

​ 通配符選擇器: * 找出全部頁面元素 包含頁面上全部的標籤

​ 選擇器分組 : 選擇器1, 選擇器2 [選擇器1,選擇器2]

層級選擇器:

​ 後代選擇器: 選擇器1 選擇器2 找出全部的後代,兒子孫子曾孫

​ 子元素選擇器: 選擇器1 >選擇器2 找出全部兒子

​ 相鄰兄弟選擇器: 選擇器1+選擇器2 : 找出緊挨着本身那個弟弟

​ 兄弟選擇器 :　　　選擇器1~選擇器2 : 找出全部的弟弟

屬性選擇器:

​ 選擇器[屬性名稱]

選擇器[屬性名稱][屬性名名]
選擇器[屬性名稱='屬性值'][屬性名稱='屬性值'][屬性名稱='屬性值']

表單選擇器:

​ :input 找出全部的輸入項 : 不僅僅找出input textarea select

​ :text 找出type類型爲 text

​ :password

基本過濾器:

​ :even

​ :odd

​ :gt

​ :lt

​ :eq

​ :first

​ :last

表單對象屬性:

​ :selected

​ :checked

$(function)  : 文檔加載完成的事件
css()  :     修改css樣式
prop() :    修改屬性/ 獲取屬性
html() :    修改innerHTML

append :     給本身添加子節點
appendTo :  將本身添加到別人家,給本身找一個爹
prepend :   在本身最前面添加子節點
after    :   在本身後面添加一個兄弟
empty    :   清空全部子節點

$(cities).each(function(i,n){
      
})

$.each(arr,function(i,n){
  
});

瞭解, 熟悉, 熟練, 精通 

通過一個項目,將全部學過串起來

使用JQ完成表單的校驗(擴展)

需求分析

在用戶提交表單的時候, 咱們最好是可以在用戶數據提交給服務器以前去作一次校驗,防止服務器壓力過大,而且須要給用戶一個友好提示

技術分析

• trigger
• triggerHandler
• is()

步驟分析

1. 首先給必填項,添加尾部添加一個小紅點
2. 獲取用戶輸入的信息,作相應的校驗
3. 事件: 得到焦點, 失去焦點, 按鍵擡起
4. 表單提交的事件

代碼實現