您的位置：首页 > Web前端 > JQuery

jquery 相关class属性的操作

2016-04-04 17:27 477 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wrap</title>
<script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>
<style type="text/css">
.lianjie{display: inline-block;border:1px solid red}
.border{border:1px solid red}
.border1{outline: 4px dotted green }
</style>
</head>
<body>
<a href="http://www.baidu.com" class="baidu">百度</a>
<a href="http://www.souhu.com" class="souhu">百度</a>
<a href="http://www.xinlang.com" class="xinlng">百度</a>
<img src="1.jpg" alt="这是张图片"/>

<script type="text/javascript">
$(document).ready(function(){
$("img").addClass("picture");//添加class属性
$("img").removeClass("picture").addClass("t_pic");//删除并添加class属性
console.log($("img").hasClass("t_pic"));//hasClass检测是否存在Class属性

$("a:odd").addClass("lianjie");//odd 奇数 even偶数

$("a").addClass(function(index,eclass){//动态添加class属性 index是索引 elcass处理当前元素拥有的class属性
if(index%2==0){
return "even";
}else{
return "odd";
}
});

$("a").filter(":odd").addClass("oddClass").end()//filter()筛选出于表达式匹配的结果集 end()返回最近一次的破坏性操作之前，将匹配的元素列表变为前一次状态
.filter(":even").addClass("evenClass");

$("<button>toggle</button>").appendTo("body").click(doToggle);

function doToggle(e){
//            $("img").toggleClass("border");//toggleClass切换class
//            $("img").toggleClass("border border1");//toggleClass切换多个class
//            $("img").toggleClass();//toggleClass()不添加参数的话是切换全部class
//            $("img").toggleClass("border",false);//toggleClass()第二个参数是false只删除
//            $("img").toggleClass("border",true);//toggleClass()第二个参数是true值添加
$("a").toggle(function(index,currentClass){

if(index%2==0){
return "border";
}else{
return "border1";
}

});

e.preventDefault();
}

});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航