不得不学的JQuery第一篇

Posted 2020-03-15updated 2020-04-23Words 583Reading time 4m

简介

虽说JQuery已经过时了，但是我踏进实习生涯的第一天，我接手的项目是08年的遗留的遗留项目，此时此刻你们是不会会说，为什么08年的项目还跑的起来？是的，我也很疑惑，但是不得不说公司的技术栈真的很牛逼，080年的项目嵌套了每年最新的技术，但是毕竟08年的还是php页面的时候，前端的点击事件，基本都是后端在写的，所以08年的时候就用到了以前最火的jquery，我为了融入他们的氛围，我不得不用jquery写点击事件，下面，让我们直接进入主题吧！

简单的点击事件

jquery点击事件是用.click来作为点击事件的，具体如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
    $().ready(function () {
        $("#show").click(function () {
            $("p").show();
        })
    })
    $().ready(function () {
        $("#hide").click(function () {
            $("P").hide();
        })
    })
</script>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>

通过响应click点击让

标签显示隐藏

JQuery操作DOM

不得不说的jQuery，操作DOM真的很简单
DOM = Document Object Model（文档对象模型）

三个简单实用的用于 DOM 操作的 jQuery 方法：

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    $("#btn1").click(function(){
        alert("Text: " + $("#test").text());    /* 获取<P>标签里面文本的值*/
      });

    $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());    /* 获取<P>标签里面<b>标签的值和文本*/
    });
    <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>

    $("button").click(function(){
        alert($("#runoob").attr("href"));       /* 获取<a>标签里面href标签里面的链接*/
    });

    $("button").click(function(){
        alert("值为: " + $("#test").val());   /* 获取<input>标签里面value里面的值*/
    });
    <p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
    <p>名称: <input type="text" id="test" value="菜鸟教程"></p>
    <button>显示值</button>