jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr／val／text（）、jq.height/width、offset().／position().／scrol Left／Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存

each 方法

　　$ ( selector).each(function( index,element) {  } );

　　 　　参数一表示当前元素在所有匹配元素中的索引号

 　　　　参数二表示当前元素（DOM对象）

  1. prevAll("li") 同个父系中前边所有的li元素
  2. nextAll("li")同个父系后边所有的li元素
  jQuery(function () {
            //设置不一样的盒子透明度逐渐递增
            $("ul li").each(function (index,element) {
                //console.log(index+"---"+element.tagName);
                $(element).css("opacity",(index+1)/10);
            });
        });

 

操作form表单：

　　jqipt.attr（“属性名”，属性值）

　　　　获取 jqipt.attr（“属性名”）；

　　　　添加类，jqipt.attr（“class”，“类名”）

　　　　移除属性 jqipt.removeAttr（“属性名”）

　　　　添加checked、selected、display 使用prop（“属性名”，“属性值”）

　　val( )方法

　　　   获取标签中的value的属性

　　　　$("input").val( ); 获取input的值

 　　　  $("input").val("赋值内容");
　　text( ) 方法获取文本值，不包含标签
　　　　$("div").text( ); 获取内容 
　　　　　　innerText( ); 不识别标签
　　　　　　innerHTML( );识别标签　　
　　　　　　.html( ) 识别标签
　　　　$("div").text( );

尺寸操作

　　获取宽高：

　　　　jq对象.height / width ( ); 只是内容的尺寸，不包括padding和margin和border

　　设置宽高：

　　　　jq对象.height ／width("200px" ) ; 

　　　　px 可加可不加，不加不需要写双引号 

坐标值操作：

　　offset( ).left / top ;距离页面顶端或左边的距离

　　position( ).left / top ; 距离最近的已定位的父系盒子的距离，获取的值和padding、margin无关

　　scrollLeft ／ Top（ ）；被卷曲的头部。 无参数则为获取，有参数则为赋值

事件绑定：

http://www.w3school.com.cn/jquery/jquery_ref_events.asp

　　事件源.bind（“事件一  事件二”，function（）{ } );  可为多个触发事件绑定同一个方法

　　delegate（ “box","click mouseenter", function ( ) { } ); 特点：性能高，支持动态创建的元素

　　　　 
$(".parentBox").delegate("p", "click", function(){
    //为 .parentBox下面的所有的p标签绑定事件
});

　　on("事件1    事件2“，”事件源“，{ ( json串 ) },function() { } ） ;

　　 
$(selector).on(events,[selector],[data],handler);

给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点

语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）

// 第二个参数：selector, 执行事件的后代元素

// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用

// 第四个参数：handler，事件处理函数

$(document).on("click mouseenter",".box",{"name":111}, function (event) {
 alert(event.data.name);
 });

$(selector).on("click","span",function ( ) { } ;

// 表示给$(selector)绑定事件，当必须是它的内部元素span才能执行这个事件

 

事件解绑：

　　使用unbind、 undelegate方式解绑.   只解绑使用此方式绑定的

$(selector).unbind(); //解绑所有的事件
$(selector).unbind(“click”); //解绑指定的事件
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

　　使用off（）解绑on方式绑定的事件

$ (selector ).off( ) ; //解绑匹配元素的所有事件
$ (selector ).off("click") ;// 解绑匹配元素的所有click事件
$ (selector) .off(:click", " ** "; //解绑所有代理的click事件，元素本事的事件不会被解绑

事件触发

　　简单事件触发

　　　　$(selector).click ( ); // 触发click事件

　　trigger方法触发事件

　　　　$(selector).trigger("click");

　　triggerHander触发事件响应方法，不触发浏览器行为；比如（文本框获得焦点的默认行为）

　　　　$(selector).triggerHandler("focus");

　　

jQuery事件对象介绍

　　event.date

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this，当前DOM对象

event.pageX  鼠标相对于文档左部边缘的位置

event.target  触发事件源，不一定===this

event.stopPropagation()； 阻止事件冒泡

event.preventDefault();  阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode 键盘按键代码

隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

 

多库共存

　　

解决方式：

// 作用：让jQuery释放对$的控制权，让其他库能够使用$符号，达到多库共存的目的。此后，只能使用jQuery来调用jQuery提供的方法

　　　　$.noConflict(); 　　放弃版本高的$的使用权,版本高的写在下面

　　　　

放弃两个符号的使用权，同时定义一个新的使用权
 var MrLv = $.noConflict(true);
 console.log($.fn.jquery);
 console.log(jQuery.fn.jquery);
 console.log(MrLv.fn.jquery);

jQueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

  1. 引入jQueryUI的样式文件
  2. 引入jQuery
  3. 引入jQueryUI的js文件
  4. 使用jQueryUI功能
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
            //需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定


            //需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
            //步骤：绑定事件，直接让下面的所有按钮和上面的按钮属性值一模一样
            $("#j_cbAll").click(function () {
                //直接让下面的所有按钮和上面的按钮属性值一模一样
                $("#j_tb input:checkbox").prop("checked",$(this).prop("checked"));
            });

            //需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定
            $("#j_tb input:checkbox").click(function () {
                //判断，只有所有都背选定，上面的才被选定
                //技术点：带有checked属性的标签和checkbox个数一样多的时候
                if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){
                    //只有所有的都有checked属性，上面的才被选定
                    $("#j_cbAll").prop("checked",true);
                }else{
                    $("#j_cbAll").prop("checked",false);
                }
            });


        })
    </script>
</head>

<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll"/>
                    </th>
                    <th>课程名称</th>
                    <th>所属学院</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>JavaScript</td>
                    <td>前端与移动开发学院</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>css</td>
                    <td>前端与移动开发学院</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>html</td>
                    <td>前端与移动开发学院</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>jQuery</td>
                    <td>前端与移动开发学院</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>
表格全选和反选

 

 

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
            //需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容。


            //需求1：页面加载的时候每隔固定时间，.word中添加一个字符。
            //步骤：
            //1.定义字符串，然后显示插入条光标(把字符串转换成数组)
            //2.定时器。
            //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
            //4.判断，如果文字的个数和数组的长度一样了，就清除定时器

            //1.定义字符串，然后显示插入条光标(把字符串转换成数组)
            var str = "红鲤鱼与绿鲤鱼与驴";
            var arr =  str.split("");
            var str2 = "";
            var num = 0;
            var timer = null;

            $(".typed-cursor").show();
            //2.定时器。
            timer = setInterval(function () {
                //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
                if(arr[num] === undefined){
                    clearInterval(timer);
                    $(".typed-cursor").hide();
                }else{
                    //定义一个字符串用来接收
                    str2 += arr[num];
                    //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
                    $(".word").text(str2);
                    //索引值自增
                    num++
                }
            },200);


            //需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容
            $("#btnSay").click(function () {
                str = $("#inValue").val();
                $("#inValue").val("");
                arr =  str.split("");
                str2 = "";
                num = 0;
                //2.定时器。
                timer = setInterval(function () {
                    //4.判断，如果文字的个数和数组的长度一样了，就清除定时器
                    if(arr[num] === undefined){
                        clearInterval(timer);
                        $(".typed-cursor").hide();
                    }else{
                        //定义一个字符串用来接收
                        str2 += arr[num];
                        //3.每隔一段时间，在.word中插入一个文字。（ 就是改变内容，text() ）
                        $(".word").text(str2);
                        //索引值自增
                        num++
                    }
                },200);
            });


        });
    </script>
</head>

<body>

    <div class="wrap">
        <h1>
            You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
        </h1>

        <div class="saySection">
            <input type="text" id="inValue" class="txtSay"/>
            <input type="button" value="Say" id="btnSay" class="btnSay"/>
        </div>
    </div>


</body>
</html>
动态输入

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //需求：在input中安回车，插入条光标跳转到下一个input
            $("input").on("keyup", function (e) {
                if(e.keyCode === 13){
//                    alert("您按了，回车键！");
                    //跳转到下一行：下一个input获取插入条光标。
                    //   focus();//js和jq中一模一样的方法
                    $(this).next().next().focus();
//                    $(this).next().next()[0].focus();
                }
            });

            $("input").on("mouseenter", function (e) {
                //选定所有内容(能够输入内容的标签)
                $(this).select();
            });
        })
    </script>
</head>
<body>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>

<div>nihao </div>
</body>
</html>
回车换行

 

 

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }

        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //需求：在页面上，按键.是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
            //步骤：
            //1.给document绑定keyup事件
            //2.获取值，根据此值，给div和span上色和内容

            var div = $("#bgChange");
            var span = $("#keyCodeSpan");

            //绑定事件
            $(document).keyup(function (e) {
                //调用方法
                setColor(e.keyCode);
            });


            function setColor(aaa){
                //alert(e.keyCode);
                //2.获取值，根据此值，给div和span上色和内容
                switch (aaa){
                    case 80:
                        //修改内容pink
                        setEle("pink",aaa);
                        break;
                    case 66:
                        //修改内容blue
                        setEle("blue",aaa);
                        break;
                    case 79:
                        //修改内容orange
                        setEle("orange",aaa);
                        break;
                    case 82:
                        //修改内容red
                        setEle("red",aaa);
                        break;
                    case 89:
                        //修改内容yellow
                        setEle("yellow",aaa);
                        break;
                    default :
                        alert("系统没有设置该颜色！");
                }

                function setEle(a,b){
                    div.css("background-color",a);
                    span.text(b);
                }

            }

            //1.给document绑定keyup事件
//            $(document).keyup(function (e) {
//                //alert(e.keyCode);
//                //2.获取值，根据此值，给div和span上色和内容
//                switch (e.keyCode){
//                    case 80:
//                        //修改内容pink
//                        div.css("background-color","pink");
//                        span.text(e.keyCode);
//                        break;
//                    case 66:
//                        //修改内容blue
//                        div.css("background-color","blue");
//                        span.text(e.keyCode);
//                        break;
//                    case 79:
//                        //修改内容orange
//                        div.css("background-color","orange");
//                        span.text(e.keyCode);
//                        break;
//                    case 82:
//                        //修改内容red
//                        div.css("background-color","red");
//                        span.text(e.keyCode);
//                        break;
//                    case 89:
//                        //修改内容yellow
//                        div.css("background-color","yellow");
//                        span.text(e.keyCode);
//                        break;
//                    default :
//                        alert("系统没有设置该颜色！");
//                }
//            });
        })
    </script>
</head>

<body>

    <div class="wrap">
        <h1>按键改变颜色</h1>
        <div id="bgChange">
            keyCode为：
            <span id="keyCodeSpan">80</span>
        </div>
    </div>

</body>
</html>
按键变色

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: #ff3100;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            var wjx_none = '☆'; // 空心五角星
            var wjx_sel = '★'; // 实心五角星

            //需求1：鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
            $(".comment li").on("mouseenter", function () {
                //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
//                $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
//                $(this).nextAll("li").text(wjx_none);
                $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
            });

            $(".comment li").on("mouseleave", function () {
                //bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
                if($("li.current").length === 0){
                    $(".comment li").text(wjx_none);
                }else{
                    //当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
                    $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
                }
            });


            //需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
            $(".comment li").on("click", function () {
                //点击哪个li给他加一个类名。清空其他所有的li的类名
                $(this).attr("class","current").siblings("li").removeAttr("class");
            });


        });
    </script>
</head>

<body>

    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

</body>
</html>
五角星案例

 

 

 
 
 
 
 
 
 
 
 
 
 
posted @ 2017-04-24 23:52  明明明明明明明明  阅读(374)  评论(0)  编辑  收藏  举报