实例1.JQuery-attr方法设置元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-attr设置元素属性</title>
<script src="../1-25/jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!--网络调用，简单方便，如果没网就无法使用-->
<style>
.img {
border-radius: 50%;
}
.p1 {
text-align: center;
}
#p2{
text-shadow: 3px 3px 3px red;
}
</style>
</head>
<body>
<div>
<img src="http://www.wallcoo.com/cartoon/digital_CG_artwork_wallpaper_04_1920x1200/images/digital_CG_art_Fairy.jpg"
alt="" width="480">
<p>好好学习，天天向上！,点文本和点图有惊喜啊！</p>
</div>
<script>
$(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属性，这里要注意书写格式*/
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
attr( )：这个方法可以设置标签的属性，同时也包括class和ID属性，这个非常的强大，实用性很高。
例：$('p').attr({class:'p1',id:'p2'});
//给元素添加多个CSS属性，这里要注意书写格式。需要花括号，不要书写 . 和 # 号，class: '类名' ， id: 'ID名'
实例2.1.JQuery-toggleClass方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-toggleClass-切换效果</title>
<script src="../1-25/jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!--网络调用，简单方便，如果没网就无法使用-->
<style>
.img {
border-radius: 50%;
}
.img2 {
box-shadow: 0 0 10px orangered;
}
</style>
</head>
<body>
<div>
<img src="http://www.wallcoo.com/cartoon/digital_CG_artwork_wallpaper_04_1920x1200/images/digital_CG_art_Fairy.jpg"
alt="" width="480">
<p>点图有惊喜啊！toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。</p>
</div>
<script>
$(function () {
console.log($('img').attr('width'));
// $('img').attr('width', '800')
// console.log($('img').attr('width'))
$('img').click(function () {
$('img').toggleClass('img img2 ');
//toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
});
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.JQuery-添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery--元素内部插入内容</title>
<script src="../jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><!--网络调用，简单方便，如果没网就无法使用-->
<style>
span {
text-shadow: 0 0 10px orangered;
}
.p5{
color: red;
}
div{
color: orange;
}
</style>
</head>
<body>
<p class="p1">append(),在元素内部的结尾插入内容</p>
<p class="p2">prepend(),在元素内部的头部插入内容</p>
<p class="p3">after(),在元素结束标签外部插入内容</p>
<p class="p4">before(),在元素开始标签外部插入内容</p>
<script>
$(function () {
$('.p1').click(function () {
$('.p1').append(' 插入到元素内部的结尾。');
/*append() - 在被选元素的结尾插入内容*/
});
$('.p2').click(function () {
$('.p2').prepend('<span> 插入到元素内部的开头。</span>');
/*repend() - 在被选元素的开头插入内容*/
});
$('.p3').click(function () {
$('.p3').after('<div> 插入到元素外部的效果</div>');
/*repend() - 在被选元素的开头插入内容*/
});
$('.p4').click(function () {
$('.p4').before('<p class="p5"> 插入到元素外部的效果</p>');
/*repend() - 在被选元素的开头插入内容*/
});
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例4.JQuery-加入购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery--加入购物车</title>
<script src="../jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!--网络调用，简单方便，如果没网就无法使用-->
<style>
* {
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;
}
</style>
</head>
<body>
<div class="box">
<h2>请选择信息后加入购物车</h2>
<div class="main">
<p class="item" name="version"><b>版本</b><span>ONE A2001</span><span>ONE A0001</span><span>ONE A1001</span></p>
<p class="item" name="color"><b>机身颜色</b><span>白色</span><span>黑色</span><span>金色</span></p>
<p class="item" name="type"><b>套餐类型</b><span>标配</span><span>套餐一</span><span>套餐二</span></p>
<p class="item" name="ram"><b>运行内存</b><span>2GB</span><span>3GB</span><span>4GB</span></p>
<p class="item" name="rom"><b>机身内存</b><span>16GB</span><span>32GB</span><span>64GB</span></p>
<p class="item" name="location"><b>产地</b><span>中国大陆</span><span>港澳台</span></p>
<p class="item" name="price"><b>价格</b><span>999元抢购</span></p>
<p class="item1" name="num"><b>数量</b><input type="number" value="1"></p>
<p><b></b>
<button class="btn" id="sub">加入购物车</button>
</p>
</div>
</div>
<script>
$(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('可以加入购物车了')
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
