jQuery从入门到精通基础学习（2）-职坐标

jQuery从入门到精通基础学习（2）

沉沙 2019-06-11 来源：阅读 1361 评论 0

摘要：本篇文章探讨了jQuery从入门到精通基础学习（2），希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了jQuery从入门到精通基础学习（2），希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

jQuery从入门到精通基础学习（2）

JQ选项卡实列
<style>
#div1 div{ width:200px; height:200px; border:1px red solid; display:none;}
.active{ background:red;}
</style>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script>
$(function(){

$(‘#div1‘).find(‘input‘).click(function(){

$(‘#div1‘).find(‘input‘).attr(‘class‘,‘‘);
$(‘#div1‘).find(‘div‘).css(‘display‘,‘none‘);

$(this).attr(‘class‘,‘active‘);

$(‘#div1‘).find(‘div‘).eq( $(this).index() ).css(‘display‘,‘block‘);

});

});
</script>
</head>
<body>
<div id="div1">
<input type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111111</div>
    <div>222222</div>
    <div>333333</div>
</div>
</body>
</html>

JQ下的常用方法
    addClass() removeClass()
    width() innerWith() outerWidth()
    insertBefore() before()
    insertAfter() after()
    appendTo() append()
    prependTo() prepend()
    remove()
    on() off()
    scrollTop()

    addClass() removeClass() 添加样式和删除样式
    width() innerWith() outerWidth()