一、Jq遍历html元素|
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jq遍历html元素</title>
<style type="text/css">
.box{
border:1px solid #ccc;
width: 500px;
height: 500px;
margin:50px auto;
}
div,ul,li,a,span,p,h1{
border:1px solid red;
}
li{
list-style: none;
height: 100px;
}
</style>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="box">外层
<ul>
<li>
<a href="">
中文网<span>你好！</span>
</a>
</li>
</ul>
</div>
<p>
1
</p>
<br>
<h1>234</h1>
<script>
//jQuery遍历（用一种相对的关系来查找html元素）
$(function(){
//向上查找元素（祖先元素）
//parent() 方法返回被选元素的直接父元素
//$('span').parent().css('fontSize','30px');
//parents() 方法返回被选元素的所有祖先元素;
//$('span').parents().css('fontSize','60px');
// parents() 方法会使用可选参数来过滤对祖先元素的搜索
//$('a').parents('div').css('color','red');
//向下查找元素（子孙元素）
//children() 方法返回被选元素的所有直接子元素
//$('ul').children().css('fontSize','30px');
//children()方法会使用可选参数来过滤对祖先元素的搜索
//$('li').children('a').css('color','red');
//find() 方法返回被选元素的后代元素
//$('.box').find('span').css('background','blue');
//同级查找（同胞）
//siblings() 方法返回被选元素的所有同胞元素
//$('div').siblings().css('background','red')
// siblings() 方法过滤
$('div').siblings('p').css('background','red')
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、jQuery获取并设置CSS 类
css()设置或返回样式属性;
$('.centent').click(function(){
$('.centent').css('background','pink');//设置并返回样式
$('.centent').css({'line-height':'500px','border-radius':'50%'});//设置多个CSS样式属性
$('.centent').addClass('text1');//使用addClass()添加类，注意不要有点号
})
//删除css类
$('.centent').click(function(){
$('.centent').remove('text1');//remove()删除类，注意不要有点号
})
//通过判断CSS样式类是否存在，不存在则添加类，存在则删除类
//hasClass()检查被选元素是否包含指定的class
$('.centent').click(function(){
if($(this).hasClass('text')){
$(this).removeClass('text');
}else{
$(this).addClass('text');
}
})
三、设置及获取内容
//text()设置或返回所选元素的文本内容;
// $('.centent').mouseover(function(){
// $('.centent').text('好好学习天天向上！');
// })
//html()设置或返回所选元素的内容（包括 HTML 标记);
//console.log($('.centent').html())
// val()设置或返回表单字段的值;
$('input').click(function(){
$('input').val('请输入.....');
})
四、案例完整代码如下
实例
<!DOCTYPE html>
<html>
<head>
<title>jQuery获取并设置CSS 类/获取及设置内容</title>
<style type="text/css">
.centent{
width: 500px;
height: 500px;
border-radius: 50%;
background-color: pink;
/*box-shadow: 1px 3px 20px #ccc;*/
margin: 0 auto;
line-height: 500px;
text-align: center;
}
.text{
font-size: 50px;
box-shadow:1px 3px 20px #ccc;
text-shadow: 2px 4px 20px #ccc;
}
.p,input{
width: 600px;
height: 30px;
border-radius: 20px;
margin: 10px auto;
}
</style>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="centent">欢迎光临</div>
<div class="p"><form><input type="text" name="" value="你好"></form></div>
<script>
$(function(){
//设置并获取CSS类
//css()设置或返回样式属性;
$('.centent').click(function(){
$('.centent').css('background','pink');//设置并返回样式
$('.centent').css({'line-height':'500px','border-radius':'50%'});//设置多个CSS样式属性
$('.centent').addClass('text1');//使用addClass()添加类，注意不要有点号
})
//删除css类
$('.centent').click(function(){
$('.centent').remove('text1');//remove()删除类，注意不要有点号
})
//通过判断CSS样式类是否存在，不存在则添加类，存在则删除类
//hasClass()检查被选元素是否包含指定的class
$('.centent').click(function(){
if($(this).hasClass('text')){
$(this).removeClass('text');
}else{
$(this).addClass('text');
}
})
//设置及获取内容
//text()设置或返回所选元素的文本内容;
// $('.centent').mouseover(function(){
// $('.centent').text('好好学习天天向上！');
// })
//html()设置或返回所选元素的内容（包括 HTML 标记);
//console.log($('.centent').html())
// val()设置或返回表单字段的值;
$('input').click(function(){
$('input').val('请输入.....');
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
五、模拟添加购物车案例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq模拟加入购物车</title>
<style type="text/css">
div{
width: 500px;
height: 500px;
border:1px solid red;
border-radius: 3px;
margin: 0 auto;
font-size: 13px;
}
.head{
height: 40px;
background: red;
font-size: 18px;
color: #fff;
line-height: 40px;
text-align: center;
margin-top: 0px;
}
b{
display: inline-block;
width: 80px;
height: 25px;
margin-left: 30px;
}
span,input,button{
border:1px solid #ccc;
width: 100px;
height: 25px;
display: inline-block;
margin: 2px;
line-height: 25px;
text-align: center;
}
span:hover{
cursor: pointer;
}
input{
height: 18px;
}
button{
background: red;
margin: 20px 110px;
border: 0px;
height: 30px;
}
button:hover{
cursor: pointer;
}
.border{/*被选择后出现的样式*/
border:2px solid red;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
<p class="head">请选择信息后加入购物车</p>
<p class="item" name="vison"><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="taocan"><b>套餐类型</b><span>标配</span><span>套餐一</span><span>套餐二</span></p>
<p class="item" name="rom"><b>运行内存</b><span>2GB</span><span>3GB</span><span>4GB</span></p>
<p class="item" name="ram"><b>机身内存</b><span>16GB</span><span>32GB</span><span>64GB</span></p>
<p class="item" name="from"><b>产地</b><span>中国大陆</span><span>港澳台</span></p>
<p class="item" name="point"><b>价格</b><span>格999元抢购</span></p>
<p class="item1" name="num"><b>数量</b><input type="number" value="1"></p>
<p><button id="sub">加入购物车</button></p>
</div>
<script>
$(function(){
$('span').click(function(){
if($(this).hasClass('border')){
$(this).removeClass('border');
}else{
//没有就添加上border的class名，同时匹配同级span，清除同级其他span中的选中样式
$(this).addClass('border').siblings('span').removeClass('border');
}
})
$('#sub').click(function(){
var form={};//创建一个空的对象,用于储存数据;
var flag=true;//判断能不能加入购物车
//判断是否每个选项都选中; 没选中则弹窗警告; 选中了则添加至需要发送的表单数据里面
$('.item').each(function(){//each() 方法规定为每个匹配的.item元素都运行这个function函数
if($(this).children('span.border').length !=1){//判断span标签下并且选择样式为.border的标签
flag=false;
}else{
var key=$(this).attr('name');//获取当前p标签的 name属性值 不同的p属性名不一样
var value=$(this).children('span.border').html();
form[key]=value;
}
})
//判断购物车数量是否大于0，大于0则添加，不大于0则不能提交
if($('.item1 input').val()<=0){
flag=false;
}else{
form['num']=$('item1 input').val();
console.log(form);
}
if(flag){
alert('添加购物车成功');
}
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例