您好,登录后才能下订单哦!
1.jQuery用法思想一
选择某个网页元素,然后对它进行某种操作
2.jQuery选择器
(1)可以快速地选择元素,选择规则和css样式相同,使用length属性判断选择是否成功。
$(function(){
/*选择类*/
var $div01 = $('.div1');
$div01.css({'color':'red'});
/*选择ID*/
var $div02 = $('#box2');
$div02.css({'fontSize':'40px'});
/*选择类下地标签,像css的类,也可以直接写li,表示选择所以li*/
var $li = $('.list li');
/*横杆式或者驼峰式都可以*/
$li.css({'backgroundColor':'green'});
/*input里name为GOon*/
var $li01 = $('input[name=GOon]');
$li01.css({'color':'pink'});
})
(2)对选择集进行过滤
/*选择含有p元素的div过滤*/
var $div03 = $('.filter div').has('p');
$div03.css({'backgroundColor':'gold'});
/*简写方式,适合一次调用,选择除div1类外div元素过滤*/
$('div').not('.div1').css({'backgroundColor':'gold'});
/*选择filter类过滤出第五个div*/
$('.filter div').eq('5').css({'color':'red'});
(3)选择集转移
/prev()第五块的前面一块紧挨着的/
$('.filter div').eq('5').prev().css({'color':'green'});
/*选择div内,类为nine的块*/
$('.filter div').find('.nine').css({'color':'red'});
/*prevAll()选择前面类内所有div*/
$('.filter div').eq('3').prevAll().css({'color':'red'});
/*0表示第一块,next表示后面同辈元素,nextAll同上*/
$('.filter div').eq('0').next().css({'color':'green'});
/*父级div,children()所有子元素,siblings()所有同级元素*/
$('.filter div').eq('5').parent().css({'backgroundColor':'pink'});
(4)判断是否选择到了元素
jQuery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。
/>0表示获取元素/
alert($div02.length);
3.jQuery用法思想二
同一个函数完成取值和赋值
(1)操作行间样式
注意:选择器获取的多个元素,获取信息获取的是第一个,比如:$(‘div’).css('width'),获取的是第一个div的width
(2)操作样式类名
/在原来样式名的基础上加bug/
$div.addClass('bug');
/除去样式名/
/$div.removeClass('bug another');/
/*重复切换another样式*/
$div.toggleClass('another')
**4.绑定click事件**
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $bTn = $('#btn');
$bTn.click(function(){
/*if($('.box').hasClass('btn')){
$('.box').removeClass('btn');
}
else{
$('.box').addClass('btn')
}*/
/*简写方式*/
$('.box').toggleClass('btn');
})
})
</script>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.btn{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<input type="button" name="" value="切换" id="btn">
<div class="box">123</div>
</body>
</html>
5.索引值-选项卡
获取元素的索引值
有时需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()方法获取
$(function(){
var $li = $('.list li');
/index,获取索引值,第一个为0/
alert($li.filter('.mylist').index());
})
例子:选项卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var $btn = $('.btns input');
var $div = $('.cons div');
/*alert($div.length),判断是否获取*/
$btn.click(function(){
/*移出除当前的类,siblings选择同辈元素*/
$(this).addClass('current').siblings().removeClass('current');
/*index()显示索引*/
$div.eq($(this).index()).addClass('div1').siblings().removeClass('div1');
})
})
</script>
<style type="text/css">
.btns input{
width: 100px;
height: 40px;
background-color: antiquewhite;
border: 0;/*给宽高会有边框*/
}
.btns .current{
background-color: aqua;
}
.cons div{
width: 500px;
height: 200px;
background-color: aquamarine;
display: none;
line-height: 200px;
text-align: center;
font-size: 30px;
}
.cons .div1{
display: block;
}
</style>
</head>
<body>
<div class="btns">
<input type="button" name="" value="01" class="current">
<input type="button" name="" value="02">
<input type="button" name="" value="03">
</div>
<div class="cons">
<div class="div1">选项卡1</div>
<div>选项卡2</div>
<div>选项卡3</div>
</div>
</body>
</html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。