Front End

jQuery

PineappleCat · 4月28日 · 2021年 129次已读

jQuery

概述:

  • jQuery是一个快速、简洁的JavaScript代码库。
  • jQuery设计宗旨是“Write Less,Do More”。
  • 提供一种简便的JavaScript操作方式。
  • 优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery特点

  • 具有独特的链式语法。
  • 支持高效灵活的CSS选择器。
  • 拥有丰富的插件。
  • 兼容各种主流浏览器。
  • IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery安装

jQuery 安装 | 菜鸟教程 (runoob.com)

Releases · jquery/jquery (github.com)

  <body>
    <!-- 安装jQuery引入本服务器jQuuery代码库 -->
    <!--1. 下载并引入jQuery代码库
        开发版:Production version:用于实际的网站中,已被精简和压缩。
        发布版:Development version:用于测试和开发,未压缩,便于可读。
       -->
    <script src="js/jquery-3.6.0.js"></script>
    <!--2. 使用CDN关联别的服务器的资源
        CDN的全称是Content Delivery Network,即内容分发网络。
        使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度。
    -->
    <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
    <script>
      // 自执行匿名函数
      $(function () {
        alert("测试代码");
      });
    </script>
  </body>

jQuery基本语法

$(匿名函数):

  • 表示页面DOM加载完毕,则执行,比onload事件执行早。
  • 并且可以写多个,$是jQuery函数的简写。
  <body onload="pageLoad()">
    <script>
      $(function () {
        alert("1");
      });
      $(function () {
        alert("2");
      });
      jQuery(function () {
        alert("2");
      });
      function pageLoad() {
        alert("3");
      }
      // 执行顺序1 2 3
    </script>
  </body>

$(selector).action():

  • 选取HTML 元素,并对选取的元素执行某些操作。
  • selector(选择符)表示”查找” HTML 元素。
  • action() 执行对元素的操作。
    <ul>
      <li>123</li>
      <li>456</li>
    </ul>
    <input type="button" value="执行" onclick="click1()" />

    <script>
      function click1() {
        $("li").css("background-color", "red");
        // $("li").toggle();
        // $("li").hide();
      }
    </script>

基本选择器

标签选择器:

  • jQuery 标签选择器基于标签名选取元素。

id选择器:

  • id选择器通过HTML 元素的id 属性选取指定的元素。

class选择器:

  • 类选择器可以通过指定的class 查找元素。
    <p id="pTag" class="pTag2">内容测试</p>
    <input type="button" value="标签选择器" onclick="click1()" />
    <input type="button" value="标签选择器" onclick="click2()" />
    <input type="button" value="标签选择器" onclick="click3()" />
    <script>
      // 标签选择器
      function click1() {
        $("p").css("background-color", "red");
      }
      // id选择器
      function click2() {
        $("#pTag").css("background-color", "yellow");
      }
      // class选择器
      function click3() {
        $(".pTag2").css("background-color", "green");
      }
    </script>

付费资源您未登录,请先

Click here to view the copyright notice of this site(点击此处查看本站版权声明)
0 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!