Jquery学习

1.JQUERY简介

jQuery就是一个轻量级JavaScript函数库,是对JavaScript进行了封装，简化了开发。

（内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的）

2.两个遍历函数MAP和EACH

$.MAP(ARRAY,FN)//遍历、修改数组

•    对数组array中的每个元素调用方法fn进行处理

•    返回值为处理后的一个新数组，原数组不变。

1.4.1不能处理Dictionary风格数组,1.7.1可以

  应用举例：

        var arr = [1, 3, 5, 7, 9];     

        var newarr = $.map(arr, function (arri, i, arg) {

            if (arri < arg) {

                return arri * 2;

            }

            else {

                return arri ;

            }

        }, 7);

        //map:第一参数：数组。第二个参数：遍历集合中每个元素时候执行的一个回调函数，第三个参数：是给回调函数传递参数用的，可以省略

        var newarr1 = $.map(arr, function (arri) {

            if (arri < 7) {

                return arri * 2;

            }

            else {

                return arri;

            }

        });

        原理模拟：

        function myMap(arr, func, arg) {

            var arrtemp=[];

            for (var i = 0; i < arr.length; i++) {

                if(func(arr[i])){

                    arrtemp[arrtemp.length] = func(arr[i],i,arg);

                    //或者

                   // arrtemp.push(func(arr[i]));

                    //压栈

             }

            }

            return arrtemp;

        }

$.EACH(ARRAY,FN)

•    对数组arry每个元素调用fn函数进行处理，没有返回值。

•    fn函数有两个参数：key,value。对于普通数组key就是索引。可以直接在fn中使用this

•    一般都是对数据的遍历。【除非key、value中，value是引用类型否则不能修改数组，修改请用$.map()方法。】

•    普通数组推荐用无参，用dict风格的就用key、value。

与map函数相对应，主要处理键值对型的数组；

参数：第一个：要处理的数据源数组，第二个参数：处理数组中每个元素的回调函数【第一个参数是：key，第二个是元素的value】

如果在each 方法中  其中一个 回调函数返回了false，那么就不再继续往下执行了。所以可以用return false来退出循环。

应用举例：

        $.each(arr, function (key, value) {

            alert("key:" + key + "   ---  value:" + value);

            if (key == "age") {

                return false;

            }

        });

    原理模拟：

       function myEach(arry,callback) {

           for (var i = 0; i < arry.length; i++) {

               var result = callback(i, arry[i]);

               if (result == false) {

                   break;

               }

           }

       }

3.JQUERY和DOM对象的区别.

（1）对象的差异
Dom对象    var ele = document.getElementById("btn1");

  jQuery对象   var jq = $(ele);

            //把dom对象封装成jQuery对象的方法；

            //当然，一般也不用这样麻烦的封装jq对象，因为我们有选择器；

            //jQuery对象只能调用jQuery封装的方法，不能调用 dom对象原生的属性或者方法了。

（2）窗口加载的区别：
//window.onload事件执行是在：页面上所有的元素都加载完成后（指的：全部下载显示完毕），才出发此事件的执行。

        //有可能页面中一些较大的图片或者是flash等阻塞了 js事件响应方法的执行，导致了页面的一些效果展示给用户的时候响应速度非常低

        //用户体验不是很好。

        onload = function () {

            alert("我是onload，在页面完全加载后执行，是最后的那个");

        };

        //第一种方式：打酱油的

        $(document).ready(function () {

            alert("我是打酱油的，但我却是第一的！");

        });

        //方式二：

        //jQuery注册的方法都是多播委托的形式

        //给文档加载完成【绑定】事件

        $(function () {

            alert("我是楼上酱油帝的真相，我也是酱油帝的多播委托，我第二哦！");

        });

        $(function () {

            alert("我是楼上的多播委托，我也比onload快！");

        });

（3）JQUERY对象和DOM对象相互转换
    1.DOM à Jquery ：var dom = $v1.get(0); 或者 var dom = $v1[0];

    2.Jquery à DOM ：var jq = $( dom);

 

4.JQUERY的DOM操作

//一般情况下，不传参数就是取里面的值，传参数就代表设置数据到 dom元素上去。

//===================val()=======================//

     alert($("#txt").val());

      //val（）是$里获得value的方法

     $("#txt").val("我是设置的值");

        //设置value的方法

//=====================text()===========================//

            //$里.click是获得onclick效果的方法

alert($("#divText").text());//获取div里面的文本内容

$("#divText").text("我替换了div里的文本内容")//替换div里面的文本内容

//=====================html()===========================//

                alert($("#divText").html());

                $("#divText").html("<p>我是后来添加的p标签</p>");

 //=====================css()===========================//

                $("#divText").css("color","green");

//=====================attr()设置属性==================//

                alert($("#divText").attr("aaa"));

                $("#divText").attr("aaa","bbb")

//============================================================//

另外：使用removeAttr删除属性。删除的属性在源代码中看不到，清空属性。attr(‘name’,’’)的话，该属性在源代码中依然存在

追加元素的方法

子元素.appendTo(父元素);//主动巴结!到最后一个

子元素.prependTo(父元素);//主动巴结到第一个。

(*)A.insertBefore(B);将A插入到B的前面，等同于B.before(A);

(*)X.insertAfter(Y);将X插入到Y的后面，等同于Y.after(X);

删除元素的方法

emptys();

清空某元素下的所有子节点

内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}

元素.remove(expr)

删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下：

var lis = $("#ulSite li").remove();

$("#ulSite2").append(lis);

经典案例：动态创建表格

 var data = [{ name: "百度", url: "http://www.baidu.com" },

                { name: "新浪", url: "http://www.sina.com.cn" },

                { name: "传智播客", url: "http://www.itcast.cn" }];

            var strHtml = "";

            for (var i = 0; i < data.length; i++) {

                strHtml += "<tr>";

                strHtml += "<td>" + data[i].name + "</td><td>" + data[i].url + "</td>";

                strHtml += "</tr>";

            }

            //动态创建表格

            $("table:first").html(strHtml);

经典案例：10秒之后跳转

 <input type="button" id="btn" value="请仔细阅读协议（5s）" disabled="disabled"/>

$(function () {

      var sec = 4;

       var intervalId = setInterval(function() {

    if (sec > 0) {

    $("#btn").val("请仔细阅读协议（"+sec+"s）");//将按钮的计数  数字-1

        sec--;     } else {

  $("#btn").attr("disabled", false).val("同意");

    clearInterval(intervalId);//计数完成后，移除 计数器    }

            }, 1000);    });

JQUERY链式编程：

由于每次操作的$对象，返回的都是当前的$对象，所以可以直接调用$对象的方法。例如：$("#myId").css().text();

例子：评分控件

1.获取兄弟元素的几个方法

next(); 当前元素之后的紧邻着的第一个兄弟元素（下一个）

nextAll();当前元素之后的所有兄弟元素

prev();当前元素之前的紧邻着的兄弟元素（上一个）

prevAll();当前元素之前的所有兄弟元素

siblings();当前元素的所有兄弟元素

$(function() {

      $("td").mouseenter(function() {

  //当鼠标移进来之后，把当前的五角星设置为 实体的，然后之前的设置为实体的，之后的设置为空心的

  $(this).text("★").prevAll("td").text("★").end().nextAll("td").text("☆");

 //end（）方法是将当前的函数计算的结果返回到最近一次破坏传递的集合的地方去。    //回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

}).css("cursor", "pointer");   });

Html中自己写一个talbe，td用☆表示就可以实现效果啦。

2.基本过滤选择器

:first 选取第一个元素。$("div:first")选取第一个<div>

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd，选取索引是偶数、奇数的元素：$("input:even")选取索引是奇数的<input>

:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

$(":header")选取所有的h1……h6元素（*）

$("div:animated")选取正在执行动画的<div>元素。 （*）

例子:第一行是表头，所以显示大字体（fontSize=30），

最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（22）表格的偶数行是红色色背景[非最后一行]。

$("table tr:first").css('fontSize', "30px");

  //最后一行是汇总，所以显示红色字体

  $("table tr:last").css('color', "red");

  //正文的前三行是前三名，所以显示傻大的字体（22）,注意这里的索引是从0开始的

   //1,2,3  执行的时候，gt（0）之后就直接将第0个抛弃后，再进行后面的过滤

  $("table tr:gt(0):lt(3)").css("fontSize", 22);

  //表格的偶数行是红色色背景【非最后一行】

  $("table tr:not(:last):even").css("backgroundColor", "red");

不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素.

$(    “ul”, $(this)    ).css(“background”, “red”);

$(选择器,context);例如：$(‘td’,$(‘div table tr’));

context参数可以是用dom对象集合或jQuery对象

默认如果不传递context则，会在整个文档中搜索。

  属性过滤器

$("div[id]")选取有id属性的<div>

$("div[title=test]")选取title属性为“test”的<div>，jQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

$("div[title!=test]")选取title属性不为“test”的<div>

还可以选择开头[name^=值]、结束[ name$=值]、包含[ name*=值]等，条件还可以复合。[[属性1=a][属性2=b]…]（*）

 //搜索 当前页面中所有的div中带有 id属性的标签

  $("div[id]").css("backgroundColor", "red");

//给带有 name属性 并且值=xiaoyang的 div标签设置  字体颜色为绿色

  $("div[name='xiaoyang']").css("color", "green");

  //给div中 带有name属性并且 以 x开头的标签选择出来，并设置字体 为 30px

     $("div[name^='x']").css('fontSize', 30);

  //属性复合 选择过滤: 是一个并且的过滤

  $("div[name^='xia'][shit]").css("fontSize","50px");

5.表单选择器

$("#form1:enabled")选取id为form1的表单内所有启用的元素

$("#form1:disabled")选取id为form1的表单内所有禁用的元素

$("input:checked")选取所有选中的元素（Radio、CheckBox）

$("select:selected")选取所有选中的选项元素（下拉列表）

 //从整个Select标签  去拿到 选择的属性值 是从val（）拿的。 如果使用text会把select下面的所有的选项的text拿到。

经典案例：全选  全不选   反选

   $(":button[value='全选']").click(function() {

      $(":checkbox").attr("checked",true);  });

  $(":button[value='全不选']").click(function () {

      $(":checkbox").attr("checked", false); });

 //反选

  $(":button[value='反选']").click(function () {

  $(":checkbox").each(function (i, v) {

//在each函数内部的  调用的callback函数中 的this指向的是当前的遍历的元素

$(v).attr("checked", !$(v).attr("checked"));

  /this===v  返回 true  });     });

单选框的处理:

    <input type="button" value="获取  性别的 选择的值" id="btnGetRadioValue"/>

        <hr/>

       <input type="radio" value="1" name="gender"/>男

        <input type="radio" value="2" name="gender"/>女

        <input type="radio" value="3" name="gender" />曾哥

        <hr/>

        <input type="radio" name="other" value="2"/>shit

  $("#btnGetRadioValue").click(function() {

 //获取单选组的值  alert($(":checked[name='gender']").val());

alert($("input[name='gender']:checked").val());

 //给单选组 设置 值    $("input[name='gender']").val(["1"]);

    });

6.样式操作

获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass")

案例：网页开关灯的效果

<style type="text/css">

        .dark

        {

            background-color:Black;

        }</style>

    <script type="text/javascript">

        $(function() {

        $("#btn").click(function() {

            $("body").toggleClass("dark");

        }); });   </script>