1.基础使用

入口函数

等着页面DOM加载完毕再去执行js 代码
$(document).ready(function() { ... }) 或 $(function() { ... })

jQuery 的顶级对象 $

$ 是 jQuery 的别名，两者实现的功能是相同的，即：
$('div').hide() == jQuery('div').hide()

jQuery对象与 DOM对象的转换

jQuery 对象与 DOM 对象是不同的，不能相互调用彼此的方法，而一些只有DOM对象才有的方法，jQuery对象要使用就必须得转换

选择器

$(“选择器”)                 // 里面选择器直接写CSS选择器即可，别忘了引号

筛选选择器 作用
$("div:first") 获取第一个div元素
$("div:last") 获取最后个div元素
$("div::eq(index)") 获取对应索引号元素（索引号从0开始）
$("div:odd") 获取所有索引号为奇数的元素
$("div:even") 获取所有索引号为偶数的元素

筛选方法 作用
$("li").parent() 查找父级元素
$("li").children(selector) 查找子元素中对应的选择器 （ul>li）
$("li").find(selector) 查找后代元素中对应的选择器 （ul li）
$("li").siblings(selector) 查找兄弟节点，不包括自身
$("li").nextAll() 查找当前元素之后的所有同辈元素
$("li").prevAll() 查找当前元素之前的所有同辈元素
$("li").hasClass(selector) 查找当前元素是否指定的类，若有，则返回true
$("li").eq(index) 相当于:eq(index)

补充: $(this) 为jQuery 里的当前元素，注意，this不要加引号

隐式迭代

$("div").css("background", "pink");       // jquery对象不能使用style
$(“div”)匹配的是所有的div，隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法

css样式操作

$("div").css("background-color", "pink");
一定要加引号（如果是数字可以不用加单位和引号 20px == 20）

在css中写好需要的样式，js中只调用类名，不需要点(.) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 常用方法

// 1. 添加类 addClass()
$("div").click(function() {
    $(this).addClass("current");
});
// 2. 删除类 removeClass()
$("div").click(function() {
    $(this).removeClass("current");
});
// 3. 切换类 toggleClass()      有指定的类就删除，没有就加上
$("div").click(function() {
    $(this).toggleClass("current");
});

效果

隐藏切换

方法 解释
show([speed, [easing], [fn]]) speed：速度，类似动画效果，可以指定确切的数值
hide([speed, [easing], [fn]]) fn：回调函数
toggle([speed, [easing], [fn]]) 一般情况下，都不加参数直接显示隐藏就可以了
slideDown([speed, [easing], [fn]]) 下拉
slideUp([speed, [easing], [fn]]) 上拉
slideToggle([speed, [easing], [fn]]) 切换

注：加上[]代表是可以省略

事件

hover(over, out)    就是鼠标经过和离开的组合写法，里面是两个函数，若只写一个函数则经过和离开都会触发该函数

stop()       切换时会触发动画效果，若没用限制会使多次动画出现重叠情况，该函数限制动画的出现（上一次动画）

1
2
3
4
5
//经典运用
$("div").hover(function() {
    // stop 方法必须写到动画的前面
    $(this).stop().slideToggle();
})

淡出

方法
fadeIn([speed, [easing], [fn]]) 淡入
fadeOut([speed, [easing], [fn]]) 淡出
fadeToggle([speed, [easing], [fn]]) 切换
fadeTo(speed, opacity, [easing], [fn]) 修改透明度,这里的speed、opacity(透明度)，要写 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 栗子
$("button").eq(6).click(function() {
    // 淡入 fadeIn()
    $(".02").fadeIn(1000);
})
$("button").eq(7).click(function() {
    // 淡出 fadeOut()
    $(".02").fadeOut(1000);
})
$("button").eq(8).click(function() {
    // 淡入淡出切换 fadeToggle()
    $(".02").fadeToggle(1000);
});
$("button").eq(9).click(function() {
    // 修改透明度 fadeTo() 这个速度和透明度要必须写
    $(".02").fadeTo(1000, 0.5);
});

自定义动画

animate(params, [speed], [easing], [fn])
注：params: 想要修改的样式属性，以对像形式传递，必须写，属性名可以不带引号，必须使用驼峰命名法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 栗子
$(function() {
    $("button").click(function() {
        $("div").animate({
            // 数字可以不写单位
            left: 500,
            top: 300,
            opacity: .4,
            width: 500
        }, 500, function() {
            alert(1);
        });
    })
})

属性操作

prop 属性
element.prop(“属性名”)              获取属性值
element.prop(“属性名”, “属性值”)                     设置属性值
注：自定义属性无法直接获取，要通过 attr()，用法一致

data()        可以在指定元素上存取数据，但不会修改DOM页面元素，页面刷新则之前的数据都将移除，获取/ 设置数据的方法与prop一致

注：获取data-index h5自定义属性，不用写data- 而且返回的是数字型

内容文本值

方法 作用
$("div").html() 括号为空为获取元素内容，括号里面加上内容则是修改内容
$("div").text() 与html() 相同，不过获取的只是文本内容
$("input").val() 与html() 相同，获取/ 设置的是表单值

补充：.parents()       返回所有祖先元素，可以直接指定类名获取任一祖先元素，不仅仅局限于父级

元素操作

直接看代码来的实在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
// 1. each(function(index, domEle) {})   遍历元素 
var arr = ["red", "green", "skyblue"];
$("button").each(function(i, domEle) {
    // 回调函数第一个参数一定是索引号，可以自己指定索引号号名称（默认为index）
    // 第二个参数一定是 dom元素对象 也是自己命名
    // domEle.css("color");   注：dom对象没有css方法!
    $(domEle).css("backgroundColor", arr[i]);
    // parseInt() 将字符串转换为数字型
    sum += parseInt($(domEle).text());
})
console.log(sum);

// 2. $.each(object, function(index, element) {})     遍历元素，主要用于遍历/处理数据
$.each(arr, function(i, ele) {
    console.log(i);
    console.log(ele);
});

$.each({
    name: "andy",
    age: 18
}, function(i, ele) {
    console.log(i); // 输出的是 name age 属性名
    console.log(ele); // 输出的是 andy  18 属性值


// 1. 创建元素
var li = $("<li>我是后来创建的li</li>"

// 2. 添加元素
// (1) 内部添加
$("ul").append(li); // 内部添加并且放到内容的最后面 
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
$(".test").after(div);
$(".test").before(div);
// 注：经验证，好像不能重复添加相同元素

// 3. 删除元素
$("ul").remove(); // 可以删除匹配的元素 自杀
$("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

2.jQuery事件

事件处理
on() 可以绑定1个或者多个事件处理程序/ 可以实现事件委托/ 可以给未来动态创建的元素绑定事件
off() 事件解绑
one() 同on，但是它只能触发事件一次
trigger(“事件”) 自动触发事件

注：事件被触发就会有事件对象产生，就有对应的方法（阻止冒泡等）


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// 代码看看就行了，没有注释，部分代码出现覆盖效果
$(function() {
    // 1. 事件处理on
    // (1) on可以绑定1个或者多个事件处理程序
    $("div").on({
        mouseenter: function() {
            $(this).css("background", "skyblue");
        },
        click: function() {
            $(this).css("background", "purple");
        },
        mouseleave: function() {
            $(this).css("background", "blue");
        }
    })
    $("div").on("mouseenter mouseleave", function() {
        $(this).toggleClass("current");
    })

    // (2) on可以实现事件委托（委派）
    // $("ul li").click();
    $("ul").on("click", "li", function() {
        alert(11);
    });
    // click 是绑定在ul 身上的，但是触发的对象是 ul 里面的小l

    // (3) on可以给未来动态创建的元素绑定事件
    $("ol").on("click", "li", function() {
        alert(11);
    })
    var li = $("<li>我是后来创建的</li>");
    $("ol").append(li)


    // 2. 事件解绑 off
    $("div").off(); // 这个是解除了div身上的所有事件
    $("div").off("click"); // 这个是解除了div身上的点击事件
    $("ul").off("click", "li"); // 这个是解绑事件委


    // 3. one() 只能触发事件一次
    $("p").one("click", function() {
        alert(11);
    }


    // 4. 自动触发事件 trigger()
    $("div").on("click", function() {
        $("div").css("backgroundColor", "skyblue");
    });
    // 自动触发点击事件  三种都可以
    $("div").click();
    $("div").trigger("click");
    $("div").triggerHandler("click"); // 与前两种不同的是，不会触发元素的默认行为（比标闪烁）
})

其它

对象拷贝

$.extend([deep], target, object1, [objectN])
deep: 设置为 true 则为深拷贝，默认为 false 浅拷贝
target: 要拷贝的目标对象
object1: 待拷贝到的第一个对象

注：相同的数据覆盖，不同的加上

多库共存

$.noConflict()

栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
    function $(ele) {
        return document.querySelector(ele);
    }
    console.log($("div"));

    // 1. 如果$ 符号冲突 我们就使用 jQuery
    jQuery.each();

    // 2. 让jquery 释放对$ 控制权 让用自己决定
    var suibian = jQuery.noConflict();
    console.log(suibian("span"));
    suibian("div").click(function() {
        suibian("div").css({
            width: 100,
            height: 100,
            margin: "0 auto",
            backgroundColor: "pink"
        })
    });
    suibian("div").trigger("click");
})