實例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-加入购物车】...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。