草庐IT

jquery案例2——点击事件添加样式、鼠标经过事件、鼠标离开事件、一组、多组样式

耶啵奶膘 2025-02-03 原文

一、鼠标点击添加样式

（一）案例描述

鼠标点击li,添加盒子阴影。

（二）案例效果演示

（三）代码：

引入jq文件：

<script src="http://code.jquery.com/jquery-latest.js"></script>

css代码：

<style>
   ul li {
        margin-bottom: 10px;
        padding: 10px;
        width: 400px;
        border-radius: 10px;
    }
</style>

html代码：

<ul>
   <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
   <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
   <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
   <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
   <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
</ul>

jq代码：

 $(function() {
     $('li').click(function() {
         $(this).css({
             'box-shadow': '0 0 5px green'
         });
     })
 });

二、鼠标经过离开事件

（一）案例描述

鼠标经过li,添加盒子阴影，离开恢复原样。

（二）案例效果演示

（三）代码

jq代码：

$(function() {
    $('li').mouseover(function() {
        $(this).css({
            'box-shadow': '0 0 5px green'
        });
    });
    $('li').mouseout(function() {
        $(this).css({
            'box-shadow': ''
        });
    });
});

三、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击事件</title>
    <!-- <script src="./js/jQuery.min.js"></script> -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        ul li {
            margin-bottom: 10px;
            padding: 10px;
            width: 400px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <ul>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
        <li>我们好像在池塘的水底。从一个月亮走向另一个月亮。</li>
    </ul>
    <script>
        // $(function() {
        //     $('li').click(function() {
        //         $(this).css({
        //             'box-shadow': '0 0 5px green'
        //         });
        //     })
        // });
        $(function() {
            $('li').mouseover(function() {
                $(this).css({
                    'box-shadow': '0 0 5px green'
                });
            });
            $('li').mouseout(function() {
                $(this).css({
                    'box-shadow': ''
                });
            });
        });
    </script>
</body>

</html>

四、总结

  • 一定要引入jq库，要不然所有的jq代码都不生效。
    地址(需要下载保存到本地)：https://code.jquery.com/jquery-3.6.0.min.js
    线上地址：
<script src="http://code.jquery.com/jquery-latest.js"></script>
  • 入口函数(可以有多个)：$(function(){ })
  • 鼠标点击事件：click( )
  • 鼠标经过事件：mouseover( )
  • 鼠标离开事件：mouseout( )
  • 一组样式： css(‘color’,‘red’)
  • 多组样式：css({
    ‘color’:‘red’,
    ‘border’:‘1px solid green’
    })
mdashjqueryspanclasstoken

有关jquery案例2——点击事件添加样式、鼠标经过事件、鼠标离开事件、一组、多组样式的更多相关文章

  1. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  2. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

    我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  6. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  7. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  8. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  9. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  10. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

随机推荐