05-jQuery对象(CSS)
2024-05-30 05:33:54
4.3 CSS相关
4.3.1 jQuery操作类
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery操作类相关</title><style type="text/css">*{margin: 0;padding: 0;}.class1{width: 100px;height: 100px;background: red;}.class2{border: 10px solid #000;}</style><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>添加操作</button>
<button>删除操作</button>
<button>切换操作</button><div></div>
<script type="text/javascript">$(function (){/*1.addClass(class|fn)作用: 添加一个类要添加多个, 多个类名之间用空格隔开即可.2.removeClass([class|fn])作用: 删除一个类,想删除多个, 多个类名之间用空格隔开即可。3.toggleClass(class|fn[,sw])作用: 切换类有就删除, 没有就添加。*/let btns = document.getElementsByTagName("button");// 添加类btns[0].onclick = function (){$("div").addClass("class1 class2");}// 删除类btns[1].onclick = function (){$("div").removeClass("class2 class1");}// 切换操作btns[2].onclick = function (){$("div").toggleClass("class2 class1")}});
</script>
</body>
</html>
执行结果
4.3.2 jQuery文本值
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery文本值相关</title><style type="text/css">*{margin: 0;padding: 0;}div{width: 100px;height: 100px;border: 1px solid #000;}</style><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
<script type="text/javascript">$(function (){/*1.html([val|fn])和原生JS中的innerHTML一模一样2.text([val|fn])和原生JS中的innerText一模一样3.val([val|fn|arr])*/let btns = document.getElementsByTagName("button");btns[0].onclick = function (){$("div").html("<p>我亦飘零久，十年来，深恩负尽，死生师友。</p>");}btns[1].onclick = function (){console.log($("div").html());}btns[2].onclick = function (){$("div").text("绿蚁新醅酒，红泥小火炉。晚来天欲雪，能饮一杯无?");}btns[3].onclick = function (){console.log($("div").text());}btns[4].onclick = function (){$("input").val("请输入内容");}btns[5].onclick = function (){console.log($("input").val());}});
</script>
</body>
</html>
执行结果
4.3.3 jQuery操作CSS样式
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery操作CSS样式</title><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div></div>
<script type="text/javascript">$(function (){// 1.每个设置$("div").css("width", "100px");$("div").css("height", "100px");$("div").css("background", "red");// 2.链式设置$("div").css("width", "100px").css("height", "200px").css("background", "green");// 3.批量设置$("div").css({width:"200px",height:"100px",background: "green"});// 4.获取CSS样式值console.log($("div").css("background"));});
</script>
</body>
</html>
执行结果
4.3.4 jQuery位置和尺寸操作
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery位置和尺寸操作</title><style type="text/css">*{margin: 0;padding: 0;}.father{width: 150px;height: 150px;background: green;border: 30px solid #000;margin-left: 50px;position: relative;}.son{width: 100px;height: 100px;background: blueviolet;position: absolute;left: 50px;top: 50px;}</style><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="father"><div class="son"></div>
</div>
<button>获取</button>
<button>设置</button>
<script type="text/javascript">$(function (){// 1.拿到buttonlet btns = document.getElementsByTagName("button");// 2.监听获取btns[0].onclick = function (){// 2.1 获取元素的宽度console.log("元素宽度:" + $(".father").width());// 2.2 offset：获取元素距离窗口的偏移位console.log("元素距离窗口的偏移位:" + $(".son").offset().left);// 2.3 position：获取元素距离定位元素的偏移位console.log("元素距离定位元素的偏移位:" + $(".son").position().left);}// 3.监听设置btns[1].onclick = function (){// 3.1 设置元素的宽度$(".father").width("500px");// 3.2 元素距离窗口的偏移位$(".son").offset({left:10});// 3.3 position方法只能获取不能设置,只能通过CSS设置$(".son").css({left: "10px"});}});
</script>
</body>
</html>
执行结果
4.3.5 jQuery的scrollTop
代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery的scrollTop</title><style type="text/css">*{margin: 0;padding: 0;}.scroll{width: 200px;height: 200px;border: 1px solid #000;overflow: auto;}</style><script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div class="scroll">1.我亦飘零久，十年来，深恩负尽，死生师友。——顾贞观《金缕曲二首》2.桃李春风一杯酒，江湖夜雨十年灯。——黄庭坚《寄黄几复》3.雨中黄叶树，灯下白头人。——司空曙《喜外弟卢纶见宿》4.人间有味是清欢。——苏轼《浣溪沙 从泗州刘倩叔游南山》5.绿蚁新醅酒，红泥小火炉。晚来天欲雪，能饮一杯无？——白居易《问刘十九》6.我有一瓢酒,可以慰风尘。——韦应物《简卢陟》7.少年听雨歌楼上，红烛昏罗帐。壮年听雨客舟中，江阔云低、断雁叫西风。而今听雨僧庐下，鬓已星星也。悲欢离合总无情。一任阶前、点滴到天明。——蒋捷《虞美人 听雨》8.君埋泉下泥销骨，我寄人间雪满头。——白居易《梦微之》9.直道相思了无益，未妨惆怅是清狂。——李商隐《无题六首其三》10.欲买桂花同载酒，终不似，少年游。——刘过《唐多令·芦叶满汀洲》11.人言落日是天涯，望极天涯不见家。已恨碧山相阻隔，碧山还被暮云遮。——李觏《乡思》12.以色事他人，能得几时好。——李白《妾薄命》13.山有木兮木有枝，心悦君兮君不知。——《越人歌》14.从此无心爱良夜，任他明月下西楼。——李益《写情》15.故园便是无兵马，犹有归时一段愁。——陈与义《送人归京师》16.我是人间惆怅客，知君何事泪纵横，断肠声里忆平生。——纳兰性德《浣溪沙 残雪凝辉画冷屏》
</div>
<button>获取</button>
<button>设置</button>
<script type="text/javascript">$(function (){// 1.拿到buttonlet btns = document.getElementsByTagName("button");// 2.监听获取btns[0].onclick = function (){// 2.1 获取滚动的偏移位// console.log($(".scroll").scrollTop());// 2.2 获取网页滚动的偏移位console.log($("body").scrollTop()+$("html").scrollTop());}// 3.设置网页偏移btns[1].onclick = function (){// 3.1 设置滚动的偏移位// $(".scroll").scrollTop(200);// 3.2 设置网页滚动偏移位$("html,body").scrollTop(300);}})
</script>
</body>
</html>
05-jQuery对象(CSS)相关推荐
- [jQuery基础] jQuery对象 -- CSS相关
CSS相关 操作CSS 逐个设置 $(function () {$("div").css("width", "100px")$(" ...
- jQuery 学习-样式篇（二）：jQuery 对象与原生 DOM 对象
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- Jquery对象的文档处理，CSS和事件
文档处理 append:向每个匹配的元素内部追加内容.这个操作与对指定的元素执行appendchild方法,将它们添加到文档中的情况类似 <p>i would like to say< ...
- 05 HTML字符串转换成jQuery对象、绑定数据到元素上
1 要求 将一段 HTML脚本 封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤 定义字符串 var str = '<div i ...
- jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
- 【08】jQuery：01-jQuery介绍、jQuery基本使用、jQuery选择器、jQuery样式操作、jQuery效果、jQuery入口函数、jQuery对象
文章目录 day01 - jQuery 1.1. jQuery 介绍 1.1.1 JavaScript 库 1.1.2 jQuery的概念 1.1.3 jQuery的优点 1.2. jQuery 的基 ...
- day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念 快速入门 JQuery对象和JS对象区别与转换 选择器 DOM操作 案例 今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
- 理解jQuery对象$.html
如果要比喻jQuery和原生javascript的关系,我个人认为是自动档和手动档汽车的区别.使用原生javascript,可以知道离合器以及档位的作用:而使用jQuery,则把离合器和手动档位封装到 ...
- js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
最新文章
- 谷歌AI涉足艺术、太空、外科手术，再强调AI七原则
- java手机号归属地查询_【原创】Java实现手机号码归属地查询
- MyBatis-20MyBatis高级结果映射【一对一映射（4种方式）】
- 集合判断哪非空 、2个集合取交集/并集/差集
- java并发集合面试题,那些经常被问的JAVA面试题（1）—— 集合部分
- PHP随机静态页面生成系统源码雨尘SEO系统
- 定时更换超级连接的代码
- matlab编辑rayfile光源文件,rayfile网盘功能详解 rayfile网盘安装步骤及安装注意事项...
- 计算机科学与技术考研考西南交通大学,西南交大计算机科学与技术考研怎么样...
- 【ACL2019】轻松了解张岳实验室的六篇paper
- 更新力度真的厉害，国产linux操作系统深度中文商店应用更新记录汇总（2021-07）
- Echarts.js下载及简易Demo
- Java基础（七） 房屋出租系统
- 上古计算机语言,微软开源其上古编程语言GW-BASIC
- python+pyqt4实现QQ自动发送信息
- 一、爬虫 - 新浪爱问共享资源全下载之解决方案
- 使用AppleScript批量删除Mac中的信息
- 什么是CI/CD？它们与敏捷开发和devops的关系?
- 【面试智力题】一楼到十楼的每层电梯门口都放着一颗钻石，钻石大小不一。你乘坐电梯从一楼到十楼，怎样拿到最大的一颗？
- 计算机领域怎么研究区块链,计算机行业深度研究:跨链技术,区块链大航海时代的基石...
热门文章
- JCJC错别字检测Windows客户端发布了
- 室内设计要学英语和计算机吗,学习室内设计，需要什么样的电脑配置？
- 网络运维超融合服务器,国家行政学院借助超融合打造IT新架构
- Windows server 2012镜像下载
- Mysql创建管理表的内容上的打字练习
- RHEL 6.5 PXE 安装调试 VMWARE ESXi 5.1 安装
- 错误 LNK2019 无法解析的外部符号 “__declspec(dllimport) public: int __thiscall osg::Referenced::ref(void)const “
- 怎么把pdf图片转换成cad呢?两种简单方法
- 滴滴快车奖励政策，高峰奖励，翻倍奖励，按成交率，指派单数分级（4月15日）...
- EMC测试有哪些项？