jquery样式操作_$(this).addclass("current").siblings().removeclass-优快云博客

本文链接：https://blog.youkuaiyun.com/msdn_make/article/details/102608473

// 获取div的样式
$("div").css("width");
$("div").css("color");

//设置div的样式
$("div").css("width","20px");
$("div").css("height","20px");
$("div").css({fontSize:"20px",color:"blue"});

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

$btn.click(function(){
// this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this)

// 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
$(this).addClass('current').siblings().removeClass('current');

               //alert( $(this).index() ; //弹出当前按钮的索引值
               // 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
               $div.eq( $(this).index() ).addClass('active').siblings().removeClass('active');
           })
       })

   </script>
</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="active">选项卡一的内容</div>
       <div>选项卡二的内容</div>
       <div>选项卡三的内容</div>
   </div>
</body>

属性操作

html() 取出或设置html内容

prop() 取出或设置某个属性的值

 // 取出图片的地址
var $src = $('#img1').prop('src');
// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

tesxt()获取或设置text内容

//获取文本内容
var #htm = $('#div').text();
//设置文本内容
$('#div').text('<span>添加文字</span>')

attr()获取或设置某个属性的值

//获取图片的地址
var #src = $('#img').attr('src');
//设置图片的地址
$('#img').attr({src:'my.jpg'});