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)
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/714325.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python自动化之项目架构搭建与思路讲解(第二天)

1.自动化测试的概念 自动化测试是指使用自动化工具和脚本来执行测试任务,以验证软件或系统的正确性和稳定性。它可以提高测试的效率和准确性,并节约时间和成本。 2.自动化脚本编写的思路 xmind文档如有需要,可在资源里自行下载 3.项目代码工程创建 lib :基本代码库包 …

[渗透教程]-013-嗅探工具-wireshark操作

文章目录 tor下载wireshark抓包类型启动场景实战tor下载 tor下载链接 zlibary暗网地址 2681506@gmail.com YanErrol123@wireshark Wireshark是网络封包分析软件,可以抓包.可以 使用winpcap与网卡直接进行数据交换.作用: 网络管理员使用wireshark来检测网络问题,网络工程师使用…

瑞_Redis_Redis命令

文章目录 1 Redis命令Redis数据结构Redis 的 key 的层级结构1.0 Redis通用命令1.0.1 KEYS1.0.2 DEL1.0.3 EXISTS1.0.4 EXPIRE1.0.5 TTL 1.1 String类型1.1.0 String类型的常见命令1.1.1 SET 和 GET1.1.2 MSET 和 MGET1.1.3 INCR和INCRBY和DECY1.1.4 SETNX1.1.5 SETEX 1.2 Hash类…

Android 12.0 framework关于systemUI定制之导航栏透明背景的功能实现

1.概述 在12.0的系统rom产品定制化开发中,在对于系统原生SystemUI的导航栏背景在沉浸式导航栏的 情况下默认是会随着背景颜色的变化而改变的,在一些特定背景下导航栏的背景也是会改变的,所以由于产品开发需要 要求需要设置导航栏背景为透明的,所以就需要在Activity创建的时…

《秦时明月》IP新高度:与陕西历史博物馆共同书写文化传承新篇章!

在IP产业风起云涌的今天&#xff0c;如何以创意和匠心为传统文化注入新的活力&#xff0c;成为了摆在每一位文化工作者面前的重要课题。近日&#xff0c;《秦时明月》作为一部深受观众喜爱的国产动画IP&#xff0c;在迎来其十七周年之际&#xff0c;联手陕西历史博物馆&#xf…

c++11 标准模板(STL)(std::tuple)(二)

定义于头文件 <tuple> template< class... Types > class tuple; (C11 起) 类模板 std::tuple 是固定大小的异类值汇集。它是 std::pair 的推广。 若 (std::is_trivially_destructible_v<Types> && ...) 为 true &#xff0c;则 tuple 的析构函数是…

设计模式-备忘录模式(C++)

备忘录模式&#xff08;Memento Pattern&#xff09;是一种设计模式&#xff0c;用于在不破坏对象封装的情况下&#xff0c;捕获和保存对象的内部状态&#xff0c;并在需要时恢复到之前的状态。下面是一个简单的 C 实现备忘录模式的示例&#xff1a; #include <iostream>…

2024理解这几个安全漏洞,你也能做安全测试!

如今安全问题显得越来越重要&#xff0c;一个大型的互联网站点&#xff0c;你如果每天查看日志&#xff0c;会发现有很多尝试攻击性的脚本。 如果没有&#xff0c;证明网站影响力还不够大。信息一体化的背后深藏着各类安全隐患&#xff0c;例如由于开发人员的不严谨导致为Web应…

章节一、认识three.js与开发环境学习笔记01;

一、如何学习WEB可视化3D技术与课程内容演示&#xff1b; 1、项目案例&#xff1a; 政府有大量的新基建的项目&#xff1a;如数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等等都涉及了3d的可视化技术&#xff1b; 2、如何系统的学号WEB 3D可视化技术&#xff1f; three…

网络安全学习笔记1

1.了解kali及安装 vmware安装&#xff0c;用户名密码均为kali 2.metasploit是什么 3.metasploit攻击windows系统 在kali中打来终端 数据msfconsole 进入metasploit的控制终端界面 msf的使用法则&#xff1a; 1.使用模块 2.配置模块必选项 3.运行模块 三步操作、实现对…

逻辑回归与交叉熵--九五小庞

什么是逻辑回归 线性回归预测的是一个连续值&#xff0c;逻辑回归给出的“是”和“否”的回答 Singmoid sigmoid函数是一个概率分布函数&#xff0c;给定某个输入&#xff0c;它将输出为一个概率值 逻辑回归损失函数 平方差所惩罚的是与损失为同一数量级的情形&#xff0…

8、Redis-Jedis、Lettuce和一个Demo

目录 一、Jedis 二、Lettuce 三、一个Demo Java集成Redis主要有3个方案&#xff1a;Jedis、Lettuce和Redisson。 其中&#xff0c;Jedis、Lettuce侧重于单例Redis&#xff0c;而Redisson侧重于分布式服务。 项目资源在文末 一、Jedis 1、创建SpringBoot项目 2、引入依赖 …

电商小程序10分类管理

目录 1 分类数据源2 搭建功能3 创建变量读取数据4 绑定数据总结 本篇我们介绍一下电商小程序的分类管理功能的开发&#xff0c;先看我们的原型图&#xff1a; 在首页我们是展示了四个分类的内容&#xff0c;采用上边是图标&#xff0c;下边是文字的形式。使用低代码开发&#…

【系统分析师】-需求工程

一、需求工程 需求工程分为需求开发和需求管理。 需求开发&#xff1a;需求获取&#xff0c;需求分析&#xff0c;需求定义、需求验证。 需求管理&#xff1a;变更控制、版本控制、需求跟踪&#xff0c;需求状态跟踪。&#xff08;对需求基线的管理&#xff09; 1.1需求获取…

MySQL:合并查询语句

1、查询表的数据 t_book表数据 SELECT * FROM db_book.t_book; t_booktype表数据 SELECT * FROM db_book.t_booktype; 提醒&#xff1a; 下面的查询操作的数据来自上图查询表的数据 2. 使用 UNION 查询结果合并&#xff0c;会去掉重复的数据 使用UNION关键字是&#xff0c;数…

社区店经营口号大揭秘:如何吸引更多顾客?

社区店的经营口号是吸引顾客的重要工具&#xff0c;一个好的口号能够在短时间内传达店铺的特色和价值&#xff0c;并引起顾客的兴趣。 作为一名开鲜奶吧5年的创业者&#xff0c;我将分享一些关于社区店经营口号的干货&#xff0c;帮助你吸引更多的顾客。 1、突出独特卖点&…

群控代理IP搭建教程:打造一流的网络爬虫

目录 前言 一、什么是群控代理IP&#xff1f; 二、搭建群控代理IP的步骤 1. 获取代理IP资源 2. 配置代理IP池 3. 选择代理IP策略 4. 编写代理IP设置代码 5. 异常处理 三、总结 前言 群控代理IP是一种常用于网络爬虫的技术&#xff0c;通过使用多个代理IP实现并发请求…

优思学院|3步骤计算出Cpk|学习Minitab

在生产和质量管理中&#xff0c;准确了解和控制产品特性至关重要。一个关键的工具是Cpk值&#xff0c;它是衡量生产过程能力的重要指标。假设我们有一个产品特性的规格是5.080.02&#xff0c;通过收集和分析过程数据&#xff0c;我们可以计算出Cpk值&#xff0c;进而了解生产过…

CentOS 定时调度

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

Java中灵活使用Mockito

目录 Java中灵活使用Mockito引言Mockito简介基本用法实例演示使用场景和案例解决方案结语 Java中灵活使用Mockito 引言 Mockito是Java中常用的mock框架之一&#xff0c;用于进行单元测试时模拟对象的行为。本文将介绍Mockito的基本用法&#xff0c;并探讨如何在实际项目中灵活…