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('可以加入购物车了')

}

})

})

运行实例 »

点击 "运行实例" 按钮查看在线实例