使用jQuery操作DOM与事件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44000238/article/details/106588300

简介

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

简单的点击事件

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

    <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() - 设置或返回表单字段的值

$("#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">JQuery</a></p>
<p>名称: <input type="text" id="test" value="JQuery"></p>
<button>显示值</button>