JQuery

:first // 第一个

:last // 最后一个

:eq(index)// 索引等于index的那个元素

:even // 匹配所有索引值为偶数的元素，从 0 开始计数

:odd // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(index)// 匹配所有大于给定索引值的元素

:lt(index)// 匹配所有小于给定索引值的元素

:not(元素选择器)// 移除所有满足not条件的标签

:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

属性选择器：

$("input[type='checkbox']");// 取到checkbox类型的input标签

$("input[type!='text']");// 取到类型不是text的input标签

表单常用筛选器;

:text

:password

:file

:radio

:checkbox

:submit

:reset

:button

表单对象属性：

:enabled

:disabled

:checked

:selected

筛选器

下一个：

$("#id").next()

$("#id").nextAll()

$("#id").nextUntil("#i2")

上一个;

$("#id").prev()

$("#id").prevAll()

$("#id").prevUntil("#i2")

父元素：

$("#id").parent()

$("#id").parents()  // 查找当前元素的所有的父辈元素

$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

子元素和兄弟元素：

$("#id").children();// 儿子们

$("#id").siblings();// 兄弟们

查找元素：

$("div").find("p")// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。等价于$("div p")

$("div").filter(".c1")//筛选出与指定表达式匹配的元素集合。

补充：（用法：$("#id").first()）

.first()// 获取匹配的第一个元素

.last()// 获取匹配的最后一个元素

.not()// 从匹配元素的集合中删除与指定表达式匹配的元素

.has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。

六、操作标签

样式操作

样式类：

addClass();// 添加指定的CSS类名。

removeClass();// 移除指定的CSS类名。

hasClass();// 判断样式存不存在

toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

位置：

offset()// 获取相对于原来位置的偏移

position()// 获取匹配元素相对父元素的偏移

scrollTop()// 获取匹配元素相对滚动条顶部的偏移

scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

尺寸：

height()//content的高度

width()//content的宽度

innerHeight()//content+padding的高度

innerWidth()

outerHeight()//content+padding+border的高度

outerWidth()

文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容

html(val)// 设置所有匹配元素的html内容

文本值：

text()// 取得所有匹配元素的内容

text(val)// 设置所有匹配元素的内容

值：

val()// 取得第一个匹配元素的当前值

val(val)// 设置所有匹配元素的值

val([val1, val2])// 设置checkbox、select的值

属性操作：

用于ID等自定义属性

attr(attrName)// 返回第一个匹配元素的属性值

attr(attrName, attrValue)// 为所有匹配元素设置一个属性值

attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值

removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop() // 获取属性

removeProp() // 移除属性

文档处理：

添加到指定元素内部的后面：

$(A).append(B)// 把B追加到A

$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面：

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面：

$(A).after(B)// 把B放到A的后面

$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面：

$(A).before(B)// 把B放到A的前面

$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素：

remove()// 从DOM中删除所有匹配的元素（包括自己）。

empty()// 删除匹配的元素集合中所有的子节点。

替换

replaceWith()

replaceAll()

克隆

clone()// 参数

事件

常用事件：

click(function(){...})

hover(function(){...})

blur(function(){...})

focus(function(){...})

change(function(){...})

keyup(function(){...})

事件绑定方式

click

1.click(function(){……})

2.on("click",".delete",function(){……})

事件委托

基于已经存在的标签给未来的标签添加事件处理函数

$("table").on("click", ".delete", function () {

  // 删除按钮绑定的事件

})

移除事件方式

off("click",".delete",function(){……})

阻止后续事件执行

.each和return配合使用，return是跳过本次循环,return false才是停止继续

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件

    $(this).addClass('hover');

});

$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件

    $(this).removeClass('hover');

});

页面载入

//文档加载之后完成

$(document).ready(function(){……});

$(function(){……});

动画效果

// 基本

show([time,[e],[fn]])

hide([time,[e],[fn]])

toggle([time],[e],[fn])

// 滑动

slideDown([time],[e],[fn])

slideUp([time,[e],[fn]])

slideToggle([time],[e],[fn])

// 淡入淡出

fadeIn([time],[e],[fn])

fadeOut([time],[e],[fn])

fadeTo([[time],o,[e],[fn]])

fadeToggle([time,[e],[fn]])

// 自定义（了解即可）

animate(p,[s],[e],[fn])

用例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>点赞动画示例</title>

  <style>

    div {

      position: relative;

      display: inline-block;

    }

    div>i {

      display: inline-block;

      color: red;

      position: absolute;

      right: -16px;

      top: -5px;

      opacity: 1;

    }

  </style>

</head>

<body>

<div id="d1">点赞</div>

<script src="../js/jquery-3.3.1.min.js"></script>

<script>

  $("#d1").on("click", function () {

    var newI = document.createElement("i");

    newI.innerText = "+1";

    $(this).append(newI);

    $(this).children("i").animate({

      opacity: 0

    }, 1000)

  })

</script>

</body>

</html>

.each(function(index, Element))：

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo

$("li").each(function(){

  $(this).addClass("c1");

});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用 return false提前结束each循环。

终止each循环

return false；

outinput是HTML5的标准事件，能够检测texterea,input:text,input:password,input:search这几个元素的内容变化。在内容修改后立即被触发，不像onchange事件需要失去焦点才会触发。但是IE9以下的版本不支持，需要使用特有的onpropertychange事件代替。使用jQuery库的话直接使用on同时绑定两个事件即可。

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value);//描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key);//描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过

.data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key);//描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

JQuery

目录

一、什么是JQuery

二、JQuery内容

三、JQuery对象

四、基础语法

五、查找标签

1.选择器

筛选器

六、操作标签

样式操作

文本操作

事件