jQuery 从入门到吃土 – 个人学习记录

jQuery介绍

在学习jQuery之前，需要掌握HTML，CSS，JavaScript相关的基础知识。

jQuery是一个轻量级的JavaScript库，他的口号是write less do more。
jQuery使编写JavaScript代码更简单。
jQuery学习简单。

jQuery可以做什么：

操作HTML/DOM
操作CSS
HTML事件
效果和动画
AJAX

入门示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <p>你敢点我，我就会消失！</p>
    <p>你点我一下试试！</p>
</body>
</html>

效果图

开始学习

引入jQuery

首先我们需要把jQuery引入到代码中，有两种方法：

1、从jQuery官网中下载jQuery。
2、从CDN (Content Delivery Network)引入jQuery。

下载jQuery

有两个版本一个是生产版本，一个是开发版本(生产版本经过压缩)。

jQuery库是单个JavaScript文件，可以在<head>便签中引用。
把下载的文件放到代码路径下。

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

jQuery CDN

以Google的CDN为例。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

还可以从官网上找到其他的CDN。

jQuery 语法

基本语法：$(selector).action()

$符号用于定义和访问jQuery。
selector选择器用于查询html元素。
action用于在元素上执行动作。

jQuery可以选择HTML元素并对元素执行相应的动作。

jQuery示例

$(this).hide() - 隐藏当前元素。

$("p").hide() - 隐藏所有的 <p> 元素。

$(".test").hide() - 隐藏所有 class="test" 的元素。

$("#test").hide() - 隐藏所有 id="test" 的元素。

Document Ready 事件

$(document).ready(function(){

  // jQuery methods go here...

});

他的意思是在document都加载完成之后才开始执行jQuery代码。
他和下面的代码是一样的。
第一种让人更容易理解。

$(function(){

  // jQuery methods go here...

});

jQuery选择器

jQuery选择器在jQuery库中非常重要。

jQuery选择器可以通过元素的 name，id，classes，types, attributes等等找到元素。

元素选择器

$("p") 选择所有的p元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <p>这是一个段落！</p>
    <p>这是另一个段落！</p>
    <button>点击隐藏段落</button>
</body>
</html>

效果

id选择器

$("#test")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#test").hide();
            });
        });
    </script>
</head>
<body>
    <p>这是一个段落！</p>
    <p id="test">这是另一个段落！</p>
    <button>点击隐藏段落</button>
</body>
</html>

效果

类选择器

$(".text")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $(".test").hide();
            });
        });
    </script>
</head>
<body>
    <p class="test">这是一个段落！</p>
    <p>这是另一个段落！</p>
    <button>点击隐藏段落</button>
</body>
</html>

效果

其他的选择器举例

语法	描述
$(“*”)	所有的元素
$(this)	当前的元素
$(“p.intro”)	<p>元素下class=”intro”
$(“p:first”)	第一个<p>元素
$(“ul li:first”)	<ul>元素下的第一个<li>元素
$(“ul li:first-child”)	Selects the first <li> element of every <ul>
$(“[href]”)	Selects all elements with an href attribute
$(“a[target=’_blank’]”)	Selects all <a> elements with a target attribute value equal to “_blank”
$(“a[target!=’_blank’]”)	Selects all <a> elements with a target attribute value NOT equal to “_blank”
$(“:button”)	Selects all <button> elements and <input> elements of type=”button”
$(“tr:even”)	Selects all even <tr> elements
$(“tr:odd”)	Selects all odd <tr> elements

当jQuery function过多时，可以把jQuery function放在单独的js文件中。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="my_jquery_functions.js"></script>
</head>

jQuery事件

常见的DOM事件

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

大部分的DOM事件都有对应的jQuery方法。例如点击事件

$("p").click(function(){
  // action goes here!!
});

常用的jQuery事件方法

$(document).ready()
document加载完成之后执行

click()
单击元素后执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <h2>这就是标题</h2>
    <p class="test">这是一个段落！</p>
    <p>这是另一个段落！</p>
</body>
</html>

dblclick()
双击元素后执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").dblclick(function(){
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <h2>这就是标题</h2>
    <p class="test">这是一个段落！</p>
    <p>这是另一个段落！</p>
</body>
</html>

mouseenter()
鼠标进入元素时执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").mouseenter(function(){
                $(this).css({"background-color":"red"
            });
            });
        });
    </script>
</head>
<body>
    <h2>这就是标题</h2>
    <p class="test">这是一个段落！</p>
    <p>这是另一个段落！</p>
</body>
</html>

mouseleave()
鼠标离开元素时执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").mouseleave(function(){
                $(this).css({"background-color":"red"
            });
            });
        });
    </script>
</head>
<body>
    <h2>这就是标题</h2>
    <p class="test">这是一个段落！</p>
    <p>这是另一个段落！</p>
</body>
</html>

mousedown()
当鼠标的左键、中键或者右键在元素上按下时，执行此函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").mousedown(function(){
                $(this).css({"background-color":"yellow"
            });
            });
        });
    </script>
</head>
<body>
    <h2>这就是标题</h2>
    <p class="test">这是一个段落！</p>
    <p>这是另一个段落！</p>
</body>
</html>

mouseup()
当鼠标的左键、中键或者右键在元素上松开时，执行此函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").mouseup(function(){
                $(this).css({"background-color":"yellow"
            });
            });
        });
    </script>
</head>
<body>
    <h2>这就是标题</h2>
    <p class="test">这是一个段落！</p>
    <p>这是另一个段落！</p>
</body>
</html>

hover()
包含两个函数mouseenter() 和 mouseleave()
鼠标进入时执行第一个函数，鼠标离开时执行第二个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").hover(
                function(){
                $(this).css({"background-color":"yellow"});},
                function(){
                $(this).css({"background-color":"green"});
        });
    });
    </script>
</head>
<body>
    <h2>这就是标题</h2>
    <p>这是另一个段落！</p>
</body>
</html>

focus()
鼠标聚焦事件

blur()
鼠标失焦事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("input").focus(function () {
                $(this).css("background-color", "yellow");
            });
            $("input").blur(function () {
                $(this).css("background-color", "green");
            });
        });
    </script>
</head>

<body>
    <h2>这就是标题</h2>
    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email">
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").on({
                mouseenter: function () {
                    $(this).css("background-color", "lightgray");
                },
                mouseleave: function () {
                    $(this).css("background-color", "lightblue");
                },
                click: function () {
                    $(this).css("background-color", "yellow");
                }
            });
        });
    </script>
</head>

<body>
    <h2>这就是标题</h2>
    <p>Click me away!</p>
</body>

</html>

on()
The on() method attaches one or more event handlers for the selected elements.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").on("click", function () {
                $(this).hide();
            });
        });
    </script>
</head>

<body>
    <h2>这就是标题</h2>
    <p>Click me away!</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").on({
                mouseenter: function () {
                    $(this).css("background-color", "lightgray");
                },
                mouseleave: function () {
                    $(this).css("background-color", "lightblue");
                },
                click: function () {
                    $(this).css("background-color", "yellow");
                }
            });
        });
    </script>
</head>

<body>
    <h2>这就是标题</h2>
    <p>Click me away!</p>
</body>

</html>

jQuery效果

显示和隐藏

jQuery hide() show() toggle()
语法

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

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

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

speed参数：”slow”, “fast”, 或者毫秒数。
callback：执行完hide()或者show()后执行的函数。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("p").hide(1000);
            });
            $("#show").click(function(){
                $("p").show("slow");
            });
        });  
    </script>
</head>

<body>
    <h6 id="time"></h6>
    <h2>我是一个孤独的标题</h2>
    <p>我不是一个孤独的段落!</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <script>
        document.getElementById('time').innerHTML = new Date().getTime();
    </script>
</body>

</html>

$(document).ready(function(){
            $("button").click(function(){
                $("p").toggle();
            });
        });

效果图

Fade 淡入淡出

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

语法

$(selector).fadeIn(speed,callback); 参数含义同上