你的位置:首页 > Java教程

[Java教程]jQuery基础知识点(下)

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

1、表单值的操作

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

2、属性操作

 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 });

3、特性操作

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

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

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

4、操作文本内容

 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   });

5、高度和宽度操作

 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       });

6、坐标值操作

 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   // 注意:设置坐标值的时候,如果这个元素没有定位或者定位为默认值 static10   // 那么offset() 会把这个元素的定位设置为:position: relative;11    $("div").offset({12          top: 200,13           left: 40014     });15  });

7、bind事件绑定

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

8、delegate 代理绑定事件

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

【说明】
①事件是什么时候绑定的?——页面加载就绑定了所有的事件
②事件是什么时候执行的?
——单击事件:单击;    mouseenter:鼠标移上来的

9、on()绑定事件

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

10、事件解绑

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

      2)使用off 解绑

 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 });

11、事件触发

    1)哪些属于浏览器的默认行为呢?
        ① a 标签的跳转
        ② 文本框获得焦点
1 // 触发文本框获得焦点事件2 // trigger() 作用:触发事件,同时触发了浏览器的默认行为3  $("#txt").trigger("focus");  // 参数:表示触发事件的类型4 // triggerHandler() 作用:只触发事件,不触浏览器的发默认行为

   2)

 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 });

12、事件对象


    1)阻止浏览器的默认行为
e.preventDefault();
    2)阻止事件冒泡
e.stopPropagation();

13、链式编程原理

第一步:给出一个构造函数 
第二步:创建一个新的对象
第三步:调用这个构造函数中的方法
1 // 链式编程代码示例2 $(“li”).parent(“ul”).parent(“div”).siblings(“div”).children(“div”).html(“内容”);3 链式编程原理:return this;4 通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。5 end(); // 结束当前链最近的一次过滤操作,并且返回匹配元素之前的一次状态。

14、隐式迭代

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

15、each方法

——有了隐式迭代,为什么还要使用each函数遍历?
A:大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性;如果要对每个元素做不同的处理,这时候就用到了each方法
 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       });

16、多库共存


——jQuery占用了$ 和jQuery这两个变量。
  当在同一个页面中引用了jQuery这个js库,并且引用的其他库(或者其他版本的jQuery库)中也用到了$或者jQuery这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。
1 var j = $.noConflict();2 // noConflict() 作用:让jQuery释放对$的控制权,让其他库能够使用$符号,达到多库共存的目的。此后,只能使用jQuery来调用jQuery提供的方法

17、插件 和 制作 

    1)插件演示
第一步:把jQuery文件引进来
第二步:引jQuery的插件
    2)第三方插件
1 jQuery.color.js2 // animate()自定义动画:不支持背景的动画效果3 // animate动画支持的属性列表

  3)如何创建jQuery插件

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


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

18、jQueryUI的基本使用

    1)使用场景:网站的管理后台
    2)jQuery专指由jQuery官方维护的UI(用户接口)方向的插件

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

其他教程:jQueryUI教程

    3)基本使用


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>