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

2022-11-28 18:57:40 浏览数 (1)

目录

jQuery简述

jQuery 基本功能

核心符号

网络引入

本地引入

显示与隐藏示例：

示例二：

示例3：

一、基础选择器

id选择器示例：

id选择器唯一性示例：

class选择器：

class批量示例：

element选择器：

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

过滤选择器：

1、EVEN：

2、ODD： 

3、el索引单个选择器

二、表单选择器

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

本博客文章使用者为移动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程序的标志 

网络引入

代码语言：javascript复制
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> 

本地引入

代码语言：javascript复制
<script src="js/jquery-3.4.1.min.js"></script>

显示与隐藏示例：

代码语言：javascript复制
<button onclick="show()">jQuery操作</button>
<div id="show" style="display: none;">
    <img src="https://img-blog.csdnimg.cn/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事件是指将光标从元素上离开时产生的事件。

代码语言：javascript复制
    <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事件，通过这个事件来控制网页的背景颜色。

代码语言：javascript复制
<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选择器示例：

代码语言：javascript复制
<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选择器唯一性示例：

代码语言：javascript复制
<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 属性！在某些浏览器中可能出问题。

代码语言：javascript复制
<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批量示例：

代码语言：javascript复制
<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 选择器选取带有指定元素名称的所有元素。

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

代码语言：javascript复制
<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：

代码语言：javascript复制
<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： 

代码语言：javascript复制
<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索引单个选择器

代码语言：javascript复制
<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的属性值来定位我们需要处理的表单内容，通过这个放来来最终校验表单的数据格式是否正确。

代码语言：javascript复制
<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选择器的一些核心内容了，希望对大家有所帮助。

jquery javascript html

0 人点赞