当前位置: 首页 > news >正文

1、jQuery介绍、css()、选择器、事件、动画

一、jQuery介绍?

1、什么是jQuery?

  • 是一个JavaScript函数库

2、jQuery特点

  • 写的少,做的多

3、jQuery的安装

  • 直接下载引入
<script src="jquery-1.10.2.min.js"></script>
  • 通过cdn引入
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 

4、jQuery()函数===$()函数

获取DOM函数

//js获取元素
var textP = document.getElementById('text')
console.log($1('text'))//DOM对象
console.log($1('text').innerText)//文本内容
// jQuery获取的元素
console.log(jQuery('#text')) //jQuery对象
console.log($('#text'))//可以简写
console.log(jQuery('#text').innerText) //undefined

js入口函数

window.onload = function () {console.log('javascript 的入口函数1')
}
window.onload = function () {console.log('javascript 的入口函数2')//第二个会覆盖第一个
}
jQuery(document).ready(function () {console.log('jQuery的入口函数1')
})
jQuery(document).ready(function () {console.log('jQuery的入口函数2')//jQuery不会发生覆盖
})
$(function () {console.log('jQuery的入口函数3')//jQuery可以简写
})

image-20240301095813015

5、js入口函数与jQuery入口函数的区别

  • js的入口函数多了会发生覆盖,jQuery是可以重复的
  • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行
  • js的入口函数不能简写,jquery的入口函数可以简写

二、jQuery的css方法

1、通过css()获取选中元素的样式

//通过#('#box')获取id为box的元素  css()获取当前元素的的宽度
console.log($('#box').css('width'))//400px   
console.log($('#box').css('height'))//400px  
//通过css()返回的颜色的属性值是reg格式的
console.log($('#box').css("background-color"))//rgb(255, 255, 255)
console.log($('#box').css('color'))//rgb(255, 0, 0)

2、通过css()设置样式

如果属性名中间有 - ,要加引号 或者去掉-大写第一个字母

// $('#btn').onclick = function () {} 不可以这样写
document.getElementById("btn").onclick = function () {
//可以单独设置 css(属性名,属性值)$("#box").css('width',"600px")$("#box").css('height',"600px")
//简写  多个属性同时设置
$('box').csss({width:'600px',height:'600px','background-color':'blue',//如果属性名中间有 - ,要加引号'font-size':"50px"})
}

三、jquery选择器

1、基本选择器

  • id选择器
console.log($('#list')) //获取id为list的元素  写#
  • 类名选择器
console.log($('.lic'))//获取class为liC的元素  写.
  • 标签
console.log($('li')) //获取所有的li标签
  • 并集(所有的)
//获取header和id为list和footer标签,所有标签的字体都设置为30px
$('header,#list,footer').css('font-size', '30px')
  • 交集(都满足的)
//获取p标签 并且class为liC的元素   字体颜色改为blue  
$('p.liC').css('color', 'blue')

2、层级选择器

  • 子代
//获取ul子元素的所有li  背景颜色改为pink   
$('ul>li').css('background-color', 'pink')
  • 后代
//ul后代的li  加粗
$('ul li').css('font-weight', '700')

3、过滤选择器

索引获取 :eq(索引)

//获取到的li元素中 选择索引为1的元素  文字居中显示   一定用冒号
$('li:eq(1)').css('text-align', 'center')

索引为奇数的

//获取到的li元素中 选择索引为奇数的元素   字体倾斜
$('li:odd').css('font-style', 'italic')

索引为偶数的

//获取到的li元素中 选择索引为偶数的元素  加下划线
$('li:even').css('text-decoration', 'underline')

4、筛选选择器(方法)

子类选择器 $(“ul”).children(“li”)

console.log($('ul').children())//获取ul下的所有孩子
//相当于$('ul>li')
console.log($('ul').children('li'))//获取ul下名字为li的孩子

后代选择器,$(“ul”).find(“li”); 必须添加参数

//获取ul后代的p标签
console.log($('ul').find('p'))

查找兄弟节点,不包括自己本身,$(“#first”).siblings(“li”); 添加参数返回指定的兄弟

//兄弟包括 .li3 上面的下面的
console.log($('.li3').siblings())  //选择所有兄弟
console.log($('.li3').siblings('li'))  //选择名字为li兄弟

查找父亲 $(“#first”).parent();

console.log($('.li3').parenet())//获取li3的父亲  ul

祖先

console.log($('.li3').parents())//0:ul#list, 1: body, 2: html

索引

//获取#list下面的索引为2的li
console.log($('#list>li').eq(2))

下一个兄弟 $(“li”).next()

console.log($('.li3').next())//获取li3下一个的标签

下边所有的兄弟

console.log($('.li3').nextAll())

上一个兄弟 $(“li”).prev()

console.log($('.li3').prev())//获取li3的上一个元素

获取当前的位置(索引)$(“li”).index()

console.log($('.li3').index())//获取li3的索引  2

返回不带有类名 “intro” 的所有

元素$(“p”).not(“.intro”)

console.log($('.liC').not('li'))//选择class为liC  但是不是li的元素

四、jQuery事件 (不用on)

1、鼠标事件

//jQuery中绑定事件: 事件源(jquery对象).事件类型(不加on事件的处理程序)
$('#btn').click(function () {console.log("单击了")console.log($(this))$(this).css('background-color', 'red')
}
//鼠标按下  按钮改变
$('button').mousedown(function () {$(this).css({  height: '100px','font-size': '30px',})
})

2、键盘事件

$('#user').keydown(function () {console.log(this.value)//内容console.log($(this).value)//undefined
})

3、浏览器事件

$(window).scroll(function () {console.log('滚动了')
})

五、jQuery css类

1、addClass()向被选元素添加一个或者多个类

$('#add').click(function () {
//获取类名为box的元素   添加类名select_1 select_2$('.box').addClass('select_1 select_2')
})

2、removeClass()向被选元素删除一个或者多个类

//鼠标进入  获取类名为box的元素  删除两个类
$('#remove').mouseenter(function () {$('.box').removeClass('box select_2')
})

3、toggleClass()删除类和添加类的切换操作

$('#toggle').click(function () {$('.box').toggleClass('select_1')
})

六、jQuery 动画方法

1、隐藏hide()

$('#hide').click(function () {$('#box').hide()//单击按钮  box隐藏
//相当于 display:none;不占位置
})

2、显示show()

$('#show').click(function () {$('#box').show()//点击按钮显示
})

3、显示隐藏切换 toggle()

$('#toggle').click(function () {$('#box').toggle()//点击按钮切换
})

4、淡出 fadeOut() 慢慢消失

  • ()加参数 参数为动画时间
$('#fadeOut').click(function () {
// $('#box').fadeOut()
$('#box').fadeOut(5000)//获取id为box的元素,动画时间为5s
})

5、淡入 fadeIn() 显示出来

$('#fadeIn').click(function () {// $('#box').fadeIn()$('#box').fadeIn(5000)})

6、淡入淡出切换 fadeToggle()

$('#fadeToggle').click(function () {
// $('#box').fadeIn()$('#box').fadeToggle(2000)
})

7、滑动向上 slideUp()

  • 点击按钮 高度慢慢减小
//点击按钮  高度慢慢减小
$('#slideUp').click(function () {$('#box').slideUp(3000)
})

8、滑动向下 slideDown()

//点击按钮 高度慢慢变大  时间为3s
$('#slideDown').click(function () {$('#box').slideDown(3000)
})

9、滑动上下的切换 slideToggle()

$('#slideToggle').click(function () {$('#box').slideToggle(2000)
})

10、定义动画 animate(对象,时间间隔)

暂时能改变颜色属性

$('#animate').click(function () { //自定义动画$('#boxTwo').animate(  //获取元素添加动画{width: '500px', height: 500,'border-radius': '50%','background-color': 'red',//暂时不以改变颜色color: 'red',//暂时不以改变颜色},3000   //时间为3s)
})

相关文章:

1、jQuery介绍、css()、选择器、事件、动画

一、jQuery介绍&#xff1f; 1、什么是jQuery&#xff1f; 是一个JavaScript函数库 2、jQuery特点 写的少&#xff0c;做的多 3、jQuery的安装 直接下载引入 <script src"jquery-1.10.2.min.js"></script>通过cdn引入 <script src"https…...

ArcEngine 调用GP工具时,出现C++ R6034错误

1、Arcengine 调用GP工具时&#xff0c;遇到正试图在 os 加载程序锁内执行托管代码 问题 使用&#xff1a;把VS菜单的 调试->异常->Managed Debuggin Assistants->LoaderLock 的选中状态去掉。不会弹出该错误。 2 编译后运行EXE时&#xff0c;出现C R6034问题 ArcEng…...

windows下基于docker-desktop 安装 mysql 5.7

0.背景 docker-desktop v4.27.1Windows 11 22H2 docker-desktop 需要wsl的支持,一般win11新机子都默认开启了,安装docker-desktop 一路next即可.win10老版本需要自行安装开启wsl.一个小建议是,如果你的win10安装wsl时各种错误无法解决,建议升级到win11大概率解决,本人亲身经历…...

什么是Rust 语言

Rust 是一种专注于性能和内存安全的系统编程语言&#xff0c;其设计目标包括提供&#xff1a;零开销抽象、移动语义、内存安全、线程无数据竞争、类型安全和实时 gc 等功能。Rust 使用 RAII&#xff08;Resource Acquisition Is Initialization&#xff09;管理资源&#xff0c…...

2024年四川媒体新闻发布渠道,媒体邀约资源表

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 四川有哪些媒体新闻发布渠道&#xff0c;媒体邀约资源表&#xff1f; 2024年四川媒体新闻发布渠道&#xff0c;媒体邀约资源表 四川本地媒体&#xff1a;如四川日报、华西都市报、成都商…...

14:00面试,14:07就出来了,问的问题过于变态了。。。

我从一家小公司转投到另一家公司&#xff0c;期待着新的工作环境和机会。然而&#xff0c;新公司的加班文化让我有些始料未及。虽然薪资相对较高&#xff0c;但长时间的工作和缺乏休息使我身心俱疲。 就在我逐渐适应这种高强度的工作节奏时&#xff0c;公司突然宣布了一则令人…...

利用 Python 抓取数据探索汽车市场趋势

一、引言 随着全球对环境保护意识的增强和技术的进步&#xff0c;新能源汽车作为一种环保、高效的交通工具&#xff0c;正逐渐受到人们的关注和青睐。在这个背景下&#xff0c;对汽车市场的数据进行分析和研究显得尤为重要。 本文将介绍如何利用 Python 编程语言&#xff0c;结…...

新闻网站封锁AI爬虫 AI与新闻媒体博弈继续

随着ChatGPT等新兴AI模型的兴起&#xff0c;它们所依赖的网络爬虫正面临来自全球主流新闻网站的大规模封锁。Richard Fletcher博士团队对十个国家主流新闻网站的统计发现&#xff0c;到2023年底&#xff0c;48%的网站屏蔽了OpenAI的爬虫&#xff0c;24%屏蔽了Google的爬虫。那么…...

Python Web开发记录 Day5:jQuery(JavaScript库)

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 五、jQuery1、jQuery-选择器和菜单案例①快速上…...

前端-Vue3递归组件自定义Tree

需求 PS&#xff1a;写在前面&#xff0c;需求想要一个Tree 形结构展示当前的组织机构&#xff0c;最末层节点可以选择&#xff0c;层级明确。第一选择网上npm官网或者github 找找成型的东西 element-ui Tree 没有组织结构线js-tree 好看&#xff0c;但是适配Vue3 有点费劲&a…...

《TCP/IP详解 卷一》第12章 TCP初步介绍

目录 12.1 引言 12.1.1 ARQ和重传 12.1.2 滑动窗口 12.1.3 变量窗口&#xff1a;流量控制和拥塞控制 12.1.4 设置重传的超时值 12.2 TCP的引入 12.2.1 TCP服务模型 12.2.2 TCP可靠性 12.3 TCP头部和封装 12.4 总结 12.1 引言 关于TCP详细内容&#xff0c;原书有5个章…...

作业1-224——P1015 [NOIP1999 普及组] 回文数

题目描述 思路 首先此题为一道高精度题&#xff0c;然后本题按照题目意思模拟即可。我们可以开两个数组来记录高精度数字&#xff0c;这样方便我们处理。判断“该数组是否回文”、“c翻转存入d再做cd”可以写成两个单独的函数。然后主程序组织一下他们即可。注意好退出循环的…...

后端知识(理解背诵)

文章目录 &#x1f37a; 来源&#x1f37a; C&#x1f37b; new 和 malloc 的区别&#xff1f;2&#x1f37b; delete 和 delete[] 的区别&#xff1f;0&#x1f37b; 内存泄漏是什么&#xff1f;如何避免&#xff1f;1 &#x1f37a; 计算机网络&#x1f37b; URL 输入后发生了…...

构造pop链

反序列化视频笔记 第一步&#xff1a;找到目标触发echo调用$flag 第二步&#xff1a;触发_invoke函数调用appeng函数$varflag.php&#xff08;把对象当成函数&#xff09; 第三步&#xff1a;给$p赋值为对象&#xff0c;即function成为对象Modifier却被当成函数调用&#xff…...

JAVA设计模式——创建型模式

JAVA设计模式——创建型模式 一、创建型模式1.单例模式&#xff08;Singleton Pattern&#xff09;1.1 饿汉式1.2 懒汉式1.3 双重检验锁(double check lock)(DCL)1.4 静态内部类1.5 枚举1.6 破坏单例的几种方式与解决方法1.6.1 反序列化1.6.2 反射 1.7 容器式单例1.8 ThreadLoc…...

队列的结构概念和实现

文章目录 一、队列的结构和概念二、队列的实现三、队列的实现函数四、队列的思维导图 一、队列的结构和概念 什么是队列&#xff1f; 队列就是只允许在一端进行插入数据操作&#xff0c;在另一端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出 如上图所示&#x…...

Linux系统上使用C语言创建线程

文章目录 一、使用C代码创建线程示例API 二、线程的相关知识2.1 线程 与 进程 的关系2.2 使用线程的理由 一、使用C代码创建线程 使用pthread_create函数创建线程。 示例 示例&#xff1a;创建一个线程&#xff0c;其作用就是打印线程ID和传入参数。 //demo1 #include <…...

pc端如何做自适应呢?

<!-- 默认html的font-size的大小是16px 1rem 16px --> <!-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候&#xff0c; html的font-size将会跟着发生改变 --> <!-- 实现的步骤如下 --> <!-- 1 借助flexble.js文件 --> <!-- 2 将fle…...

c语言经典测试题8

在c语言经典测试题6的第一题&#xff0c;大家是否想过可不可以将递归参数改为s呢&#xff1f;或许有的人已经试过了&#xff0c;但是发现好像不会有结果&#xff0c;其实是因为s为后置&#xff0c;先试用后加1&#xff0c;然而我们这个是在s出了函数之后才会运行加1操作&#x…...

解决GitHub无法访问的问题:手动修改hosts文件与使用SwitchHosts工具

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

如何应对敏捷转型中的团队阻力

应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中&#xff0c;明确沟通敏捷转型目的尤为关键&#xff0c;团队成员只有清晰理解转型背后的原因和利益&#xff0c;才能降低对变化的…...

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别(二)

在上一篇文章中,我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调,以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后,如何调用这个模型进行人脸情感识别的具体代码实现,包括详细的步骤和注释。 模型调用步骤 环境准备:确保安装了必要的Python库。…...

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...