Jquery 03

 

---

Jquery事件

在JS中. 操作事件: 在标签中添加属性: onXXX来完成事件的指定 !

这种方式, 导致了逻辑代码 与 视图代码混合 !

使用Jquery , 可以很方便的在逻辑代码中实现元素的事件操作 , 让逻辑代码与视图代码分离 !

绑定与解绑事件 ***

绑定事件:
    $obj.bind("事件类型",处理函数对象);

解绑事件:
    $obj.unbind("事件类型");

模拟事件触发:
    $obj.trigger("事件类型");

案例:

                        <ul>
                                        <li class="Img" id="x_c1"><img src="./demo1_files/bag_close.gif"></li>
                                        <li><input type="text" value="2" id="num"></li>
                                        <li class="Img" id="x_c2"><img src="./demo1_files/bag_open.gif"></li>
                                        <script>
                                            function c1(){
                                                //寻找到输入框
                                                var $num = $("#num");
                                                //获取输入框内容, 并转换为数字
                                                var n = new Number($num.val());
                                                //对数字进行减一操作
                                                if(n==99){
                                                    var $c2 = $("#x_c2");
                                                    $c2.unbind("click");
                                                    $c2.bind("click",c2);
                                                }
                                                n--;
                                                //设置数字内容到输入框中
                                                $num.val(n);
                                                if(n==1){
                                                    //事件解绑
                                                    $("#x_c1").unbind("click");
                                                }

                                            }
                                            function c2(){
                                                //寻找到输入框
                                                var $num = $("#num");
                                                //获取输入框内容, 并转换为数字
                                                var n = new Number($num.val());
                                                if(n==1){
                                                    var $c1 = $("#x_c1");
                                                    $c1.unbind("click");
                                                    $c1.bind("click",c1);
                                                }
                                                n++;
                                                //设置数字内容到输入框中
                                                $num.val(n);
                                                if(n>=99){
                                                    //事件解绑
                                                    $num.val(99);
                                                    $("#x_c2").unbind("click");
                                                }

                                            }
                                            $(function(){
                                                var $c1 = $("#x_c1");
                                                var $c2 = $("#x_c2");
                                                $c2.bind("dblclick",c3);

                                                $c1.bind("click",c1);
                                                $c2.bind("click",c2);
                                            });
                                            function c3(){
                                                var n = new Number(prompt("请输入商品数量:"));
                                                if(n>=99){
                                                    $("#num").val(99);
                                                }else{
                                                    $("#num").val(n);
                                                }
                                            }
                                        </script>
                                    </ul>

事件函数 熟悉

直接通过元素的jquery对象, 操作事件函数 ,指定事件的处理逻辑 !

格式:
    click(fn)/click()   //点击   *
    dblclick(fn)/dblclick()     //双击
    blur(fn)/blur()     //失去焦点  *
    focus(fn)/focus()       //获取焦点
    change(fn)/change()     //状态改变
    keydown(fn)/keydown()       //键盘按下
    keyup(fn)/keyup()       //键盘弹起
    mouseover(fn)/mouseover()   //光标移入
    mouseout(fn)/mouseout()     //光标移出
    submit(fn)/submit() //表单提交 *
    load(fn)/unload(fn) //加载完毕 / 销毁

    [fn: 表示函数function]

案例:
    $(function(){
            //当网页加载完毕
            $("input").blur(function(){
                //当输入框失去焦点后, 代码块触发
                //得到输入框中的内容
                var val = $("input").val();
                //将内容设置到span中
                $("span").html(val);
            });
        });
    </script>
    </head>
    <body>
        <input>
        <hr>
        <span></span>
    </body>

组合事件函数 熟悉

-   hover(in,out) //移入移出事件
    in  :   当光标移入时, 触发的函数
    out :   当光标移出时, 触发的函数


案例:

    <script type="text/javascript">
    $(function(){
        //当网页加载完毕执行的代码块
        $(".c1").hover(x_in,x_out);
        $(".c1").click(x_click);
    });
    function x_click(){
        alert("恭喜你, 没中奖");      
    }

    function x_in(){
        //当光标移入时
        $(this).css({"background-image":"url('images/1.gif')"});
    }
    function x_out(){
        //当光标移出时
        $(this).css({"background-image":"url('images/1.png')"});
    }


</script>
</head>
<body>
    <div class="c1">

    </div>

动态绑定事件函数

给未来元素 绑定事件

格式:
    $父元素.on("事件类型","子元素选择器",处理的函数);

注意: 
    给未来元素 绑定事件, 未来的元素, 必须拥有一个已经存在的父元素!

文档函数 *

1.  创建元素
    格式:
        var $obj = $("html元素字符串");
    例如:创建一个按钮
        var $btn = $("<button>示例按钮</button>");

2.  将元素添加到网页中
        -   向指定的父元素内部 追加 新元素
            格式: $父元素.append(新元素对象);

        -   向指定的父元素内部 前置 新元素
            格式: $父元素.prepend(新元素对象);

        -   向指定的元素后 添加新元素
            格式: $obj.after(新元素对象);

        -   向指定的元素前 添加新元素
            格式: $obj.before(新元素对象);

3.  删除一个元素
    格式: $obj.remove(); //删除$obj

4.  清空一个元素
    格式: $obj.empty(); //效果与:$obj.html("");

5.  克隆一个元素
    -   忽略事件克隆: 
            var $新对象 = $原对象.clone();
    -   携带事件克隆:
            var $新对象 = $原对象.clone(true);

案例:

    HTML部分:
        <h3>图书管理</h3>
            <div>
                <!-- 输入框 -->
                <input type="text" placeholder="请输入图书编号" id="bookid">&nbsp;&nbsp;
                <input type="text" placeholder="请输入图书名称" id="bookname">&nbsp;&nbsp;
                <input type="text" placeholder="请输入图书简介" id="bookinfo">&nbsp;&nbsp;
                <input type="text" placeholder="请输入图书作者" id="bookauthor">&nbsp;&nbsp;<button id="btn_add">添加</button>
            </div>
            <hr>
            <div>
                <!-- 被添加的内容 -->
                <table id="content">
                    <tr>
                        <th>图书编号</th>
                        <th>图书名称</th>
                        <th>图书简介</th>
                        <th>图书作者</th>
                        <th>操作</th>
                    </tr>
                </table>
            </div>

    JS部分:

        $(function(){
        //当网页加载完毕 自动执行的代码块
        $("#btn_add").click(function(){
            //获取图书信息
            //ID
            var x_id = $("#bookid").val();
            //NAME
            var x_name = $("#bookname").val();
            //INFO
            var x_info = $("#bookinfo").val();
            //X
            var x_author = $("#bookauthor").val();
            //以上的代码, 获取到了用户输入的图书信息
            //创建一个tr
            var $tr = $("<tr><td>"+x_id+"</td><td>"+x_name+"</td><td>"+x_info+"</td><td>"+x_author+"</td><td><button class='btn_del'>删除</button></td></tr>");
            //寻找到table , 向其中添加一个tr
            $("#content").append($tr);


        });
    });

    $(function(){
        $("#content").on("click",".btn_del",function(){
            $(this).parent().parent().remove();
        });
    });

克隆案例

<script type="text/javascript">
    $(function(){
        $("#div1>button").click(function(){
            //克隆自身, 
            var but = $(this).clone();
            //并将其添加到自身的父元素中
            $(this).parent().append(but);
        });

        $("#div2>button").click(function(){
            //克隆自身, 
            var but = $(this).clone(true);
            //并将其添加到自身的父元素中
            $(this).parent().append(but);
        });

    });
</script>
</head>
<body>
    <div id="div1">
        <button>示例按钮1</button>
    </div>

    <div id="div2">
        <button>示例按钮2</button>
    </div>
</body>

文档查找函数 熟悉

根据一个已经存在的Jquery对象, 查找跟其存在关系的元素 !

$obj.children(选择器); //查找子元素
$obj.next();    //得到下一个兄弟元素 ****
$obj.prev();    //得到上一个兄弟元素 **
$obj.find(选择器); //查找符合选择器的后代元素 ****
$obj.parent();  //获取父元素 ***
$obj.parents(选择器); //查找符合选择器的祖先元素

案例:

    $(function() {
        $("#x").blur(function(){
            //输入框失去焦点
            var val = $(this).val();
            var $span = $(this).parent().find("span");
            if(val.length>=8){
                //匹配规则
                $span.css({"font-size":"14px","color":"#0c0"});
                $span.html("很遗憾, 您的输入可用");
            }else{
                //不匹配规则
                $span.css({"font-size":"14px","color":"#c00"});
                $span.html("恭喜你, 输入不可用, 请检查,哈哈哈");
            }

        });
    });

文档筛选查找函数 了解

eq(index)   返回index+1位置处的jQuery对象
first()  获取第一个元素
last() 获取最后一个元素
is(expr)  判断元素是否满足expr条件
not(expr) 删除与指定表达式匹配的元素
get(index) 取得其中一个匹配的DOM元素

工具函数

$.each 遍历函数 了解

-   遍历Jquery对象
    格式:
        $obj.each(function(){
            //jquery对象是一个DOM对象的集合
            //这里就是在遍历这个集合, 每次循环this表示当前遍历的对象
        });

    案例:
        var num = 35;
        $(function() {
            $("p").each(function(){
                var colorNumber = "#00"+num+"00";
                num++;
                $(this).css({"color":colorNumber});
            });
            console.info(num);
        });


-   遍历数组
    格式:
        $.each(参数1,参数2);

            参数1:    要遍历的数组
            参数2:    遍历数组时的循环函数 , 函数可以编写两个形式参数(i,value), i表示遍历的下标 , value表示每次遍历的数据 !

    案例:
        var arr = ["苍井老师","天海翼老师","奇男老师","马老师"];

        $.each(arr,function(i,value){
            console.info(i+":"+value);
        });

去除数组重复元素

格式: 
    $.unique(数组);

    案例:

    var arr = ["苍井老师","马老师","天海翼老师","奇男老师","奇女老师","马老师","马老师"];
    $.unique(arr);
    $.each(arr,function(i,value){
        console.info(i+":"+value);
    });

合并数组

格式:
    $.merge(数组1,数组2);//将数组2中的内容, 追加到数组1中

    案例:

    var arr1 = ["井空老师","马老师"];
    var arr2 = ["加藤鹰老师","奇男老师"];

    $.merge(arr1,arr2);
    console.info(arr1);

去除字符串的前后空格

去除前后空格操作, 不会对原字符串产生影响, 会返回一个去除前后空格的新字符串!

格式:
    var text = $.trim(字符串);

案例:
    var text1 = "     一二三四五 上山打老虎       ";
    var text2 = $.trim(text1);
    console.info(text1);
    console.info(text2);

HTML5 中JS操作

获取用户地理位置

格式:
    步骤1:    判断浏览器是否支持定位
        if(navigator.geolocation){
            //支持定位
        }else{
            //不支持
        }

    步骤2:    获取地理位置
        navigator.geolocation.getCurrentPosition(参数1,参数2);
        参数1:    function类型, 当获取地理位置成功时, 自动触发的方法,形参包含一个位置对象
        参数2:    function类型, 当获取地理位置失败时, 自动触发的方法,形参包含一个错误对象
    步骤3:    编写获取成功, 处理的函数
        function success(position){
            //获取经度
            var f1 = position.coords.longitude;
            //获取纬度
            var f2 = position.coords.latitude;
            console.info(f1+","+f2);
        }

    步骤4.    编写获取失败, 处理的函数
        function error(error){
            switch(error.code){
                case error.PERMISSION_DENIED:
                    //权限不允许
                break;
                case error.position_UNAVAILABLE:
                    //无法定位
                break;
                case error.TIMEOUT:
                    //定位超时
                break;
            }
        }

//定位结果: 
    116.4071 
    39.9046

WEB存储 ***

使用键值对进行存储!

存储数据, 通过如下两个对象
    -   localStorage
        存储时, 数据没有时间限制, 在用户不手动清理垃圾的情况下, 永远存在 !
    -   sessionStorage
        数据存储完毕, 在浏览器关闭时, 会自动清除 !

    上述的两个对象, 存储数据时, 操作方式完全相同. 仅仅是存储的时长不同而已 !

使用:
    1.  我们在使用WEB存储时, 应先验证浏览器是否支持:
        if(typeof(Storage)!=="undefned"){
            //支持
        }

常用函数:
    存储数据:   对象.setItem(key,value);//存储的数据, 都是字符串

    取出数据:   var value = 对象.getItem(key);

    删除单个数据:     对象.removeItem(key);

    清空所有数据:     对象.clear();

不常用函数:
    -   获取存储的键值对个数: 
        var length = 对象.length;

    -   根据存储的顺序下标, 获取键值对的键
        var key = 对象.key(下标);


特殊的存取数据的方式:
    -   存储数据可以像操作普通对象, 赋予属性值一样:
        对象.key = value;

    -   获取数据:
        var value = 对象.key;

举例:
    sessionStorage.setItem("username","张三");
    与
    sessionStorage.username="张三";
    完全一致 !