Web 基礎(chǔ)28 JQuery簡介及其入門案例（二）

1.1 jQuery的核心方法

1.1.1 jQuery的核心方法

$(); == jQuery();
        
//完整版本
jQuery(document).ready(function() {
    alert("頁面加載完成了肢预！");
});

??底層:先將document對象轉(zhuǎn)成jQuery對象,然后調(diào)用ready方法,并且傳一個匿名的函數(shù),最后才實(shí)現(xiàn)這個功能

1.1.2 核心方法的作用

設(shè)置頁面加載完成之后要執(zhí)行的代碼
- $(function(){代碼});
作為選擇器獲取標(biāo)簽的對象
- var div01 = $("#div01");
把字符串形式的標(biāo)簽,轉(zhuǎn)化成jQuery對象
- var jQueryA = $("<a );
把dom對象轉(zhuǎn)換成jQuery對象
- var div01 = $(document.getElementById("#div01"));

1.2 使用jQuery遍歷集合對象

??通過選擇器的到的對象通常是集合對象痹束，但是這里要注意的是這個集合是一個JQ對象喊式，只能使用JQ的方法

方式1 普通for循環(huán)

for(var x = 0;x < divList.size();x++) {
    var div = $(divList[x]);
    //var div = divList.get(x);
    alert(div.html());
}

方式2.1 使用jQuery方法each來遍歷集合對象

//function不帶參數(shù)
divList.each(function() {
    //this:集合中的每一個元素對象,this是dom對象汗销，不能直接調(diào)用jQuery的方法
    alert($(this).html());
});

方式2.2 使用jQuery方法each來遍歷集合對象

//function帶參數(shù)
divList.each(function(index,element) {
    //element == this
    alert(index + ":" + $(element).html());
});

注意:
- 普通for循環(huán)獲得集合的長度用size()或者length都可以
- 兩種方式遍歷得到的元素對象都是dom對象,需要轉(zhuǎn)換之后才能調(diào)用jQuery方法

1.3 JQ的常用方法

1.3.1 html()&text()&val()

使用jQuery設(shè)置獲取標(biāo)簽的標(biāo)簽體

//html() 
//類似于dom的innerHTML屬性
alert(jQueryDiv.html());// 如果沒有參數(shù),獲取標(biāo)簽的標(biāo)簽體
jQueryDiv.html("小熊先生");//如果有參數(shù),設(shè)置標(biāo)簽的標(biāo)簽體

//text()      
//不解析html標(biāo)簽,類似于dom的innerText屬性      
alert(jQueryDiv.text());//如果沒有參數(shù),獲取標(biāo)簽的標(biāo)簽體
jQueryDiv.text("小熊先生");//如果有參數(shù),設(shè)置標(biāo)簽的標(biāo)簽體

使用jQuery設(shè)置獲取標(biāo)簽的值

//val()
alert(inputList.val());//無參,獲取
inputList.val("lisi");//有參,設(shè)置

1.3.2 attr()

alert(aList.attr("href"));//獲取
aList.attr("href","http://www.itcast.cn");//設(shè)置
removeAttr(name)//移除屬性

1.3.3 css()&addClass()

css()

alert(div01.css("height"));//獲取
div01.css("height","300px");//設(shè)置

//css可以一次設(shè)置多個屬性,接收一個對象
//{屬性:屬性值,屬性2:屬性值2}
div01.css({"height":"800px","width":"800px"});

addClass()

div01.addClass("css01 css02");//添加

removeClass()

div01.removeClass("css01 css02");//移除

說明
- 這些方法一般用來控制頁面的顯示,涉及跟前端的配合
- 對于前端: 經(jīng)常做css層疊樣式表,供我們導(dǎo)入
- 對于后端:一般不需要單獨(dú)設(shè)置某一個css樣式的值,一般給元素添加一個class屬性

1.3.4 is(選擇器)

??其實(shí)判斷前面這個jQuery對象是否符合參數(shù)中的選擇器(是否包含在選擇器中),返回一個布爾值

var div01 = $("#div01");
    
//id選擇器
alert(div01.is("#div01"));

//類選擇器
alert(div01.is(".css01"));

1.4 jQuery的事件處理

?&esmp;這里我也只能簡單的說一個,很多具體的需要去看JQ的手冊椅挣，官網(wǎng)有下載的系吭。

click() 按鈕點(diǎn)擊時觸發(fā)事件所對應(yīng)的方法

var button01 = $("#button01");
button01.click(function() {
    alert("點(diǎn)擊事件觸發(fā)了1啡直！");
});

blur() 失去焦點(diǎn)時觸發(fā)事件所對應(yīng)的方法

var username = $("#username");
username.blur(function() {
    //var value = username.val();
    var value = $(this).val();
    
    if(value == "") {
        alert("請輸入用戶名箫柳！");
        return;
    }
});

change() 標(biāo)簽值發(fā)生變化時觸發(fā)事件所對應(yīng)的方法

var select01 = $("#select01");
select01.change(function() {
    alert($(this).val());
});

事件處理其實(shí)就是調(diào)用它相應(yīng)時間的方法,傳一個匿名的函數(shù)
- 當(dāng)這個事件發(fā)生的時候,這個匿名函數(shù)就會執(zhí)行
- 例如：鍵盤按下去就會觸發(fā)keydown事件 ,接下來每個幾毫秒觸發(fā) keypress事件,最后抬起來的時候會觸發(fā) keyup事件
其實(shí)講道理讼育，很多功能在手冊上都可以找到帐姻，不需要記住稠集，使用前一定要看手冊是說明真的，千萬別忘記了饥瓷，不然容易鬧笑話

1.5 幾個案例

??可以先自己寫一下剥纷，把我的腳本先刪除

1.5.1 實(shí)現(xiàn)表單校驗(yàn)的案例

??在用戶提交注冊表單時在信息框顯示提示如圖。

登錄案例1.png

??用戶未輸入

登錄案例2.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery的案例</title>
        <style type="text/css">
            table tr td{                
                border:1px solid darkblue;          
            }
            table {
                margin-left:30%;
                position:relative ;
                border:1px solid darkblue;
                width: 500px;
            }
            
            span {
                color: red;
            }
        </style>
        
        <script type="text/javascript" src="lib/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {
                //使用jQuery實(shí)現(xiàn)表單校驗(yàn)的案例
                var spanList = $("span");
                //遍歷集合對象
                spanList.each(function() {
                    //$(this).css("display","none");
                    //hide()    隱藏標(biāo)簽
                    //show()    顯示標(biāo)簽
                    $(this).hide();
                });
                
                
                $("form").submit(function() {
                    if($("#username").val() == "") {
                        //顯示span標(biāo)簽
                        $(spanList[0]).show();
                    }
                    else {
                        //隱藏span標(biāo)簽
                        $(spanList[0]).hide();
                    }
                    
                    if($("#password").val() == "") {
                        //顯示span標(biāo)簽
                        $(spanList[1]).show();
                    }
                    else {
                        //隱藏span標(biāo)簽
                        $(spanList[1]).hide();
                    }
                    
                    //判斷是否有span標(biāo)簽顯示呢铆，如果有span標(biāo)簽顯示晦鞋，那說明用戶名或者密碼為空，表單不可以提交棺克，返回false
                    if(spanList.is("span:visible")) {
                        return false;
                    }
                    else {
                        return true;
                    }
                    
                    
                });
                
                
                
            });
        </script>
    </head>
    <body>
        <form method="get" action="success.html">
            <table>
                    <tr>
                        <th colspan="2">用戶登陸</th>
                    </tr>
                    <tr>
                        <td>用戶名稱</td>
                        <td>
                            <input type="text" id="username"  name="username" />
                            <span>請輸入用戶名悠垛！</span>
                        </td>
                    </tr>
                    <tr>
                        <td>用戶密碼</td>
                        <td>
                            <input type="password" id="password"  name="password"/>
                            <span>請輸入密碼！</span>
                        </td>
                    </tr>
                    
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit"  value="提交"/>
                            <input type="reset" value="重置" />
                        </td>
                    </tr>
            
            </table>
        </form>
    </body>
</html>

1.5.2 多選框案例

??實(shí)現(xiàn) 多選與反選按鈕以及計(jì)算按鈕

商品列表統(tǒng)計(jì).png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JQ代碼案例2</title>
    </head>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var allCheck = $("#allCheck");
            allCheck.click(function(){
                $("input[name=item]").each(function(){
                    $(this).prop("checked",allCheck.prop("checked"))
                });
            });
            
            var otherCheck = $("#otherCheck");
            otherCheck.click(function(){
                $("input[name=item]").each(function(){
                    if($(this).prop("checked")){
                        $(this).removeProp("checked");
                    }else{
                        $(this).prop("checked","checked");
                    }
                });
                
            });
            
            var sumBtn = $("#sumBtn");
            sumBtn.click(function(){
                var sum = 0;
                var item = $("input[name=item]:checked");
                item.each(function(){
                    sum = sum + parseInt($(this).val());
                });
                $("#sumId").html(sum);
            });
            
            
        });
        
        
    </script>
    <body>
        <div>商品列表</div>
        <input type="checkbox" name="item" value="3000" />筆記本3000元<br />
        <input type="checkbox" name="item" value="2500"/>HTC手機(jī)2500元<br />
        <input type="checkbox" name="item" value="8000" />蘋果電腦8000元<br />
        <input type="checkbox" name="item" value="1500" />IPAD1500元<br />
        <input type="checkbox" name="item" value="400" />玩具汽車400元<br />
        
        <input type="checkbox" name="all" id="allCheck" />全選<br />
        <input type="checkbox" name="all" id="otherCheck"/>反選<br />
        <input type="button" value="總金額" id="sumBtn" /><span id="sumId"></span>
    </body>
</html>

1.5.2 表格關(guān)聯(lián)

??就是完成類似地址的選擇

省份選擇.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
        $(function(){
            //定義一個json數(shù)組
            var arr = [
                {name:"河南省",cities:["鄭州","洛陽","開封"]},
                {name:"遼寧省",cities:["沈陽","大連","鞍山"]},
                {name:"山東省",cities:["青島","濟(jì)南","煙臺"]},
            ];
            
            //將省份添加到省份列表中
            for(var i=0;i<arr.length;i++){
                $("#province").html($("#province").html()+"<option>"+arr[i].name+"</option>");
            }
            
            //為省份添加事件,當(dāng)省份被選中之后,添加城市到城市列表中
            $("#province").click(function(){
                for(var i=0;i<arr.length;i++){
                    
                    var name = arr[i]["name"];
                    var cities = arr[i]["cities"];
                    if($("select[id=province] option:selected").html() == name){
                        $("#city").html("<option>--選擇市--</option>");
                        for(var j=0;j<cities.length;j++){
                            $("#city").html($("#city").html()+"<option>"+cities[j]+"</option>");
                        }
                    }
                }
            });
        });
        </script>
    </head>
    <body>
        <select id="province">
            <option>--選擇省--</option>
        </select>
        
        
        <select id="city">
            <option>--選擇市--</option>
        </select>

    </body>
</html>

Web 基礎(chǔ)28 JQuery簡介及其入門案例 （二）