jQuery基础知识点（下）

　　在实际开发中，jQuery的实践性非常强大。上一篇本人已经整理出了一部分基础知识点，该文即是对以上的补充和扩展。

1、表单值的操作

//获取文本框的值
//txt.value
  var val = $("#txt").val(); //没有参数表示获取值
//设置文本框的值
//txt.value = "123123";
  $("#txt").val("这是val设置的值");  // 有参数表示设置值

2、属性操作

//　　设置属性
$("#btnSetAttr").click(function () {
   // getAttribute
          // 用法跟 css 方法完全相同
   // $("a").attr("title", "传智播客");  //设置单个属性
      $("a").attr({                   //设置多个属性
          "title": "传智播客",
          "data-abc": "自定义属性"
       });
});

//　　获取属性
$("#btnGetAttr").click(function () {
    /*var a = $("a").attr("title");
      console.log(a);*/
    // $("a").attr("width");
});

3、特性操作

// 设置选中/不选中
    // input.checked = true;
    // input.checked = flase;
$(id/class名).attr("checked",布尔值);

     // :checkbox      作用：获取到所有复选框

【注意】checked、selected、disabled要使用.prop()方法。

      prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属性。

4、操作文本内容

//    获取内容
// 文本内容：js -> innerText / textContent
   $("button:eq(0)").click(function () {
       // text() 作用：获取或者是设置内容
       var txt = $("div").text();
       alert(txt);
   });
//     设置文本内容
     $("button:eq(1)").click(function () {
         // 设置内容，参数表示 要设置的内容
           $("div").text("这是动态设置的内容");
            });
//     获取HTML内容
     $("button:eq(2)").click(function () {
          alert($("div").html());
     });

5、高度和宽度操作

//     获取高度
            $("#getHeight").click(function () {
            /*  var h = $("div").css("height");
                console.log(h); // 200px 字符串   */
            /*  var h = $("div").height(); // 数值
                h *= 2;
                console.log(h);        */
            });
//    设置高度
            $("#setHeight").click(function () {
             // 参数：数值类型
                // $("div").height(500);
             // 参数：字符串
                // $("div").height("500");
                $("div").height("500px");
            });

6、坐标值操作

//     获取元素的坐标值
  $("button:eq(0)").click(function () {
     // 不传参数表示获取
     var offset = $("div").offset();
     console.log(offset);   // 返回值：{top: 29, left: 8}
            });
//     设置元素的坐标值
   $("button:eq(1)").click(function () {
     // 注意：设置坐标值的时候，如果这个元素没有定位或者定位为默认值 static
     // 那么offset() 会把这个元素的定位设置为：position: relative;
       $("div").offset({
                   top: 200,
                    left: 400
       });
   });

7、bind事件绑定

$("button").bind("click mouseenter", function() {});
           // 第一个参数：表示事件的名称
           // 第二个参数：表示事件处理函数
//    绑定多个事件
$("button").bind({
    click: function () {}, 
    mouseenter: function () {}
});
//     缺点：无法给动态创建出来的元素绑定事件    

8、delegate 代理绑定事件

// 第一个参数：表示 一个选择器，实际要触发事件的元素
// 第二个参数：表示要触发的事件名称
// 第三个参数：表示 事件处理函数
     $("div").delegate("p", "click", function() {
          var txt  = $(this).text();   // 获取当前元素的内容
      });

【说明】

①事件是什么时候绑定的？

——页面加载就绑定了所有的事件

②事件是什么时候执行的？

——单击事件：单击；    mouseenter：鼠标移上来的

9、on()绑定事件

  // 第一个参数：表示要绑定的事件名称
  // 第二个参数：表示要触发事件的元素（selector）
  // 第三个参数：表示事件处理函数
       $("div").on("click", ".cls", function () {
          var txt = $(this).text(); // 获取当前元素的内容
       });

10、事件解绑

    1）使用un- 解绑

    $("button:eq(1)").bind("click", function () {
     // 解除第一个按钮绑定的事件
     // 不传参数，表示所有的事件都解绑了
     // 穿参数，表示解绑 事件的名称
      //$("button").eq(0).unbind("click mouseenter");
     // $("button").eq(0).undelegate();
});
// 注意：解绑事件的时候 是解除的绑定事件的元素

      2）使用off 解绑

$("#btnOff").on("click", function () {
  // 解除第一个按钮的事件绑定
  // 参数：表示要解除事件的名称
  // 如果是解除多个事件，只需要把多个事件名称以空格分割 作为一个字符串
       $("#btn").off("click mouseenter");
  // 如果不穿参数表示把所有的事件都解除绑定
       $("div").off();
   // 解除通过 代理 的方式绑定的事件
   // 第一个参数表示：要解除事件的名称
   // 第二个参数表示：只解除通过代理方式绑定的事件
        $("div").off("click", "**");
 
});

11、事件触发

    1）哪些属于浏览器的默认行为呢？

        ① a 标签的跳转

        ② 文本框获得焦点

// 触发文本框获得焦点事件
// trigger() 作用：触发事件，同时触发了浏览器的默认行为
   $("#txt").trigger("focus");    // 参数：表示触发事件的类型
// triggerHandler() 作用：只触发事件，不触浏览器的发默认行为

   2）

 $(function () {
     // target 表示触发事件的元素 并不一定是 this
      // currentTarget === this
     $("button").on("click", function (event) {
          console.log(event);
      });
      $("div").on("click", function () {
           console.log(event);
       });
 // -----------------------------------------------
       $("div").on("click", "button", function () {
           // 此时， target为触发事件的按钮
           // currentTarget 为绑定事件的元素
                console.log(event);
       });
});

12、事件对象

    1）阻止浏览器的默认行为

e.preventDefault();
    2）阻止事件冒泡
e.stopPropagation();

13、链式编程原理

第一步：给出一个构造函数 

第二步：创建一个新的对象

第三步：调用这个构造函数中的方法

// 链式编程代码示例
$(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“内容”);
链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的一次状态。

14、隐式迭代

// 设置操作
$(“div”).css(“color”, “red”);
// 获取操作
$(“div”).css(“color”); // 返回第一个元素的值
// 隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
// 如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

15、each方法

——有了隐式迭代，为什么还要使用each函数遍历？

A：大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性；如果要对每个元素做不同的处理，这时候就用到了each方法

   // each() 作用：进行遍历
            // 参数：是一个匿名函数
            $("li").each(function (index, ele) {
                // index: 索引号
                // ele : 表示元素本身 但是它是一个dom对象
                // index : 0 1 2 3 .... 9
                var opacity = (index + 1) / 10;
                // ele.style.opacity = opacity;
                $(ele).css("opacity", opacity);
            });

16、多库共存

——jQuery占用了$ 和jQuery这两个变量。

　　当在同一个页面中引用了jQuery这个js库，并且引用的其他库（或者其他版本的jQuery库）中也用到了$或者jQuery这两个变量，那么，要保证每个库都能正常使用，这时候就有了多库共存的问题。

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

17、插件 和 制作 

    1）插件演示

第一步：把jQuery文件引进来

第二步：引jQuery的插件

    2）第三方插件

jQuery.color.js
// animate()自定义动画：不支持背景的动画效果
// animate动画支持的属性列表

  3）如何创建jQuery插件

http://learn.jquery.com/plugins/basic-plugin-creation/

// 全局jQuery函数扩展方法
$.pluginName = function() {};
// jQuery对象扩展方法
$.fn. pluginName = function() {};

18、jQueryUI的基本使用

    1）使用场景：网站的管理后台

    2）jQuery专指由jQuery官方维护的UI（用户接口）方向的插件

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

其他教程：jQueryUI教程

    3）基本使用

<!--第一步：引样式文件-->
<link rel="stylesheet" href="plugins/jquery-ui.css"/>
<!--第二步：引jQuery文件-->
<script src="jquery-1.12.2.js"></script>
<!--第三步：引jQueryUI的文件-->
<script src="plugins/jquery-ui.js"></script>