jQuery效果2

news2024/9/21 4:28:09

jQuery

  • 一、属性操作
    • 1.内容
    • 2.列子,购物车模块-全选
  • 二、内容文本值
    • 1.内容
    • 2.列子,增减商品和小记
  • 三、元素操作(遍历,创建,删除,添加)
    • 1.遍历
    • 2.例子,购物车模块,计算总件数和总额
    • 3.创建,添加,删除
    • 4.删除商品模块+选中商品添加背景
  • 四、尺寸,位置操作
    • 1.内容
    • 2.例子,带有动画的返回顶部,$("body,html")
    • 3.例子,电梯导航

一、属性操作

1.内容

补充:ele:checked.length可获得选中元素个数
toFixed(2)保留两位小数
parents()可返回全部祖先

pop(),固有属性
attr(),自定义属性,可获取H5自定义属性,写date-()
date(),可获取H5自定义属性,不写date-()
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.列子,购物车模块-全选

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、内容文本值

1.内容

内容包括标签和文本内容
内容html()
文本内容text()
表单值val()
在这里插入图片描述
在这里插入图片描述

2.列子,增减商品和小记

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、元素操作(遍历,创建,删除,添加)

1.遍历

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.例子,购物车模块,计算总件数和总额

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3.创建,添加,删除

内部添加元素,生成之后,是父子关系
外部添加元素,生成之后,是兄弟关系
在这里插入图片描述

4.删除商品模块+选中商品添加背景

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

四、尺寸,位置操作

1.内容

尺寸
在这里插入图片描述
位置
offset(),可获取,可修改
position(),只获取,不修改
scrollTop(),scrollLeft,可获取,可修改
在这里插入图片描述
在这里插入图片描述
3.scrollTop(),scrollLeft()
在这里插入图片描述

2.例子,带有动画的返回顶部,$(“body,html”)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.例子,电梯导航

显示与隐藏
在这里插入图片描述

在这里插入图片描述
功能分析

在这里插入图片描述
细节分析
在这里插入图片描述

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

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

相关文章

什么是访问越界(C语言数组、指针、结构体成员访问越界)

在C语言中&#xff0c;访问越界&#xff08;Access Violation 或 Out-of-Bounds Access&#xff09;是指程序试图访问的内存位置超出了其合法或已分配的范围。这通常发生在数组、指针或其他内存结构的使用中。 案例&#xff1a; #include <stdio.h>//数组 //Visiting b…

您有一份课程日历待查收!2024高通边缘智能创新应用大赛公开课重磅开启

自2024高通边缘智能创新应用大赛启动以来&#xff0c;全国各地的开发者热情如潮&#xff0c;踊跃报名&#xff0c;其中不乏名企名校开发者&#xff0c;共赴这场科技狂欢盛宴&#xff01; 随着初赛赛程过半&#xff0c;我们陆续看到一些精彩的创意与技术构想。同时&#xff0c;…

韩语“再见” 怎么说,柯桥韩语培训

1.1 标准写法及读法 안녕 (annyeong) 音译&#xff1a; 安宁 罗马音&#xff1a; Annyeong 使用情境&#xff1a; 适用于朋友之间或非常熟悉的关系中&#xff0c;不分场合&#xff0c;可以用于打招呼或告别&#xff0c;表示“你好”或“再见”。 안녕히 가세요 (annyeonghi …

【FPGA】Verilog:2-bit 二进制比较器的实现(2-bit binary comparator)

解释 2-bit 二进制比较器仿真结果及过程说明(包括真值表和卡诺图) 真值表和卡洛图如下: 2-bit Binary Comparator A1 A2 B1

宝塔部署纯Vue项目,无后端

1.打包项目 生成一个dist文件夹 2.创建云服务器根目录 3.创建站点 4.上传文件 5.访问

vue测试环境打包文件不添加hash和生产环境打包不一致

npm run build:test npm run build:pro 测试环境打包出来文件和生产包有差异 .env.test-配置文件 打包出来文件有hash值&#xff0c;加上下面的配置&#xff0c;打包就和pro一致 NODE_ENV productionNODE_ENV只能设置production和development两个参数 开发环境是development&a…

Excel 取出每组最后一行

Excel的前两列是两层的分组列&#xff0c;后两列是明细 ABCD1CM11112CM12123CM13134CM14145CM25156CM26167BM11218BM12229BM232310AM113111AM323212AM333313AM3434 现在要取出每小组的最后一行&#xff1a; ABCD1CM14142CM26163BM12224BM23235AM11316AM3434 使用 SPL XLL sp…

产品经理-产品设计规范(六)

1. 设计规范 2. 七大定律 2.1 菲茨定律 2.1.1 概念 2.1.2 理解 2.1.3 启示 按钮等可点击对象需要合理的大小尺寸根据用户使用习惯合理设计按钮的相对和绝对位置屏幕的边和角很适合放置像菜单栏和按钮这样的元素 2.1.4 参考使用手机习惯 2.1.5 案例 2.2 席克定律 2.2.1 概念 …

JavaWeb_HTTP协议

HTTP&#xff1a; 概念&#xff1a; HTTP&#xff08;Hyper Text Transfer Protocal&#xff09;&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则。 特点&#xff1a; 1.基于TCP协议&#xff1a;面向连接&#xff0c;安全 2.基于请求-响应模型…

硬盘文件可以直接剪切到另一个盘吗?分享方法与注意事项

在数字化时代&#xff0c;硬盘成为了我们存储和管理文件的重要设备。随着数据量的不断增长&#xff0c;我们有时需要将文件从一个硬盘盘符转移到另一个盘符&#xff0c;以便更好地组织和利用存储空间。硬盘文件剪切操作就是实现这一目标的有效方式之一。本文将详细介绍如何直接…

中兴通讯携手AIS,助力泰国5G通信事业发展

前不久&#xff0c;中兴通讯携手泰国领先的移动运营商AIS&#xff0c;于泰国曼谷A-Z中心宣布商用部署中兴通讯最新一代的无线先锋产品。双方通力合作&#xff0c;将构建一个绿色、极简的智能5G通信网络&#xff0c;助力泰国5G通信事业发展。    新一代Super-N技术&#xff0c…

前端开发之xlsx的使用和实例,并导出多个sheet

前端开发之xlsx的使用和实例 前言效果图1、安装2、在页面中引用3、封装工具类(excel.js)4、在vue中使用前言 在实现业务功能中导出是必不可少的功能,接下来为大家演示在导出xlsx的时候的操作 效果图 1、安装 npm install xlsx -S npm install file-saver2、在页面中引用 值…

CentOS7 部署单机版 ElasticSearch + Logstash + Kibana

一、部署ElasticSearh 参考下面文章&#xff1a; CentOS7 部署单机版 ElasticSearch Logstash-CSDN博客文章浏览阅读83次&#xff0c;点赞2次&#xff0c;收藏2次。通过logstash收集信息&#xff0c;发送给elasticsearch处理。https://blog.csdn.net/weixin_44295677/articl…

Ubuntu20.04安装VINS_Mono 和 VINS_Fusion

文章目录 一、问题描述二、依赖环境1. Eigen 安装2. glog 安装3. gflags 安装4. ceres 安装 三、VINS-Mono 安装1. git 下载并安装2. OpenCV 版本冲突3. 运行 四、VINS—Fusion 安装1. git 下载并安装2. OpenCV 版本冲突3. 运行 五、日常bug1. 动静态库链接冲突 一、问题描述 …

Linux IO模型深度解析与实战应用

linux的5种IO模型 一、这里IO是什么 操作系统设有用户态与内核态,确保系统安全。应用程序默认在用户态运行,而执行如IO操作等底层任务时,需切换至内核态以高效执行。 服务器从网络接收的大致流程如下: 1、数据通过计算机网络来到了网卡 2、把网卡的数据读取到 socket 缓…

股价创20年新高,联想集团财报的野望

在当前的全球经济环境下&#xff0c;港股被低估已经越来越凸显&#xff0c;不可避免的受越来越多的资金关注。首先&#xff0c;经济方面&#xff0c;一季度&#xff0c;香港本地生产总值同比实质上升了2.7%。环顾全球&#xff0c;港股的估值水平更低&#xff0c;基本面又出现了…

webgl入门-绘制三角形

绘制三角形 前言 三角形是一个最简单、最稳定的面&#xff0c;webgl 中的三维模型都是由三角面组成的。咱们这一篇就说一下三角形的绘制方法。 课堂目标 理解多点绘图原理。可以绘制三角形&#xff0c;并将其组合成多边形。 知识点 缓冲区对象点、线、面图形 第一章 web…

Transformer详解(4)-前馈层残差连接层归一化

1、前馈层 前馈层接收自注意力层的输出作为输入。 from torch import nn import torch.nn.functional as Fclass FeedForward(nn.Module):def __init__(self, d_model512, d_ff2048, dropout0.1):super().__init__()# d_ff 默认设置为2048self.linear_1 nn.Linear(d_model,…

2024 Google I/O 宣布正式支持 Kotlin Multiplatform ,那 KMP 是什么?它的未来在哪里?

基于最近一直有人和我提 KMP &#xff0c;那就简单聊聊。 2024 Google I/O 正式官宣了支持 KMP &#xff0c;而一般意义上的 KMP 指的就是 Kotlin Multiplatform &#xff0c;它是 Google Workspace 团队的一项长期「投资」项目&#xff0c;这里有个重点&#xff0c;那就是 Ko…

图像处理之计算物体的方向(C++)

图像处理之计算物体的方向&#xff08;C&#xff09; 文章目录 图像处理之计算物体的方向&#xff08;C&#xff09;前言一、PCA获取物体主要方向1.原理2.代码实现 二、Hu矩获取物体主要方向1.原理2.代码实现 总结 前言 在图像处理中&#xff0c;物体的方向&#xff08;倾斜角…