jQuery基础详解汇总（附源码）

最新推荐文章于 2024-03-19 05:54:06 发布
最新推荐文章于 2024-03-19 05:54:06 发布
阅读量412 收藏 1
点赞数
分类专栏： Web 文章标签： javascript css html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43003203/article/details/118414056
版权

本文章根据菜鸟教程官网编写：有利于小白上手体验。

  1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <style>
        /*js引用css时，css得写为内嵌样式*/
        .cssButton16-div {
            font-weight: bold;
            color: pink;
        }
    </style>
</head>
<body>
<button class="button1">隐藏</button>
<button class="button2">显示</button>
<button class="button3">显示/隐藏</button>
<div class="div-p">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="p4">4</p>
    <p class="p5">5</p>
    <p class="p5">6</p>
    <div id="test1">
        <p>
            test1_P
        </p>
    </div>
    <div class="test2">
        <p>
            test2_P
        </p>
    </div>
</div>

<input type="text">
<br><br>
<button class="button4">淡入</button>
<button class="button5">淡出</button>
<button class="button6">淡入/淡出</button>

<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

<div id="flip1">点我拉起面板</div>
<div id="panel1">Hello world!</div>

<div id="flip2">点我拉起/滑下面板</div>
<div id="panel2">Hello world!</div>

<button class="button7">点我左滑动</button>
<div class="button7-div"></div>

<button class="button8">点我滑动放大</button>
<div class="button8-div"></div>

<button class="button9">每点一次相对滑动放大一次</button>
<div class="button9-div"></div>

<br><br><br>

<button class="button10">滑动收放模块</button>
<div class="button10-div"></div>

<button class="button11">同时操作多个元素缩放</button>
<div class="button11-div"></div>

<button class="button12">操作多个元素</button>
<div class="button12-div">1</div>
<br><br><br>

<button id="start">开始</button>
<button id="stop">暂停</button>
<button id="stop2">停止</button>
<button id="stop3">暂停动画，但完成动作</button>
<div class="button-stop">暂停动画</div>
<br><br><br><br>
<p id="test2">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>

<p><a id="runoob" href="www.baidu.com">名称链接: </a><input type="text" id="test3" value="请输入您的用户名"></p>
<button class="button13">显示修改 href 和 title</button>

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="btn3">尾部添加列表项</button>
<button id="btn4">头部添加列表项</button>
<br>
<p class="charuText">前后插入文本域</p>
<br>
<button id="btn5">之前插入</button>
<button id="btn6">之后插入</button>

<p>这是一个段落。</p>
<p class="italic">
    <i>
        这是另外一个段落。
    </i>
</p>
<button class="button14">
    移除所有 class="italic" 的元素。
</button>
<br><br>
<div class="button15-div">
    清空div元素清空div元素清空div元素
</div>
<br>
<button class="button15">
    清空div元素
</button>
<br><br>

<div id="button16-div">
    这是一些重要的文本!  为元素添加 class
</div>
<br>
<button id="button16">
    为元素添加 css
</button>




</body>
</html>
  1. index.css
.div-p {
    display: flex;
    margin-left: 1rem;
}

.div-p p {
    margin-left: 1rem
}

#test1, #test2 {
    margin-left: 1rem
}

#panel, #flip, #panel1, #flip1, #panel2, #flip2 {
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
    border-radius: 0.3rem;
    margin-top: 0.1rem;
}

#panel, #panel2 {
    padding: 1rem;
    display: none;
}

#panel1 {
    padding: 1rem;
}

.button7-div,
.button8-div,
.button9-div,
.button10-div,
.button11-div,
.button12-div {
    width: 2rem;
    height: 2rem;
    background-color: pink;
    position: absolute;
}

.button8-div, .button11-div {
    margin-left: 7rem;
}

.button9-div, .button12-div {
    margin-left: 16rem;
}

.button-stop {
    background: pink;
    height: 4rem;
    width: 4rem;
    position: absolute;
}

3.index.js

$(function () {
    /**
     *功能描述: 鼠标点击隐藏元素和显示元素
     *@author ZYH
     *@since 2021/7/1 17:04
     */
    $(".button1").click(function () {
        //p标签元素消失
        // $("p").hide();
        // $("#test1").hide();
        $("p").hide();
        // 选取元素后点击次元素后消
        // $(this).hide();
        // 显示元素
        // $(".p3").show();
    });
    $(".button2").click(function () {
        $("p").show();
    });

    $(".button3").click(function () {
        $("p").toggle();
    });
    /**
     *功能描述: 鼠标
     *@author ZYH
     *@since 2021/7/1 16:48
     */
    $(".p1").mouseenter(function () {
        alert('鼠标移动');
    });
    /**
     *功能描述: 鼠标悬停
     *@author ZYH
     *@since 2021/7/1 16:49
     */
    $(".p2").hover(
        function () {
            alert("你进入了 p1!");
        },
        function () {
            alert("拜拜! 现在你离开了 p1!");
        }
    );
    /**
     *功能描述: 鼠标离开
     *@author ZYH
     *@since 2021/7/1 16:48
     */
    $(".p3").mouseleave(function () {
        alert('鼠标离开');
    });

    /**
     *功能描述: 鼠标获取焦点
     *@author ZYH
     *@since 2021/7/1 16:49
     */
    $("input").focus(function () {
        $(this).css("background-color", "#cccccc");
    });
    /**
     *功能描述:鼠标失去焦点
     *@author ZYH
     *@since 2021/7/1 16:50
     */
    $("input").blur(function () {
        $(this).css("background-color", "#ffffff");
    });
    /**
     *功能描述: 点击按钮淡入
     *@author ZYH
     *@since 2021/7/1 17:54
     */
    $(".button4").click(function () {
        $(".p4").fadeIn();
        $(".p5").fadeIn("slow");
        $(".p6").fadeIn(3000);
    });
    /**
     *功能描述:鼠标按钮淡出
     *@author ZYH
     *@since 2021/7/1 17:58
     */
    $(".button5").click(function () {
        $(".p1").fadeOut();
        $(".p2").fadeOut("slow");
        $(".p3").fadeOut(3000);
    });
    /**
     *功能描述: 鼠标点击淡入淡出
     *@author ZYH
     *@since 2021/7/1 18:00
     */
    $(".button6").click(function () {
        $(".p1").fadeToggle();
        $(".p2").fadeToggle("slow");
        $(".p3").fadeToggle(3000);
    });
    /**
     *功能描述:滑出模块
     *@author ZYH
     *@since 2021/7/2 8:51
     */
    $("#flip").click(function () {
        $("#panel").slideDown("slow");
    });
    /**
     *功能描述: 滑入模块
     *@author ZYH
     *@since 2021/7/2 8:53
     */
    $("#flip1").click(function () {
        $("#panel1").slideUp("slow");
    });

    /**
     *功能描述: 滑入滑出
     *@author ZYH
     *@since 2021/7/2 8:53
     */
    $("#flip2").click(function () {
        $("#panel2").slideToggle("slow");
    });

    /**
     *功能描述: 点击按钮左滑
     *@author ZYH
     *@since 2021/7/2 9:16
     */
    $(".button7").click(function () {
        $(".button7-div").animate({
            left: "2rem"
        });
    });

    /**
     *功能描述:鼠标点击滑动放大
     *@author ZYH
     *@since 2021/7/2 9:21
     */
    $(".button8").click(function () {
        $(".button8-div").animate({
            left: '3rem',
            //淡化颜色的百分比
            opacity: '0.5',
            height: '3rem',
            width: '3rem'
        });
    });
    /**
     *功能描述:
     *@author ZYH
     *@since 2021/7/2 9:51
     */
    $(".button9").click(function () {
        $(".button9-div").animate({
            left: '1rem',
            height: '+=1rem',
            width: '+=1rem'
        });
    });
    /**
     *功能描述: 滑动收放模块
     *@author ZYH
     *@since 2021/7/2 9:54
     */
    $(".button10").click(function () {
        $(".button10-div").animate({
            height: 'toggle'
        });
    });
    /**
     *功能描述: 同时操作多个元素
     *@author ZYH
     *@since 2021/7/2 9:59
     */
    $(".button11").click(function () {
        var div = $(".button11-div");
        //拉长
        div.animate({
            height: '3rem', opacity: '0.4'
        }, "slow");
        //变宽
        div.animate({
            width: '3rem', opacity: '0.8'
        }, "slow");
        //变矮
        div.animate({
            height: '1rem', opacity: '0.4'
        }, "slow");
        //变窄
        div.animate({
            width: '1rem', opacity: '0.8'
        }, "slow");
    });
    $(".button12").click(function () {
        var button12_div = $(".button12-div")
        button12_div.animate({
            width: '3rem', height: '3rem'
        }, "slow")
        button12_div.animate({
            fontSize: "2rem"
        }, "slow");
    });
    /**
     *功能描述:
     *@author ZYH
     *@since 2021/7/2 10:31
     */
    $("#start").click(function () {
        $(".button-stop").animate({left: '5rem'}, 5000).css("color", "red");
        $(".button-stop").animate({fontSize: '4em'}, 5000);
    });

    $("#stop").click(function () {
        $(".button-stop").stop();
    });

    $("#stop2").click(function () {
        $(".button-stop").stop(true);
    });

    $("#stop3").click(function () {
        $(".button-stop").stop(true, true);
    });
    /**
     *功能描述: 点击按钮显示设置DOM对象
     *@author ZYH
     *@since 2021/7/2 11:09
     */
    $("#btn1").click(function () {
        alert("Text: " + $("#test2").text("text"));
    });
    $("#btn2").click(function () {
        alert("HTML: " + $("#test2").html("html"));
    });
    /**
     *功能描述:显示设置DOM对象的值
     *@author ZYH
     *@since 2021/7/2 11:12
     */
    $(".button13").click(function () {
        alert("您输入的内容: " + $("#test3").val("val"));
        $("#runoob").attr({
            "href": "http://www.runoob.com/jquery",
            "title": "jQuery 教程"
        });
        // 通过修改的 title 值来修改链接名称
        title = $("#runoob").attr('title');
        $("#runoob").html(title);
    });

    /**
     *功能描述:尾部添加元素
     *@author ZYH
     *@since 2021/7/2 11:15
     */
    $("#btn3").click(function () {
        $("ol").append("<li>追加列表项</li>");
    });
    $("#btn5").click(function () {
        $(".charuText").before("<b>之前</b>");
    });

    /**
     *功能描述: 头部添加元素
     *@author ZYH
     *@since 2021/7/2 11:35
     */
    $("#btn4").click(function () {
        $("ol").prepend("<li>在开头添加列表项</li>");
    });
    $("#btn6").click(function () {
        $(".charuText").after("<i>之后</i>");
    });

    /**
     *功能描述: 删除元素
     *@author ZYH
     *@since 2021/7/2 11:33
     */
    $(".button14").click(function () {
        $(".italic").remove();
    });
    $(".button15").click(function () {
        $(".button15-div").empty();
    });

    /**
     *功能描述:为选中的元素添加css
     *@author ZYH
     *@since 2021/7/2 11:55
     *
     *addClass为添加样式
     *removeClass为删除样式
     * toggleClass为互相切换样式
     */
    $("#button16").click(function () {
        $("#button16-div").addClass("cssButton16-div");
    });

});
广而不精zhu小白
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）
码农研究僧的博客
10-01 2万+
目录前言1. 学习路线2. 学习方法 前言 这篇文章主要总结我之前所学过的框架以及学习路线 从实打实的零基础到框架再到项目 之后实习工作 也在这篇博客中记录我的学习笔记 以及在笔记中遇到的配置安装、代码bug等错误 都从零开始摸索并且记录了下来 后期也会一直实时更新 一键三连防丢失 直奔主题 1. 学习路线 作为刚开始的程序员小白，你可能想成为一名大佬，但你连基本的程序、命令等都不懂，不用慌，学就完事了，大家都是这么过来的 以下文章链接都是实打实的记录学术博客 你可以通过我的文章进行巩固学习 在每篇博客中还
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
jquery详解
qq_45240472的博客
04-09 3113
1、jQuery概述 1.1、JavaScript库 仓库:可以把很多东西放到这个仓库里面。 找东西只需要到仓库里面查找到就可以了。 JavaScript库:即library ,是-个封装好的特定的集合(方法和函数)。从封装-大堆函数的角度理解库,就是在这个库中,卦装了很多预先定义好的函数在面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为
jQuery详解
m0_52634705的博客
05-24 638
jQuery一、概述二、基本使用三、jquery选择器四、样式操作五、操作元素类名六、属性操作七、内容文本操作八、元素操作九、事件绑定十、获取元素的尺寸、位置 一、概述 1、什么是jQuery jQuery是一个快速、小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作、事件处理、动画和Ajax等操作变得更加简单。结合了多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。 2、jQuery 优点 轻量级，核心文件才十几k
JQuery详解
weixin_45845391的博客
12-22 4212
JQuery能做什么 访问和操作DOM元素 控制页面样式 对页面时间进行处理 扩展新的JQuery插件 与Ajax技术完美结合 JQuery能做到的JavaScript也都能做到，但使用JQuery能大幅度提高开发效率其实，JQuery和JavaScript之间的关系，可以理解为“成语” 和“白话文”之间的关系。成语是对白话文的高度压缩，而JQuery也是对JavaScript的高度压缩库进入JQuery官网：http://jQuery.comjQuery作为一个单独存在的js文件，并不会与其他的js文
JQuery 详解
H445584704的博客
03-04 492
一、概念 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 二、快速入门 简单来说，JQuery就是一个JavaScript框架，简称
Android第三方库收藏汇总，驱动核心源码详解和Binder超系统学习资源
m0_66684871的博客
03-04 801
这是使用CoordinatorLayout打造 打造炫酷效果的例子 https://github.com/gdutxiaoxu/CoordinatorLayoutExample LiveLayout 类似于映客，快手，等直播APP布局，直播刷礼物特效，定时清除礼物，计时器，圆形头像，横向listview等！！！ https://github.com/Qiang3570/LiveLayout TextViewExpandableAnimation Expandable TextView With Smooth
net财务管理系统完整源码.zip
09-29
《NET财务管理系统完整源码详解》 在信息技术日益发展的今天，财务管理系统的开发与应用已经成为企业运营的重要组成部分。本文将深入探讨基于.NET平台的财务管理系统，通过解析提供的"NET财务管理系统完整源码.zip...
HTML基础知识汇总
qq_43544490的博客
08-03 3405
------------------------------------ ????操作小技巧 ❗PS操作小技巧????????❕????????????✅ 1、视图–标尺：可测量像素尺寸感叹号 2、吸管工具可吸取颜色值 3、左侧移动工具–点击侧边标尺，按住不放拖至图片边缘-----方便测量 ❗vscode快捷码字 ul>li*4{$} 得到如下 <ul> <li>1</li> <li>2</li> <li>
jquery基础教程第四版+附带源码
03-17
jquery的入门读物，详细介绍jquery的完美书籍，其中的源码，可以让你随心所欲的利用，极大提升您的知识面。
jQuery基础教程源码
05-26
该资源为《jQuery基础教程》配套书籍所有实例的源代码源码。
jQuery基础教程源码 Learning jquery code
12-27
jQuery基础教程源码 Learning jquery code
基础级的 jQuery 教程实例源代码
05-12
内容索引:脚本资源,jQuery,jQuery,实例教程　　都是挺基础的 jQuery 初级代码实例，书中的例子，很完整，虽然有些过于简单，但必竟很好懂，想实现Ajax交互式前端设计的朋友可要好好参考一下哦，这些教程源码都是来自官方的，比较通用和标准的代码。实例的内容包括异步加载、层操作、数据载入、点击互动等功能。
响应式网页开发基础教程（jQuery+Bootstrap）-源代码.rar
07-12
响应式网页开发基础教程（jQuery+Bootstrap）-源代码.rar
jQuery(详解)
wenkezhuangyuan的博客
08-20 1621
1.简介 jquery是js的框架，利用了选择器(借鉴了css的选择器)查找要操作的dom节点(dom对象)，将dom节点对象封装成jquery对象，调用jquery提供的方法或者属性操作dom节点。 目的: 1.简化代码 2.解决了兼容性问题 2.编程步骤 1.引入jquery.js文件<script src=""></script> 2.使用juqery提供的选择器查找节点，var $obj = $("#id") 3.调用jquery提供的属性或方法，操作该节点
jQuery 详解（上）+代码 （全）
王佳龙的博客
07-30 483
目录 jQuery 教程                                    jQuery 效果                                          jQuery - HTML  jQuery 简介                                   jQuery- 隐藏和显示                           ...
JQuery_超详细重点详解(二)
每天进步一点点
07-10 255
目录 一.JQ-层级选择器 二.JQ-属性选择器（通配符） 三.JQ-基本过滤选择器【重点】 四.JQ-表单属性选择器 五.​​​​​​​JQ-操作CSS样式 ​​​​​​​ 一.JQ-层级选择器 父子： AB获得A元素内部的所有的B元素。（祖孙）--后代 A>B获得A元素下面的所有B子元素。（父子） 兄弟： A+B 获得A元素同级下一个B元素（兄弟） A~B 获得A元素之后的所有B元素（兄弟） <script src="../...
JQuery简介与解析
woaini886353的博客
05-10 430
1 JQuery简介 1、JQuery简介 jQuery团队现在主要包括核心库、UI和插件等。 jQuery凭借着简洁的语法和跨平台的兼容性，极大地简化了javascript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。 2、jQuery的优势 jQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 轻量级 jQuery非常轻巧，采用Dean Edwards编写的Packer（http://dean.edwards.name/packe
jQuery 基础知识总结（超级详细），最详细的解释小白也能听懂
最新发布
03-19 951
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值