jQuery

已于 2022-05-30 22:06:00 修改
阅读量116 收藏
点赞数
分类专栏： 前端 文章标签： jquery javascript 前端
于 2022-05-29 20:52:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20427967/article/details/125030333
版权

1 寻找标签

1.1 直接寻找

  • ID选择器
  • 样式选择器/类选择器
  • 标签选择器
  • 层级选择器
  • 多选择器
  • 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="txt" class="c1">中国上海
    <h2 id="tnt" class="c2" name="n1">中国北京</h2>
</h1>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // ID选择器
    $("#txt")
    // 样式选择器/类选择器
    $(".c1")
    // 标签选择器
    $("h1")
    // 层级选择器
    $(".c1 .c2")
    $(".c1 h2")
    // 多选择器
    $(".c1,#txt,h2")
    // 属性选择器
    $("h2[name='n1']")
</script>
</body>
</html>

1.2 间接寻找

1.2.1 找兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="txt" class="c1">第一个</h1>
<h1 id="tst" class="c1">第二个</h1>
<h1 id="tnt" class="c1">第三个</h1>
<h1 id="tkt" class="c1">第四个</h1>
<h1 id="ttt" class="c1">第五个</h1>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 找上一个兄弟
    $("#tnt").prev().prev()
    // 找上上一个兄弟，以此类推
    $("#tnt").prev().prev()
    // 找下一个兄弟
    $("#tnt").next()
    // 找下下一个兄弟
    $("#tnt").next().next()
    // 找到所有兄弟
    var a = $("#tnt").siblings().text()
    console.log(a)
</script>
</body>
</html>

1.2.2 找父子孙子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>所有人的顶级亲戚
    <div>c1的父亲
        <div id="c1">第一个
            <div class="c1">儿子1
                <div id="d1">孙子1</div>
                <div>孙子2</div>
            </div>
            <div>儿子2
                <div>孙子3</div>
                <div>孙子4</div>
            </div>
        </div>
        <h1>第二个</h1>
        <h1>第三个</h1>
    </div>
    <div>没人要的孩子
        <h1>第四个</h1>
        <h1>第五个</h1>
    </div>
</div>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 找爹
    $("#c1").parent()
    // 找爷
    $("#c1").parent().parent()
    // 找所有的儿子
    $("#c1").children()
    // 找儿子下面相关条件的孩子
    $("#c1").children(".c1")
    // 找所有的子孙
    $("#c1").find(".c1")
    $("#c1").find("#d1")
</script>
</body>
</html>

 菜单判断切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: #1b6d85;
            cursor: pointer;
        }

        .menus .item a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #1b6d85;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="item">
        <div class="header" onclick="clickMe(this);">北京吧</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>普通区</a>
            <a>高级区</a>
            <a>高级区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="clickMe(this);">家乡吧</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>普通区</a>
            <a>高级区</a>
            <a>高级区</a>
        </div>
    </div>
</div>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 使用self接收标签对象
    function clickMe(self) {
        // 兄弟中有hide标签的状态
        var tag = $(self).next().hasClass("hide");
        if (tag) {
            // 删除兄弟标签中的类属性
            $(self).next().removeClass("hide")
        } else {
            // 添加兄弟标签中的类属性
            $(self).next().addClass("hide")
        }
    }
</script>
</body>
</html>

1.3 查找/新增/删除/更改标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: #1b6d85;
            cursor: pointer;
        }

        .menus .item a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #1b6d85;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="item">
        <div class="header" onclick="clickMe(this);">北京吧</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>普通区</a>
            <a>高级区</a>
            <a>高级区</a>
        </div>
    </div>
    <div class="item">
        <div class="header" onclick="clickMe(this);">家乡吧</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>普通区</a>
            <a>高级区</a>
            <a>高级区</a>
        </div>
    </div>
</div>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 使用self接收标签对象
    function clickMe(self) {
        // 删掉兄弟中有hide标签的
        $(self).next().removeClass("hide");
        // 父亲的所有兄弟标签，追加hide类
        $(self).parent().siblings().find(".content").addClass("hide");
    }
</script>
</body>
</html>

2 加速执行事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>百度</li>
    <li>百度</li>
</ul>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    // 当页面的框架加载完成之后，自动执行，页面内容不管
    $(function () {
        $("li").click(function () {
            // this当前的标签
            $(this).remove();
        });
    })
</script>
</body>
</html>

 

秦朝胖子得加钱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端开发之jQuery
冠军阿狗的博客
04-11 982
前端开发之jQuery一、jquery简介1. jquery是什么？2. 什么是jQuery对象？二、寻找元素(重要的选择器和筛选器)1. 选择器2. 筛选器三、操作元素(属性 CSS 和 文档处理)1. 属性操作2. CSS操作3. 文档处理4. 事件5. 动画效果6. 扩展(插件机制) 一、jquery简介 1. jquery是什么？ jQuery由美国人John Resig创建，至今已吸引...
jQuery学习总结
马赛克的博客
03-16 182
目录 一：jQuery简介 二：选择器和筛选器 三：属性CSS和文档处理 3.1 属性操作 3.2CSS操作 3.3文档处理 3.4事件 3.5动画效果 3.6扩展（插件机制） 四：关于jQuery在企业中的应用 五：其他小案列 一：jQuery简介 1. jQuery是什么 jQuery是由美国人JohnResig创建,至今吸引了来自世界各地的众多Java...
jQuery入门基础
sun_yi_wen的博客
08-07 289
jQuery 是⼀套兼容多浏览器的 javascript 脚本库。 1.在官网中下载jquery 2.在html页面中引入,使用script标签对引入jquery 3.在html页面中使用jquery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js入门</title> <!--引入jquery--&g.
JQuery的引用
zwjl1017的博客
04-01 4016
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery 遍历对象
m0_67458498的博客
03-28 4198
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3668
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jQuery选择器
m0_57774967的博客
06-16 4624
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery在线引用
jiufu_的博客
07-15 5022
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 5163
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 806
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1138
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 646
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 1100
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

秦朝胖子得加钱

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

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

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

打赏作者

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

抵扣说明：

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

余额充值