第三章.jquery里面的样式操作
一、jquery css样式操作方法
![]()
![]()
<body>
<div></div>
</body>
<script>
$(function() {
// 操作样式之css方法
// console.log( $('div').css('width'));
// // 修改盒子的大小
// $('div').css('width','500px');
// 以对象的形式修改里面的样式
$('div').css(({
width:400,
height:400,
backgroundColor: 'red'
//如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引
}))
})
</script>
二、jquery里面样式类的操作（增，删，改）
<body>
<div></div>
</body>
<script>
$(function() {
// 操作样式之css方法
// console.log( $('div').css('width'));
// // 修改盒子的大小
// $('div').css('width','500px');
// 以对象的形式修改里面的样式
$('div').css(({
width:400,
height:400,
backgroundColor: 'red'
//如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引
}))
})
</script>
三、jquery里面的显示与隐藏
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
<script>
$(function () {
$('button').eq(0).click(function () {
//1. show()方法 显示
$('div').show(1000,function() {
alert(11)
});
})
$('button').eq(1).click(function () {
//2. hide()方法 隐藏
$('div').hide(1000,function() {
alert(11)
});
})
$('button').eq(2).click(function () {
//3. toggle()方法 切换
$('div').toggle(1000,function() {
alert(11)
});
})
})
</script>
四、jquery里面的滑动效果
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$('button').eq(0).click(function () {
//1. slideDown() 方法 下拉
$('div').slideDown(500);
})
$('button').eq(1).click(function() {
//2. slideUp() 方法() 上拉
$('div').slideUp(500);
})
$('button').eq(2).click(function() {(
//3. slideToggle() 上下切换
$('div').slideToggle(200)
)})
</script>
</body>
案列1：
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
// // 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $('.nav > li').hover(function () {
// $(this).children('ul').slideDown(200)
// }, function () {
// $(this).children('ul').slideUp(200)
// });
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
// stop()方法
$(this).children("ul").stop().slideToggle()
});
})
</script>
</body>
五、jquery里面的淡入淡出
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$("button").eq(0).click(function() {
//1. fadeIn()方法 淡入
$("div").fadeIn(1000);
});
//2. fadeOut() 方法 淡出
$("button").eq(1).click(function() {
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
//3. fadeTo() 方法 淡入淡出切换
$("div").fadeToggle(1000);
})
$("button").eq(3).click(function() {
//3. fadeTo() 修改透明度 这个速度和透明度要必须写
$("div").fadeTo(1000,0.5);
})
</script>
</body>
浙公网安备 33010602011771号