Java复习打卡day42

于 2021-05-12 15:57:18 发布
阅读量70 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51630304/article/details/116711037
版权

Java复习打卡day42

jQuery实例–基本选择器

<!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>Document</title>
</head>
<body>
    <h1 id="hid">jQuery实例--基本选择器</h1>
    <ul id="uid">
        <li>aaa</li>
        <li class="lid">bbb</li>
        <li>ccc</li>
    </ul>
    <h2>ahsdahdasl</h2>
    <ol id="oid">
        <li class="cc">aa</li>
        <li>bb</li>
    </ol>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            // var hid = document.getElementById('hid');
            // hid.style.color = 'red';
            // 等价于上面的语句，获取hid标签并设置css属性
            $('#hid').css('color','red');

            //获取网页中所有的li标签，并为其设置css样式
            // var list = document.getElementsByTagName('li');
            // for(var i in list){
            //     list[i].style.color = 'blue';
            // }
            //下面的代码等效上面的html代码
            $('li').css('color','blue');

            //获取class属性为cc的标签，并为其设置css样式
            $('.cc').css('color','blue');

            //选择器组，统一设置css样式
            $('h1,h2,h3,h4').css('background-color','#ddd');
        });
    </script>
</body>
</html>

jQuery实例–层级选择器

<!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>Document</title>
</head>
<body>
    <h1>jQuery实例--层级选择器</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <ol>
            <li>5</li>
            <li>6</li>
        </ol>
    </ul>
    <li>7</li>
    <li>8</li>
    <li id="li">9</li>
</body>
<!-- 使用jquery时千万不要忘记导入jquery的js包 -->
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    $(function(){
        //获取ul标签的所有子li标签(包含子节点)，并设置css样式
        // $('ul li').css('color','red');

        //获取ul标签的所有直接li子标签（不包含子节点），并设置css样式
        // $('ul>li').css('color','red');

        //获取ul标签的紧邻的下一个兄弟li标签，并设置css样式
        // $('ul+li').css('color','red');

        //获取ul标签后面所有的li兄弟标签，并设置css样式
        $('ul~li').css('color','red');
    });
</script>
</html>

jQuery实例–基本筛选器

<!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>Document</title>
</head>
<body>
    <h1>jQuery实例--基本筛选器</h1>
    <ul>
        <li>aaaaaa</li>
        <li class="cc">bbbbbb</li>
        <li>cccccc</li>
        <li class="cc">dddddd</li>
        <li>eeeeee</li>
    </ul>
    <ol>
        <li>ffffff</li>
    </ol>

    <script src="./jquery-3.5.0.min.js"></script>

    <script>
        $(function(){
        //获取ul下面的li标签并设置css样式
        // $('ul li').css('color','red');

        //获取ul下第一个li标签子节点，并设置css样式
        // $('ul li:first').css('color','red');

        //获取ul下第一个li标签子节点，并设置css样式
        // $('ul li:last').css('color','red');

        //获取偶数被索引号，并设置css样式
        // $('ul li:even').css('color','red');//0,2,4

        //获取奇数倍索引号，并设置css样式
        // $('ul li:odd').css('color','red');//1,3

        //获取class属性值为cc的所有li标签，并设置css样式
        // $('ul li.cc').css('color','red');

        //获取所有class属性值不是cc的li标签，并设置css样式
        // $('ul li:not(.cc)').css('color','red');

        //获取索引位置为2的li标签，并设置css样式
        // $('ul li:eq(2)').css('color','red');

        //获取前两个li标签，并设置css样式
        // $('ul li:lt(2)').css('color','red');

        //获取所有的li标签，并添加鼠标移入和移出事件
        $('ul li').mouseover(function(){
            $(this).animate({paddingLeft:'+=20'},80);
        }).mouseout(function(){
            $(this).animate({paddingLeft:'-=20'},50);
        });
    });
    </script>
</body>
</html>

jQuery实例–内容选择器

<!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>Document</title>
</head>
<body>
    <h1>jQuery实例--内容选择器</h1>
    <div>John</div>
    <div>John Li</div>
    <div>Smith Tang</div>
    <div>Mary Li</div>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            $("div:contains('John')").css('color','red');
        });
    </script>
</body>
</html>

jQuery实例–属性选择器

<!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>Document</title>
</head>
<body>
    <h1 id="hid">jQuery实例--属性选择器</h1>
    <form action="#">
        姓名：<input type="text" name="name" value="zhangsan "><br><br>
        年龄：<input type="text" name="age"><br><br>
        邮箱：<input type="text" name="email"><br><br>
        电话：<input type="text" name="phone"><br><br>
        地址：<input type="text" name="address">
    </form>
    <script src="./jquery-3.5.0.min.js"></script>
    <script>
        //jquery入口
        $(function(){
            //获取含有value属性的input标签
            // $('input[value]').css('border','1px solid red');

            //获取name属性值为phone的input标签，并设置css样式
            // $('input[name = "phone"]').css('border','1px solid red');

            //获取name属性不为phone的input标签，并设置css样式
            // $('input[name != "phone"]').css('border','1px solid red');

            //获取name属性值是以a开头的input标签，并设置css样式
            // $('input[name ^= "a"]').css('border','1px solid red');

            //获取name属性值是以e结尾的input标签，并设置css样式
            // $('input[name $= "e"]').css('border','1px solid red');

            //获取name属性中包含m字母的input标签，并设置css样式
            $('input[name *= "a"]').css('border','1px solid red');
            

        });
    </script>
</body>
</html>

jQuery实例–子元素选择器

<!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>Document</title>
</head>
<body>
    <h1>jQuery实例--子元素选择器</h1>
    <ul>
        <li>aaaaaa</li>
        <li>bbbbbb</li>
        <li>cccccc</li>
        <li>dddddd</li>
    </ul>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    $(function(){
        //获取每个ul标签的第一个子标签
        // $('ul li:first-child').css('color','red');

        //获取每个ul标签的最后一个子标签
        // $('ul li:last-child').css('color','red');

        //获取每个ul标签的第三个子标签
        $('ul li:nth-child(3)').css('color','red');

    });
</script>
</html>

jQuery实例–表单选择器

<!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>Document</title>
</head>
<body>
    <h1>jQuery实例--表单中选择器</h1>
    <ul>
        <li><input type="checkbox" name="likes[]" value="1"> aaaaaa</li>
        <li><input type="checkbox" name="likes[]" value="2"> bbbbbb</li>
        <li><input type="checkbox" name="likes[]" value="3"> cccccc</li>
        <li><input type="checkbox" name="likes[]" value="4"> dddddd</li>
        <li><input type="checkbox" name="likes[]" value="5"> eeeeee</li>
    </ul>
    <button onclick="doFun()">获取</button>
</body>
<script src="./jquery-3.5.0.min.js"></script>
<script>
    //jquery入口
    function doFun(){
        //获取多选框中选中的元素
        // var list = $('input[type = "checkbox"]:checked');
        var list = $(':checkbox:checked');
        alert(list.length);

        //获取li节点元素（条件是里面的input标签是被选中的），并设置css样式
        $('li:has(input:checked)').css('color','red');
    }
</script>
</html>
weixin_51630304
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java复习打卡day13
weixin_51630304的博客
03-14 123
Java复习打卡day13九大常用类库ObjectsSystemDateCalendarStringDateFormatBigDecimalMathArrays 九大常用类库 Objects System Date Calendar String DateFormat BigDecimal Math Arrays
Java复习打卡day11
weixin_51630304的博客
03-11 128
Java复习打卡day11异常处理try catchthrowsthrow快递柜管理编程思想views 异常处理 try catch throws throw 快递柜管理 编程思想 views
Java复习打卡day21
weixin_51630304的博客
03-23 123
Java复习打卡day21线程池定长线程池缓存线程池单线程线程池周期性定长线程池Lambda表达式网络编程概述 线程池 线程池概述 为什么会出现线程池的概念？ 其实现场呢个执行任务的阶段分为四个步骤： 1.创建线程 2.创建任务 3.执行任务 4.结束线程 而，在这四个步骤中，真正起作用的是中间的两个，但是他们所消耗的时间却只占了总时间的5%， 所以有大量的时间被创建线程和结束线程占用了，当线程的数量增多时，这样的无用时间浪费只会降低程序的性能 所以就有了线程池的概念。
Java复习打卡day6
weixin_51630304的博客
03-03 112
Java复习打卡day6几个知识点如何退出多重循环图形打印判断用户输入类型数组数组的定义常见定义格式不常见定义格式数组的常见问题求数组的最大值和最小值冒泡法排序 几个知识点 如何退出多重循环 //案例1 class Demo{ public static void main(String[] args){ for(int i = 0; i<10;i++){ for(int j = 0; j<10;j++){ System.out.println(666); if(j
Java复习打卡day23
weixin_51630304的博客
03-26 132
Java复习打卡day23XML 语法XML解析方式XML解析XPATH解析JSON介绍JSON语法Gson解析Fastjson解析枚举、注解、反射、内省的前置导学 XML 语法 XML语法 XML的语法非常简单 下面我将用一段代码进行说明。 <?xml version = "1.0" encoding = "UTF-8"?> //文档声明 //下面就是标记了 <books>//根目录 <book id = "1001" gr
Java复习打卡day18
weixin_51630304的博客
03-19 129
Java复习打卡day18flush管道刷新转换流打印流和BufferedReader收集日常日志序列化和反序列化try-with-resource flush管道刷新 import java.io.FileWriter; import java.io.IOException; public class Demo { public static void main(String[] args) throws IOException { FileWriter file = new
Java复习打卡day2
weixin_51630304的博客
02-26 274
这里写目录标题安装JDK1.安装JDK2.配置环境安装eclipse第一个java program定时关机程序 安装JDK 1.安装JDK 先到官网找到安装包下载JDK11的安装包（网址：链接: https://www.oracle.com/java/technologies/javase-jdk11-downloads.html.） 下载完成之后，一直next即可安装完成JDK。 2.配置环境 鼠标右键我的电脑，点击属性进入 双击高级系统设置进入 再双击环境变量进入 再在系统变量工具栏中找到Path
Java复习打卡day24
weixin_51630304的博客
03-27 125
Java复习打卡day24枚举类型概述枚举定义枚举的常用方法枚举接口枚举注意事项注解概述内置注解自定义注解反射概述类加载器与资源目录 枚举类型概述 枚举简介 枚举类型是在JDK1.5之后引进的，在此之前定义一个常量都是：public static final...很难管理。 枚举可以将一些相关的常量放在一起管理，同时它还提供了比常量更多的方法。 枚举类型可以包含很多的常量，例如： 一年的四级： 春、夏、秋、冬； 问题的程度： 轻、重、缓、急 速度的等
Java学习打卡Day18
12-22
Java中的接口是面向对象编程的重要组成部分，它定义了一组方法签名，不包含任何具体实现。在Java学习中，了解接口的多态性及其应用是非常关键的。多态性允许我们用一个父类型的引用来指向子类型对象，这样就可以在不...
小白的20天Java学习打卡day1
12-22
【小白的20天Java学习打卡day1】 学习Java编程的第一步通常是理解基本概念，包括软件的本质、操作系统、编程语言的作用以及如何在Windows系统中进行基础操作。在本篇学习笔记中，我们将探讨这些关键点。 1. **什么...
员工打卡系统_java_java系统_打卡_
10-03
员工打卡系统是一个基于Java语言开发的应用程序，主要用于管理和记录企业员工的上下班打卡情况。在IT行业中，此类系统是企业日常运营的重要组成部分，因为它能够准确地跟踪员工的工作时间，提高人力资源管理效率。...
Java打卡系统源码.zip
05-17
Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 Java打卡系统源码 ...
小白的20天Java学习打卡day2
12-22
太原理工大学机器人团队20天学习打卡day2 学习内容：Java 学习网站：b站 day02 今天的内容比昨天多很多，也更难理解，希望能坚持下去 1、打开DOS命令窗口，执行java HelloWorld,执行原理 java.exe命令会启动JVM JVM...
深度学习数据集：x射线下的人体骨骼关节图像语义分割
08-16
深度学习数据集：x射线下的人体骨骼关节图像语义分割 类别个数（3）：【具体类别参考json类别文件】 数据分为分为训练集和验证集、测试集： 训练集图像数量：1100 张左右的图片。验证集图像数量：100 张左右图片
嵌入式单片机安装包整理合集1
08-16
嵌入式单片机安装包整理合集1
基于Android时间管理系统APP设计与实现.docx
最新发布
08-16
基于Android时间管理系统APP设计与实现.docx
基于springboot的在线考试交流网站 源码+数据库（毕业设计）
08-16
基于Vue.js和SpringBoot的在线考试交流网站是一个功能丰富的平台，它为用户提供了一个便捷的在线学习和交流环境。该网站分为用户前台和管理后台两个部分，以满足不同角色的需求。管理员可以利用后台系统进行论坛管理、公告信息发布、学习视频上传、试题试卷编辑和考试管理等操作，从而确保网站内容的质量和更新。普通用户则可以在前台参与论坛讨论、查看公告、学习视频、进行在线考试等活动，实现自我提升和知识交流。整个网站的设计注重用户体验和操作便捷性，为用户提供了一个高效、易用的在线学习平台。 录屏：https://www.bilibili.com/video/BV1UH4y1g7mQ 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
java员工打卡签到代码
06-01
Java员工打卡签到代码的实现方式有很多种，以下是其中一种可能的实现方式： ```java import java.util.Date; public class Employee { private String name; private Date lastSignIn; public Employee(String name) { this.name = name; } public void signIn() { Date now = new Date(); System.out.println(name + "签到成功，时间：" + now); lastSignIn = now; } public void signOut() { Date now = new Date(); System.out.println(name + "签退成功，时间：" + now); } public void checkInStatus() { if (lastSignIn == null) { System.out.println(name + "尚未签到"); } else { System.out.println(name + "上次签到时间：" + lastSignIn); } } } ``` 上面的代码定义了一个`Employee`类，其中包含了员工的姓名和上次签到时间。类中有三个方法：`signIn()`、`signOut()`和`checkInStatus()`。`signIn()`方法表示员工签到，会打印出员工姓名和当前时间，并将当前时间记录为上次签到时间；`signOut()`方法表示员工签退，会打印出员工姓名和当前时间；`checkInStatus()`方法表示查询员工的签到状态，会打印出员工姓名和上次签到时间（如果已经签到过），否则会提示尚未签到。 如果要使用这段代码，可以在其他类中创建`Employee`对象，并调用其中的方法来完成打卡签到功能。例如： ```java public class Main { public static void main(String[] args) { Employee emp1 = new Employee("张三"); emp1.signIn(); emp1.checkInStatus(); emp1.signOut(); } } ``` 这段代码创建了一个名为`emp1`的`Employee`对象，姓名为“张三”。接着调用了`signIn()`方法进行签到，`checkInStatus()`方法查询签到状态，最后调用了`signOut()`方法进行签退。运行这段代码后，会打印出以下结果： ``` 张三签到成功，时间：Thu Jul 22 14:47:23 CST 2021 张三上次签到时间：Thu Jul 22 14:47:23 CST 2021 张三签退成功，时间：Thu Jul 22 14:47:28 CST 2021 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值