jQuery

一、jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

$("#p1").html();

相当于: document.getElementById("p1").innerHTML;

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

二、通过选择器查找标签

id选择器： $("#id选择器名")

标签选择器：$("标签名")

class选择器：$(".类名字")

配合使用：$("div.c1") //找到含有c1类的div标签

所有元素选择器：$("*")

组合选择器：$("#id, .className, tagName")

层级选择器：（x和y可以是任意选择器）

　　$("x y"); // x的所有后代y(子子孙孙)

　　$("x > y"); // x的所有儿子y

　　$("x + y"); // 找到所有紧挨在x后面的y

　　$("x ~ y"); // x之后的所有兄弟y

基本选择器：

　　:first // 第一个

　　:last // 最后一个

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

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

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

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

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

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

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

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

属性选择器：

　　[attribute]

　　[attribute = value]　　// 属性等于

　　[attribute != value]　　// 属性不等于

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单常用属性：

　　:text

　　:password

　　:file

　　:radio

　　:checkbox

　　:submit

　　:reset

　　:button

表单对象属性：

　　:enabled

　　:disabled

　　:checked

　　:selected

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

三、筛选器

下一个元素：

　　$("#id").next()

　　$("#id").nextAll()

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

上一个元素：　

　　$("#id").prev()

　　$("#id").prevAll()

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

父亲元素：

　　$("#id").parent()

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

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

儿子和兄弟元素：

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

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

查找元素：

　　$("#id").find() // 搜索所有与指定表达式匹配的元素。

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

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

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

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

四、样式操作

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

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

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

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

五、文本操作

1. HTML代码：

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

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

2. 文本值：

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

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

3. 值：

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

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

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

六、属性操作

1. 用于ID等或自定义属性：

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

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

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

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

用于checkbox和radio
prop()     // 获取属性
removeProp()    // 移除属性

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug,在3.x版本的jQuery中则没有这个问题。所以，考虑到兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr("checked","checked").

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

//        全选
        $('#btn1').click(function(){
            $(":checkbox").prop("checked",true);
        });

//        取消
        $("#btn3").click(function(){
            $(":checkbox").prop("checked",false);
        });

//        反选
        $("#btn2").click(function(){
            $(":checkbox").each(function(){
               if($(this).prop("checked")){
                   $(this).prop("checked",false)
               } else{
                   $(this).prop("checked",true)
               }
            });
        });

全选、反选、取消

七、文档处理

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

$(A).append(B) // 把B追加到A内部的后面

$(A).appendTo(B) // 把A追加到B内部的后面

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

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

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

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

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

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

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

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

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

5. 移除和清空元素

remove() // 从DOM中删除所有匹配的元素。

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

6. 替换

replaceWith()

replaceAll()

7. 克隆

clone() // 参数

八. 事件

1. 事件绑定

.on(events[,selector],function(){})

其中，events指事件，selector指选择器（可选），function指事件处理哈桉树

2. 移除事件

.off(events[,selector],function(){})

off()方法移除用.on()绑定的事件处理程序。

3. 阻止后续事件执行

return false; // 常见阻止表单提交等

九. 页面载入

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写：

$(function(){
// 你在这里写你的代码
})

十、事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

// 表格中每一行的编辑和删除按钮都能触发相应的事件。
$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

十一、动画效果

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[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="jquery-3.2.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>

点赞特效简单示例