JQuery从头学起第二讲

关于JQuery从头学起第二讲的详细攻略，下面是我整理的内容：

一、概述

JQuery从头学起第二讲是基于JQuery的选择器和事件常见应用进行深入讲解的课程。
通过该课程，你可以更深入了解JQuery选择器和事件这两个重要知识点。
本文将从以下几个方面展开：
- JQuery选择器概述
- 常用的JQuery选择器的分类与使用方法
- JQuery事件绑定
- 常用的JQuery事件类型

二、JQuery选择器概述

JQuery的选择器就是用来从HTML文档中选取某个元素的工具。
在JQuery中，选择器的作用类似于CSS，但它更加强大。
JQuery的选择器基本采用CSS Selector语法，常规的如通过ID选择器#id、类选择器.class、标签选择器tag等。

三、常用的JQuery选择器的分类与使用方法

分类：
- 基本选择器
- 层次选择器
- 过滤选择器
- 属性选择器
基本选择器：
- ID选择器：$(#idName)
- 类选择器：$(.className)
- 标签选择器：$(tagName)
层次选择器：
- 后代选择器：$(father descendant)
- 子代选择器：$(father > child)
- 相邻选择器：$(prev + next)
- 兄弟选择器：$(prev ~ siblings)
过滤选择器：
- :first：选取匹配的第一个元素。
- :last：选取匹配的最后一个元素。
- :eq(index)：选取第index个元素。
- :not(selector)：选取不匹配给定选择器的元素。
- :even：选取所有偶数位置的元素。
- :odd：选取所有奇数位置的元素。
- :header：选取所有标题元素(h1~h6)。
- :contains(text)：选取包含指定文本的元素。
- :empty：选取所有不包含子元素或文本内容的空元素。
- :has(selector)：选取含有给定的选择器的元素。
属性选择器：
- [name=value]：选取有指定属性键值对的元素。
- [name!=value]：选取没有指定属性键值对的元素。
- [name^=value]：选取属性值以value开头的元素。
- [name$=value]：选取属性值以value结尾的元素。
- [name*=value]：选取属性值包含value的元素。

四、JQuery事件绑定

JQuery中的事件绑定和JavaScript中的方法是相似的。
JQuery中的事件用户交互的响应。
在JQuery中，可以使用 .bind()、.on()、.click()、.dblclick()、.hover()等绑定事件的方法。

五、常用的JQuery事件类型

鼠标事件：
- click
- dblclick
- mouseover
- mouseout
- mousemove
键盘事件：
- keydown
- keypress
- keyup
表单事件：
- blur
- change
- focus
- select
- submit

六、示例说明

下面两个示例说明分别是使用JQuery选择器和事件绑定来实现的。代码如下：

示例一：JQuery选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQuery选择器示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <h2>我的第一个标题</h2>
    <button>点击按钮</button>
    <p>我的第一个段落</p>
    <p>我的第二个段落</p>
</body>
</html>

该示例中，将点击按钮的事件与所有<p>元素隐藏的方法绑定，即点击按钮会执行隐藏所有<p>元素的操作。

示例二：JQuery事件绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQuery事件绑定示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").on({
                mouseenter: function(){
                    $(this).css("background-color", "lightgray");
                },
                mouseleave: function(){
                    $(this).css("background-color", "white");
                },
                click: function(){
                    $(this).css("background-color", "yellow");
                }
            });
        });
    </script>
    <style>
        p {
            background-color: white;
            padding: 5px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <h2>JQuery事件绑定示例</h2>
    <p>鼠标放上来试试</p>
    <p>鼠标移到上面试试</p>
    <p>鼠标点击试试</p>
</body>
</html>

该示例中，将mouseenter、mouseleave、click这三种事件与三个<p>元素绑定，即当鼠标移到元素上方、离开元素、单击元素时，分别会执行不同的样式修改操作。

以上就是JQuery从头学起第二讲的完整攻略及示例说明，希望可以对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery从头学起第二讲 - Python技术站