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)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这两个变量,那么,要保证每个库都能正常使用,这时候就有了多库共存的问题。
推荐链接
发表评论