jQuery第三天

课程回顾：

​ 动画效果：基本动画，滑动动画，淡入淡出，自定义动画效果(animate)

​ 事件切换：hover(over，out);

​ 停止动画：stop

​ 操作属性：prop（固有属性），attr（自定义属性），data

​ 文本内容值：html，text，val

案例：购物车案例模块-增减商品数量

①核心思路：首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给文本框。②注意1： 只能增加本商品的数量， 就是当前+号的兄弟文本框（itxt）的值。 ③修改表单的值是val() 方法④注意2： 这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值⑤减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了，直接return false即可

**购物车案例模块-**修改商品小计

①核心思路：每次点击+号或者-号，根据文本框的值 乘以 当前商品的价格  就是 商品的小计②注意1： 只能增加本商品的小计， 就是当前商品的小计模块（p-sum）  ③修改普通元素的内容是text() 方法④注意2： 当前商品的价格，要把￥符号去掉再相乘 截取字符串 substr(1)⑤parents(‘选择器’) 可以返回指定祖先元素  ⑥最后计算的结果如果想要保留2位小数 通过 toFixed(2)  方法⑦用户也可以直接修改表单里面的值，同样要计算小计。 用表单change事件⑧用最新的表单内的值 乘以 单价即可  但是还是当前商品小计点击获取单价和数量相乘的结果保存给小计既可用户直接输入数字问题

parents

<body><div class="c1"><div class="c2"><div class="c3"><div class="c4">哇哈哈</div></div></div></div><script type="text/javascript">// parentsconsole.log( $('.c4').parents('.c1') );</script></body>

jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：$(“div”).each(function(index, domEle) { xxx; }）

\1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个\2. 里面的回调函数有2个参数：  index 是每个元素的索引号;  demEle 是每个DOM元素对象，不是jquery对象\3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象  $(domEle)主要用来遍历元素

语法2：$.each(object，function(index, element){ xxx;}）

\1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象\2. 里面的函数有2个参数：  index 是每个元素的索引号;  element  遍历内容主要用来遍历数据

**案例：购物车案例模块-**计算总计和总额

①核心思路：把所有文本框里面的值相加就是总计数量。总额同理②文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可③点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额④因此可以封装一个函数求总计和总额的， 以上2个操作调用这个函数即可。⑤注意1： 总计是文本框里面的值相加用 val()     总额是普通元素的内容用text()  ⑥要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加多次需要求总计，所有封装函数最为合适

创建元素

语法：$(’’

  • ’’);

添加元素

内部添加

element.append(’‘内容’’) [把内容放入匹配元素内部最后面，类似原生 appendChild

element.prepend(’‘内容’’) 把内容放入匹配元素内部最前面。

外部添加

element.after(’‘内容’’) // 把内容放入目标元素后面

element.before(’‘内容’’) // 把内容放入目标元素前面

①内部添加元素，生成之后，它们是父子关系。②外部添加元素，生成之后，他们是兄弟关系。

删除元素

element.remove() // 删除匹配的元素（本身）[元素就不在了]

element.empty() // 删除匹配的元素集合中所有的子节点[内容删除，元素依旧存在]

element.html(’’’’) // 清空匹配的元素内容

①remove 删除元素本身。②empt() 和  html('''') 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

**案例：购物车案例模块-**删除商品模块

①核心思路：把商品remove() 删除元素即可②有三个地方需要删除： 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车③商品后面的删除按钮： 一定是删除当前的商品，所以从 $(this) 出发④删除选中的商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品⑤清理购物车： 则是把所有的商品全部删掉

**案例：购物车案例模块-**选中商品添加背景

①核心思路：选中的商品添加背景，不选中移除背景即可②全选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景③小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景④这个背景，可以通过类名修改，添加类和删除类

上午回顾：

​ parents：获取所有上级元素

​ jQuery元素操作：

​ 遍历元素：

​ $(元素).each(function (index, elm) {注意：elm是DOM对象});

​ $.each(对象，function (index, elm) {});

​ 创建元素：$(‘

  • 新的元素
  • ’);

    ​ 添加元素：

    ​ 内部添加：append，appendTo，prepend，prependTo

    ​ 外部添加：after，before

    ​ 删除元素：remove，empty，html(’’);

    jQuery 尺寸、位置操作

    jQuery 尺寸

    width()、height()【只算width和height】

    innerWidth()、innerHeight()【包含padding+width】

    outerWidth()、outerHeight()【包含padding、border、width】

    outerWidth(true)、outerHeight(true)【包含padding、border、margin、width】

    以上参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。
参数可以不必写单位。<style type="text/css">div {width : 100px;height: 100px;background: red;margin: 10px;padding: 10px;border:10px solid blue;}</style>
</head>
<body><input type="button" value="点击"><div></div><script type="text/javascript">$('input').click(function () {// var w = $('div').width();// var h = $('div').height();// console.log(w,h);// 设置// $('div').width(200);// var w = $('div').innerWidth();// var h = $('div').innerHeight();// console.log(w,h);// $('div').innerWidth(200);// var w =  $('div').outerWidth();// var h = $('div').outerHeight()// console.log(w, h);// $('div').outerWidth(200);// var w = $('div').outerWidth(true);// var h = $('div').outerHeight(true);// console.log(w,h);// $('div').outerWidth(200,true);});</script>

    jQuery 位置

    位置主要有三个： offset()、position()、scrollTop()/scrollLeft();

    offset：获取元素相对于文档偏移量（获取的是对象），可以设置

    position：获取元素相对于定位父的偏移量（获取的是对象），不可以设置

    offset()设置或获取元素偏移

    ①offset() 方法设置或返回被选元素相对于**文档**的偏移坐标，跟父级没有关系。
$(元素).offset();
②该方法有2个属性 left、top 。offset().top  用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。③可以设置元素的偏移：offset({ top: 10, left: 30 });// 获取son的位置// offset：获取元素距离文档的位置，返回是对象// 如果只想获取其中某一个值，那么我们offset().top// console.log( $('.son').offset() );$('.son').offset({top : 200,left : 300});

    position() 获取元素偏移**

    ①position() 方法用于返回被选元素相对于**带有定位的父级**偏移坐标，如果父级都没有定位，则以文档为准。
$('元素').position()②该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。注意：该方法只能获取。// 获取元素距离定位父的偏移位置// console.log( $('.son').position().left );// 注意：offset是可以设置，而position是不可以设置$('.son').position({left : 20,top : 20});

    scrollTop()、scrollLeft()设置或获取元素被卷去的头部和左侧

    ①scrollTop() 方法设置或返回被选元素被卷去的头部。

    ②不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

    scroll事件：滚动事件，（谁有滚动条加给谁）

    $('div').scroll(function () {// console.log(123);console.log( $('div').scrollTop() );});$('input').click(function () {// $('div').scrollTop(0);$('div').animate({scrollTop : 0}, 3000);});

    案例带有动画的返回顶部

    ①核心原理： 使用animate动画返回顶部。②animate动画函数里面有个scrollTop 属性，可以设置位置③但是是元素做动画，因此$(“body,html”).animate({scrollTop: 0})

    案例：品优购电梯导航

    ①当我们滚动到 今日推荐 模块，就让电梯导航显示出来②点击电梯导航页面可以滚动到相应内容区域③核心算法：因为电梯导航模块和内容区模块一一对应的④当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号⑤就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top⑥然后执行动画即可

    第二部分：①当我们点击电梯导航某个小li， 当前小li 添加current类，兄弟移除类名②当我们页面滚动到内容区域某个模块， 左侧电梯导航，相对应的小li模块，也会添加current类， 兄弟移除current类。③触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面。④需要用到each，遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号⑤判断的条件：  被卷去的头部 大于等于 内容区域里面每个模块的offset().top⑥就利用这个索引号找到相应的电梯导航小li添加类。

    课程回顾：

    ​ parents：获取所有上级元素

    ​ 元素操作：

    ​ 遍历元素：

    ​ 1、$(元素).each(function (index（索引）, elm（元素）) {})

    ​ 2、$.each(对象,function (index（索引）, elm（元素）) {})

    ​ 创建元素：

     $   ('<li>新的元素</li>');

    ​ 添加元素：

    ​ 内部添加：

    append （在父元素内最上方），
appendTo（在父元素内最下方），
prepend（在父元素外最上方），
prependTo（在父元素外最下方）

    ​ 外部添加：after（下），before（上）

    ​ jQuery尺寸：width，innerWidth，outerWidth，outerWidth(true)

        <script>$(function() {// 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width());// $("div").width(300);// 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 console.log($("div").innerWidth());// 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 console.log($("div").outerWidth());// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + marginconsole.log($("div").outerWidth(true));})</script>

    ​ jQuery位置：

    ​ 偏移位置：offset，position

       <script>$(function() {// 1. 获取设置距离文档的位置（偏移） offsetconsole.log($(".son").offset());console.log($(".son").offset().top);// $(".son").offset({//     top: 200,//     left: 200// });// 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准// 这个方法只能获取不能设置偏移console.log($(".son").position());// $(".son").position({//     top: 200,//     left: 200// });})</script>

    ​ 卷起距离：scrollTop，卷起顶部距离

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {height: 2000px;}.back {position: fixed;width: 50px;height: 50px;background-color: pink;right: 30px;bottom: 100px;display: none;}.container {width: 900px;height: 500px;background-color: skyblue;margin: 400px auto;}</style><script src="jquery.min.js"></script>
</head><body><div class="back">返回顶部</div><div class="container"></div><script>$(function() {$(document).scrollTop(100);// 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()// 页面滚动事件var boxTop = $(".container").offset().top;$(window).scroll(function() {// console.log(11);console.log($(document).scrollTop());if ($(document).scrollTop() >= boxTop) {$(".back").fadeIn();} else {$(".back").fadeOut();}});// 返回顶部$(".back").click(function() {// $(document).scrollTop(0);$("body, html").stop().animate({scrollTop: 0});// $(document).stop().animate({//     scrollTop: 0// }); 不能是文档而是 html和body元素做动画})})</script>
</body></html>

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

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

相关文章

C语言程序设计II—第八周教学

C语言程序设计II—第八周教学

第八周教学总结&#xff08;15/4-21/4&#xff09; 教学内容 本周的教学内容为&#xff1a; 　　8.4 电码加密 知识点&#xff1a;指针与字符串&#xff0c;重难点&#xff1a;字符指针与字符串的关联和区别&#xff1b; 　　8.5 任意个整数求和 知识点&#xff1a;动态内存分配…
阅读更多...
AFNetworking 对数据进行https ssl加密

AFNetworking 对数据进行https ssl加密

参考来源&#xff1a;http://www.cnblogs.com/jys509/p/5001566.html 现在在工作中的工作需求&#xff1a;https请求验证证书一般来讲如果app用了web service , 我们需要防止数据嗅探来保证数据安全.通常的做法是用ssl来连接以防止数据抓包和嗅探其实这么做的话还是不够的 。…
阅读更多...
数据库系统原理（第一章概述）

数据库系统原理（第一章概述）

一、数据库基本概念 什么是数据&#xff1a;数据&#xff08;Data&#xff09;是描述事物的符号记录&#xff0c;是指利用物理符号记录下来的、 可以鉴别的信息。 数据是信息存在的一种形式&#xff0c;只有通过解释或处理的数据才能成为有用的信息。 什么是数据库&#xff1a;…
阅读更多...
jQuery第四天

jQuery第四天

课程回顾&#xff1a; ​ 元素操作&#xff1a; ​ 遍历元素&#xff1a; ​ $(‘元素’).each(function (index, elm) {}); ​ $.each(对象&#xff0c;function (index, elm) {}); ​ 创建元素&#xff1a;$(‘ 新的元素?’);​ 添加元素&#xff1a; ​ 内部添加&…
阅读更多...
navigationController的NavigationBar和ToolBar的POP或PUSH消失问题

navigationController的NavigationBar和ToolBar的POP或PUSH消失问题

今天在工作中发现一个坑&#xff0c; 其他页面都是隐藏。YSViewController 使用的时候必须是需要 navigationBar 和 toorbar&#xff0c;但是 pop出这个viewcontroller后&#xff0c;需要隐藏navigationBar 和 toorbar&#xff0c;但是直接设置为hiddenYES会出现其他页面压栈出…
阅读更多...
实验二：Linux下Xen环境的安装

实验二：Linux下Xen环境的安装

实验名称&#xff1a; Linux下Xen环境的安装&#xff08;centOS7&#xff09; 实验环境&#xff1a; 本次实验基本是在centOS7的环境下完成&#xff0c;系统内核和系统版本如下&#xff1a; 实验要求&#xff1a; 为centOS7的环境下安装Xen的平台&#xff0c;能够正常使用Xen下…
阅读更多...
IDEA写vue项目出现红色波浪线警告如何解决？？

IDEA写vue项目出现红色波浪线警告如何解决？？

1.看图 2.希望对大家有帮助&#xff0c;只要修改了这个就可以&#xff0c;如有任何问题都可以留言&#xff0c;谢谢大家 2019-09-1923:54:11 作者&#xff1a;何秀好 转载于:https://www.cnblogs.com/itboxue/p/11553395.html
阅读更多...
数据可视化（BI报表的开发）第一天

数据可视化（BI报表的开发）第一天

课程回顾&#xff1a; ​ jQuery事件注册&#xff1a; ​ $(元素).click(function () {}); ​ $(元素).on(‘click’, [后代元素], function () {}); ​ $(元素).one(‘click’, function () {}); ​ 解绑事件&#xff1a;off ​ 自动触发&#xff1a; ​ $(元素).click…
阅读更多...
在Block中使用weakSelf与strongSelf的意义

在Block中使用weakSelf与strongSelf的意义

在Block中使用weakSelf与strongSelf的意义 我们都会声明一个弱引用在block中使用, 目的就是防止循环引用, 那么weakSelf与strongSelf一起使用目的是什么呢? 首先先定义2个宏: #define YXWeakSelf(type) __weak typeof(type) weak##type type; #define StrongSelf(type) __…
阅读更多...
操作系统原理之操作系统简介（第一章）

操作系统原理之操作系统简介（第一章）

一、 什么是操作系统 操作系统&#xff1a;是一种复杂的系统软件&#xff0c;是不同程序代码、数据结构、数据初始化文件的集合&#xff0c;可执行。 操作系统是用户与硬件之间的接口&#xff1a;操作系统与硬件部分相互作用&#xff0c;并且为运行在计算机上的应用程序提供执行…
阅读更多...
数据可视化（BI报表的开发）第二天

数据可视化（BI报表的开发）第二天

9、公用面板样式 所有的面板的基础样式是一致的&#xff0c;提前布局好。 面板 .panel &#xff1a;box-sizing&#xff0c;边框图&#xff0c;大小&#xff0c;定位【51 38 20 132】容器 .inner&#xff1a;padding&#xff1a;24&#xff0c;36&#xff0c;定位外部拉宽标…
阅读更多...
关于Xcode 7.3 7.3.1 断点 卡死 无限菊花

关于Xcode 7.3 7.3.1 断点 卡死 无限菊花

关于Xcode 7.3 7.3.1 断点 卡死 无限菊花 只要一打断点,就无限卡死,变量区一直菊花在转,只有强制退出Xcode才能重新编译,找了Google和Stack OvewFlowe依然没有解决办法. 删除项目,重新安装Xcode,重新运行程序一切办法都解决不到,百度上说的"build setting中将Enable Clang…
阅读更多...
html5+hbuilder+夜神模拟器+webview

html5+hbuilder+夜神模拟器+webview

HTML5 Plus应用概述 首先新建一个移动App项目&#xff0c;文件-->新建-->移动APP HTML5 Plus移动App&#xff0c;简称5App&#xff0c;是一种基于HTML、JS、CSS编写的运行于手机端的App&#xff0c;这种App可以通过扩展的JS API任意调用手机的原生能力&#xff0c;实现与…
阅读更多...
第十九节：Asp.Net Core WebApi知识总结(一)

第十九节：Asp.Net Core WebApi知识总结(一)

111 转载于:https://www.cnblogs.com/yaopengfei/p/11558525.html
阅读更多...
iOS设计模式 ——单例模式详解以及严格单例模式注意点

iOS设计模式 ——单例模式详解以及严格单例模式注意点

一、我们常用的单例有哪些&#xff1f; [[UIApplication sharedApplication] statusBarStyle];//系统中的单例模式&#xff0c;通过它获取到状态栏的style [NSNotificationCenter defaultCenter] addObserver:<#(nonnull id)#> selector:<#(nonnull SEL)#> name:&…
阅读更多...
科学计算库学习报告

科学计算库学习报告

numpy与matplotlib的学习随笔 我爱代码 import numpy as npimport matplotlib.pyplot as pltimport matplotlibmatplotlib.rcParams[font.family]SimHeimatplotlib.rcParams[font.sans-serif][SimHei]labelsnp.array([第一次,第二次,第三次,第四次,第五次,第六次])nAttr6datanp…
阅读更多...
前端网页 — 初始化文件

前端网页 — 初始化文件

/*--------------------------初始化代码*/ /*清除默认的margin和padding*/ * {margin: 0;padding: 0; }/*清除小圆点*/ ul {list-style: none; }/*清除a标签默认的下划线*/ a {text-decoration: none; }/*表格边框合并*/ table {border-collapse: collapse; }/*去除input标签点…
阅读更多...
数据库系统原理（第二章关系数据库 ）

数据库系统原理（第二章关系数据库 ）

一、关系数据库概述 20世纪80年代后&#xff0c;在商用数据库管理系统中&#xff0c;&#xff08; 关系模型 &#xff09;逐渐取代早 期的网状模型和层次模型&#xff0c;成为主流数据模型 SQL3&#xff08;SQL-99&#xff09;:1999年 SQL2&#xff08;SQL-92&#xff09;&…
阅读更多...
iOS NSMutableAttributedString常用方法总结

iOS NSMutableAttributedString常用方法总结

NSAttributedString 叫做富文本&#xff0c;是一种带有属性的字符串&#xff0c;通过它可以轻松的在一个字符串中表现出多种字体、字号、字体大小等各不相同的风格&#xff0c;还可以对段落进行格式化&#xff0c;一般都是对可变富文本&#xff08;NSMutableAttributedString&a…
阅读更多...
微信小程序image bindload事件失效不触发

微信小程序image bindload事件失效不触发

1.先上代码 <template><div :class"[img-wrapper, className]"><img :src"defaultSrc" :mode"mode" class"default-img" :hidden"loaded"><img :src"src" :mode"mode" load"…
阅读更多...
最新文章

Copyright @ 2022~2023