程序员经验分享-hwhale

jQuery学习周记

2023-05-16

周记

        本周主要跟着教学视频制作了商城购物车案例，页面电梯导航，学习了利用jQuery操作尺寸、位置的操作，这一部分就类似于JS中的BOM页面文档类型，主要是通过对页面卷动事件进行一系列操作。其次完成JavaScript实训网站制作，制作了主页+内页的4部分模块内容。

购物商城案例：

         案例思路:1、制作HTML页面+css样式+JS交互；2、利用表格的框架放入页面内容，点击加号/减号/修改文本框内容,实现总价框数值/底部的商品件数/商品总价的数值变化；

点击全选按钮实现删除购物车的内容；

        制作思路:1、给加号和减号制作点击事件，内部给一个全局变量每点击一次变量+1；同时获取input中的value值利用$(“input”).val()方法去获值变量值并且给输入框的值改值，同时获取到商品总价*商品件数赋值给总价模块利用html()方法；2、点击按钮的全选按钮给全选按钮绑定其他的小按钮全部点亮，而底部小按钮就是没触发一个按钮就会去判断是不是所用的按钮都被点击了，我们此时可以使用input的选择器：checked选择器去过滤判读是否都返回true值若小按钮全选则点亮外部的全选按钮；3、当点击删除使用的文字时直接删除所有的父级tr盒子，而删除选中的商品仍旧利用：checked选择器去判断若为真统一删除；4、底部右侧的选中商品件数和商品的总价模块就是利用each遍历标签的方法去获取标签内部的标签值内容利用substr()方法去除文本内容的第一位美元符号并强制转换数据类型将值累加起来，这一个步骤贯穿在每一个事件当中利用函数调用使用每一次都直接修改总价数值；5、总价数就是也是根据遍历的方法获取文本val()值去利用text()方法修改。

电梯导航案例：

        案例思路:1、获取每一个内容距离顶部的距离，当点击导航小模块直接获取距离文档顶部的值，利用动画去跳转；2、当页面卷动小模块的背景随之动态改变；

        制作方法:1、因为小导航模块的li元素和页面内容区域是一一对应的因此注册点击事件我们只需要获取到点击盒子的索引，并将此值拿过来绑定到文本标签中获取此文本框距离顶部的距离，利用动画跳转到页面中指定的top（）值处。

  1. 利用each遍历所有标签在页面卷动事件中去获取卷动数值然后根据遍历到的索引去实现小模块中的背景改变即可。

        如上就是两个案例的制作，然后就学习了一些遍历操作与获值改值的方法，接下来一周将继续学习jQuery后续的内容......

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery学习周记 的相关文章

  • 利用indexOf方法去删除重复数组

    利用indexOf方法去删除重复数组 原理 xff1a indexof在数组中去遍历如果有我们需要的元素就会返回元素所在索引号 xff0c 若没有就会返回 1 xff1b 注意在索引时要求调用的参数与数组中的参数应该数据类型的一致 xff0

  • php查询当月sql记录

    以前我在查询数据库今天或昨天 近7天 近30天 本月 上一月数据都是直接通过php来判断了 xff0c 这样感觉是多一个环节了 xff0c 下面我介绍一篇直接使用sql统计出当天 昨天 近7天 近30天 本月 上一月数据语句 现在分享给各位

  • html+css弹性布局

    1 布局原理 flex是flexible Box的缩写 xff0c 意为 34 弹性布局 34 xff0c 用来为盒状模型提供最大的灵活性 xff0c 任何一个容器都可以指定为flex布局 当我们为父盒子设为flex布局以后 xff0c 子

  • 弹性布局中flex子项属性

    3 flex布局子项常见属性 1 flex子项目占的份数 A flex属性 xff1a 定义子项目分配剩余空间 xff0c 用flex来表示占多少份数 语法 xff1a flex 数值 以百分比样式输出 xff08 默认为0 xff09 x

  • 事件三要素~JS

    1 事件源 xff1a 哪一个标签需要发生动态改变 xff08 制作时需要获取元素改变元素和被改变元素 xff09 xff1b 2 事件类型 xff1a 指对标签执行的一系列静态页面的操作行为 xff1a 如 xff1a 点击 悬浮 触发未

  • 初识dom简单交互效果案例制作~JS

    一 点击不同的button实现页面img的改变 代码如下 xff1a 注意通过函数动态改变的img路径在编写的时候一定要是相对路径 lt body gt lt style gt div height 250px width 333px ba

  • dom简单交互效果案例制作~JS（二）

    1 排他操作 1 总结 xff1a 需要不停的去点击这个按钮 xff0c 每按下一个上一次点击的按钮背景就必须恢复正常 xff0c 用for循环每一次在点击之前所有的背景颜色恢复正常 xff0c 然后在去执行改色操作 lt body gt

  • Tab栏选项卡JS交互效果~JS

    tab栏选项卡 tab栏选项卡 分析 xff1a 分两个部分上面是选项卡下面是点击选项卡后显示出来的一部分 xff1b h5c3制作时将下面部分的样式利用display xff1a none xff1b 全部隐藏起来 JS中对于选项卡制作依

  • 节点操作简单概述~JS

    1 概述 一般 xff0c 节点至少拥有nodeType xff08 节点类型 nodeName 节点名称 xff09 和nodeValue 节点值 xff09 这三个基本属性 元素节点nodeType为1 属性节点nodeType为2 文

  • 中国经典文学作品~JS制作

    总结 xff1a 点击事件源调用函数 xff0c 弹出输入框存入数据 xff0c 将数据保存到变量里面在点击添加的时候将数据存入数组 xff0c 然后合并数组 xff0c 通过遍历的方式存入到新的变量当中输出 在删除按钮的制作就是 通过输入

  • Ubuntu中shell命令（一）

    1 ls命令 xff1a 显示指定工作目录下之内容 A xff1a ls xff1a 列出根目录 下的所有目录 B xff1a ls ltr s 列出目前工作目录下所有名称是 s 开头的文件 xff0c 越新的排越后面 C xff1a ls

  • Ubuntu中shell命令（二）

    1 sudo命令 xff1a 切换用户身份命令 我们通过切换命令去获取用户权限 xff0c 寻求root用户 xff0c 获取超级权限 xff0c 经由 sudo 所执行的指令就好像是 root 亲自执行 2 su命令 xff1a Linu

  • php查询数据库输出近7天，每一天的数据

    for i 61 0 i lt 61 6 i 43 43 user count i 61 intval User gt where 39 DATEDIFF CURDATE FROM UNIXTIME 96 regtime 96 34 Y m

  • Ubuntu中shell命令（三）

    1 grep命令 xff1a 查找内容命令 r 或 recursive 此参数的效果和指定 34 d recurse 34 参数相同 n 或 line number 在显示符合样式的那一行之前 xff0c 标示出该行的列数编号 i 或 ig

  • ubuntu软件安装报错

    出现E Unable to locate package get xff08 资源暂时不可用 xff0c 无法锁定管理目录 xff0c 是否有其他进程在占用 xff09 现获取root权限分开使用如下两条指令强制释放锁 1 sudo rm

  • Ubuntu安装软件

    1 利用APT工具安装软件 使用apt包管理工具 安装报E Unable to locate package get错误先root一下 使用语法 xff1a sudo apt get install 软件名 xff1b 2 deb软件包安装

  • JS中~location对象+navigator对象用法

    url xff08 统一资源定位符 xff09 包含的信息能指出文件的位置以及浏览器的处理方式 protocol host port path t query fragment http www itcast cn index htm1 n

  • JS中~偏移量设定方式与案例分析

    1 history对象方法 分析 xff1a 实现从主页跳转过来以后就会自动生成一个p标签并改写内容 xff0c 利用location对象修改herf方法值 xff0c 实现不用标签跳转 问题 xff1a 对于添加创建的元素使用方法遗忘 x

  • offsetWidth、clientWidth、scrollWidth三者的区别

    client可视区 client翻译过来就是客户端 xff0c 我们使用client系列的相关属性来获取元素可视区的相关信息 通过client系列的相关属性可以动态的得到该元素的边框大小 元素大小等 offsetWidth or offse

  • JS制作~淘宝固定侧边栏

    淘宝固定侧边栏 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta charset 61 34 UTF 8 34 gt lt meta http equiv 6

随机推荐

  • JS中~ flexible.js分析

    flexible js分析 1 document documentElement获取根标签 2 DOMContentLoaded 事件是文档加载完成时触发的事件 xff0c 文档加载完成是指DOM结构 xff08 所有文档标签 xff09

  • ubuntu磁盘挂载解决方法（2022/5/9）

    挂载磁盘 xff08 使用root权限去使用 xff09 注意 xff1a 1 建议全程以超级用户权限去调用 2 语法结构上的问题 xff08 mount 目标文件所在位置 43 一个空格 43 保存路径 xff09 3 挂载之前需要清空新

  • 缓动动画效果

    mouseenter 鼠标事件 当鼠标移动到元素上时就会触发mouseenter事件类似 mouseover xff0c 它们两者之间的差别是 mouseover鼠标经过自身盒子会触发 xff0c 经过子盒子还会触发 mouseenter

  • thinkphp根据时间戳查询时间范围内的记录

    这是获取当月月初和月末的时间戳 beginThismonth 61 mktime 0 0 0 date 39 m 39 1 date 39 Y 39 endThismonth 61 mktime 23 59 59 date 39 m 39

  • MySQL语句汇总（节选）

    create语句 xff0c 创建库 表 create database 数据库名 xff1b 创建数据库 create table 表名 xff08 列名1 数据类型 约束 xff0c 列名2 数据类型 约束 xff0c 列名3 数据类型

  • JS中~Dom和Bom方法汇总

    var newNode 61 document createElement 34 div 34 创建一个元素节点 var textNode 61 document createTextNode 34 hello world 34 创建一个文

  • ubuntu中文件夹的解压和创建用户组命令

    二 Windows下7ZIP软件的安装 因为Linux下很多文件是 bz2 xff0c gz结尾的压缩文件 xff0c 因此需要在windows下安装7ZIP软件 二 gzip压缩工具 gzip工具负责压缩和解压缩 gz格式的压缩包 gzi

  • JS高级部分对于数据、内存的解析

    内存中堆和栈道区别 xff1a 堆是在内存中开辟的一块较大容量的区域 xff0c 主要用来存放基本值类型的我们可以通过获取地址的方式去获得堆中的基本值类型 xff0c 且堆里面的内容一经存在便不会删除 xff0c 这也就是我们对一个变量实现

  • 原型链概念论述（一）

    对象中的静态成员和实例成员 xff1a 使用构造函数方法创建对象时 xff0c 可以给构造函数和创建的实例对象添加属性和方法 xff0c 这些属性和方法都叫做成员 实例成员 在构造函数内部添加给this 的成员 xff0c 属于实例对象的成

  • 原型链理论概述（二）

    面向对象的思维特点 xff1a 1 xff0e 抽取 xff08 抽象 xff09 对象共用的属性和行为组织 封装 成一个类 模板 xff09 2 xff0e 对类进行实例化 获取类的对象 面向对象编程我们考虑的是有哪些对象 xff0c 按

  • JS中~insertAdjacentHTML() 方法（插入元素到指定位置）

    insertAdjacentHTML 方法将指定的文本解析为 Element 元素 xff0c 并将结果节点插入到DOM树中的指定位置 它不会重新解析它正在使用的元素 xff0c 因此它不会破坏元素内的现有元素 这避免了额外的序列化步骤 x

  • JS中~ 面向对象编程制作tab栏

    面向对象编程制作tab栏 利用constructor属性接收实例对象传递过来的参数去获取和htm结构中的元素 xff0c 在类函数中对各种不同的功能封装成不同的函数 xff0c 在制作过程中相互调用 xff0c 第一步的点击上边按钮与此同时

  • 初识jquery

    jQuery 入口函数 1 function 2 document ready function 注意 xff1a 等着DOM结构渲染完毕即可执行内部代码 xff0c 不必等到所有外部资源加载完成 xff0c jQuery帮我们完成了封装

  • jQuery基础（二）

    xff1a eq获取到的索引号的index从0开始因此eq 2 是标签的第三个标签 选择器筛选 function 34 nav gt li gt a 34 mouseover function this siblings 34 ul 34

  • Thinkphp开启项目分组，绑定二级域名

    如果发现没有效果 xff0c 请开启debug xff0c 清除缓存

  • 链式编程+jQuery中html( )和text( )方法

    事件切换的复合属性写法 xff1a 标签名 hover function 执行函数 function 执行函数 xff0c 这一个方法仅hover可用 jQuery中有个动画队列的机制 xff1a 当我们对一个对象添加多次动画效果时后添加的

  • jQuery动态创建元素，通过元素操作修改购物车相关交互效果

    1 创建元素 语法 34 39 lt li gt lt li gt 34 动态的创建了一一个 lt li gt 2 添加元素 内部添加元素 生成之后 它们是父级关系 外部添加元素 生成之后 他们是兄弟关系 1 内部添加 把内容放入匹配元素内

  • jQuery 尺寸、位置操作

    1 width height 获取设置元素 width和height大小 console log 34 div 34 width 34 div 34 width 300 2 innerWidth innerHeight 获取设置元素 wid

  • jQuery侧边导航栏模块交互效果，导航栏点击事件、卷动事件、节流阀

    任务分析 xff1a 当我们滚动到模块 xff0c 就让电梯导航显示出来点击电梯导航页面可以滚动到相应内容区域核心算法 因为电梯导航模块和内容区模块 对应的当我们点击电梯导航某个小模块 xff0c 就可以拿到当前小模块的索引号 xff0c

  • jQuery学习周记

    周记 本周主要跟着教学视频制作了商城购物车案例 xff0c 页面电梯导航 xff0c 学习了利用jQuery操作尺寸 位置的操作 xff0c 这一部分就类似于JS中的BOM页面文档类型 xff0c 主要是通过对页面卷动事件进行一系列操作 其

热门标签