web进阶之二十六：JQuery的一些效果实现
jquery属性操作
- html() 取出或设置html内容
- text() 取出或设置text内容
- attr() 取出或设置某个属性的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery属性操作</title>
<style type="text/css">
</style>
<script type="text/javascript" src="../../../jq/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
alert($('.box').html());//这是一个div元素
$('.box').html('<a href="http://www.baidu.com">百度网</a>');
*/
/*
读写值为布尔类型的属性用prop方法
读写值为非布尔类型的属性用attr方法
*/
/*
$('.box').attr({title:'这是一个div!'});//写入title属性，并赋值
alert($('.box').attr('class'));//读属性class的值，弹出box
*/
/*
var $src = $('#img1').attr('src');
alert($src);//img/1.png 会弹出图片的路径
$('#img1').attr({
src:'img/2.gif',
alt:'图片二'
});
*/
/*
alert($('#check').prop('checked'));//选中为true，非选中为false
$('#check').prop({checked:true});//设置默认勾选
*/
// alert($('.box2').html());//<span>这是div元素内的span</span>
alert($('.box2').text());//这是div元素内的span
})
</script>
</head>
<body>
<div class="box">这是一个div元素</div>
<img id="img1" src="img/1.png" alt="一张图片">
<input type="checkbox" id="check">多选
<div class="box2">
<span>这是div元素内的span</span>
</div>
</body>
</html>
绑定click事件
给元素绑定click事件，可以用如下方法：
$('#btn1').click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
特殊效果
- fadeOut() 淡出
- fadeToggle() 切换淡入淡出
- hide() 隐藏元素
- show() 显示元素
- toggle() 依次展示或隐藏某个元素
- slideDown() 向下展开
- slideUp() 向上卷起
- slideToggle() 依次展开或卷起某个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery特殊效果</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
display: none;
}
</style>
<script type="text/javascript" src="../../../jq/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(){
// $('.box').fadeOut();//淡出
$('.box').fadeIn();//淡入
// $('.box').fadeToggle();//切换淡入淡出
// $('.box').toggle();//切换显示隐藏
// $('.box').slideToggle();//切换上收和下展
})
})
</script>
</head>
<body>
<input type="button" name="" value="效果" id="btn">
<div class="box"></div>
</body>
</html>
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
(this).next().slideDown().parent().siblings().
children('ul').slideUp();
})
上面这个就是链式调用，即点击当前对象，使它下一个元素a展开，然后再从a返回点击的那个对象，然后再跳转到兄弟元素，使兄弟元素下面的ul元素隐藏起来。
jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
animate(params,[speed],[easing],[fn])
- params:一组包含作为动画属性和终值的样式属性和及其值的集合
- speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
- fn:在动画完成时执行的函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3过度动画</title>
<script type="text/javascript" src="D:/third/jq/jquery-1.12.4.min.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background-color: green;
margin: 50px auto 0;
}
</style>
<script>
// $(function(){
// $('#left').click(function() {
// $('.box').animate({
// width: 100,
// height: 50},
// slow),
// });
// })
$(function(){
$('#left').click(function() {
$('.box').animate({
width: 100,
height: 50,
marginLeft:100
},
'slow');
});
$("#right").click(function(){
$('.box').animate({
width: 200,
height: 200,
marginTop:500},
3000);
})
})
</script>
</head>
<body>
<input type="submit" value="left" id='left'>
<input type="submit" value="right" id='right'>
<div class="box"></div>
</body>
</html>
JQuery的循环和实例
每一门语言都会涉及到循环，之前我们也学习过for，while和do/while，那么到了jqurey的循环是什么呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循环</title>
<style type="text/css">
</style>
<script type="text/javascript" src='js/jquery-1.12.4.min.js'></script>
<script type="text/javascript">
$(function(){
// //给全部的li设置内容和样式
// $('.list li').html('111');//给全部的li加上111的内容
// $('.list li').css({background:'gold'});//给所有的li都添加背景颜色
//第一个参数index是索引值
$('.list li').each(function(index) {
// alert(index);//弹出索引值
//$(this)是每一个li
$(this).html(index);//给每一个元素插入下标
});
})
</script>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
尺寸相关、滚动事件
- 获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
- 获取和设置元素的尺寸
offset()
- 获取可视区高度
$(window).height();
- 获取页面高度
$(document).height();
- 获取页面滚动距离
(document).scrollLeft();
- 页面滚动事件
$(window).scroll(function(){
......
随后会写一些相关的实例，这样能表现得更加明显点儿
