Web 基础28 JQuery简介及其入门案例（二）

1.1 jQuery的核心方法

1.1.1 jQuery的核心方法

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

底层:先将document对象转成jQuery对象,然后调用ready方法,并且传一个匿名的函数,最后才实现这个功能

1.1.2 核心方法的作用

设置页面加载完成之后要执行的代码
- $(function(){代码});
作为选择器获取标签的对象
- var div01 = $("#div01");
把字符串形式的标签,转化成jQuery对象
- var jQueryA = $("<a href='http://www.itheima.com'>黑马程序员</a>");
把dom对象转换成jQuery对象
- var div01 = $(document.getElementById("#div01"));

1.2 使用jQuery遍历集合对象

通过选择器的到的对象通常是集合对象，但是这里要注意的是这个集合是一个JQ对象，只能使用JQ的方法

方式1 普通for循环

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不带参数
divList.each(function() {
    //this:集合中的每一个元素对象,this是dom对象，不能直接调用jQuery的方法
    alert($(this).html());
});

方式2.2 使用jQuery方法each来遍历集合对象

//function带参数
divList.each(function(index,element) {
    //element == this
    alert(index + ":" + $(element).html());
});

注意:
- 普通for循环获得集合的长度用size()或者length都可以
- 两种方式遍历得到的元素对象都是dom对象,需要转换之后才能调用jQuery方法

1.3 JQ的常用方法

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

使用jQuery设置获取标签的标签体

//html() 
//类似于dom的innerHTML属性
alert(jQueryDiv.html());// 如果没有参数,获取标签的标签体
jQueryDiv.html("小熊先生");//如果有参数,设置标签的标签体

//text()      
//不解析html标签,类似于dom的innerText属性      
alert(jQueryDiv.text());//如果没有参数,获取标签的标签体
jQueryDiv.text("小熊先生");//如果有参数,设置标签的标签体

使用jQuery设置获取标签的值

//val()
alert(inputList.val());//无参,获取
inputList.val("lisi");//有参,设置

1.3.2 attr()

alert(aList.attr("href"));//获取
aList.attr("href","http://www.itcast.cn");//设置
removeAttr(name)//移除属性

1.3.3 css()&addClass()

css()

alert(div01.css("height"));//获取
div01.css("height","300px");//设置

//css可以一次设置多个属性,接收一个对象
//{属性:属性值,属性2:属性值2}
div01.css({"height":"800px","width":"800px"});

addClass()

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

removeClass()

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

说明
- 这些方法一般用来控制页面的显示,涉及跟前端的配合
- 对于前端: 经常做css层叠样式表,供我们导入
- 对于后端:一般不需要单独设置某一个css样式的值,一般给元素添加一个class属性

1.3.4 is(选择器)

其实判断前面这个jQuery对象是否符合参数中的选择器(是否包含在选择器中),返回一个布尔值

var div01 = $("#div01");
    
//id选择器
alert(div01.is("#div01"));

//类选择器
alert(div01.is(".css01"));

1.4 jQuery的事件处理

&esmp;这里我也只能简单的说一个,很多具体的需要去看JQ的手册，官网有下载的。

click() 按钮点击时触发事件所对应的方法

var button01 = $("#button01");
button01.click(function() {
    alert("点击事件触发了1！");
});

blur() 失去焦点时触发事件所对应的方法

var username = $("#username");
username.blur(function() {
    //var value = username.val();
    var value = $(this).val();
    
    if(value == "") {
        alert("请输入用户名！");
        return;
    }
});

change() 标签值发生变化时触发事件所对应的方法

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

事件处理其实就是调用它相应时间的方法,传一个匿名的函数
- 当这个事件发生的时候,这个匿名函数就会执行
- 例如：键盘按下去就会触发keydown事件 ,接下来每个几毫秒触发 keypress事件,最后抬起来的时候会触发 keyup事件
其实讲道理，很多功能在手册上都可以找到，不需要记住，使用前一定要看手册是说明真的，千万别忘记了，不然容易闹笑话

1.5 几个案例

可以先自己写一下，把我的脚本先删除

1.5.1 实现表单校验的案例

在用户提交注册表单时在信息框显示提示如图。

登录案例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实现表单校验的案例
                var spanList = $("span");
                //遍历集合对象
                spanList.each(function() {
                    //$(this).css("display","none");
                    //hide()    隐藏标签
                    //show()    显示标签
                    $(this).hide();
                });
                
                
                $("form").submit(function() {
                    if($("#username").val() == "") {
                        //显示span标签
                        $(spanList[0]).show();
                    }
                    else {
                        //隐藏span标签
                        $(spanList[0]).hide();
                    }
                    
                    if($("#password").val() == "") {
                        //显示span标签
                        $(spanList[1]).show();
                    }
                    else {
                        //隐藏span标签
                        $(spanList[1]).hide();
                    }
                    
                    //判断是否有span标签显示，如果有span标签显示，那说明用户名或者密码为空，表单不可以提交，返回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 多选框案例

实现多选与反选按钮以及计算按钮

商品列表统计.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手机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 表格关联

就是完成类似地址的选择

省份选择.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数组
            var arr = [
                {name:"河南省",cities:["郑州","洛阳","开封"]},
                {name:"辽宁省",cities:["沈阳","大连","鞍山"]},
                {name:"山东省",cities:["青岛","济南","烟台"]},
            ];
            
            //将省份添加到省份列表中
            for(var i=0;i<arr.length;i++){
                $("#province").html($("#province").html()+"<option>"+arr[i].name+"</option>");
            }
            
            //为省份添加事件,当省份被选中之后,添加城市到城市列表中
            $("#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 基础28 JQuery简介及其入门案例 （二）