DAY09_JQueryBootStrap实现省略号效果

news2024/11/27 8:45:54

目录

  • 1 JQuery简介
  • 2 引入JQuery方式
  • 3 JS与JQ之间的转换
  • 4 选择器
    • 4.1 基本选择器
    • 4.2 层级选择器
      • 4.2.1 层级选择器相关方法
    • 4.3 过滤选择器
    • 4.4 内容选择器
    • 4.5 可见选择器
    • 4.6 隐藏显示的相关方法
    • 4.7 属性选择器
    • 4.8 子元素选择器
    • 4.9 表单选择器
  • 5 JQ中新增的遍历方式
  • 6 JQ中相关方法
  • 7 事件模拟
    • 7.1 模拟标签的各种事件
    • 7.2 鼠标移入移出合并事件
    • 7.3 禁止按钮属性
  • 8 BootStrap
    • 8.1 FontAwesome
  • 9 响应式布局
    • 9.1 栅格系统
  • 10 扩展：实现省略号效果

1 JQuery简介

JavaScript Query 是一个轻量级、免费开源的JS函数库，能极大的简化JS代码。
官网：https://jquery.com/
在这里插入图片描述
滑动到页面最底部能选择版本下载
在这里插入图片描述
在这里插入图片描述
鼠标右击选择一个自己需要的版本和压缩类型，然后选择【链接另存为】，最后选择安装路径然后保存即可。
在这里插入图片描述
完成后得到这样一个js文件
在这里插入图片描述

2 引入JQuery方式

和引入一个js文件操作是一样的

<script type = "text/javascript" src = "存放地址"></script>

3 JS与JQ之间的转换

  • JS转JQ：
var jq = $(js);
  • JQ转JS：
var js = $(jq对象)[0];//jq对象其实就是一个数组

4 选择器

4.1 基本选择器

  • 标签名
$("标签名")
  • id
$("#id值")
  • class
$(".class")
  • 分组
$("标签名,#id值,.class")
  • 任意元素
$("*")

4.2 层级选择器

  • 匹配div中所有span
$("div span")
  • 匹配div中所有span子元素
$("div > span")
  • 匹配div的弟弟元素span
$("div + span")
  • 匹配div的弟弟们元素span
$("div ~ span")

4.2.1 层级选择器相关方法

  • 获取id为abc元素的所有兄弟元素
$("#abc").siblings("div")
  • 获取id为abc元素的哥哥元素
$("#abc").prev("div")
  • 获取id为abc元素的哥哥们元素
$("#abc").preAll()
  • 获取id为abc元素的弟弟元素
$("#abc").next()
  • 获取id为abc元素的弟弟们元素
$("#abc").nextAll()
  • 获取id为abc元素的父元素
$("#abc").parent()
  • 获取id为abc元素的子元素们
$("#abc").children()

4.3 过滤选择器

  • 匹配所有div中的第一个
$("div:first")
  • 匹配所有div中的最后一个
$("div:last")
  • 匹配所有div中下标为偶数的div
$("div:even")
  • 匹配所有div中下标为奇数的div
$("div:odd")
  • 匹配下标等于n的div（下标从0开始）
$("div:eq(n)")
  • 匹配下标小于n的div
$("div:lt(n)")
  • 匹配下标大于n的div
$("div:gt(n)")
  • 匹配所有div中class值不是abc的div
$("div:not(.abc)")

4.4 内容选择器

  • 匹配包含p子元素的div
$("div:has(p)")
  • 匹配空的div
$("div:empty")
  • 匹配非空的div
$("div:parent")
  • 匹配包含文本xxx的div
$("div:contains('xxx')")

4.5 可见选择器

  • 匹配所有可见的div
$("div:visible")
  • 匹配所有隐藏的div
$("div:hidden")

4.6 隐藏显示的相关方法

  • 让id为abc的元素隐藏
$("#abc").hide()
  • 让id为abc的元素显示
$("#abc").show()
  • 让id为abc的元素隐藏显示切换
$("#abc").toggle()

4.7 属性选择器

  • 匹配包含id属性的div
$("div[id]")
  • 匹配id属性为xxx的div
$("div[id='xxx']")
  • 匹配id属性不为xxx的div
$("div[id!='xxx']")

4.8 子元素选择器

  • 匹配是div并且是第一个并且是子元素
$("div:first-child")
  • 匹配是div并且是最后一个并且是子元素
$("div:last-child")
  • 匹配是div并且是第n个并且是子元素
$("div:nth-child(n)")

4.9 表单选择器

  • 匹配表单中所有控件
$(":input")
  • 匹配所有的密码框
$(":password")
  • 匹配所有的单选框
$(":radio")
  • 匹配所有的多选框
$(":checkbox")
  • 匹配所有的单选、多选、和下拉选
$(":checked")
  • 匹配所有选中的单选和多选
$(":input:checked")
  • 匹配选中的下拉选
$(":selected")

5 JQ中新增的遍历方式

$("#b1").click(function(){
	$(":checked").each(function(){
		alert(this.value);//this代表当前遍历的对象
	});
});

6 JQ中相关方法

  • 创建及添加元素
    • 创建元素对象
var d = $("abc");
  • 添加元素对象
$("父元素").append(d);//添加到最后面
$("父元素").prepend(d);//添加到最前面
  • 插入元素对象
弟弟元素.before(新元素);//弟弟元素前面
哥哥元素.after(新元素);//哥哥元素后面
  • 删除元素
被删除的元素.remove();
  • 获取和修改元素的文本内容
等效于JS中innerText
元素对象.text();//取值
元素对象.text("xxx");//赋值
  • 获取和修改元素的html内容
等效于JS中innerHTML
元素对象.html();//取值
元素对象.html("<h1>xxx</h1>");//赋值
  • 获取和修改元素的css样式
元素对象.css("样式名");//获取样式的值
元素对象.css("样式名","样式值");//赋值
元素对象.css({"样式名1":"样式值1","样式名2":"样式值2"});//批量复制v
  • 获取和修改元素的属性
attr与prop都可以（prop后出的）
元素对象.attr("属性名");//取值
元素对象.attr("属性名","值");//修改
  • 动画相关
隐藏：hide()
显示：show()
淡入：fadeOut()
淡出：fadeIn()
上滑：slideUp()
下滑：slideDown()
自定义：animate()

7 事件模拟

7.1 模拟标签的各种事件

元素对象.trigger("时间名");

eg:

setTimeout(function(){
	$("input").trgger("click");
},3000);

7.2 鼠标移入移出合并事件

$("div").hover(function(){
	$(this).css("color","red");
},function(){
	$(this).css("color","green");
});

7.3 禁止按钮属性

JQ中： disabled:disabled;
JS中： 值可以用true/false控制

8 BootStrap

基于html、js、jq设计开发，比较流行的前端框架
官网：https://bootcss.com 下载用于生产环境的
导航栏按钮之类的都可以参考BootStrap文档获取class属性值来使用
在这里插入图片描述

8.1 FontAwesome

字体图标
官网：https://fontawesome.com.cn

9 响应式布局

根据不同的设备响应不同的样式
媒体查询是为了实现响应式布局，所以提供了一套解决方案
可在<head>标签中添加<style type = “text/css”>中写：

/* 超小屏幕（手机，小于 768px） */
@media (max-width: 768px) { ... }
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) and (max-width: 992px) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width:992px) and (max-width: 1200px) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ... }

9.1 栅格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
    • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
    • 通过“行（row）”在水平方向创建一组“列（column）”。
    • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
    • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
    • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
    • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
    • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
    • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
      在这里插入图片描述
  • 两种容器：
    • class=“container”：缩放窗口时内容居中
    • class=“container-fluid”：窗口缩放时内容不居中
<div calss="container">
	<div class = "row">
		<div class = "col-md-6">xxx</div>//最多分为12列
		<div class = "col-md-6">xxx</div>//栅格嵌套：可在xxx在加一行row进行栅格化
	</div>
</div>

10 扩展：实现省略号效果

<style type = "text/css">
	元素对象{
		display:-webkit-box:
		-webkit-box-orient:vertical;
		-webkit-line-clamp:5;//显示的行数
		overflow:hidden:
	}
</style>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue解决浏览器中跳转新页面缓存上一页表单等内容方法

vue解决浏览器中跳转新页面缓存上一页表单等内容方法

在工作中&#xff0c;有可能会遇到需要缓存页面或组件的功能。 情况1&#xff1a;比如在h5中有个一个50个表单&#xff0c;在填到第40个表单时&#xff0c;需要你去另一个新页面去选择列表项&#xff0c;然后把数据带回来。需要我们不仅把数据带回来还要保留前面已经填好的40个…
阅读更多...
GIS地图：解读未知的地理空间之谜

GIS地图：解读未知的地理空间之谜

在这个信息爆炸的时代&#xff0c;如何有效地理解和利用地理空间数据成为各行各业追求的目标。而GIS地图作为一种强大的工具&#xff0c;能够帮助我们连接世界的空间智慧。 GIS地图的魅力在于它能够将庞大的地理数据转化为直观、可视化的地图表达。通过GIS地图&#xff0c;我们…
阅读更多...
管理平台｜智慧工地将成为施工界的“扛把子”！

管理平台｜智慧工地将成为施工界的“扛把子”！

大家都知道&#xff0c;建筑业是一个安全事故频发的高危行业&#xff0c;特别在施工环节&#xff0c;由于施工现场人员复杂、环境混乱、地点分散、多工序交叉等现象&#xff0c;如何进行现场施工管理就显得格外重要。 但是&#xff0c;依赖于现场管理的施工模式总是存在着很多…
阅读更多...
数据结构-图结构

数据结构-图结构

图是最为复杂的数据结构。如果数据元素之间存在一对多或者多对多的关系&#xff0c;那么这种数据的组织结构就叫作图结构。 图的基本概念 图的定义 图Graph是由顶点&#xff08;图中的节点被称为图的顶点&#xff09;的非空有限集合V与边的集合E&#xff08;顶点之间的关系&a…
阅读更多...
什么AC+AP组网？什么是mesh组网？

什么AC+AP组网？什么是mesh组网？

一、什么是ACAP组网&#xff1f; ACAP组网是一种基于集中式管理的无线局域网&#xff08;WLAN&#xff09;组网架构&#xff0c;主要由AC&#xff08;Access Controller&#xff09;和多个AP&#xff08;Access Point&#xff09;组成。AC作为网络管理中心&#xff0c;负责控制…
阅读更多...
别乱分层，PO、VO、DAO、BO、DTO、POJO 到底应该用在哪里，你知道吗

别乱分层，PO、VO、DAO、BO、DTO、POJO 到底应该用在哪里，你知道吗

一、PO :&#xff08;persistant object&#xff09;&#xff0c;持久对象 二、VO :&#xff08;value object&#xff09;&#xff0c;值对象 三、DAO :&#xff08;Data Access Objects&#xff09;&#xff0c;数据访问对象接口 四、BO :&#xff08;Business Object&…
阅读更多...
30天从入门到精通TensorFlow1.x 第六天，可视化工具 TensorBoard

30天从入门到精通TensorFlow1.x 第六天，可视化工具 TensorBoard

文章目录 一、接前一天二、TensorBoard&#xff08;1&#xff09;. 什么是TensorBoard&#xff08;2&#xff09;. TensorBoard有什么用&#xff08;3&#xff09;. TensorBoard怎么安装 三、tf.summary模块&#xff08;1&#xff09;.如何使用tensorboard&#xff08;2&#x…
阅读更多...
数据结构之二叉树(Binary Tree)详解

数据结构之二叉树(Binary Tree)详解

目录 1、什么是二叉树&#xff1f; 2、二叉树的遍历&#xff1a;深度优先和广度优先 &#xff08;1&#xff09;深度优先搜索(DFS)算法 &#xff08;2&#xff09;广度优先搜索(BFS)算法 3、二叉树的性质详解 4、二叉树的类型 &#xff08;1&#xff09;满二叉树 &…
阅读更多...
IT服务台追踪的关键故障指标

IT服务台追踪的关键故障指标

指标是 IT 服务管理的核心&#xff0c;可提供运营见解并帮助确定持续改进的领域。通常的服务台指标有助于展示内部运营效率。为 例如&#xff0c;衡量在指定时间内解决的工单数量的 SLA 是展示服务台效率的关键因素。另一方面&#xff0c;故障指标可帮助团队识别 IT 基础架构中…
阅读更多...
Linux基本指令学习（入门）

Linux基本指令学习（入门）

Linux基本指令学习 0.在xshell中登录自己的虚拟机1. ls指令2. pwd命令3. cd 指令4. touch指令5.mkdir指令6.rmdir指令 && rm 指令7.man指令&#xff1a;8.cp指令9.mv指令&#xff1a;10.cat11.more指令12.less指令13.head指令14.tail指令15.时间相关的指令16.Cal指令17…
阅读更多...
【Linux】Tomcat 部署及优化

【Linux】Tomcat 部署及优化

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 Tomcat 部署及优化 一、Tomcat 概述1.Tomcat 介绍2.Tomcat 核心组件3.Tomcat 组件结构4.Tomcat 处理请求过程 二、Tomcat 部署步骤1.关闭防火墙2.安装JDK3.设置JDK环境变量4.…
阅读更多...
SQL基础培训16-日期处理

SQL基础培训16-日期处理

进度16-日期处理-SQL基础培训 知识点（学习作业就是按示例练习一遍）： 1、系统当前日期 select getdate() as 当前系统日期 --建表时&
阅读更多...
Antd时间轴Timeline遍历数据

Antd时间轴Timeline遍历数据

Antd时间轴遍历数据 <Timelineitems{data.map((item) > {return { children: item };})}/>
阅读更多...
Java实现手动操作定时任务功能的简单例子（动态创建定时任务）

Java实现手动操作定时任务功能的简单例子（动态创建定时任务）

还记得在前公司与同事共同开发一个在页面上统一管理定时提醒任务的功能&#xff0c;实际业务可能会复杂一些&#xff0c;它需要结合小程序或公众号平台对各个用户进行周期性&#xff08;按季度、按月、按日等&#xff09;的消息推送。由于我当时负责的是小程序和公众号平台方面…
阅读更多...
node18 + express + mongoose 开发后台服务踩坑记录

node18 + express + mongoose 开发后台服务踩坑记录

模块化 1、node 默认采用 common.js 模块化规范; 2、在 node 中使用 es module 时&#xff0c;需将 package.json 中的 type 改为 module。或者将 .js 文件改为 .mjs。 发布全局 npm cli &#xff08;自定义 npm 脚手架&#xff09; 3、创建一个 npm 脚手架&#xff0c;需创…
阅读更多...
Delaunay三角剖分学习笔记

Delaunay三角剖分学习笔记

文章目录 Delaunay三角剖分学习笔记1 Voronoi \text{Voronoi} Voronoi图1.1 定义与性质 2 三角剖分2.1 定义与性质2.2 质量(quality)评定标准 3 Delaunay三角剖分3.1 定义3.2 准则与性质 4 Delaunay三角剖分算法4.1 Bowyer-Watson算法4.1.1 算法步骤&#xff1a;4.1.2 算法伪代…
阅读更多...
学会这样写代码，一看就是资深工程师，代码简洁之道PHP版本

学会这样写代码，一看就是资深工程师，代码简洁之道PHP版本

文章目录 一、前言二、规范2.1 整体结构规范2.1.1 类的括号前括号单独一行2.1.2 方法的前括号单独一行2.1.3 方法内部语句前括号不换行 2.2 变量与常量2.2.1 变量的命名尽量要有语义2.2.2 同一个实体要用相同的变量名2.2.3 尽量使用有语义的常量表述2.2.4 使用自解释型变量2.2.…
阅读更多...
六面钻调试第八步Cam参数调试（一）之压轮压板 ，机械规格调试

六面钻调试第八步Cam参数调试（一）之压轮压板 ，机械规格调试

Cam参数调试 &#xff08;1&#xff09;.压轮压板参数调试 注&#xff1a;压板的规格测量设置 压板的位置相对基准钻的位置设置 &#xff08;2&#xff09;机械规格调试 1.定位气缸的类型 2.活动式定位气缸的Y向宽度 4.定位杆与夹钳Y边缘的最小间隙 5.活动式定位气缸相对基准…
阅读更多...
CVPR视频理解论文

CVPR视频理解论文

Learning Transferable Spatiotemporal Representations from Natural Script Knowledge 时空TransformerCLIP的对比学习思路
阅读更多...
if/while/for/语句/分支/路径覆盖的控制流程图+数据流分析(DU)

if/while/for/语句/分支/路径覆盖的控制流程图+数据流分析(DU)

if/while/for/语句覆盖/分支覆盖/路径覆盖的控制流程图数据流分析(DU) 语句的线性序列Linear Sequences of Statements “If” Constructs “While” Constructs “For” Constructs 语句覆盖率Statement Coverage 测试套件应执行 CFG 的所有节点 也被称为&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023