在实际开发中，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();
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插件
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>
时间： 2024-10-22 00:30:50