JQuery入门（https://jquery.com/）

于 2024-08-28 21:33:07 发布
阅读量225 收藏
点赞数 2
分类专栏： 大前端 # JQuery 文章标签： jquery 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuozai1204/article/details/141605939
版权

一、入口函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>入口函数</title>
    <!-- 先引入再使用 -->
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
      // 在jQuery中，入口函数用于在文档加载完成后执行代码，该入口函数是$(document).ready()或者其简写形式$(function(){})。它的作用是确保在问文档完全加载和解析后再执行代码，以确保所有的dom元素都已经可用。

      // 入口函数
      // $(document).ready(function(){
      //     console.log('我是入口函数')
      // })

      // 入口函数简写形式
      // $(function(){
      //     console.log('我是jq入口函数')
      // })

      // console.log(document.querySelector('.box'))

      // js页面加载事件
      // window.onload = function(){
      //     console.log(document.querySelector('.box'))
      // }

      // $(function(){
      //     console.log(document.querySelector('.box'))
      // })
      // js页面加载事件
      // js的页面加载函数只能写一个 写多个后面的会覆盖前面的
      // window.onload = function(){
      //     alert('1')
      // }
      // window.onload = function(){
      //     alert('2')
      // }
      // window.onload = function(){
      //     alert('3')
      // }

      // jq中的页面加载事件
      // jq中的页面加载事件可以写多个都会被执行
      $(function () {
        alert("1");
      });
      $(function () {
        alert("2");
      });
      $(function () {
        alert("3");
      });
    </script>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

二、$的用法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>$的用法</title>
  </head>
  <body>
    <div>我是div标签</div>
    <p class="tag">
      <span>123</span>
    </p>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  /*
        $其实就是一个函数，所以在使用$的时候，后面都要加上一个()
        语法：
            $(参数)
    */
  // 1.当参数是函数的时候就是入口函数的简写
  $(function () {
    console.log("我是入口函数的简写形式");
  });
  // 2.当参数是选择器的时候，用来获取dom元素，获取的是一组元素
  console.log($("div")[0]);
  $(".tag span")[0].style.color = "red";
</script>

三、选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器</title>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li class="spec">
        <p>
          <span>a</span>
          <span>b</span>
          <span>c</span>
        </p>
      </li>
    </ul>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  // $可以通过id 类名 标签 交集 并集 序等等选择器来获取dom元素
  console.log($("ul li span:first-child")[0]);
  // dom.css('属性','属性值')
  $("ul li span:first-child").css("color", "red");
</script>

四、过滤选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤选择器</title>
  </head>
  <body>
    <ul>
      <li>我是第一个li</li>
      <li>我是第二个li</li>
      <li>我是第三个li</li>
      <li>我是第四个li</li>
      <li>我是第五个li</li>
      <li>我是第六个li</li>
      <li>我是第七个li</li>
      <li>我是第八个li</li>
    </ul>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  $(function () {
    console.log($("ul li"));
    // 第一个li的样式
    $("ul li:first-child").css("color", "skyblue");
    // eq(索引):获取索引为几的dom元素
    $("ul li:eq(3)").css("background-color", "pink");
    // odd：获取索引为奇数的dom元素
    $("ul li:odd").css("font-size", "30px");
    // even：索引为偶数的dom元素
    $("ul li:even").css("background-color", "green");
    // 匹配所有小于给定索引值的dom元素
    $("ul li:lt(2)").css("color", "red");
    // 匹配所有大于给定索引值的dom元素
    $("ul li:gt(3)").css("color", "blue");
  });
</script>

五、筛选选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>筛选选择器</title>
  </head>
  <body>
    <ul>
      <li id="first">1</li>
      <li>2</li>
      <li>3</li>
      <li id="fourth">4</li>
      <li>5</li>
      <li>
        <span>6</span>
      </li>
      <span>123</span>
    </ul>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  // 获取ul下所有的子节点
  console.log($("ul").children());

  // 相当于子代选择器 ul>span
  $("ul").children("span").css("background", "red");
  // $('ul>span').css('background','red')

  // 相当于后代选择器 ul li
  $("ul").find("li").css("background", "pink");

  // 除了自己之外的li兄弟节点
  $("#first").siblings("li").css("background", "skyblue");

  // 上一个兄弟节点
  $("#fourth").prev().css("font-size", "30px");

  // 下一个兄弟节点
  $("#fourth").next().css("font-size", "50px");

  // 获取父节点
  console.log($("#fourth").parent()[0]);

  $("ul li").eq(3).css("color", "yellow");
</script>

六、index

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>
  </head>
  <body>
    <ul>
      <li>我是1</li>
      <li>我是2</li>
      <li>我是3</li>
      <li>我是4</li>
      <li>我是5</li>
      <li>我是6</li>
    </ul>
  </body>
</html>
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  $(function () {
    // 不需要遍历循环
    $("li").click(function () {
      // index()获取当前点击的下标
      console.log($(this).index());
    });
  });
</script>

七、css操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css操作</title>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  // 设置单个样式
  // $('ul li:first-child').css('color','red')
  // 设置多个样式
  $("ul li:first-child").css({
    color: "red",
    "font-weight": "bold",
    "font-size": "40px",
  });
</script>

八、class操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class操作</title>
    <style>
      .box {
        background: pink;
        font-size: 30px;
        color: blue;
      }
      .main {
        font-size: 40px;
      }
    </style>
  </head>
  <body>
    <button>添加box</button>
    <button>添加main</button>
    <button>移除main</button>
    <button>切换类名</button>
    <button>判断类名</button>
    <ul>
      <li class="lis">a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
    </ul>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  $(function () {
    // 索引是0的按钮
    $("button")
      .eq(0)
      .click(function () {
        // 给所有的li添加类名
        // 添加类名 不会覆盖原来的类名
        $("li").addClass("box");
      });
    // 索引是1的按钮
    $("button")
      .eq(1)
      .click(function () {
        // 给所有的li添加main这个类名
        $("li").addClass("main");
      });
    // 索引是2的按钮
    $("button")
      .eq(2)
      .click(function () {
        $("li").removeClass("main");
      });
    // 索引是3的按钮
    $("button")
      .eq(3)
      .click(function () {
        // 判断 切换类名
        // 如果没有这两个类名 那就添加这两个类名
        // 如果有这两个类名中的一个 点击切换 就切换为另一个
        $("li").toggleClass("box main");
      });
    // 索引是4的按钮
    $("button")
      .eq(4)
      .click(function () {
        // 判断li有没有main这个类名 如果有 返回true 没有返回false
        console.log($("li").hasClass("main"));
      });
  });
</script>

九、选项卡

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>选项卡</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }
      .wrap {
        width: 1000px;
        height: 475px;
        margin: 50px auto;
      }
      .wrap ul {
        border: 1px solid #ddd;
        border-bottom: none;
        height: 35px;
        width: 320px;
        overflow: hidden;
      }
      .wrap ul li {
        float: left;
        width: 80px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        cursor: pointer;
        border-top: 4px solid #fff;
      }
      .wrap ul li.active {
        border-color: red;
        border-bottom: none;
      }
      .pro {
        width: 320px;
        height: 470px;
        border: 1px solid #ddd;
        overflow: hidden;
      }
      .pro > div {
        float: left;
        display: none;
      }
      .pro > div.show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <ul>
        <li class="active">选项一</li>
        <li>选项二</li>
        <li>选项三</li>
        <li>选项四</li>
      </ul>
      <div class="pro">
        <div class="show">我是选项一的内容</div>
        <div>我是选项二的内容</div>
        <div>我是选项三的内容</div>
        <div>我是选项四的内容</div>
      </div>
    </div>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
  $(function () {
    $(".wrap ul li").click(function () {
      // 先给当前点击项添加active类名 再给除了自己之外的兄弟节点移除active类名
      $(this).addClass("active").siblings().removeClass("active");
      // 通过索引 点击哪一项就显示对应项的div
      // 获取当前点击项的索引
      var currentIndex = $(this).index();
      // 只给当前点击的这一项添加show 让他显示 其余的移除show让他隐藏
      $(".pro>div")
        .eq(currentIndex)
        .addClass("show")
        .siblings()
        .removeClass("show");
    });
  });
</script>

十、属性操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>属性操作</title>
  </head>
  <body>
    <input type="text" name="" id="" placeholder="请输入内容" />
    <input type="checkbox" />男 <input type="checkbox" />女
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  /*
        在jquery中，
        .prop()方法用于获取或者设置元素的属性值，用于处理元素的固有属性。
        .attr()方法用于获取或者设置元素的属性值，它可以用于处理元素的任意属性，包括固有属性和自定义属性。
        对于布尔类型的属性，如checked、selected、disabled使用prop方法。
    */
  // 获取属性值
  // 返回的是第一个多选框的属性值
  console.log($('input[type="checkbox"]').prop("checked"));
  // 设置属性值 设置多有匹配元素的属性
  $('input[type="checkbox"]').prop("checked", true);
  $('input[type="checkbox"]').prop("class", "abc");
  // $('input[type="checkbox"]').prop('say','hi') // 不生效 不是固有属性

  // 返回第一个多选框的type属相
  console.log($('input[type="checkbox"]').attr("type")); //checkbox
  // 设置属性值 设置所有匹配元素的属性值
  $('input[type="checkbox"]').attr("say", "hi");

  /*
        .each() 用于遍历元素
        $(选择器).each(function)(index,element){
            // 操作
        })
        index：当前元素在集合中的索引
        element：当前的dom元素
    */
  $('input[type="checkbox"]').each(function (index, element) {
    console.log($(this).prop("checked"), index, element);
  });
</script>

十一、表格操作案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格操作案例</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .wrap {
        width: 300px;
        margin: 100px auto 0;
      }
      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 300px;
      }
      th,
      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }
      th {
        background: #09c;
      }
      tbody tr {
        text-align: center;
        background-color: #f0f0f0;
        cursor: pointer;
      }
      tbody tr:hover {
        background-color: #fafafa;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <table>
        <!-- 表格头部 -->
        <thead>
          <tr>
            <th>
              <input type="checkbox" id="all" />
            </th>
            <th>菜名</th>
            <th>饭店</th>
          </tr>
        </thead>
        <!-- 表格的内容部分 -->
        <tbody>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>a</td>
            <td>b</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>c</td>
            <td>d</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>e</td>
            <td>f</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox" />
            </td>
            <td>g</td>
            <td>h</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
<!-- 先引入再使用 -->
<script src="../js/jquery-3.7.1.min.js"></script>
<script>
  $(function () {
    // 点击thead里的多选框时
    $("#all").click(function () {
      // 获取当前点击元素checked属性值
      console.log($(this).prop("checked"));
      // 让tbody中的多选框选中状态为当前点击元素的checked属性值
      $("tbody input").prop("checked", $(this).prop("checked"));
    });
    // 点击tbody中的多选框
    $("tbody input").click(function () {
      // 获取当前选中的多选框的长度
      console.log($("tbody input:checked").length);
      // 选中的多选框的长度 = tbody多选框的个数 全选
      if ($("tbody input:checked").length == $("tbody input").length) {
        $("#all").prop("checked", true);
      } else {
        $("#all").prop("checked", false);
      }
    });
  });
</script>

雪花酥01
关注
专栏目录
https://mp.csdn.net/
qq_36651720的博客
12-26 5万+
12306爬虫目录介绍一、登录部分处理验证码获取验证码验证验证码账号登录二、获取车票信息部分三、下单部分四、 介绍 一、登录部分 登录12306分析：打开F12， 处理验证码 最新版12306(2018年12月11日的)登录有两种方式进行登录：用户名密码登录和二维码登录，我们这里使用第一种方法登录。 获取验证码 验证验证码 账号登录 二、获取车票信息部分 三、下单部分 四、 ...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
jquery入门（一）
03-26
NULL 博文链接：https://huyizizhen.iteye.com/blog/1134073
jQuery入门简介
weixin_33913377的博客
12-18 78
jquery是最近比较火的一个JavaScript库，从del.icio.us/上相关的收藏可见一斑。 到目前为之jQuery已经发布到1.2.1版本，而在这之前的一个星期他们刚发布1.2版本，看看他的各个版本的 发布时间，不难发现他的飞速发展，每个月都在更新版本；而且不断有人开发出新的 jQuery插件，最近又推出了 jQuery UI库。 jQuery于2006...
Jquery入门
iaiti的专栏
11-03 7772
Jquery入门（一）
JQUERY 常用方法大全
weixin_30340775的博客
09-26 596
Dom： Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", ...
jQuery入门jQuery入门
04-26
jQuery入门,jQuery入门,jQuery入门,jQuery入门
一个用于Codrops模态效果的jQuery插件https://github.com/codrops/ModalWindowEffects-JavaScript开发
05-26
入门使用bower安装：bower install foxythemes-niftymodals或下载最新版本的zip文件jQuery NiftyModals这是Codrops ModalWindowEffects的jQuery插件版本。 入门使用bower安装：bower install foxythemes-niftymodals...
jQuery入门
qq_47560372的博客
08-07 233
jQuery是一个Java Script库，简化JS编程。
jQuery.zip javascript 前端 菜鸟入门
12-07
这个压缩包文件"jQuery.zip"显然是为前端开发初学者准备的，旨在帮助他们快速入门jQuery的世界。 **jQuery-3.2.1.js 和 jQuery-3.2.1.min.js** 这两个文件是jQuery库的两个版本。"jQuery-3.2.1.js"是未压缩的源...
jQuery 入门
ejzhang的专栏
09-05 6197
昨天收到了cssrain的赠书《锋利的jQuery》，看了一个章节，非常不错，这里先推荐一下！今天开始我将博客的重点放在jQuery上了，重新开始学习jQuery，并将重新学到的东西和大家分享，有不对或不妥的地方希望大家能毫无保留的留言指出，大家一起学习，一起进步。至于什么是jQuery，jQuery的优缺点，jQuery和其他javascript库的对比我就不说了，网上已经有很多了，我这
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雪花酥01

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值