html购物车内部处理样式,第4期学习班-1.23作业-【JQuery-attr方法】-【JQuery-切换CSS效果】-【JQuery-插入元素】-【JQuery-加入购物车】...
实例1.JQuery-attr方法设置元素属性
html>
JQuery-attr设置元素属性
.img {
border-radius: 50%;
}
.p1 {
text-align: center;
}
#p2{
text-shadow: 3px 3px 3px red;
}
alt="" width="480">
好好学习,天天向上!,点文本和点图有惊喜啊!
$(function () {
console.log($('img').attr('width'));
// $('img').attr('width', '800')
// console.log($('img').attr('width'))
$('img').click(function () {
$('img').attr('class', 'img');
/*设置img标签的CSS属性,这个非常的强大,实用性很高*/
});
$('p').click(function () {
$('p').attr({class:'p1',id:'p2'});
/*也可以给元素添加多个CSS属性,这里要注意书写格式*/
})
})
运行实例 »
点击 "运行实例" 按钮查看在线实例
attr( ):这个方法可以设置标签的属性,同时也包括class和ID属性,这个非常的强大,实用性很高。
例:$('p').attr({class:'p1',id:'p2'});
//给元素添加多个CSS属性,这里要注意书写格式。需要花括号,不要书写 . 和 # 号,class: '类名' , id: 'ID名'
实例2.1.JQuery-toggleClass方法
html>
JQuery-toggleClass-切换效果
.img {
border-radius: 50%;
}
.img2 {
box-shadow: 0 0 10px orangered;
}
alt="" width="480">
点图有惊喜啊!toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
$(function () {
console.log($('img').attr('width'));
// $('img').attr('width', '800')
// console.log($('img').attr('width'))
$('img').click(function () {
$('img').toggleClass('img img2 ');
//toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
});
})
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.JQuery-添加元素
html>
JQuery--元素内部插入内容
span {
text-shadow: 0 0 10px orangered;
}
.p5{
color: red;
}
div{
color: orange;
}
append(),在元素内部的结尾插入内容
prepend(),在元素内部的头部插入内容
after(),在元素结束标签外部插入内容
before(),在元素开始标签外部插入内容
$(function () {
$('.p1').click(function () {
$('.p1').append(' 插入到元素内部的结尾。');
/*append() - 在被选元素的结尾插入内容*/
});
$('.p2').click(function () {
$('.p2').prepend(' 插入到元素内部的开头。');
/*repend() - 在被选元素的开头插入内容*/
});
$('.p3').click(function () {
$('.p3').after('
');
/*repend() - 在被选元素的开头插入内容*/
});
$('.p4').click(function () {
$('.p4').before('
插入到元素外部的效果
');
/*repend() - 在被选元素的开头插入内容*/
});
})
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例4.JQuery-加入购物车
html>
JQuery--加入购物车
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
display: flex;
justify-content: center;
align-content: center;
font-size: 14px;
}
.box {
width: 400px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
h2 {
width: 100%;
flex: 0 0 30px;
line-height: 30px;
background-color: red;
text-align: center;
font-size: 16px;
color: #fff;
}
.main {
width: 100%;
border: 1px solid red;
padding: 10px;
}
p {
line-height: 40px;
}
b {
display: inline-block;
margin-right: 10px;
width: 80px;
text-align: center;
color: #999;
}
span {
display: inline-block;
width: 90px;
margin-right: 5px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
height: 30px;
color: #999;
}
button {
background-color: red;
border: none;
color: #fff;
width: 90px;
line-height: 30px;
}
.select {
border: 2px solid red;
}
请选择信息后加入购物车
版本ONE A2001ONE A0001ONE A1001
机身颜色白色黑色金色
套餐类型标配套餐一套餐二
运行内存2GB3GB4GB
机身内存16GB32GB64GB
产地中国大陆港澳台
价格999元抢购
数量
加入购物车
$(function () {
$('span').click(function () {
if ($(this).hasClass('select')) {
/*检查span标签中是否包含有select样式,如果有,则清除,*/
$(this).removeClass('select');
} else {
$(this).addClass('select').siblings('span').removeClass('select');
/*如果没有,就添加,同时要匹配同级span,清除掉同级span中的select样式*/
}
});
$('#sub').click(function () {
var form = {};
//创建一个空对象
var flag = true;
$('.item').each(function () {
/*each() 方法为每个匹配元素规定要运行的函数。*/
if ($(this).children('span.select').length != 1) {
/* != 不等于*/
alert($(this).find('b').html() + "未选中");
//将未被选中的选项弹窗提示。
flag = false;
} else {
var key = $(this).attr('name');
//获取每个p标签的name值
var value = $(this).children('span.select').html();
//获取每个P标签下被选中span的类型值
form[key] = value;
//将P标签的name值与被选中的子元素span的值一一对应。
}
});
if ($('.item1 input').val() <= 0) {
/*先判断数量值是否小为1*/
alert('数量最小为1');
flag = false;
} else {
form['num'] = $('.item1 input').val();
console.log(form);
}
if (flag) {
alert('可以加入购物车了')
}
})
})
运行实例 »
点击 "运行实例" 按钮查看在线实例
html购物车内部处理样式,第4期学习班-1.23作业-【JQuery-attr方法】-【JQuery-切换CSS效果】-【JQuery-插入元素】-【JQuery-加入购物车】...相关推荐
- jquery html()样式悠效,jquery怎么用attr()方法判断改变css样式?
jquery怎么用attr()方法判断改变css样式?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. jquery中用attr()方法用于设置或返回被选元 ...
- html购物车内部处理样式,购物车之架构设计
原标题:购物车之架构设计 skr shop是一群底层码农,由于被工作中的项目折磨的精神失常,加之由于程序员的自傲:别人设计的系统都是一坨shit,我的设计才是宇宙最牛逼,于是乎决定要做一个只设计不编码 ...
- 激光SLAM理论与实践-第五期 第七次作业
1.章节: 1.激光SLAM理论与实践-第五期 第一次作业(矩阵坐标变换) 2.激光SLAM理论与实践-第五期 第二次作业(里程计标定) 3.激光SLAM理论与实践-第五期 第三次作业(去运动畸变) ...
- jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- Springboot企业内部交流系统9r309计算机毕业设计-课程设计-期末作业-毕设程序代做
Springboot企业内部交流系统9r309计算机毕业设计-课程设计-期末作业-毕设程序代做 [免费赠送源码]Springboot企业内部交流系统9r309计算机毕业设计-课程设计-期末作业-毕设程 ...
- CSS常用技巧(元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美)
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
- tableView的plain样式的headerView的上拉过程中悬停解决方法
tableView的plain样式的headerView的上拉过程中悬停解决方法 参考文章: (1)tableView的plain样式的headerView的上拉过程中悬停解决方法 (2)https: ...
- Vue.js 实现v-if和v-else来切换CSS样式
一.要想使用Vue.js实现v-if和v-else来切换CSS样式,有两种实现方式: 比如我们想给一个div设置两个不同的背景颜色(当status为1的时候,我们设置背景为红色,当status状态为2 ...
- 具体解释站点沙盒期的原因表现与解决的方法
具体解释站点沙盒期的原因表现与解决的方法 非常多人都不太明确究竟什么是站点沙盒期,也不知道应该怎样去推断站点正处在沙盒期,而怎样才干让站点高速的走出沙盒期呢?这也另非常多人感觉到迷茫. 今天冯东阳就跟 ...
最新文章
- 卡尔曼滤波——车定位(GPS与车运动方程)
- #翻译NO.5# --- Spring Integration Framework
- C/C++之常用字符串比较总结
- Intellij IDEA社区版中的SpringBoot入门
- 阿里云混合云管理平台发布帮您管好云
- 网易126免费邮箱更改手机号(亲测有效)
- ACM/ICPC World Finals 2012 B Curvy Little Bottles
- 坯子库怎么导入插件_坯子库实用的插件安装器-SketchUp坯子插件库2020下载v2020.1正式版管理器-西西软件下载...
- 每日学习笔记(13)
- 梁文道:盗版电影网站死去,我们仍然不见光明
- 黄金矿工-Python
- golang:同个包下不同文件不能互相调用函数
- 保研面试/考研复试高等数学问题整理
- 计算机专业surface pro,微软Surface Pro 7详细评测:仍旧是最好的二合一平板电脑
- 【思维进阶】如果回到十年前你会做哪些事情?
- java会变得更简单吗_spring 第一篇(1-1):让java开发变得更简单(下)
- java数组和链表查询效率及增删效率比较
- 简约大方的HTML表格样式
- # 华为mate40 or iphon 12
- java编写自定义异常类,统一异常处理