jQuery基础知识点（下）

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

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

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

1 // 设置选中/不选中
2     // input.checked = true;
3     // input.checked = flase;
4 $(id/class名).attr("checked",布尔值);
5 
6      // :checkbox      作用：获取到所有复选框

 1 //    获取内容
 2 // 文本内容：js -> innerText / textContent
 3    $("button:eq(0)").click(function () {
 4        // text() 作用：获取或者是设置内容
 5        var txt = $("div").text();
 6        alert(txt);
 7    });
 8 //     设置文本内容
 9      $("button:eq(1)").click(function () {
10          // 设置内容，参数表示 要设置的内容
11            $("div").text("这是动态设置的内容");
12             });
13 //     获取HTML内容
14      $("button:eq(2)").click(function () {
15           alert($("div").html());
16      });

 1 //     获取高度
 2             $("#getHeight").click(function () {
 3             /*  var h = $("div").css("height");
 4                 console.log(h); // 200px 字符串   */
 5             /*  var h = $("div").height(); // 数值
 6                 h *= 2;
 7                 console.log(h);        */
 8             });
 9 //    设置高度
10             $("#setHeight").click(function () {
11              // 参数：数值类型
12                 // $("div").height(500);
13              // 参数：字符串
14                 // $("div").height("500");
15                 $("div").height("500px");
16             });

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

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

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

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

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

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

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

 1  $(function () {
 2      // target 表示触发事件的元素 并不一定是 this
 3       // currentTarget === this
 4      $("button").on("click", function (event) {
 5           console.log(event);
 6       });
 7       $("div").on("click", function () {
 8            console.log(event);
 9        });
10  // -----------------------------------------------
11        $("div").on("click", "button", function () {
12            // 此时， target为触发事件的按钮
13            // currentTarget 为绑定事件的元素
14                 console.log(event);
15        });
16 });

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

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

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

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

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

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

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