jQuery

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对象

隐式循环

跨平台(处理了兼容性)

选择器

元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。 元素,索引值从 0 开始,第一个元素是偶数 (0),第二个元素是奇数 (1),以此类推。
选择器 选取 实例
* 所有元素 $("*")
#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));
    }
});

你可能感兴趣的:(jQuery)