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

作者: 小熊先生很不开心 | 来源:发表于2018-04-06 21:34 被阅读17次

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简介及其入门案例（二）

1.1 jQuery的核心方法

1.1.1 jQuery的核心方法

1.1.2 核心方法的作用

1.2 使用jQuery遍历集合对象

1.3 JQ的常用方法

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

1.3.2 attr()

1.3.3 css()&addClass()

1.3.4 is(选择器)

1.4 jQuery的事件处理

1.5 几个案例

1.5.1 实现表单校验的案例

1.5.2 多选框案例

1.5.2 表格关联

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

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

1.1 jQuery的核心方法

1.1.1 jQuery的核心方法

1.1.2 核心方法的作用

1.2 使用jQuery遍历集合对象

1.3 JQ的常用方法

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

1.3.2 attr()

1.3.3 css()&addClass()

1.3.4 is(选择器)

1.4 jQuery的事件处理

1.5 几个案例

1.5.1 实现表单校验的案例

1.5.2 多选框案例

1.5.2 表格关联

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

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