jQuery

Posted on 2022-09-26 Edited on 2023-07-31

title: jQuery

date: 2019-08-22 13:14:59

tags: javascript

categories: # 这里写的分类会自动汇集到 categories 页面上，分类可以多级

JS # 一级分类
jQuery # 二级分类

选择器

jQuery 基本选择器	解释
$(‘*‘)	匹配所有元素
$(‘#id’)	id 选择器
$(‘.class’)	类选择器
$(‘element’)	标签选择器

组合选择器	解释
$(‘E,F’)	多元素选择器，同时匹配 E 和 F
$(‘E F’)	后代选择器,用空格分隔,匹配 E 元素所有后代
$(‘E>F’)	子元素选择器,匹配 E 元素所有直接子元素
$(‘E+F’)	直接相邻元素,匹配 E 元素之后的相邻的同级元素 F
$(‘E~F’)	普通相邻元素(弟弟选择器),匹配 E 元素之后的同级元素 F(无论是否直接相邻)
$(‘class1.class2’)	匹配类名中既含有 class1 又含有 class2 的元素

基本过滤选择器	解释
$(‘E:first’)	所有 E 中的第一个
$(‘E:last’)	所有 E 中的最后一个
$(‘E:not(selector)’)	按照 selector 过滤 E
$(‘E:even’)	所有 E 中 index 是偶数
$(‘E:odd’)	所有 E 中 index 是奇数
$(‘E:eq(n)’)	所有 E 中 index 为 n 的元素
$(‘E:gt(n)’)	所有 E 中 index 大于 n 的元素
$(‘E:lt(n)’)	所有 E 中 index 小于 n 的元素
$(‘header’)	选择 h1~h6 元素
$(‘div:animated’)	选择正在执行动画效果的元素

内容过滤器	解释
$(‘E:contains(value)’)	内容包含 value 的元素
$(‘E:empty’)	内容为空的元素
$(‘E:has(F)’)	子元素中有 F 的元素,$(‘div:has(a)’):包含 a 标签的 div
$(‘E:parent’)	父元素是 E 的元素

可视化选择器	解释
$(‘E:hidden’)	所有被隐藏的 E
$(‘E:visible’)	所有可见的 E

属性过滤选择器	解释
$(‘E[attr]’)	含有属性 attr 的 E
$(‘E[attr=value]’)	属性 attr=value 的 E
$(‘E[attr !=value]’)	属性 attr！=value 的 E
$(‘E[attr ^=value]’)	属性 attr 以 value 开头的 E
$(‘E[attr $=value]’)	属性 attr 以 value 结尾的 E
$(‘E[attr *=value]’)	属性 attr 包含 value 的 E
$(‘E[attr][attr*value]’)	可以连用

子元素过滤器	解释
$(‘E:nth-child(n)’)	E 的第 n 个子节点
$(‘E:nth-child(3n+1)’)	E 的第 3n+1 个子节点
$(‘E:nth-child(even)’)	E 的 index 为偶数的子节点
$(‘E:nth-child(odd)’)	E 的 index 为奇数的子节点
$(‘E:first-child’)	所有 E 的第一个子节点
$(‘E:last-child’)	所有 E 的最后一个子节点
$(‘E:only-child’)	只有唯一子节点的 E 的子节点

表单元素选择器	解释
$(‘E:type’)	特定类型的 input
$(‘:checked’)	被选中的 checkbox 或者 radio
$(‘option:selected’)	被选中的 option

其他查找相关元素的方法

.eq(index), .get([index])

$('div').eq(3) //获取所有div中第4个jQuery对象

$('div')[2] 或者 $('div').get(2) //获取第三个的DOM对象

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

兄弟元素获取

选择器	解释
.next([selector])	没有写 selcetor,返回所有后面的兄弟元素.写了就返回满足条件的
.prev([selector])	和上面相反,获取前面的兄弟元素
.nextAll([selector])	获取所有后面的兄弟元素
.prevAll([selector])	获取所有前面的兄弟元素
.siblings([selector])	获取所有前后邻居的元素

父子元素获取

选择器	解释
.parent([selector])	获取父元素,可选筛选器
.parents([selector])	获取祖先元素,可选筛选器
.children([selector])	获取子元素,可选筛选器
.find([selector])	查找符合选择器的后代

筛选当前结果集

选择器	解释
.first()	获取当前结果集第一个对象
.last()	获取当前结果集最后一个对象
.filter(slector), .filter(function(index))	筛选当前结果集符合条件的对象
.not(selector), .not(function(index))	从当前结果集中移除指定元素
.is(selector), is(function(index)), is(dom/jqObj)	判断结果集中的元素，是否为一个选择器，DOM 元素，或者 jQuery 对象，如果这些元素至少一个匹配给定的参数，那么返回 true
.has(seletor), has(dom)	筛选匹配结果集中符合条件的后代元素

jQueryDOM 操作

创建元素

将 DOM 传入$方法即可返回一个 jQuery 对象

var obj = $('<div class="test"><p><span>Done</span></p></div>')

添加元素

方法	解释	示例
.append(content[,content]) / .append(function(index,html))	可以添加多个内容,DOM 对象,字符串,jQuery 对象	; ; $(‘p’).append(document.createTextNode(‘hello’))
.appendTo(target)	把对象插入到目标 target 尾部,可以是 selector,DOM 对象,字符串,元素集合,jQuery 对象(最后一个孩子)	; $(‘ Test ‘).appendTo(‘.inner’)
.prepend(content[,content]) / .prepend(function(index, html))	向头部追加内容,内容添加到最前面(第一个孩子)	$(‘.inner’).prepend(‘ Test ‘)
.prependTo(Target)	把对象插入到目标头部	$(‘ Test ‘).prependTo(‘.inner’)
.before([content][,content]) / .before(function)	在对象前面(不是头部,而是外面,和对象并列同级)插入内容(放到前面做邻居)	$(‘.inner’).before(‘ Test ‘); ; $( “p” ).before( document.createTextNode( “Hello” ) )
.insertBefore(target)	把对象插入到 target 之前(不是头部,是同级)(做邻居)
.after([content][,content]) / .after(function（index）)	和 before 相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和 append 类似	$( “.inner” ).after( “ Test “ ); $( “p” ).after( document.createTextNode( “Hello” ) );
.insertAfter(target)	和 insertBefore 相反，把对象插入到 target 之后（同样不是尾部，是同级）	$( “ Test “ ).insertAfter( “.inner” ); $( “p” ).insertAfter( “#foo” );

删除元素

方法	解释	示例
.remove([selector])	删除被选元素及其子元素	$(‘.div’).remove()
.empty()	清空被选元素内所有子元素	$(‘body’).empty()
.detach()	.detach() 方法和.remove()一样, 除了 .detach()保存所有 jQuery 数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入 DOM 时，这种方法很有用。	$(‘.div’).detach()

包裹元素

方法	解释	示例
.wrap(wrapElement) / .wrap(function(index))	为每个对象包裹一层 HTML 结构，可以是 selector, element, HTML string, jQuery object	$( “.inner” ).wrap( “ “ )
.wrapAll(wrappingElement)	把所有匹配对象包裹在同一个 html 结构里	$(‘.inner’).wrapAll(‘ )
.wrapInner(wrapingElement)	为每个匹配的对象包裹一层 HTML 结构	$(‘.inner’).wrapInner(‘ )
.unwrap	把 DOM 元素外的壳去掉	$(‘p’).unwrap()

html([string])

$('div').html()

$('div').html('123')

这是一个读写两用的方法,用于获取修改元素的 innerHTML

没有传递参数的时候,返回元素的 innerHTML
当传递一个 string 参数时,修改元素的 innerHTML 为参数值

text()

和 html 方法类似，操作的是 DOM 的 innerText 值

jQuery 属性操作

属性相关

.val([value])

这是一个读写双用的方法,用来处理 input 的 value 值,当方法没有参数时返回 input 的 value 值.

当传递一个参数时,方法修改 input 的 value 值为参数值.

1 2	$(".input").val(); $(".input").val("newValue");

.attr()

.attr(attributeName)

获取元素特定属性的值

var title = $('em').attr('title')

.attr(attributeName,value)/.attr(attributesJson)/.attr(attributeName,funtion(index,attr))

为元素属性赋值

$( "#greatphoto" ).attr( "alt", "Beijing" )

.removeAttr()

为匹配的元素集合中的每个元素移除一个属性

$('div').removeAttr('id')

.prop()/.removeProp()

这两个方法是用来操作元素的 property 的

CSS 相关

.css()

.css(propertyName) / .css(propertyNames)

获取元素 style 特定 property 的值

1
2
3

var color = $(this).css("background-color");

var styleProps = $(this).css(["width", "height", "color", "background-color"]);

.css(propertyName,value)/.css(propertyName,function(index,value))/ .css(propertiesJson)

设置元素 style 特定 property 的值

$("div.example").css("width", function (index) {
  return index * 50;
});

$(this).css("width", "+=200");

$(this).css("background-color", "yellow");

$(this).css({
  "background-color": "yellow",
  "font-weight": "bolder",
});

.addClass(className) / .addClass(function(index,currentClass))

为元素添加 class，不是覆盖原 class，是追加，也不会检查重复

$("p").addClass("myClass yourClass");

$("ul li").addClass(function (index) {
  return "item-" + index;
});

.removeClass([className])/.removeClass(function(index,class))

移除元素单个/多个/所有 class

$("p").removeClass("myClass yourClass");

$("li:last").removeClass(function () {
  return $(this).prev().attr("class");
});

.hasClass(className)

检查元素是否包含某个 class，返回 true/false

1	$("#mydiv").hasClass("foo");

.toggleClass(className)

toggle 是切换的意思，方法用于切换，switch 是个 bool 类型值

<div class="tumble">Some text.</div>

//第一次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>

//第二次执行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>

jQuery 常用方法

.each(fnction(index, Element))

遍历一个 jQuery 对象,为每个匹配元素执行一个函数

$("li").each(function (index) {
  console.log(index + ":" + $(this).text());
});
//回调函数返回的是DOM对象,所以this需要加$变成jQuery对象才能使用.text()方法
//否则使用this.innerText方法

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

一个通用迭代函数,可以迭代对象和数组.数组和类数组对象通过长度属性来迭代数字索引,从 0 到 length-1.

其他对象通过其属性名进行迭代.

上面 jQuery 可以用.each()`.

var obj = {
    "fla" : "infla",
    "duh" : " no duh"
}
$.each(obj, function(key, value){
    console.log(key + ":" + value)
}

.map(callback(index, domElement))

通过一个函数匹配当前集合中的每个元素,返回一个包含新的 jQuery 对象

1
2
3

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

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

当提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target 参数).
如果只有一个参数提供给$.extend(),这意味着目标参数被省略,在这种情况下,jQuery 对象本身默认为目标对象.

这样我们可以在 jQuery 的命名空间下添加新功能.

var obj = $.extend({}, object1, object2)

object1,object2会被添加到{}中

如果第一个对象的属性本身是一个数组或对象,那它将完全用第二个对象相同的 key 重写一个属性.

这些值不会被合并.如果 true 作为第一个参数,那么会在对象上进行递归的合并.

.clone([withDataAndEvents])

.clone()方法深度复制所有匹配的元素集合,包括所有匹配元素,匹配元素的下级,文字节点.

$('.hello').clone().appendTo('.Goodbye')

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

从给定集合中查找特定元素 index

没参数返回第一个元素 index
如果参数是 DOM 对象或 jQuery 对象,则返回参数在集合中的 index
如果参数是选择器,返回第一个匹配元素的 index,没有找到返回-1

1 2	var listItem = $(".bar"); console.log("Index:" + $("li").index(listItem));

.ready(handler)

当 DOM 加载完毕,执行.

下面两种等价

$(document).ready(handler)
$(handler)

jQuery 事件

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

events: 一个或多个空格分隔的事件类型和可选空间
selector: 一个选择器字符串,用于过滤被选中的元素中能触发事件的后代元素.

如果选择器是 null 或者忽略,那么被选中的元素总能触发事件 3. data: 当一个事件被触发,要传递给事件处理函数的 event.data 4. handler(eventObject): 事件被触发时,执行的函数.

<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text"><button id="btn">添加</button>
<div id="wrap"></div>

<script>
$('.box li').on('click',function(){
  console.log(1)
  var str = $(this).text()
  $('#wrap').text(str)
})
//等同于
$('.box>ul>li').click(function(){
  console.log(2)
  var str = $(this).text()
  $('#wrap').text(str)
})
//下面新增的元素是没有绑定事件的
$('btn').on('click',function(){
  var value = $('#ipt').val()
  $('.box>li').append('<li>' + value + '</li>')
})
//可以用事件代理
$('.box ul').on('click','li',function(){
  var str = $(this).text()
  $('#wrap').text(Str)
})
//上面代码换成原生js代码
document.querySelector('.box ul').addEventListener('click',function(e){
  if(e.target.tagName.toLowerCase() === 'li'){
    //do something
  }
})
</script>

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

同 on，绑定事件，但只执行一次

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

移除一个事件处理函数

$('.box li').off('click')

.trigger(eventType[,extraParameters])

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$("#foo").on("click", function () {
  console.log($(this).text());
});
$("#foo").trigger("click");

其他

事件

blur([[data],fn])

change([[data],fn])

click([[data],fn])

dblclick([[data],fn])

error([[data],fn])

focus([[data],fn])

focusin([data],fn)

focusout([data],fn)

keydown([[data],fn])

keypress([[data],fn])

keyup([[data],fn])

mousedown([[data],fn])

mouseenter([[data],fn])

mouseleave([[data],fn])

mousemove([[data],fn])

mouseout([[data],fn])

mouseover([[data],fn])

mouseup([[data],fn])

resize([[data],fn])

scroll([[data],fn])

select([[data],fn])

submit([[data],fn])

事件对象

eve.currentTarget

eve.data

eve.delegateTarget

eve.isDefaultPrevented()

eve.isImmediatePropag…()

eve.isPropagationStopped()

eve.namespace

eve.pageX

eve.pageY

eve.preventDefault()

eve.relatedTarget

eve.result

eve.stopImmediatePro…()

eve.stopPropagation()

eve.target

eve.timeStamp

eve.type

eve.which

jQuery 动画

基础

.hide([duration][,easting][,fn])

duration: 三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing: 用来指定切换效果，默认是”swing”，可用参数”linear”
fn: 在动画完成时执行的函数，每个元素执行一次。

用于隐藏元素,没有参数等同于直接设置 display 属性

1 2	$(".target").hide(); //等同于$('.target').css('display','none')

1
2
3

$("#book").hide(300, "linear", function () {
  console.log("Animation complete.");
});

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

显示元素,用法类似 hide

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

事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置

用来切换元素的隐藏、显示，类似于 toggleClass，用法和 show、hide 类似

渐变

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

渐入效果

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

渐出效果

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

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

1
2
3

$("#book").fadeTo("slow", 0.5, function () {
  // Animation complete.
});

fadeToggle([speed,[easing],[fn]])

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

$("p").fadeToggle("fast", function () {
  alert("Animation Done.");
});
//用200毫秒快速将段落淡入，之后弹出一个对话框

slideDown([speed],[easing],[fn])

下拉动画.这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

slideUp([speed,[easing],[fn]])

上浮动画,向上隐藏,在隐藏完成后可选地触发一个回调函数。

slideToggle([speed],[easing],[fn])

上下切换

动画队列

因为动画是异步,所以将动画执行函数放入回调函数中,等动画执行完毕再执行其他的.

但是这样写会形成回调地狱.又因为存在动画队列,可以按代码二方法执行会有同样效果.

$box.hide(1000, function () {
  $box.show(1000, function () {
    $box.fadeOut("slow", function () {
      $box.fadeIn("slow", function () {
        $box.slideUp(function () {
          $box.slideDown(function () {
            console.log("动画执行完毕");
          });
        });
      });
    });
  });
});
//等价于
$box
  .hide(1000)
  .show(1000)
  .fadeOut()
  .fadeIn()
  .slideUp()
  .slideDown(function () {
    console.log("真的完毕了");
  });

自定义动画

animate(params,[speed],[easing],[fn])

这个函数的关键在于指定动画形式及结果样式属性对象。

这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

注意：所有指定的属性必须用驼峰形式，比如用 marginLeft 代替 margin-left.

params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认 jQuery 提供”linear” 和 “swing”.
fn:在动画完成时执行的函数，每个元素执行一次。

.finish

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

.stop( [clearQueue] [,jumpToEnd])

停止当前正在运行的动画

AJAX

jQuery.ajax(url,[settings])

jQuery 底层 AJAX 实现.$.ajax()返回其创建的 XMLHttpRequest 对象。

大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个 XMLHttpRequest 作为参数。
error 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及”dataType“参数的值。

并且必须返回新的数据（可能是处理过的）传递给 success 回调函数。

success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入 XMLHttpRequest 对象，以及一个包含成功或错误代码的字符串。

$.ajax({
  url: 'test.com',
  type: 'GET',
  datatype: json,
  data: {
    name: 'tom',
    age: '12'
  },
  <!-- success: function(result){
    console.log(result)
  } -->
}).done(function(result){
  console.log(result)
}).fail(function(jqXHR, textStatus){
  consloe.log(textStatus)
})

url: 一个用来包含发送请求的 URL 字符串。

settings: AJAX 请求设置。所有选项都是可选的。

seting 中的设置

async：默认设置下，所有请求均为异步请求（也就是说这是默认设置为 true ）。

如果需要发送同步请求，请将此选项设置为 false 2. beforeSend：请求发送前的回调函数，用来修改请求发送前 jqXHR 对象，此功能用来设置自定义 HTTP 头信息

该 jqXHR 和设置对象作为参数传递 3. cache：如果设置为 false ，浏览器将不缓存此页面。

注意: 设置 cache 为 false 将在 HEAD 和 GET 请求中正常工作。

它的工作原理是在 GET 请求参数中附加”_={timestamp}” 4. context：这个对象用于设置 Ajax 相关回调函数的上下文。

默认情况下，这个上下文是一个 ajax 请求使用的参数设置对象 5. data：发送到服务器的数据。将自动转换为请求字符串格式。

GET 请求中将附加在 URL 后面，POST 请求作为表单数据 6. headers：一个额外的{键:值}对映射到请求一起发送。此设置会在 beforeSend 函数调用之前被设置;

因此，请求头中的设置值，会被 beforeSend 函数内的设置覆盖 7. type: 请求方式 (“POST” 或 “GET”)，默认为 “GET”。

注意:其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

jQuery.get( [settings] ) / jQuery.post( [settings ] )

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

1
2
3

$.get("test.html", function (data) {
  $(".result").html(data);
});

jQuery.getJSON(url[,data][,success(data,textStatus,jqXHR)])

使用一个 HTTP GET 请求从服务器加载 JSON 编码的数据

范例

$.getJSON("ajax/test.json", function (data) {
  var items = [];

  $.each(data, function (key, val) {
    items.push('<li id="' + key + '">' + val + "</li>");
  });

  $("<ul/>", {
    class: "my-new-list",
    html: items.join(""),
  }).appendTo("body");
});

.load(url[,data][,complete(responseText,textStatus,XMLHttpRequest)])

从服务器载入数据并且将返回的 HTML 代码并插入至匹配的元素中

$('#result').load('ajax/test.html')

`.serialize()` / `serializeArray()`

将用作提交的表单元素的值编译成字符串，方法没有参数，使用标准的 URL-encoded 符号上建立一个文本字符串.

它可以对一个代表一组表单元素的 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'}
    ]
*/

serialize 和 serializeArray 都是针对 JQuery 对象(选中的 form 元素)进行操作，只是返回值格式不同而已。

这里特别要注意：这 2 个 API 只能操作 form，如果将 holder 改成 div，会发现不起作用

jsonp

function getBooks() {
  $.ajax({
    type: "get",
    url: "http://test.com/bookservice.php",
    dataType: "jsonp",
    jsonp: "callback",
    jsonpCallback: "displayBooks",
  });
}

当然使用 jsonp 会在一定程度上造成安全性问题，如果请求的站点不是信任站点，那么可能会在返回的方法调用中包含一些恶意代码。

所以尽量向信任的站点发送请求。另外 xss 也经常会利用 jsonp 向站点注入恶意代码。

选择器