2021-11-16

最新推荐文章于 2024-06-01 21:43:54 发布
最新推荐文章于 2024-06-01 21:43:54 发布
阅读量261 收藏
点赞数
分类专栏： 笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_shun66/article/details/121358500
版权

JQuery选择器

一.基础选择器

id选择器

<!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>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <div id="box">id选择器</div>
    <script>
        /* id选择器 */
        $('#box').css('font-size','40px');
        $('#box').css({color:'red',background:'green',padding:'10px'})
    </script>
</body>
</html>

类选择器

<!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>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <h1 class="a">类选择器</h1>

    <script>
        /* 类选择器 */
        $('.a').css('font-size','40px');
        $('.a').css({color:'red',background:'green',padding:'10px'})
    </script>
</body>
</html>

标签选择器

<!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>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <h1 class="a">标签选择器</h1>

    <script>
        /* 类选择器 */
      $('h1').css('color','red');
    </script>
</body>
</html>

并集选择器

<!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>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
	<div id="box">id选择器</div>
    <h1 class="a">并集选择器</h1>
	<h1 class="a">标签选择器</h1>
    <script>
        /* 类选择器 */
     $('#box,.a,h1').css('color','green');
    </script>
</body>
</html>

全局选择器

	$('*').css('background','red');

二. 层级选择器

后代选择器

<!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>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>我是同学1
            <ol>
                <li>我是同学1的儿子1</li>
                <li>我是同学1的儿子2</li>
                <li>我是同学1的儿子3</li>
            </ol>
        </li>
        <li class="a">我是同学2</li>
        <li class="b" style="display: none;">我是同学3</li>
        <li>我是同学4</li>
        <li>我是同学5</li>
    </ul>
 <script>
        /* 后代选择器 */
        /* 选取ul元素里的所有li（后代）元素 */
        $('ul li').css({background:'skyblue',color:'#fff'})
    </script>
</body>
</html>

子选择器

<!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>
    <script src="./jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>我是同学1
            <ol>
                <li>我是同学1的儿子1</li>
                <li>我是同学1的儿子2</li>
                <li>我是同学1的儿子3</li>
            </ol>
        </li>
        <li class="a">我是同学2</li>
        <li class="b" style="display: none;">我是同学3</li>
        <li>我是同学4</li>
        <li>我是同学5</li>
    </ul>
 <script>
       /* 选取parent元素下的child（子）元素 */
     $('ul>li').css({border:'1px solid red',padding:'10px'})
    </script>
</body>
</html>

相邻元素选择器

<!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>
    <script src="./jquery-1.12.4.js"></script>
</head>

<body>
    <ul>
        <li>我是同学1
            <ol>
                <li>我是同学1的儿子1</li>
                <li>我是同学1的儿子2</li>
                <li>我是同学1的儿子3</li>
            </ol>
        </li>
        <li class="a">我是同学2</li>
        <li class="b">我是同学3</li>
        <li>我是同学4</li>
        <li>我是同学5</li>
    </ul>
    <script>
        /* 相邻元素选择器 */
        /* 选取紧邻prev元素之后的next元素(不是一群 是一个) */
        $('.a+li').css('background','red');
    </script>
</body>
</html>

同辈元素选择器

<!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>
        <script src="./jquery-1.12.4.js"></script>
    </head>

    <body>
        <ul>
            <li>我是同学1
                <ol>
                    <li>我是同学1的儿子1</li>
                    <li>我是同学1的儿子2</li>
                    <li>我是同学1的儿子3</li>
                </ol>
            </li>
            <li class="a">我是同学2</li>
            <li class="b">我是同学3</li>
            <li>我是同学4</li>
            <li>我是同学5</li>
        </ul>
        <script>
          /* 同辈元素选择器 */
        /* 选取prev元素之后的所有siblings元素(不是一个 是一群) */
        $('.a~li').css('background','red');
        </script>
    </body>
    </html>

三.过滤选择器

名称描述
:first获取第一个元素
:not(selector)去除所有与给定选择器匹配的元素
:even匹配所有索引值为偶数的元素，从 0 开始计数
:odd匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)匹配所有大于给定索引值的元素，从 0 开始计数
:last获取匹配的最后个元素
:lt(index)匹配所有小于给定索引值的元素，从 0 开始计数
:header匹配如 h1, h2, h3之类的标题元素
:focus匹配获得焦点的元素
:animated匹配获得动画的元素
:visible选取可见元素
:hidden选取所有隐藏的元素
 <style>
        .redClass{
            color:red;
        }
</style>
<body>
   <ul>
        <li>我是新入职的高级程序员0
            <h1>1</h1>
            <h2>2</h2>
            <h3>3</h3>
            <h4>4</h4>
            <h5>5</h5>
            <h6>6</h6>
        </li>
        <li>我是新入职的高级程序员1</li>
        <li class="a">我是新入职的高级程序员2</li>
        <li>我是新入职的高级程序员3</li>
        <li>我是新入职的高级程序员4</li>
    </ul>
    //获得焦点
	<input type="text" name="" id="t1">
    <input type="text" name="" id="t2"><br>
    
    //动画效果
    <button id="btn">点我</button>
    <div style="background-color: red; height: 50px;"></div>
    
	 <h1>我是一个前端程序员</h1>
    <!-- display: none在页面不存在，在dom文档里面依然存在 -->
    <div style="display: none;">隐藏的div</div>
 </body>

 <script>
        /* 选取第一个元素 */
        $('ul li:first').addClass('bg');

        /* 选取最后一个元素 */
        $('ul li:last').addClass('bg');

        /* 选取去除所有与给定选择器匹配的元素 */
        $('ul li:not(.a)').addClass('bg');
        
        /* 选取索引是偶数的所有元素（index从0开始） */
        $('ul li:even').addClass('bg');

        /* 选取索引是奇数的所有元素（index从0开始） */
        $('ul li:odd').addClass('bg');

        /* 选取索引等于index的元素（index从0开始） */
        $('ul li:eq(1)').addClass('bg');

        /* 选取索引大于index的元素（index从0开始）(不包括当前的索引的) */
        $('ul li:gt(1)').addClass('bg');

        /* 选取索引小于index的元素（index从0开始）(不包括当前的索引的) */
        $('ul li:lt(3)').addClass('bg');

        /* 选取所有标题元素，如h1~h6 */
        $('ul li :header').addClass('bg');
	
      //焦点
      $("#t1:focus").css('background','red');
	
	   //动画
	    $("#btn").click(function(){
	        donghua();
	        $("div:animated").css("background","green");
	    })
	  function donghua(){
	    $('div').animate({width:'50%'},'slow');
	    // animate方法是实现动画的效果，
	    // 第一个参数是样式以对象写入
	    // 第二个参数是动画快吗效果 
	    // 第三参数是可以传入一个函数去调用也可以自己调用自己
	    $('div').animate({width:'100%'},'slow',donghua);
	  }
	 
	 // 选取可见元素
     $("h1:visible").css("background","red");
    //  选取所有隐藏的元素
     $("div:hidden").css("background","pink");
     $("div:hidden").show();
    </script>

四.属性选择器

名称描述
$("[属性名称]")匹配包含给定属性的元素
$("[属性名称=‘属性内容’]")匹配给定的属性是某个特定值的元素
$("[属性名称 !=‘属性内容’]")匹配所有不含有指定的属性，或者属性不等于特定值的元素
$("[属性名称 ^=‘属性内容’]")匹配给定的属性是以某些值开始的元素
$("[属性名称 $=‘属性内容’]")匹配给定的属性是以某些值结尾的元素
$("[属性名称 *=‘属性内容’]")匹配给定的属性是以包含某些值的元素
$("[属性]，[属性]")复合属性选择器，需要同时满足多个条件时使用
<style>
    .redClass{
         color:red;
     }
</style>
<body>
 <ul>
        <li class="a">我是程序员1</li>
        <li data-name="zhangsan">我是程序员2</li>
        <li class="b">我是程序员3</li>
        <li class="c">我是程序员4</li>
        <li data-name="lisi">我是程序员5</li>
    </ul>
    <a href="http://www.baidu.cn">百度</a>
    <a href="www.baidu.com">百度一下</a>
 </body>

 <script>
        /* 属性选择器可以根据是否包含某属性来选取元素 */
        $('ul li[data-name]').css('background','red');

        /* 根据属性的值来选取元素 */
        $('ul li[data-name=lisi]').css('background','red');

        /* 不等于属性是某个特定值的元素 */
        $('ul li[data-name!=lisi]').css('background','red');

        /* 以指定值开头的元素 */
        $('a[href^=http]').css('color','red');
        $('a[href^="http"]').css('color','red');

        /* 以指定值结尾的元素 */
        $('a[href$=".com"]').css('color','red');

        /* 包含指定值的元素 */
        /* *通配符 */
        $('a[href*="baidu"]').css('color','red');
        
        /* 添加样式类的 */
        $('a[href*="baidu"]').addClass('redClass')
    </script>

五.JQuery注意事项

转义符
如 $("#id\#a") 这个选择器含有特殊字符 需要转义
转义后: $("#id\#a")

木林森里没有木
关注
专栏目录
2021-11-04
m0_53575762的博客
11-20 7342
一、Linux命令和windows区别？ 1、Linux命令全部严格区分大小写；而windows命令大小写都识别。 2、Linux所有的文件都是没有扩展名的，而windows是文件是有扩展名的。 创建一个新用户 [root@localhost mxh]# useradd mxh2 # 创建一个user [root@localhost mxh]# password mxh2 #12345678 [root@localhost xxx]# gr...
CVE-2021-26084
weixin_51387754的博客
09-23 2317
在 Confluence Server 和 Data Center 的受影响版本中，存在 OGNL 注入漏洞，允许未经身份验证的攻击者在 Confluence Server 或数据中心实例上执行任意代码。受影响的版本分别为 6.13.23 之前的版本、7.4.11 之前的 6.14.0 版本、7.11.6 之前的 7.5.0 版本和 7.12.5 之前的 7.12.0 版本。 #!/usr/bin/env python3 # -*- encoding: utf-8 -*- """ @File :
CVE-2021-22205——Gitlab 远程命令执行漏洞复现
LiBai'S BLOG
11-10 9357
CVE-2021-22205Vuln Impact影响版本环境Fofa语法漏洞利用脚本反弹ShellEXP Vuln Impact An issue has been discovered in GitLab CE/EE affecting all versions starting from 11.9. GitLab was not properly validating image files that were passed to a file parser which resulted in a .
十五、2021-11-16Hadoop集群问题记录
weixin_45702895的博客
11-16 2668
项目场景：运行WordCount单词记数案例 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述：在运行wordcount单词计数程序时报错：错误: 找不到或无法加载主类 org.apache.hadoop.mapreduce.v2.app.MRAppMaster 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Overri
2021-11-16-看书进度
lanSeFangZhou的博客
11-16 2594
flask.pdf 看到58页
Gitlab RCE CVE-2021-22205
不光要学，知识要能说出口
11-04 3883
Gitlab RCE CVE-2021-22205声明代码 声明 本程序仅供于学习交流，请使用者遵守《中华人民共和国网络安全法》，勿将此脚本用于非授权的测试，脚本开发者不负任何连带法律责任。 代码 { "Name": "Gitlab RCE CVE-2021-22205", "Level": "3", "Tags": [ "rce" ], "GobyQuery": "app=gitlab | title=\"gitlab\"
【CVE-2021-3156】——漏洞复现、原理分析以及漏洞修复
IronmanJay
06-01 4125
2021年01月27日，RedHat官方发布了Sudo缓冲区/栈溢出漏洞的风险通告，普通用户可以通过利用此漏洞，而无需进行身份验证，成功获取Root权限。
2021-04-21
qq_56102648的博客
04-21 873
2021-05-05
樊金良的博客
05-05 797
你需要努力，fighting！
HPV7_2021-11-16.ios 惠普增霸卡 系统还原 机房管理
06-15
HPV7_2021-11-16.ios 惠普增霸卡 机房管理中HP电脑的增霸卡功能操作详解 一、软件去除保护 　1).电脑开机后等待进入增霸卡选择系统界面； 　2).按F1帮助，F10进入增霸卡BIOS界面； 　3).光标切换到>>>系统还原...
gmall2020-mock-db-2021-11-14.jar
06-26
gmall2020-mock-db-2021-11-14.jar
2021-11-16-app-1001.log
11-16
2021-11-16-app-1001.log
Eclipse 2021-06 J2EE 最新版,免安装，支持JDK16
07-21
有钱捧个钱场，没钱捧个人场 清华大学的镜像：https://mirrors.tuna.tsinghua.edu.cn/eclipse/technology/epp/downloads/release/2021-06/R/eclipse-jee-2021-06-R-win32-x86_64.zip
Centos7_x64-openssh7.4补丁包rpm包，（最新fix CVE-2021-41617).zip
02-18
1.上传并解压：Centos7-openssh补丁包（最新fix CVE-2021-41617 #2008884).zip 2.到服务器对应的解压目录 执行命令安装 ： rpm -Fvh openssh-* 3.安装完成后执行命令查看修复情况： rpm -qa openssh --changelog | ...
基于vue的社区互助平台--论文.zip
11-09
基于SSM的毕业设计源码
分布式系统中ZooKeeper入门与实战初探
最新发布
11-09
内容概要：本文介绍了ZooKeeper的基本概念，包括数据模型、节点、会话和监听机制等，并详细阐述了ZooKeeper的安装配置流程、基本操作方法以及高级特性的使用技巧。此外，还讨论了ZooKeeper在分布式锁、命名服务、配置管理、队列和组服务等多种应用场景下的实际应用。 适合人群：对于初学者和技术爱好者，尤其是从事分布式系统开发的工程师，希望通过学习和理解ZooKeeper的工作原理及其典型应用场景。 使用场景及目标：旨在帮助读者掌握ZooKeeper的基础理论知识和实际动手能力，能够熟练运用ZooKeeper解决分布式系统中的协同作业问题。 阅读建议：建议读者跟随教程逐步操作，亲身体验各个功能的实际效果，从而加深对知识点的理解，增强解决问题的能力。同时也要关注其局限性和最佳实践建议。
高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明
11-09
高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明，含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，毕业设计、期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。该项目可以直接作为毕设、期末大作业使用，代码都在里面，系统功能完善、界面美观、操作简单、功能齐全、管理便捷，具有很高的实际应用价值，项目都经过严格调试，确保可以运行！ 高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实现源码+详细文档说明高分毕业设计基于XGBoost的O2O优惠券使用预测分析系统设计与实
高分springboot毕设+vue高校学生求职就业平台-Java源码.zip
11-09
本项目是一个基于Spring Boot和Vue的高校学生求职就业平台，旨在为计算机相关专业的学生提供一个实践和学习的平台，同时也为高校学生提供求职就业的相关服务。项目的主要功能包括用户注册登录、职位信息发布、简历投递、在线面试安排以及就业指导等。通过这个平台，学生可以方便地获取最新的就业信息，与企业进行直接的沟通，提升自己的求职能力。 技术实现方面，后端采用Spring Boot框架，利用其快速开发和部署的特点，结合数据库技术实现数据的存储和管理。前端则使用Vue.js，通过其组件化和响应式的特性，构建出用户友好的交互界面。这种前后端分离的开发模式，不仅提高了系统的可维护性和扩展性，也使得开发者能够更加专注于业务逻辑的实现。 此外，项目的开发还充分考虑了安全性，通过身份验证和权限控制等手段，确保用户信息的安全。
TypeError: Cannot convert input [0 2021-11-16 1 2021-09-20 2 2021-05-28 Name: 合同开始日期, dtype: datetime64[ns]] of type <class 'pandas.core.series.Series'> to Timestamp
05-30
s = pd.Series(['2021-11-16', '2021-09-20', '2021-05-28'], name='合同开始日期') # 将第一个元素转换为Timestamp类型 timestamp = pd.to_datetime(s.iloc[0]) ``` 这样就可以得到一个Timestamp类型的变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值