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安装

  <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>

付费资源您未登录，请先

jQuery

jQuery

jQuery特点

jQuery安装

jQuery基本语法

基本选择器

Bootstrap

AJAX

JavaScript