2022年11月23日——jQuery——T1(基础选择器与表单选择器)-阿里云开发者社区

本博客文章使用者为移动2112班，注意重点内容回顾

jQuery简述

为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁使用的JavaScript库包括 jQuery、Prototype、Spry 和 Ext JS。

其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库

集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系。

它的主旨是以更少的代码实现更多的功能（Write less,do more）

jQuery 基本功能

访问和操作 DOM 元素

对页面事件的处理

大量插件在页面中的运用

与 Ajax 技术的完美结合

大幅提高开发效率

核心符号

$符号标志：是JQuery对象的简写形式，$()等效于jQuery()，是jQuery程序的标志

网络引入

<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

本地引入

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

显示与隐藏示例：

<button onclick="show()">jQuery操作</button>
<div id="show" style="display: none;">
    <img src="https://ucc.alicdn.com/images/user-upload-01/e67770adaecd4b40ad2e9fa19baa9df9.jpeg" />
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    var isf = 0;
    function show() {
        if (isf == 0) {
            $("#show").show(1000);
            isf = 1;
        } else {
            $("#show").hide(1000);
            isf = 0;
        }
    }
</script>

显示只有一个jQuery的操作按钮，当点击jQuery按钮后会显示图片。

再次点击jQuery按钮即可将加载的图片收回。

示例二：

(1). Onmouseover事件是指将光标移至元素上产生的事件。

(2). Onmouseout事件是指将光标从元素上离开时产生的事件。

<div onmouseover="show()">
        更多
    </div>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        
        #menu {
            list-style: none;
        }
        
        #menu li {
            width: 100%;
        }
    </style>
    <ul id="menu" onmouseout="hide()" style="display: none;width: 10%;height: 20vh;border: 1px solid black;">
        <li>功能1</li>
        <li>功能2</li>
        <li>功能3</li>
        <li>功能4</li>
    </ul>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        function show() {
            $("#menu").show(1000);
        }
        function hide() {
            $("#menu").hide(1000);
        }
    </script>

示例3：

颜色切换，这里是通过$()直接加载js的脚本内容，并且通过jQuery添加了对应下拉菜单的onchange事件，通过这个事件来控制网页的背景颜色。

<select id="changeColor">
    <option value="pink">粉色</option>
    <option value="orange">橙色</option>
    <option value="yellow">黄色</option>
    <option value="skyblue" selected>天蓝</option>
</select>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("body").css("backgroundColor", $("#changeColor").val());
        $("#changeColor").change(function() {
            $("body").css("backgroundColor", $("#changeColor").val());
        });
    });
</script>

一、基础选择器

下列三个是核心的jQuery选择器，我们在处理各种element元素的时候基本都是通过这三个选择器来完成获取信息的，所以这里我们需要记录一下笔记。

选择器	功能	返回值
#id	根据 id 属性值选取元素	单个元素
.class	根据 class 属性值选取元素	元素集合
element	根据给定的标签名选取元素	元素集合

#id 选择器选取带有指定 id 的元素。

id 引用 HTML 元素的 id 属性。

注意：id 属性在文档内必须是唯一的。

注意：不要使用数字开头的 id 属性！在某些浏览器中可能出问题。

id选择器示例：

<div id="show"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("#show").html("<h1>I Have A Dream !</h1>");
    });
</script>

id选择器唯一性示例：

<div id="show"></div>
<div id="show"></div>
<div id="show"></div>
<div id="show"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("#show").html("<h1>I Have A Dream !</h1>");
    });
</script>

class选择器：

.class 选择器选取带有指定 class 的所有元素。

class 引用 HTML 元素的 class 属性。

class 属性用于为多个 HTML 元素设置特定样式。

注意：不要使用数字开头的 class 属性！在某些浏览器中可能出问题。

<div id="show" class="div_class"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $(".div_class").html("<h1>I Have A Good Idea !</h1>");
    });
</script>

class批量示例：

<div id="show" class="div_class"></div>
<div id="show" class="div_class"></div>
<div id="show" class="div_class"></div>
<div id="show" class="div_class"></div>
<div id="show" class="div_class"></div>
<div id="show" class="div_class"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $(".div_class").html("<h1>I Have A Good Idea !</h1>");
    });
</script>

element选择器：

element 选择器选取带有指定元素名称的所有元素。

批量元素与收尾元素示例：

<p>清平调</p>
<p>李白</p>
<p>云想衣裳花想容，</p>
<p>春风拂槛露华浓。</p>
<p>若非群玉山头见，</p>
<p>会向瑶台月下逢。</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("p").css("color", "red");
        $("p:first").css("color", "skyblue");
        $("p:last").css("color", "blue");
    });
</script>

过滤选择器：

过滤选择器，核心符号【:】，这个冒号前后的批量元素，冒号后面是筛选方式。

选择器	功能	返回值
first() 或 :first	获取第一个元素	单个元素
last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器之外的所有元素	元素集合，如$("li:not(.title)") 获取class 不是 title 的 <li> 元素
:even	获取索引值为偶数的元素，索引号从 0 开始	元素集合
:odd	将每一个选择器匹配到的元素合并后一起返回	元素集合
:eq(index)	获取索引值等于 index 的元素，索引号从 0 开始	单个元素，如 $(“li:eq(1)”) 获取索引等于 1 的 <li> 元素
:gt(index)	获取索引值大于 index 的元素，索引号从 0 开始	元素集合，如 $("li:gt(1)") 获取索引大于但不包括 1 的 <li> 元素
:lt(index)	获取索引值小于 index 的元素，索引号从 0 开始	元素集合，如 $("li:lt(1)") 获取索引小于但不包括 1 的 <li> 元素

1、EVEN：

<p>清平调</p>
<p>李白</p>
<p>云想衣裳花想容，</p>
<p>春风拂槛露华浓。</p>
<p>若非群玉山头见，</p>
<p>会向瑶台月下逢。</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("p:even").css("color", "red");
    });
</script>

2、ODD：

<p>清平调</p>
<p>李白</p>
<p>云想衣裳花想容，</p>
<p>春风拂槛露华浓。</p>
<p>若非群玉山头见，</p>
<p>会向瑶台月下逢。</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("p:odd").css("color", "red");
    });
</script>

3、el索引单个选择器

<p>清平调</p>
<p>李白</p>
<p>云想衣裳花想容，</p>
<p>春风拂槛露华浓。</p>
<p>若非群玉山头见，</p>
<p>会向瑶台月下逢。</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function() {
        $("p:eq(0)").css("color", "red");
        $("p:eq(1)").css("color", "red");
        $("p:eq(3)").css("color", "red");
        $("p:eq(4)").css("color", "red");
        $("p:eq(5)").css("color", "red");
    });
</script>

二、表单选择器

表单选择器是除了基础选择器的id、class、element之外用的比较多的选择器，一般在填写注册信息的时候会使用到。我们经常会处理这些信息作校验操作。

表单选择器最常用示例："input[name='userName']"

语法解析：input就是form表单的输入框，毕竟input肯定是个元素集合，那么，我们使用[]来获取集合中的内容，一般我们表单提交都会添加name的属性值，所以我们直接使用name的属性值来定位我们需要处理的表单内容，通过这个放来来最终校验表单的数据格式是否正确。

<form action="#" onsubmit="return query()">
    <p>
        <input type="text" name="userName" />
    </p>
    <p>
        <input type="submit" value="提交">
    </p>
</form>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    function query() {
        var userName = $("input[name = 'userName']").val();
        console.log(userName);
        return false;
    }
</script>

下图示例可以看到，我们不仅仅获取到了input的name='userName'的值，而且还阻断了from表单的提交过程，在路径上我们并没有看到【?userName=】的字样，就代表成功阻断了。

下列是其它内容获取元素集合的操作，但是好用程度有限。

选择器	功能	返回值
:input	获取 <input><textarea><select><button> 元素	元素集合
:text	获取符合 [type=text] 的 <input> 元素	元素集合
:password	获取符合 [type=password] 的 <input> 元素	元素集合
:radio	获取符合 [type=radio] 的 <input> 元素	元素集合
:checkbox	获取符合 [type=checkbox] 的 <input> 元素	元素集合
:image	获取符合 [type=image] 的 <input> 元素	元素集合
:file	获取符合 [type=file] 的 <input> 元素	元素集合
:hidden	参考“可见性过滤选择器”	元素集合
:button	获取 <button> 元素和符合 [type=button] 的 <input> 元素	元素集合
:submit	获取符合 [type=submit] 的 <input> 元素	元素集合
:checked	选取被选中的 <input> 元素	元素集合
:selected	选取被选中的 <option> 元素	元素集合

以上就是jQuery选择器的一些核心内容了，希望对大家有所帮助。

2022年11月23日——jQuery——T1(基础选择器与表单选择器)

jQuery简述

jQuery 基本功能

核心符号

网络引入

本地引入

显示与隐藏示例：

示例二：

示例3：

一、基础选择器

id选择器示例：

id选择器唯一性示例：

class选择器：

class批量示例：

element选择器：

批量元素与收尾元素示例：

过滤选择器：

1、EVEN：

2、ODD：

3、el索引单个选择器

二、表单选择器

表单选择器最常用示例："input[name='userName']"

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

2022年11月23日——jQuery——T1(基础选择器与表单选择器)

jQuery简述

jQuery 基本功能

核心符号

网络引入

本地引入

显示与隐藏示例：

示例二：

示例3：

一、基础选择器

id选择器示例：

id选择器唯一性示例：

class选择器：

class批量示例：

element选择器：

批量元素与收尾元素示例：

过滤选择器：

1、EVEN：

2、ODD：

3、el索引单个选择器

二、表单选择器

表单选择器最常用示例："input[name='userName']"

热门文章

最新文章

相关课程

相关电子书

相关实验场景