jQuery

welkinz
251 阅读8分钟

优点：

  • 兼容性好
  • API友好
  • 功能强大，与时俱进

适用场合：

  • DOM操作较多（事件监听）
  • 简单的AJAX
  • 需要兼容多款浏览器

做什么

  1. 选择网页元素
  2. 元素操作取值、赋值、移动、复制、删除、创建。
  3. AJAX
  4. 动画

jquery选择器

举例

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li class="third-item">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

链接：js.jirengu.com/yehokawadi/…

$(selector)

$('*');
$('li.third-item'); //获取标签名为li类名为third-time的元素

.eq(index)

获取指定index的jquery对象。

$( "li" ).eq( 2 ).css( "background-color", "red" );// 获取第三个标签名为li的元素
$( "li" ).eq( -2 ).css( "background-color", "red" ); //获取第4个li元素（距离末尾集合为2个）

.get([index])

获取jQuery对象匹配的DOM元素。

get()不写参数把所有对象转换为DOM对象返回。

$( "li" ).get( 0 ); //获取第一个元素
$( "li" ).get( -1 ); //获取最后一个元素

兄弟元素获取

.next([selector])

匹配元素集合中每一个元素紧邻的后面同辈元素的元素集合。

即如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。

$( "li.third-item" ).next().css( "background-color", "red" );
// 从第三个项目开始，找到它之后的元素。

.prev([slelector])

获取元素之前的同辈元素。

$( "li.third-item" ).prev().css( "background-color", "yellow" );
// 从第三个项目开始，找到它之前的元素。

.nextAll([selector])/.prevAll([selector])

nextAll获每个匹配元素后面的所有同辈元素器。

prevAll与之相反，获取元素前面的所有同辈元素。

.siblings([selectors])

获得匹配元素集合中每个元素的所有兄弟元素。(邻居，上下都包括)

$( "li.third-item" ).siblings().css( "background-color", "green" );
// 标签元素li类名为third-item的所有兄弟元素（上下都包括）。

父子元素获取

举例：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

链接：js.jirengu.com/ridawuquyo/…

.parent([selector])

获取当前匹配元素集中每个元素的父元素。

$( "li.item-a" ).parent().css( "background-color", "red" );
//item-a的父元素是level-2，获取的是整个level-2

.parents([selector])

获取当前匹配元素集中每个元素的祖先。

$( "li.item-a" ).parents().css( "background-color", "yellow" );
//获取所有祖先，level-2、level-1

.children([selector])

获取匹配元素集中每个元素的子元素。

$( "ul.level-2" ).children().css( "background-color", "lightblue" );
// level-2的子元素

.find([selector])

获取当前匹配元素集中每个元素的后代。

$( "li.item-ii" ).find( "li" ).css( "background-color", "pink" );
// item-li的后代所有li元素

筛选当前结果集

举例

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

链接：js.jirengu.com/sopawufovo/…

.first()

获取当前结果集中的第一个对象。

$( "li" ).first().css( "background-color", "red" );
// 获取第一个li元素。

.last()

获取当前结果集的最后一个对象。

$( "li" ).last().css( "background-color", "yellow" );
//获取最后一个li元素。

.filter(selector) /filter(function(index))

筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数。

$( "li" ).filter( ":even" ).css( "background-color", "red" );
//获取li元素的偶数位（下标0，2，4）即第一、三、五个。

$('li').filter(function(index) {
  return index % 3 == 2;
}).css("background","lightblue");
//获取index值为2，即第三个。

.not(selector)/.not(function(index))

从匹配的元素集合中移除指定的元素,和filter相反。

$( "li" ).not( ":even" ).css( "background-color", "lightgreen" );
// 排除下标为偶数位的元素。
$('li').not(function(index) {
  return index % 3 == 2;
}).css("background","pink");
//排除下标为2的元素。

.is(selector)/.is(function(index))/.is(dom/jqObj)

判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。

$( "ul" ).click(function( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.css( "background-color", "red" );
  }
});
// li元素点击变为红色。

.has(selector)/.has(dom)

筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。(包含)

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

链接：js.jirengu.com/hutocunamo/…

$( "li" ).has( "ul" ).css( "background-color", "red" );
// 获包含取ul的li元素。

练习

jQuery tab切换：js.jirengu.com/laguwixabu

jQuery DOM操作

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

练习链接：js.jirengu.com/torogoriqe/…

创建元素

只需要把DOM字符串传入**$方法**即可返回一个jQuery对象。

var node = $('<p>hello</p>');
$('body').append(node); // 将node元素放在body尾部

添加元素

.append(content[,content])/.append(function(index,html))

在目标尾部插入对象。（相当于孩子）

可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。

如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值。

$(".inner").append("<p>Test</p>");

.appendTo(target)

把对象插入到目标元素尾部。

目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象。

$('<p>world</p>').appendTo($(".inner"));

.prepend(content[,content])/.prepend(function(index,html))

在目标头部插入对象。

$('.inner').prepend('<p>world</p>');

.prependTo(target)

把对象插入到目标元素头部。

$('<p>world</p>').prependTo('.inner');

.before([content],[content])/.before(function)

在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似。（相当于邻居 同级）

$( ".inner" ).before( "<p>Test</p>" );

.insertBefore(target)

把对象插入到target之前（同样不是头部，是同级）。

$( "<p>Test</p>" ).insertBefore( ".inner" );

.after([content][,content])/.after(function(index))

和before相反。

$( ".inner" ).after( "<p>Test</p>" );

insertAfter(target)

和insertBefore相反。

$( "<p>Test</p>" ).insertAfter( ".inner" );

html()

获取匹配元素集中第一个元素的HTML内容（不设参数）/或者设置每个匹配元素的HTML内容。(读写两用)

$(".container").html();


$(".inner").html('123');
$(".inner").html('<p>123</p>');

text()

获取匹配元素集合中每个元素的组合文本内容，包括其后代/或设置匹配元素的文本内容。

$(".inner").text();

不能输入元素会展示成公开样式

$(".inner").text('<p>123</p>');

.html()和.text()的区别

  • .html()方法在XML文档中不可用，.text()可以在XML和HTML文档中使用。
  • .text()方法不能用于表单输入或脚本，要获取脚本元素的值，使用.html()方法。
  • .text()方法显示的是元素结构。

删除元素

.remove([selector])

删除被选中元素本身、绑定事件和jQuery数据。

$(".inner").remove()；
$("div").remove(".inner");
// 删除标签div中的类名为inner元素。

被删除的元素是可以再次插入的，但是绑定事件不能继续使用。（因为奇怪remove删除的元素为什么可以调用，remove和detach的区别到底是什么？去搜了一下，找到了篇文章实践结果绑定事件不能继续使用，参考文章再最下方）

var p = $("div").remove(".inner");
$(".container").prepend(p);
//删除的元素添加到container头部。

证明remove删除后绑定事件不可用和detach删除后绑定事件可用的例子（一定要看）： js.jirengu.com/julupowuci/…

.detach()

删除元素但是不删除数据和事件。数据虽然看不见了但是保存在内存中。

这是jquery特有的方法，只能用来删除jQuery绑定的事件和数据。

当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。（实例在上方）

这种方法可以在不破坏其数据或事件处理程序的情况下删除元素（以便以后可以重新添加）

var p = $("div").detach(".inner");
$(".container").prepend(p);
//删除的元素添加到container头部

.empty()

清除匹配元素的后代元素及所有文本。也删除了事件和jQuery数据。

$(".inner").empty(); //inner中文本节点被清除
$(".container").empty(); //container中的后代包括文本节点全都删除

.unwrap()

删除把DOM元素的父元素。

$('.inner').unwrap(); //删除了inner的父元素container

包裹元素

wrap(wrappingElement) / .wrap(function(index))

为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object。

$( ".inner" ).wrap( "<div class='new'>!!!</div>" );
//inner对象被单个包裹

.wrapAll(wrappingElement)

把所有匹配对象包裹在同一个HTML结构中。

$( ".inner" ).wrapAll( "<div class='new'>!!!</div>" );
// inner对象被全部包裹

.wrapInner(wrappingElement) / .wrapInner(function(index))

围绕匹配元素集中每个元素的内容包装HTML结构。

$( ".inner" ).wrapInner( "<div class='new'>!!!</div>");
//在inner中的元素内容被包裹。

属性相关

.val([value])

获取匹配元素集中第一个元素的当前值。(不设参数)/设置匹配元素集中每个元素的值。

.val()方法主要用于获取表单元素的值,例如input，select和textarea。

当调用空集合时，它返回undefined。

$('input').val('123123');
$('select').val();
$('select option:selected').val();

.attr()

获取匹配元素集中第一个元素的属性值/或为每个匹配元素设置一个或多个属性。

$('option').attr('value')


$('option').attr(value: "123123")

$('option').attr({
value: "123123",
title: "12345678"
})

.removeAttr()

从匹配元素集中的每个元素中删除一个属性。

$('option').removeAttr("title");

.prop()

获取匹配元素集中第一个元素的属性值/或为每个匹配元素设置一个或多个属性。

$('#text').prop('value');
$('#BJ').prop('selected');


$('#BJ').prop('selected','false');
$('#text').prop('name','text')

.prop()方法应该用于设置禁用和检查

.removeProp()

删除.prop()方法设置的属性。

$('#text').prop('hello','text');
$('#text').prop('hello');
$('#text').removeProp('hello');

.attr()和.prop()的区别

juejin.cn/post/684490…

css相关

.css()

获取匹配元素集中第一个元素的计算样式属性的值/或为每个匹配元素设置一个或多个CSS属性。

$('h1').css('color','red');

.addClass(className) / .removeClass(className)

将指定的类添加到匹配元素集中的每个元素/从每个匹配元素的class属性中删除的一个或多个空格分隔的类。

$('h1').addClass('one');
$('h2').addClass('two');
$('h2').removeClass('two')

.hasClass(className)

确定是否为给定的类分配了任何匹配的元素。

$('h1').hasClass('one');

.toggleClass(className)

根据类的存在或state参数的值，从匹配元素集中的每个元素添加或删除一个或多个类。

.toggleClass()使用第二个参数来确定是应该添加还是删除类true/false。

$('h1').toggleClass('two');
$('h1').toggleClass('two');//再次toggleClass就会删除类名two。
$('h1').toggleClass('two',false);

jQuery的常用方法

jQuery对象和DOM对象

联系

  • jquery对象就是原生DOM对象进行封装后产生的对象。
  • 两者之间可以互相转换。

区别

  • jQuery选择器得到的jQuery对象和js中使用document.getElementById()获得的DOM对象时两种不同类型的对象。
  • jQuery无法使用DOM对象的任何方法，DOM对象也不能使用jQuery对象里的方法。

转换

  • jQuery对象通过[index]和.get(index)方法转换成DOM对象。
  • DOM对象转成jQuery对象，只需要用$()将DOM对象封装起来。

.each(function(index, Element))

遍历一个jQuery对象，为每个匹配元素执行一个函数。(jquery对象的each方法)

$('li').each(function(index){
console.log(index + ":" +$(this).text())
});

jQuery.each(collection, callback(indexInArray, valueOfElement))

通用迭代器函数，可用于无缝迭代对象和数组。（jQuery本身的each方法）

$.each([43,59,67],function(index,value){
console.log(index + ":" + value)
});

区别

  • $(selector).each()独占于jQuery对象进行迭代。
  • 该$.each()函数可用于迭代任何集合，无论它是对象还是数组。

.map(callback(index, domElement))

通过函数传递当前匹配集中的每个元素，生成一个包含返回值的新jQuery对象。

$('div').map(function(i,ele){
return this.id;
})

jQuery.extend([deep,] target [, object1 ] [, objectN ] )

将两个或多个对象的内容合并到第一个对象中。


var obj1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var obj2 = {
banana: {price:200},
durian: 100
};
$.extend(true,obj1,obj2);

.clone([withDataAndEvents])

创建匹配元素集的深层副本。

$("b").clone().prependTo("p");

.index() / .index(selector)/ .index(element)

从匹配的元素中搜索给定元素。

  1. 没参数返回第一个元素index。
  2. 如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index。
  3. 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1。
console.log("Index: " + $( "#1" ).index()); //Index: 0
console.log("Index: " + $( "#2" ).index()); //Index: 1


$('.ok').index('div'); //-1
$('.ok').index('p'); //0
$('.ok').index(); //0

.ready( handler )

当 DOM 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件，该事件在文档就绪后发生。

原生的js中使用window.onload方法;在JQ中使用$(document).ready()。

ready() 函数规定当 ready 事件发生时执行的代码。

这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。

// 以上两种方法等价
$(document).ready(handler);
$(handler);

// 举例
$(function(){
    console.log('ready');
});

jQuery事件

.on(events[,selector][,data],handler(eventObject))

将一个或多个事件的事件处理函数附加到所选元素。

$('.ct').on('click','p',function(){
  $('#wrap').text( 'welcome!');
});

$('.ct').on('click','#btn',function(){
  $('p').text($('#wrap').text());
});

代码：js.jirengu.com/batatuwoni/…

.one(events[,selector][,data],handler(eventObject))

将处理程序附加到元素的事件。每个事件类型的每个元素最多执行一次处理程序。

$('.ct').one('click','.red',function(){
  $(this).css({
    borderStyle: "inset",
    cursor: "auto"
  });
});
$('.ct').one('click','yellow',function(){
  $(this).css({
    borderStyle: "inset",
    cursor: "auto"
  });
});

代码：js.jirengu.com/hamaqiweje/…

.off(events[, selector][,handler])

移除一个事件处理函数

$('.yellow').off('click');

.trigger(eventType[,extraParameters])

执行附加到给定事件类型的匹配元素的所有处理程序和行为。

$("div").on('click',function(){
  $('#wrap').text("welcome!!!");
});
$('#btn').on('click',function(){
  $("div").trigger('click');
});
// 点击按钮触发指定元素事件

代码：js.jirengu.com/repafiwohi/…

jQuery动画

基础

.hide([duration][,easing][,complete])

用于隐藏元素，没有参数的时候等同于直接设置display属性。(display:none)

  • duration: 动画运行时间。
  • complete：动画完成后调用的函数，每个匹配元素调用一次。
$('div').click(function(){
  $(this).hide(2000,function(){
    $(this).remove();
  });
});

代码：js.jirengu.com/jorenopuli/…

.show([duration][,easing][,complete])

显示匹配的元素。

$('#btn1').click(function(){
  $('p').hide( 'slow' );
});
$('#btn2').click(function(){
  $('p').show( 'slow' );
});

代码：js.jirengu.com/mewabinuya/…

.toggle([duration][,easing][,complete])

显示或隐藏匹配的元素。

$('button').click(function(){
  $('p').toggle();
});

代码：js.jirengu.com/hevenimiku/…

渐变

.fadeIn([duration ][,easing][,complete])

通过将匹配的元素淡化为不透明来显示它们。（淡入）

$('button').click(function(){
  $('div').fadeIn(3000);
});

代码：js.jirengu.com/visolemivu/…

.fadeOut([duration][,easing][,complete])

通过将匹配的元素淡化为透明来隐藏它们。（淡出）

$('#btn1').click(function(){
  $('div').fadeIn(3000);
});
$('#btn2').click(function(){
  $('div').fadeOut(3000);
});

代码：js.jirengu.com/zewiburiya/…

.fadeTo( duration, opacity [, easing ] [, complete ] )

调整匹配元素的不透明度。(褪色)

$('div').click(function(){
  $(this).fadeTo(1000,0.5);
});

代码：js.jirengu.com/xebunudopa/…

.fadeToggle( [duration ] [, easing ] [, complete ] )

通过设置不透明度的动画来显示或隐藏匹配的元素。

$('button').click(function(){
  $('p.first').fadeToggle(2000);
});

代码：js.jirengu.com/sizepoduhi/…

滑动

.slideDown([duration][,easing][,complete])

使用滑动显示匹配的元素。

$('button').click(function(){
  $('div').slideDown(3000);
});

代码：js.jirengu.com/cececadoso/…

.slideUp([duration][,easing][,complete])

使用滑动隐藏匹配的元素。

$('#btn2').click(function(){
  $('.box2').slideUp(2000);
});

代码：js.jirengu.com/cececadoso/…

.slideToggle([duration][,easing][,complete])

使用滑动运动显示或隐藏匹配的元素。

$('#btn3').click(function(){
  $('.box3').slideToggle();
});

代码：js.jirengu.com/cececadoso/…

动画队列

动画队列先写入的先展示

简单例子

$('#btn1').click(function(){
  $('div').hide(2000)
          .show(3000)
          .slideUp(2000)
          .slideDown(3000);
});

代码：js.jirengu.com/kugafetajo/…

自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )

执行一组CSS属性的自定义动画。

$('#btn1').click(function(){
  $('.box').animate({
     width : "80%",
     opacity: 0.4
    },2000);
});

代码：js.jirengu.com/tediqiquxo/…

.queue()

显示或操作要在匹配元素上执行的函数队列。

$('#btn1').click(function(){
  $('div').show()
          .animate({ left: "+=200" },1000)
          .animate({ left: "-=200" },2000)
          .slideUp();
});
function showIt() {
  var n = $('div').queue( "fx" );
  $( "span" ).text( n.length );
  setTimeout( showIt, 500 );
}
showIt();

代码：js.jirengu.com/xosiboxuwo/…

.dequeue()

对队列执行匹配元素的下一个函数。

$('#btn1').click(function(){
  $('div').show()
          .animate({ left: "+=200" },1000)
          .queue(function(){
    $(this).addClass('yellow').dequeue();
  });
});

代码：js.jirengu.com/simawokose/…

.clearQueue

从队列中删除尚未运行的所有项目。

$('#btn1').click(function(){
  $('.box')
  .animate({
     width : "80%",
     opacity: 0.4
    },2000)
  .queue(function(){ $(this).toggleClass("yellow").dequeue();
  });
});
$('#btn2').click(function(){
  $('.box').clearQueue();
});

代码：js.jirengu.com/jojotesosa/…

.finish

停止当前运行的动画，删除所有排队的动画，并完成匹配元素的所有动画。

$('#btn1').click(function(){
  $('.box')
  .animate({
     width : "80%",
     opacity: 0.4
    },2000)
  .queue(function(){ $(this).toggleClass("yellow").dequeue();
  });
});
$('#btn3').click(function(){
  $('.box').finish();
});

代码：js.jirengu.com/jojotesosa/…

.stop([clearQueue][,jumpToEnd])

停止匹配元素上当前运行的动画(true/false)。

$('#btn1').click(function(){
  $('.box')
  .animate({
     width : "80%",
     opacity: 0.4
    },2000)
  .queue(function(){ $(this).toggleClass("yellow").dequeue();
  });
});
$('#btn4').click(function(){
  $('.box').stop();
});

代码：js.jirengu.com/jojotesosa/…

AJAX

jQuery.ajax()

执行异步HTTP（Ajax）请求。


$.ajax(url,{})
//或者
$.ajax({
  url: 'http://xx',
  type: 'GET',
  data: {
    name: 'Jane',
    age: 23
  },
  //自动把数据解析parse
  dataType: 'json'
  //当请求成功后返回到ret
}).done(function(ret){
  
})fail(function(){
  
  //无论成功或者失败
}).always(function(){
  
})

jQuery.get()

这两个方法专门用来处理get和post请求。

$.get(url).done(function(ret){
  console.log(ret)
})

jQuery.getJSON()

使用一个HTTP GET请求从服务器加载JSON编码的数据，这是一个Ajax函数的缩写

$.ajax{
    dataType: 'json',
    url: url,
    data: data
}

.serialize()/serializeArray()

将用作提交的表单元素的值编译成字符串，方法没有参数

它可以对一个代表一组表单元素的 jQuery 对象进行操作，比如<input>, <textarea>, 和 <select>

<form id="holder">
  <input type="text" name="a" value="1"/>
  <div>
    <input type="text" name="b" value="2" id="b" />
  </div>
  <input type="hidden" name="c" value="3" id="c" />
  <div>
    <input type="checkbox" name="f" value="8" checked="true"/>
    <input type="checkbox" name="f" value="9" checked="true"/>
  </div>
</form>

$("#holder").serialize(); //a=1&b=2&c=3&f=8&f=9

$("#holder").serializeArray();
/*
    [
      {name: 'a', value: '1'},
      {name: 'b', value: '2'},
      {name: 'c', value: '3'},
      {name: 'f', value: '8'},
      {name: 'f', value: '9'}
    ]
*/

参考：

avatar
文章
阅读
粉丝