jQuery基础知识点（下）
在实际开发中，jQuery的实践性非常强大。上一篇本人已经整理出了一部分基础知识点，该文即是对以上的补充和扩展。
1、表单值的操作
1 //获取文本框的值 2 //txt.value 3 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 // 注意：设置坐标值的时候，如果这个元素没有定位或者定位为默认值 static 10 // 那么offset() 会把这个元素的定位设置为：position: relative; 11 $("div").offset({ 12 top: 200, 13 left: 400 14 }); 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();
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.js 2 // animate()自定义动画：不支持背景的动画效果 3 // animate动画支持的属性列表
3）如何创建jQuery插件
1 // 全局jQuery函数扩展方法 2 $.pluginName = function() {}; 3 // jQuery对象扩展方法 4 $.fn. pluginName = function() {};
18、jQueryUI的基本使用
1）使用场景：网站的管理后台
2）jQuery专指由jQuery官方维护的UI（用户接口）方向的插件
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>
