jQuery简介
what is jQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery是一个快速,小巧,功能丰富的JavaScript库。它使HTML文档遍历和操作,事件处理,动画和Ajax等东西变得简单易用,可以在众多浏览器中使用。通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。
理念
write less,do more
特点
链式调用 每次返回的是一个jquery对象
隐式循环
跨平台(处理了兼容性)
选择器
选择器 | 选取 | 实例 |
---|---|---|
* | 所有元素 | $("*") |
#id | id="lastname" 的元素 | $("#lastname") |
.class | class="intro" 的所有元素 | $(".intro") |
.class,.class | class 为 "intro" 或 "demo" 的所有元素 | $(".intro,.demo") |
element | 所有 元素 |
$("p") |
el1,el2,el3 | 所有 、元素 |
$("h1,div,p") |
:first | 第一个 元素 |
$("p:first") |
:last | 最后一个 元素 |
$("p:last") |
:even | 所有偶数 | |
$("tr:even") | ||
:odd | 所有奇数 | |
$("tr:odd") | ||
:first-child | 属于其父元素的第一个子元素的所有 元素 |
$("p:first-child") |
:first-of-type | 属于其父元素的第一个 元素的所有 元素 |
$("p:first-of-type") |
:last-child | 属于其父元素的最后一个子元素的所有 元素 |
$("p:last-child") |
:last-of-type | 属于其父元素的最后一个 元素的所有 元素 |
$("p:last-of-type") |
:nth-child(n) | 属于其父元素的第二个子元素的所有 元素 |
$("p:nth-child(2)") |
:nth-last-child(n) | 属于其父元素的第二个子元素的所有 元素,从最后一个子元素开始计数 |
$("p:nth-last-child(2)") |
:nth-of-type(n) | 属于其父元素的第二个 元素的所有 元素 |
$("p:nth-of-type(2)") |
:nth-last-of-type(n) | 属于其父元素的第二个 元素的所有 元素,从最后一个子元素开始计数 |
$("p:nth-last-of-type(2)") |
:only-child | 属于其父元素的唯一子元素的所有 元素 |
$("p:only-child") |
:only-of-type | 属于其父元素的特定类型的唯一子元素的所有 元素 |
$("p:only-of-type") |
parent > child | 元素的直接子元素的所有 元素 |
$("div > p") |
parent descendant | 元素的后代的所有 元素 |
$("div p") |
element + next | 每个 元素相邻的下一个 元素 |
$("div + p") |
element ~ siblings | 元素同级的所有 元素 |
$("div ~ p") |
:eq(index) | 列表中的第四个元素(index 值从 0 开始) | $("ul li:eq(3)") |
:gt(no) | 列举 index 大于 3 的元素 | $("ul li:gt(3)") |
:lt(no) | 列举 index 小于 3 的元素 | $("ul li:lt(3)") |
:not(selector) | 所有不为空的输入元素 | $("input:not(:empty)") |
:header | 所有标题元素 , |
$(":header") |
:animated | 所有动画元素 | $(":animated") |
:focus | 当前具有焦点的元素 | $(":focus") |
:contains(text) | 所有包含文本 "Hello" 的元素 | $(":contains('Hello')") |
:has(selector) | 所有包含有 元素在其内的 元素 |
$("div:has(p)") |
:empty | 所有空元素 | $(":empty") |
:parent | 匹配含有子元素或者文本的元素。 | $(":parent") |
:hidden | 所有隐藏的 元素 |
$("p:hidden") |
:visible | 所有可见的表格 | $("table:visible") |
:root | 文档的根元素 | $(":root") |
:lang(language) | 所有带有以 "de" 开头的 lang 属性值的 元素 |
$("p:lang(de)") |
[attribute] | 所有带有 href 属性的元素 | $("[href]") |
[attribute=value] | 所有带有 href 属性且值等于 "default.htm" 的元素 | $("[href='default.htm']") |
[attribute!=value] | 所有带有 href 属性且值不等于 "default.htm" 的元素 | $("[href!='default.htm']") |
[attribute$=value] | 所有带有 href 属性且值以 ".jpg" 结尾的元素 | $("[href$='.jpg']") |
[attribute|=value] | 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串 | $("[title|='Tomorrow']") |
[attribute^=value] | 所有带有 title 属性且值以 "Tom" 开头的元素 | $("[title^='Tom']") |
[attribute~=value] | 所有带有 title 属性且值包含单词 "hello" 的元素 | $("[title~='hello']") |
[attribute*=value] | 所有带有 title 属性且值包含字符串 "hello" 的元素 | $("[title*='hello']") |
[name=value][name2=value2] | 带有 id 属性,并且 name 属性以 man 结尾的输入框 | $( "input[id][name$='man']" ) |
:input | 所有 input 元素 | $(":input") |
:text | 所有带有 type="text" 的 input 元素 | $(":text") |
:password | 所有带有 type="password" 的 input 元素 | $(":password") |
:radio | 所有带有 type="radio" 的 input 元素 | $(":radio") |
:checkbox | 所有带有 type="checkbox" 的 input 元素 | $(":checkbox") |
:submit | 所有带有 type="submit" 的 input 元素 | $(":submit") |
:reset | 所有带有 type="reset" 的 input 元素 | $(":reset") |
:button | 所有带有 type="button" 的 input 元素 | $(":button") |
:image | 所有带有 type="image" 的 input 元素 | $(":image") |
:file | 所有带有 type="file" 的 input 元素 | $(":file") |
:enabled | 所有启用的元素 | $(":enabled") |
:disabled | 所有禁用的元素 | $(":disabled") |
:selected | 所有选定的下拉列表元素 | $(":selected") |
:checked | 所有选中的复选框选项 | $(":checked") |
.selector | 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 | $(selector).selector |
:target | 选择器将选中ID和URI中一个格式化的标识符相匹配的 元素 |
$( "p:target" ) |
核心
jQuery([sel,[context]])
课堂
选择器
prent>child
ancestor descendant
prev+next
prev~siling
eq();
属性
attr(); 设置行内非标准属性
prop(); 设置行内标准属性
addClass(); 增加类名
removeClass(); 移除类名
html(); 如果传值了就用传的值,如果没有就用第一个元素的值
方法
如果将一个dom对象转化为一个jquery对象 $(dom对象);
如果将一个jquery对象转化为一个dom对象 $().get();
outerWidth(); 包括外面的border值
outerWidth(true); 包括外面的margin值
scrollTop();
scrollLeft();
offset(); 距离body的距离
position(); 距离父元素的距离,不考虑margin
文档操作
包裹
wrap();
unwrap();
wrapAll();
wrapInner();
替换
replaceWith(); 用
replaceAll();
删除
empty();
remove();
detach();
克隆
clone(true); 相当于两个true,拷贝本身和子元素
clone(true,false); 只拷贝当前元素的事件,不拷贝子元素
clone(); 只拷贝元素
$(document).ready(function(){});
$(function(){});
当文档结构加载完成以后可以执行
window.onload=function(){};
是需要文档结构及资源加载完成以后才能执行
on();
$(selector).on(event,childSelector,function)
事件 委派元素 运行函数
off();
命名空间
$('div').on('click.fun1',function(){
alert(1);
});
$('div').on('click.fun2',function(){
alert(2);
});
$('div').off(); //div上面的事件全部删除
$('div').off('click.fun1'); // 事件后面的.aa就是给匿名函数命名
data
$('div').on('click',{aa:'bb'},function(e){
console.log(e.data.aa); //返回'bb'
});
one();
trigger();
会触发冒泡,会触发每一个元素身上的事件
triggerHandler();
不会触发冒泡,不会触发元素身上的默认事件,只会触发第一个元素身上的事件
delegate() ; 给元素添加事件委派
undelegate() ; 删除元素身上的事件委派;
hover();
hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
定义和用法
jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。
语法
$(selector).hover(inFunction,outFunction)
调用:
$( selector ).hover( handlerIn, handlerOut )
等同以下方式:
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
注意:如果只规定了一个函数,则它将会在 mouseover 和 mouseout 事件上运行。
调用:
$(selector).hover(handlerInOut)
等同于:
$( selector ).on( "mouseover mouseout", handlerInOut );
参数
参数 | 描述 |
---|---|
inFunction | 必需。规定 mouseover 事件发生时运行的函数。 |
outFunction | 可选。规定 mouseout 事件发生时运行的函数。 |
实例
//当鼠标指针悬停在上面时,改变 元素的背景颜色:
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
focusin();
当元素(或在其内的任意元素)获得焦点时发生 focusin 事件。
定义与用法
当在元素或在其内的任意元素上发生 focus 事件时,focusin() 方法添加要运行的函数。
与 focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。
提示:当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
提示:该方法通常与 focusout() 方法一起使用。
语法
$(selector).focusin(function)
参数
参数 | 描述 |
---|---|
function | 必需。规定 focusin 事件发生时要运行的函数。 |
实例
//当 元素或其任意子元素获得焦点时,设置 元素的背景颜色:
$("div").focusin(function(){
$(this).css("background-color","#FFFFCC");
});
focusOut();
当元素(或在其内的任意元素)失去焦点时发生 focusout 事件。
定义和用法
当在元素或在其内的任意元素上发生 focusout 事件时,focusout() 方法添加要运行的函数。
与 blur() 方法不同的是,focusout() 方法在任意子元素失去焦点时也会触发。
提示:该方法通常与 focusin() 方法一起使用。
语法
$(selector).focusout(function)
参数
参数
描述
function
可选。规定 focusout 事件发生时要运行的函数。
实例
//当 元素或其任意子元素失去焦点时,设置 元素的背景颜色:
$("div").focusout(function(){ $(this).css("background-color","#FFFFFF");});
对列(fx)的特点
先进先出
入队
出对
stop(); 停止当前动画,继续队列的后续动画
stop(true); 清空队列,立即停止动画
stop(true,fales); 清空队列,立即停止当前动画
stop(true,true); 清空队列,立即完成当前动画
//第二个参数代表是否完成当前动画
栈的特点
先进后出
事件对象
preventDefault();直接用,不需要处理兼容性
stopPropagation();直接用,不需要处理兼容性
e.type();返回触发的事件类型
延迟对象
def.then();
$.ajax({url:jsdkjfkjsdf}).then(function(data){
console.log(data);
console.log('获取正确');
},function(){
console.log('获取错误')
})
def.done();
$.ajax({url:jsdkjfkjsdf}).done(function(){})
工具
$.each(arr,fn);
$.grep(arr,fn(value,index));
$.unique(arr);
jquery处理冲突
(function(){
})(jQuery)
let ms=jQuery.noConflict();
ms('div');
queue();插队操作
dequeue();出队操作
插队完了以后记得添加出队操作
$('div').queue(function(){
$('div').css();
$('div').dequeue();
})
let arr=[
function(){
console.log(1);
$('div').dequeue('ms');
},
function(){
console.log(2);
$('div').dequeue('ms');
},
function(){
console.log(3)
}
];
$('div').queue('ms',arr);
$('div').dequeue('ms');
animate()
var obj={value:0}
$(obj).animate({value:2345},{
duration:2000,
step:function(val){
$('p').html(Math.trunc(val));
}
});