JQuery

一.语法

1
2
$(selector).action()
$(操作的对象).action()
  • $(this).hide() - 隐藏当前元素
  • $(“p”).hide() - 隐藏所有

    元素

  • $(“p.test”).hide() - 隐藏所有 class=”test” 的

    元素

  • $(“#test”).hide() - 隐藏 id=”test” 的元素

二.文档就绪

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
使得dom树已经加载完成

等价于
$(function(){
 
   // 开始写 jQuery 代码...
 
});

对比js

image-20210317153303893

三.基础使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>菜鸟教程(runoob.com)</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        <script>
            $(function () {
                $("button").click(() => {
                    $("p").hide();
                });
            });
        </script>
    </head>

    <body>
        <h2>这是一个标题</h2>
        <p>这是一个段落。</p>
        <p>这是另一个段落。</p>
        <button>点我</button>
    </body>
</html>

  • 元素 元素
    $(“*”) 选取所有元素 在线实例
    $(this) 选取当前 HTML 元素 在线实例
    $(“p.intro”) 选取 class 为 intro 的

    元素

    		 在线实例
    $(“p:first”) 选取第一个

    元素

    		 在线实例
    $(“ul li:first”) 选取第一个
      元素的第一个
    • 元素
    		 在线实例
    $(“ul li:first-child”) 选取每个
      元素的第一个
    • 元素
    		 在线实例
    $(“[href]”) 选取带有 href 属性的元素 在线实例
    $(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 元素 在线实例
    $(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 元素 在线实例
    $(“:button”) 选取所有 type=”button” 的 元素 和 在线实例
    $(“tr:even”) 选取偶数位置的
    在线实例
    $(“tr:odd”) 选取奇数位置的
    在线实例

四.Jquery的核心函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(parm)
1.回调函数,dom树加载完成时,执行该函数
2.选择器
3.dom对象
4.html标签字符串

$(function(){
 
   $('#btn').click(function(){
       alert($(this).html())
       $('html内存或者选择其中一个').appendTO('')
   })
 
});

$.xxx()
1.$.each()
隐式遍历数组
var arr = [1,2,3]
$.each(arr,function(index,item){
    console.log(index,item)
})
2.$.trim()
去除两端的空格

五.Jquery核心对象

1
2
3
4
size() length 长度
[index] get(index)
each()
index()

六.选择器

1
2
3
4
5
6
7
8
9
10
11
$('div').css({})

//第一个
$('div:first').css({})
//最后一个
$('div:last').css({})
//不为
$('div:not(.box)').css({})
//文本输入框
$(':text').css({})

七.方法

1
2
3
4
5
6
7
8
$.each() 遍历数组或者对象
$.trim() 去除空格 
$.type(obj) 得到数据类型
$.isArray(obj) 
$.isFunction(obj) 
$.parseJson(json) json转化为js的数组或者对象


八.位置方法

1
2
offset相对于页面
position相对于父元素

五.事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover

常见的事件使用

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
//单击
$("p").click(function(){
    // 动作触发后执行的代码!!
});
//双击
$("p").dblclick(function(){
  $(this).hide();
});

//当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});
//当鼠标指针离开元素时，会发生 mouseleave 事件。
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

//当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});
//当在元素上松开鼠标按钮时，会发生 mouseup 事件。
$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

//悬停
$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

//获取焦点
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
//失去焦点
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

六.效果

(1).隐藏和显示

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
$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});

$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

第二个参数是过渡使用哪种缓动函数"linear" 或者 "swing"
可选的 callback 参数是隐藏或显示完成后所执行的函数名称

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

//通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$("button").click(function(){
  $("p").toggle();
});

(2).淡入淡出

1