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

     

    目录

    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程序的标志 

    网络引入

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

    本地引入

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

    显示与隐藏示例：

    2. <div id="show" style="display: none;">
    3.     <img src="https://img-blog.csdnimg.cn/e67770adaecd4b40ad2e9fa19baa9df9.jpeg" />
    4. div>
    5. <script src="js/jquery-3.4.1.min.js">script>
    6. <script>
    7.     var isf = 0;
    8.     function show() {
    9.         if (isf == 0) {
    10.             $("#show").show(1000);
    11.             isf = 1;
    12.         } else {
    13.             $("#show").hide(1000);
    14.             isf = 0;
    15.         }
    16.     }
    17. script>

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

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

    示例二：

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

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

    1.     
      "show()">
    2.         更多
    3.
  • <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>功能1li>
  • <li>功能2li>
  • <li>功能3li>
  • <li>功能4li>
  • 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事件，通过这个事件来控制网页的背景颜色。

    2. <script src="js/jquery-3.4.1.min.js">script>
    3. <script>
    4.     $(function() {
    5.         $("body").css("backgroundColor", $("#changeColor").val());
    6.         $("#changeColor").change(function() {
    7.             $("body").css("backgroundColor", $("#changeColor").val());
    8.         });
    9.     });
    10. script>

    一、基础选择器

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

    选择器

    功能

    返回值

    #id

    根据 id 属性值选取元素

    单个元素

    .class 

    根据 class 属性值选取元素

    元素集合

    element

    根据给定的标签名选取元素 

    元素集合

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

    id 引用 HTML 元素的 id 属性。

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

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

    id选择器示例：

    1. "show">
    2. <script src="js/jquery-3.4.1.min.js">script>
    3. <script>
    4.     $(function() {
    5.         $("#show").html("
      I Have A Dream !
      "      );
    6.     });
    7. script>

    id选择器唯一性示例：

    1. "show">
    2. <div id="show">div>
    3. <div id="show">div>
    4. <div id="show">div>
    5. <script src="js/jquery-3.4.1.min.js">script>
    6. <script>
    7.     $(function() {
    8.         $("#show").html("
      I Have A Dream !
      "      );
    9.     });
    10. script>

    class选择器：

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

    class 引用 HTML 元素的 class 属性。

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

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

    1. "show" class="div_class">
    2. <script src="js/jquery-3.4.1.min.js">script>
    3. <script>
    4.     $(function() {
    5.         $(".div_class").html("
      I Have A Good Idea !
      "      );
    6.     });
    7. script>

    class批量示例：

    1. "show" class="div_class">
    2. <div id="show" class="div_class">div>
    3. <div id="show" class="div_class">div>
    4. <div id="show" class="div_class">div>
    5. <div id="show" class="div_class">div>
    6. <div id="show" class="div_class">div>
    7. <script src="js/jquery-3.4.1.min.js">script>
    8. <script>
    9.     $(function() {
    10.         $(".div_class").html("
      I Have A Good Idea !
      "      );
    11.     });
    12. script>

    element选择器：

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

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

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

    过滤选择器：

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

    选择器

    功能

    返回值

    first() 或 :first

    获取第一个元素

    单个元素

    last() 或 :last 

    获取最后一个元素

    单个元素

    :not(selector) 

    获取除给定选择器之外的所有元素

    元 素 集 合， 如$("li:not(.title)") 获 取class 不是 title 的 

  •  元素

    • :even

    获取索引值为偶数的元素，索引号从 0 开始

    元素集合

    :odd

    将每一个选择器匹配到的元素合并后一起返回

    元素集合

    :eq(index)

    获取索引值等于 index 的元素，索引号从 0 开始

    单个元素，如 $(“li:eq(1)”) 获取索引等于 1 的 

  •  元素

    • :gt(index)

    获取索引值大于 index 的元素，索引号从 0 开始

    元素集合，如 $("li:gt(1)") 获取索引大

    于但不包括 1 的 

  •  元素

    • :lt(index)

    获取索引值小于 index 的元素，索引号从 0 开始

    元素集合，如 $("li:lt(1)") 获取索引小

    于但不包括 1 的 

  •  元素

    • 1、EVEN：

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

    2、ODD： 

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

    3、el索引单个选择器

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

    二、表单选择器

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

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

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

    1. "#" onsubmit="return query()">
    2.     <p>
    3.         <input type="text" name="userName" />
    4.     p>
    5.     <p>
    6.         <input type="submit" value="提交">
    7.     p>
    8. form>
    9. <script src="js/jquery-3.4.1.min.js">script>
    10. <script>
    11.     function query() {
    12.         var userName = $("input[name = 'userName']").val();
    13.         console.log(userName);
    14.         return false;
    15.     }
    16. script>

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

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

    选择器

    功能

    返回值

    :input

    获取