html购物车内部处理样式,第4期学习班-1.23作业-【JQuery-attr方法】-【JQuery-切换CSS效果】-【JQuery-插入元素】-【JQuery-加入购物车】...
實(shí)例1.JQuery-attr方法設(shè)置元素屬性
html>
JQuery-attr設(shè)置元素屬性.img?{
border-radius:?50%;
}
.p1?{
text-align:?center;
}
#p2{
text-shadow:??3px?3px?3px?red;
}
????
alt=""?width="480">
好好學(xué)習(xí)，天天向上！,點(diǎn)文本和點(diǎn)圖有驚喜啊！
$(function?()?{
console.log($('img').attr('width'));
//?$('img').attr('width',?'800')
//?console.log($('img').attr('width'))
$('img').click(function?()?{
$('img').attr('class',?'img');
/*設(shè)置img標(biāo)簽的CSS屬性，這個(gè)非常的強(qiáng)大，實(shí)用性很高*/
});
$('p').click(function?()?{
$('p').attr({class:'p1',id:'p2'});
/*也可以給元素添加多個(gè)CSS屬性，這里要注意書寫格式*/
})
})
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
attr( )：這個(gè)方法可以設(shè)置標(biāo)簽的屬性，同時(shí)也包括class和ID屬性，這個(gè)非常的強(qiáng)大，實(shí)用性很高。
例：$('p').attr({class:'p1',id:'p2'});
//給元素添加多個(gè)CSS屬性，這里要注意書寫格式。需要花括號，不要書寫 .? 和 # 號，class: '類名'?， id: 'ID名'
實(shí)例2.1.JQuery-toggleClass方法
html>
JQuery-toggleClass-切換效果.img?{
border-radius:?50%;
}
.img2?{
box-shadow:?0?0?10px?orangered;
}
????
alt=""?width="480">
點(diǎn)圖有驚喜啊！toggleClass()?方法對添加和移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。
$(function?()?{
console.log($('img').attr('width'));
//?$('img').attr('width',?'800')
//?console.log($('img').attr('width'))
$('img').click(function?()?{
$('img').toggleClass('img?img2?');
//toggleClass()?方法對添加和移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。
});
})
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例3.JQuery-添加元素
html>
JQuery--元素內(nèi)部插入內(nèi)容span?{
text-shadow:?0?0?10px?orangered;
}
.p5{
color:?red;
}
div{
color:?orange;
}
append(),在元素內(nèi)部的結(jié)尾插入內(nèi)容
prepend(),在元素內(nèi)部的頭部插入內(nèi)容
after(),在元素結(jié)束標(biāo)簽外部插入內(nèi)容
before(),在元素開始標(biāo)簽外部插入內(nèi)容
$(function?()?{
$('.p1').click(function?()?{
$('.p1').append('?插入到元素內(nèi)部的結(jié)尾。');
/*append()?-?在被選元素的結(jié)尾插入內(nèi)容*/
});
$('.p2').click(function?()?{
$('.p2').prepend('?插入到元素內(nèi)部的開頭。');
/*repend()?-?在被選元素的開頭插入內(nèi)容*/
});
$('.p3').click(function?()?{
$('.p3').after('
插入到元素外部的效果');/*repend()?-?在被選元素的開頭插入內(nèi)容*/
});
$('.p4').click(function?()?{
$('.p4').before('
?插入到元素外部的效果
');/*repend()?-?在被選元素的開頭插入內(nèi)容*/
});
})
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
實(shí)例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
機(jī)身顏色白色黑色金色
套餐類型標(biāo)配套餐一套餐二
運(yùn)行內(nèi)存2GB3GB4GB
機(jī)身內(nèi)存16GB32GB64GB
產(chǎn)地中國大陸港澳臺
價(jià)格999元搶購
數(shù)量
加入購物車
$(function?()?{
$('span').click(function?()?{
if?($(this).hasClass('select'))?{
/*檢查span標(biāo)簽中是否包含有select樣式，如果有，則清除，*/
$(this).removeClass('select');
}?else?{
$(this).addClass('select').siblings('span').removeClass('select');
/*如果沒有，就添加，同時(shí)要匹配同級span，清除掉同級span中的select樣式*/
}
});
$('#sub').click(function?()?{
var?form?=?{};
//創(chuàng)建一個(gè)空對象
var?flag?=?true;
$('.item').each(function?()?{
/*each()?方法為每個(gè)匹配元素規(guī)定要運(yùn)行的函數(shù)。*/
if?($(this).children('span.select').length?!=?1)?{
/*?!=?不等于*/
alert($(this).find('b').html()?+?"未選中");
//將未被選中的選項(xiàng)彈窗提示。
flag?=?false;
}?else?{
var?key?=?$(this).attr('name');
//獲取每個(gè)p標(biāo)簽的name值
var?value?=?$(this).children('span.select').html();
//獲取每個(gè)P標(biāo)簽下被選中span的類型值
form[key]?=?value;
//將P標(biāo)簽的name值與被選中的子元素span的值一一對應(yīng)。
}
});
if?($('.item1?input').val()?<=?0)?{
/*先判斷數(shù)量值是否小為1*/
alert('數(shù)量最小為1');
flag?=?false;
}?else?{
form['num']?=?$('.item1?input').val();
console.log(form);
}
if?(flag)?{
alert('可以加入購物車了')
}
})
})
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
總結(jié)
以上是生活随笔為你收集整理的html购物车内部处理样式,第4期学习班-1.23作业-【JQuery-attr方法】-【JQuery-切换CSS效果】-【JQuery-插入元素】-【JQuery-加入购物车】...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 陕西省计算机等级考试试题库,2015陕西
- 下一篇： 计算机病毒会不会通过u盘传染,这样会感染