【jQuery知识点整理】（复习第五天）

57、jQuery的$符号

（1）js命名规范允许出现的字符有：数字、字母、下划线、$。

（2）js命名规范允许作为变量命名开头的字符有：字母、下划线、$；但是，不允许以数字作为变量命名的开头。

  （3）jQuery使用$符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

（4）jQuery里面的$函数，根据传入参数的不同，进行不同的调用，实现不同的功能。返回的是jQuery对象

（5）jQuery函数跟$函数的关系：jQuery ===$;

58、jQuery对象和DOM对象的相互转换

（1）DOM对象转换成jQuery对象：

var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1

（2）jQuery对象转换成DOM对象

第一种方式

var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1

第二种方式

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

59、什么是jQuery选择器

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。

60、基本选择器

（1）Id选择器用法：$(“#btnShow”).css(“color”, “red”);选择id为btnShow的一个元素（返回值为jQuery对象，下同）

（2）类选择器用法：$(“.liItem”).css(“color”, “red”);选择含有类liItem的所有元素

（3）标签选择器用法：$(“li”).css(“color”, “red”);选择标签名为li的所有元素

61、层级选择器

（1）后代选择器用法：$(“#j_wrap li”).css(“color”, “red”);选择id为j_wrap的元素的所有后代元素li

（2）子代选择器用法：$(“#j_wrap > ul > li”).css(“color”, “red”);选择id为j_wrap的元素的所有子元素ul的所有子元素li

62、基本过滤选择器

(1):eq(index)用法：$(“li:eq(2)”).css(“color”, ”red”);选择li元素中索引号为2的一个元素

(2):odd用法：$(“li:odd”).css(“color”, “red”);选择li元素中索引号为奇数的所有元素

(3):even用法：$(“li:odd”).css(“color”, “red”);选择li元素中索引号为偶数的所有元素

63、筛选选择器

（1）find(selector)用法：$(“#j_wrap”).find(“li”).css(“color”, “red”);选择id为j_wrap的所有后代元素li

（2）children()用法：$(“#j_wrap”).children(“ul”).css(“color”, “red”);选择id为j_wrap的所有子代元素ul

（3）siblings()用法：$(“#j_liItem”).siblings().css(“color”, “red”);选择id为j_liItem的所有兄弟元素

（4）parent()用法：$(“#j_liItem”).parent(“ul”).css(“color”, “red”);选择id为j_liItem的父元素

（5）eq(index)用法：$(“li”).eq(2).css(“color”, “red”);选择所有li元素中的第二个

64、隐藏显示动画

（1） show方法

作用：让匹配的元素展示出来

（2）hide方法

作用：让匹配元素隐藏掉

65、停止动画

stop()

作用：停止当前正在执行的动画

66、滑入滑出动画

（1）滑入动画效果

作用：让元素以下拉动画效果展示出来

$(selector).slideDown(speed,callback);

（2）滑出动画效果

作用：让元素以上拉动画效果隐藏起来

$(selector).slideUp(speed,callback);

（3）滑入滑出切换动画效果

$(selector).slideToggle(speed,callback);

67、淡入淡出动画

（1）淡入动画效果

作用：让元素以淡淡的进入视线的方式展示出来

$(selector).fadeIn(speed, callback);

（2）淡出动画效果

作用：让元素以渐渐消失的方式隐藏起来

$(selector).fadeOut(1000);

（3）淡入淡出切换动画效果

作用：通过改变透明度，切换匹配元素的显示或隐藏状态

$(selector).fadeToggle('fast',function(){});

（4）改变透明度到某个值

与淡入淡出的区别：淡入淡出只能控制元素的不透明度从 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具体值。并且时间参数是必需的！

作用：调节匹配元素的不透明度

68、添加元素

append()（重点）

作用：在被选元素内部的最后一个子元素（或内容）后面插入内容（存在或者创建出来的元素都可以）

如果是页面中存在的元素，那么调用append()后，会把这个元素放到相应的目标元素里面去；但是，原来的这个元素，就不存在了。

如果是给多个目标追加元素，那么方法的内部会复制多份这个元素，然后追加到多个目标里面去。

（1） appendTo()

作用：同append()，区别是：把$(selector)追加到node中去

$(selector).appendTo(node);

（2）prepend()

作用：在元素的第一个子元素前面追加内容或节点

$(selector).prepend(node);

（3）after()

作用：在被选元素之后，作为兄弟元素插入内容或节点

$(selector).after(node);

（4） before()

作用：在被选元素之前，作为兄弟元素插入内容或节点

$(selector).before(node);

69、属性操作

设置属性：$(selector).attr(“title”, “布卡科技”);

获取属性：$(selector).attr(“title”);

移除属性：$(selector).removeAttr(“title”);

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

70、值和内容

（1）val()方法：

作用：设置或返回表单元素的值，例如：input,select,textarea的值

// 获取匹配元素的值，只匹配第一个元素

$(selector).val();

// 设置所有匹配到的元素的值

$(selector).val(“具体值”);

（2）ext() 方法:

作用：设置或获取匹配元素的文本内容

//获取操作不带参数（注意：这时候会把所有匹配到的元素内容拼接为一个字符串，不同于其他获取操作！）

$(selector).text();

//设置操作带参数，参数表示要设置的文本内容

$(selector).text(“我是内容”);

71、高度和宽度操作

（1）高度操作height() ：

作用：设置或获取匹配元素的高度值

//带参数表示设置高度

$(selector).height(200);

//不带参数获取高度

$(selector).height();

（2）宽度操作width() ：

作用：设置或获取匹配元素的宽度值

$(selector).width(200);

72、坐标值操作

（1）offset()

作用：获取或设置元素相对于文档的位置

// 无参数表示获取，返回值为：{left:num, top:num}，值是相对于document的位置

$(selector).offset();

// 有参数表示设置，参数推荐使用数值类型

$(selector).offset({left:100, top: 150});

（2）position()

作用：获取相对于其最近的具有定位的父元素的位置。

// 获取，返回值为对象：{left:num, top:num}

$(selector).position();

注意：只能获取，不能设置。

（3）scrollTop()

作用：获取或者设置元素垂直方向滚动的位置

$(selector).scrollTop(100);

（4）scrollLeft()

作用：获取或者设置元素水平方向滚动的位置

$(selector).scrollLeft(100);

73、jQuery事件机制

jQuery的事件机制，指的是：jQuery对JavaScript操作DOM事件的封装，包括了：事件绑定、事件解绑、事件触发。

1. 简单事件绑定

（1）bind方式（不推荐，1.7以后的jQuery版本被on取代）

作用：给匹配到的元素直接绑定事件

（2）delegate方式（特点：性能高，支持动态创建的元素）

作用：给匹配到的元素绑定事件，对支持动态创建的元素有效

75、on方式

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

作用：给匹配的元素绑定事件，包括了上面所有绑定事件方式的优点语法：

76、事件解绑

（1）unbind() 方式

作用：解绑 bind方式绑定的事件

$(selector).unbind(); //解绑所有的事件

$(selector).unbind(“click”); //解绑指定的事件

（2）undelegate() 方式

作用：解绑delegate方式绑定的事件

$( selector ).undelegate(); //解绑所有的delegate事件

$( selector).undelegate( “click” ); //解绑所有的click事件

（3）off解绑on方式绑定的事件

// 解绑匹配元素的所有事件

$(selector).off();

// 解绑匹配元素的所有click事件

$(selector).off(“click”);

// 解绑所有代理的click事件，元素本身的事件不会被解绑

$(selector).off( “click”, “**” );

77、事件触发

（1）简单事件触发

$(selector).click(); //触发 click事件

（2）trigger方法触发事件，触发浏览器行为

$(selector).trigger("click");

（3）triggerHandler触发 事件响应方法，不触发浏览器行为

$(selector).triggerHandler("focus");

78、链式编程

链式编程原理：return this;

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。

79、隐式迭代

隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值

80、多库共存

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