jQuery基础篇

Posted lele521

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery基础篇相关的知识,希望对你有一定的参考价值。

jQuery的触发事件:
1.blur(获得焦点离开后触发)
2.focus(获得焦点直接触发)
3.change(表单的内容改变,且光标离开后触发)
4.click(单击事件)
5.dblclick(双击事件)
6.error(发生错误后触发事件)
7.focusin(检测元素以及其子元素获得焦点的情况,可以在父元素上检测子元素获取焦点的情况)
8.focusout(检测元素以及其子元素失去焦点的情况,可以在父元素上检测子元素失去焦点的情况)
9.keydown(按键按下未抬起时触发)
10.keyup(按键按下并抬起时触发)
11.keypress(按键按下抬起触发)
事件触发顺序为9.11.10

12.load事件(被选项加载完毕时触发)
13.mousemove(鼠标在被选项上移动时触发)
14.mousedown(鼠标按下时触发)
15.mouseup(鼠标抬起时触发)
16.mouseover(鼠标悬浮时一直触发直至离开)mouseenter
17.mouseout(鼠标离开时触发)mouseleave
补充:e.pageX与e.pageY鼠标的横纵坐标,一般与mouseover配合使用

18.resize(window事件,窗口大小改变时触发)
19.select(内容被选中时)


阻止事件冒泡可以在添加事件后返回一个false或者使用e.stopPropagation事件阻止时间冒泡。
取消默认事件:e.preventDefault

 

绑定与解除事件
1.bind绑定事件,两个参数为:①事件类型②触发的函数
2.unbind解除事件(解除同类型的事件,参数为事件类型)
3.trigger绑定事件(参数为事件名)
绑定多个事件:事件类型之间可以用空格分隔,但这种方法只能共用一个事件处理函数。
第二种方法为,事件与处理函数可以用冒号分割(对象形式),每个事件可以有不同的处理函数
.bind({
click:function(){
console.log("click!");
},
dblclick:function(){
console.log("dblckick!");
}
});

用one绑定事件:只能触发一次

用triggerHandler绑定事件类型,刷新页面自动触发一次

live绑定事件:bind绑定的事件在新元素上无效,为live绑定的事件在新元素上。

用toggle绑定事件,可以在里面声明多个函数,每次点击依次触发第一二三四...个函数
$("ele").toggle(
function(){
consolo.log(1);
},
function(){
consolo.log(2);
},
function(){
consolo.log(3);
}
);


hide show toggle slideUp slideDown slideToggle fadeIn fadeOut fadeToggle fadeTo有三个参数:第一个为速度,第二个为透明度,第三个为回调函数
animate(对象体内用小驼峰写法命名属性),animate的4个参数分别为①动画②动画持续时间③动画类型④回调函数
一些属性名也可以用toggle来表示,如height、opacity常与animate配合使用,
一个元素可以添加多个animate,也可以给它们规定顺序格式为:.animate().animate().animate();

添加stop方法可以阻止元素动画的进行,
stop方法共有两个参数:第一个参数为stopAll,第二个参数为goToEnd,这两个参数默认都为false,
当第一个参数设置为true时会使所有动画效果停止,第二个参数为true时会停止当前及后续动画直接
完成当前动画。


chaining:元素.方法1.方法2...

添加类addClass 移除类removeClass

.text方法:获取元素的文本内容.
.html方法:获取元素的所有内容,如果有标签也可以获取到
.val方法:获取表单元素的value值
.attr用于返回/设置指定元素的属性值,attr也可以用函数设置属性值,只要在函数体内返回要设置的属性值,
也可以同时设置多个属性值格式为attr({attr1:val1,attr2:val2...}); removeAttr移除指定属性;
.map 获取所有指定元素并把他们放到指定集合中,例如:var map = $("div").map(function(){ return $(this).val(); });然后可以通过map.get()方法获取;
.empty();移除匹配元素中所有的子元素;
.remove();从DOM中删除所有匹配的元素;
.detach();会移除匹配元素的文本和子节点,以及自身;但是会保留绑定的事件,附加的数据,这一点与remove不同


js对象与jQuery对象的互相转换:
js=>jQuery:①获取js对象②使用$(js对象)的方法转换为jQuery对象
jQuery=>js:①获取jQuery对象②使用 jQuery[0] 的方法转换为js对象

$解决冲突的三种方法
①jQuery.noConflict();
jQuery(function(){
函数体;
});

②var $j = jQuery.noConflict();
$j(function(){
函数体;
});

③jQuery.noConflict();
jQuery(document).ready(function($){
函数体(函数体内依然使用$);
});

④jQuery.noConflict();
(function($){
函数体(函数体内依然使用$);
})(jQuery);

jQuery中常见的选择器:
全局选择器("*"),
ID选择器("#id"),
class选择器(".class"),
标签选择器("标签名"),
并集选择器("div,#id,.class")使用逗号分隔,
交集选择器("p#id")没有任何符号分隔,
后代选择器("p #id")用空格分割,
子代选择器("p>span")用>分隔,
相邻选择器("p+#id")用+分隔,指的是选中元素后面的第一个匹配元素,
相邻兄弟选择器("p~div")用~分隔,返回元素后面所有的匹配的选择器,

jQuery中常见的伪类选择器:
:header 返回所有的标题元素
:first 返回指定元素的第一个元素
:last 返回指定元素的最后一个元素
:not(#id) 返回id名不为id的元素
:even 返回索引为偶数的指定元素
:odd 返回索引为奇数的指定元素
:eq(num) 返回索引为num的指定元素
:gt(num) 返回索引大于num的指定元素
:lt(num) 返回索引小于num的指定元素
:nth-of-type(2n) 返回指定元素的第偶数个元素(不是索引为偶数的)
:nth-of-type(2n-1) 返回指定元素的第奇数个元素(不是索引为奇数的)
:only-child 如果指定元素是其父元素中的唯一子元素则会被匹配
:contains(text) 返回包含text文本的指定元素
:has("p") 返回包含指定元素的元素
:empty 返回没有内容也没有子元素的指定元素
:parent 返回包含子元素或者内容的元素
:hidden 返回隐藏的指定元素
:visible 返回可见的指定元素
:disable 返回指定的禁用元素
:enabled 返回指定的未禁用元素 input:checked option:selected
:filter 返回满足过滤条件的所有元素,条件可以为多个,用逗号分隔 input[type=‘checkbox‘]

属性选择器
[attr] 返回含有attr属性的元素
[attr = val] 返回属性值为val的指定元素
[attr ^= val] 返回属性值以val开头的指定元素
[attr $= val] 返回属性值以val结尾的指定元素
[attr *= val] 返回属性值含有val的指定元素
属性选择器也可以采用交集的方式,多个条件排列在一起 [][][]...


.children() 返回指定元素的所有子元素,也可在括号内写过滤器,如 :contains("dby"):has("p")等;
.closest("ele") 从元素本身开始,逐级向上级元素匹配,并返回最先匹配到的元素,也可以是元素自身;
.find() 返回后代元素,也可以加过滤器,如 .find("span");
.next() 返回同级的相邻元素(下一个),.nextAll()返回相邻的所有元素(后),.nextUntil("ele")返回指定元素与操作元素之间的元素,
prev与next相反代表前面的相邻元素。
.offsetParent() 返回所有匹配元素中一个离操作元素最近的且使用了定位的父元素;
.parent() 返回一个直接父元素;
.parents()返回匹配元素的所有父元素;
.parentsUntil("parent");查找当前元素与指定元素之间所有的当前元素的父元素;
.siblings() 返回匹配元素的所有同辈元素;
当给不同的元素添加样式或其他操作时,可以使用.add("ele")方法进行同时添加;


.addBack() 用于把自身元素添加到选择器中
.wrap("ele");用元素将匹配元素包裹起来,可以使用当前元素,而且当前元素也会保留,也可以使用标签;
.unwrap(); 移除当前匹配元素的直接父元素;
.wrapAll("ele");将所有匹配元素用当前元素包裹起来;
.wrapInner("<标签>");使用标签将每一个匹配元素的内容包裹起来;

在匹配元素内部添加:
.append("ele");向匹配元素的末尾添加信息(可以是文本或者标签元素)
.prepend("ele");向匹配元素的头部添加信息(可以是文本或者标签元素)
.appendTo("ele");向匹配元素的末尾添加信息(可以是文本或者标签元素)
.prependTo("ele");向匹配元素的头部添加信息(可以是文本或者标签元素)
添加To后与之前的区别为:使用时被添加的元素在匹配元素的前面,例如$("<span>1</span>").appendTo("#p1"),加To之后既可以添加自己
定义的内容,还可以添加页面中已经存在的内容但是会发生页面偏移;

在匹配元素外部添加:
.after("ele");在匹配元素后面添加元素
.before("ele");在匹配元素前面添加元素
.insertAfter("ele");在匹配元素后面添加元素
.insertBefore("ele");在匹配元素前面添加元素
添加insert后与之前的区别为:使用时被添加的元素在匹配元素的前面,例如$("<span>1</span>").insertAfter("#p1"),加insert之后既可以添加自己
定义的内容,还可以添加页面中已经存在的内容但是会发生页面偏移;
同时可以使用函数添加元素,函数两个参数分别为匹配元素的index索引和val值;

替换方法:
.replaceWith("ele");将所有匹配元素替换成指定的HTML或者DOM元素,用当前页面中的元素替换,会导致替换的元素被移除
.replaceAll("ele");用匹配的元素替换掉所有 selector匹配到的元素


克隆:
.clone();复制匹配元素,如果没有参数就仅仅是对dom结构的复制,有参数true则会同时复制事件和dom结构
.offset();返回/设置元素相对于整个文档的偏移量,返回的用法:.offset().top/left/right;设置的用法: .offset({top:"100px"});
原理为设置匹配元素为relative


.width(); 返回匹配元素的内容宽度;
.height();返回匹配元素的内容高度;
.innerWidth();返回内容宽度+左右padding的宽度;
.innerHeight();返回内容高度+上下padding的高度;
.outerWidth();返回内容宽度+左右padding的宽度+左右边框的宽度;
.outerHeight();返回内容高度+上下padding的高度+上下边框的高度;
.outerWidth(true);返回内容宽度+左右padding的宽度+左右边框的宽度+左右外边距;
.outerHeight(true);返回内容高度+上下padding的高度+上下边框的高度+上下外边距;

$(document).scrollTop();页面距离顶部的滚动距离
$(document).scrollLeft();页面距离左侧的滚动距离

获取某个元素距离顶部的距离时,分为以下几步:
①获取整个窗口的高度 var winHeight = $(window).height();
②获取元素距离页面顶部的距离 var eleTop = $("ele").offset().top;
③获取页面的滚动距离 var docTop = $(document).scrollTop;
④判断 ③与②-①的大小

以上是关于jQuery基础篇的主要内容,如果未能解决你的问题,请参考以下文章

JavaWeb_jQuery基础篇

jquery 基础汇总---导图篇

jQuery基础——样式篇

jQuery基础——DOM篇

jQuery基础 —样式篇

JQuery基础(一篇入门)