jQuery（四）——动态操作
（一）jQuery操作元素的尺寸
1.width和height
设置语法：jQuery对象.width(数字);
获取语法：jQuery对象.width();
得到的只是内容的大小。
代码举栗：
<style>
div {
width: 500px;
height: 500px;
padding: 10px;
border: 10px solid;
}
</style>
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var w = $('div').width(); //返回的是一个number
console.log(w); //500
$('div').width(300); //把div设置为300px
</script>
</body>
2.innerWidth和innerHeight
设置语法：jQuery对象.innerWidth(数字);
获取语法：jQuery对象.innerWidth();
得到的是内容部分大小 + padding的大小。
设置时padding固定不变，内容部分自动适应变化。
代码举栗：
<style>
div {
width: 500px;
height: 500px;
padding: 10px;
border: 10px solid;
}
</style>
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var w = $('div').innerwidth(); //返回的是一个number
console.log(w); //520。width+padding
$('div').innerwidth(300); //div设置为300-20=280px，padding占有20px
</script>
</body>
3.outerWidth和outerHeight
设置语法：jQuery对象.outerWidth(数字);
获取语法：jQuery对象.outerWidth();
得到的是内容部分大小 + padding + border的大小。
设置时padding和边框border固定不变，内容部分自动适应变化。
代码举栗：
<style>
div {
width: 500px;
height: 500px;
padding: 10px;
border: 10px solid;
}
</style>
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var w = $('div').outerwidth(); //返回的是一个number
console.log(w); //540。width+padding+border
//div设置为300-20-20=260px，padding占有20px，border占有20px
$('div').outerwidth(300);
</script>
</body>
（二）jQuery操作元素的位置
1.获取元素距离文档的位置
语法：jQuery对象.offset();
返回的是一个对象，对象中包含了元素的位置。（相对于文档的位置）
位置和定位无关。若元素加了（子绝父相）定位后也依然参照文档的位置。不论元素是否定位。
代码举栗：
<style>
div {
width: 200px;
height: 200px;
margin: 0 auto;
background: red;
}
p {
height: 600px;
}
</style>
<body>
<p></p>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var o = $('div').offset();
console.log(o); //得到一个对象，其中包含top:632, left:574.5
//设置时传参传的是对象。位置依然参照文档，和定位无关。
var s = $('div').offset({top:0,left:0});
console.log(s); //div变到页面左上角
</script>
</body>
一般不会用到设置。
在DOM对象中，元素.offsetLeft和元素.offsetTop是只读的。
2.获取元素距离定位元素的位置
语法：**jQuery对象.position(); **
和定位有关系。返回一个包含left和top的对象。
但是position不能设置。
代码举栗：
<style>
.f {
width: 200px;
height: 200px;
margin: 0 auto;
background: red;
position: relative;
}
.son {
width: 200px;
height: 200px;
background: red;
position: absolute;
}
p {
height: 600px;
}
</style>
<body>
<p></p>
<div class="f">
<div class="son"></div>
</div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var o = $('.son').position();
console.log(o); //得到一个对象，其中包含top:0, left:0
//position方法只能获取元素的位置不能传参设置位置
$('.son').position({left:50, top:50});
</script>
</body>
3.操作卷去的页面间距
获取语法：jQuery对象.scrollTop();
设置语法：jQuery对象.scrollTop(数字);
代码举栗：
<style>
body {
text-align: center;
}
div {
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid;
overflow: auto;
}
</style>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//入口函数
$(function () {
//给div注册滚动条滚动事件
$('div').scroll(function(){
var v = $(this).scrollTop();
console.log(v);
});
//回到顶部
$('button').click(function(){
$('div').scrollTop(0);
});
});
</script>
<body>
<div>
<p></p>*100
</div>
<button>回到顶部</button>
</body>
在jQuery中可以使用$(window)直接获取页面卷去的间距，但是在原生方法中不可以。
不加动画时，可以直接使用$(window).scrollTop(数字)来直接设置值，但是在原生中不可以。
4.固定导航和回到顶部案例
<body>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var _top = $('.box2').offset().top;
$(window).scroll(function () {
var v = $('window').scrollTop();
if (v >= _top) {
//给固定导航设置定位
$('.box2').addClass('active');
//设置回到顶部按钮显示
$('.top').show();
}
else {
$('.box2').removeClass('active');
$('.top').hide();
}
});
$('.top').click(function () {
//动画中动的必须是元素（即标签）。
$('html,body').animate({ scrollTop: 0 }, 500);
})
</script>
</body>
（三）jQuery事件操作
1.注册事件
语法：jQuery对象.事件名(事件处理程序);
在jQuery中事件的底层就是事件监听，可以实现事件叠加。
2.on方法注册事件
注册简单事件语法：jQuery对象.on('事件名',事件处理程序);
代码举栗：
<body>
<button>click</button>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('button').on('click',function(){
console.log(1);
});
$('button').on('click',function(){
console.log(2); //输出1 2。事件叠加
});
</script>
</body>
事件委托语法：jQuery对象.on('事件名','选择器',事件处理程序);
选择器：子孙元素
在事件处理程序中，this代表的是子孙元素（所点最先触发的）
3.off方法移除事件
移除简单事件语法：jQuery对象.off('click',事件处理程序名称);
移除事件委托的事件语法：jQuery对象.off('click',‘选择器’,事件处理程序名称);
不传参数的话会移除所有事件类型。
移除事件的底层也是事件监听（removeEventListener）。
代码举栗：
<script>
// 解绑按钮的事件处理程序：fn1和fn2
$('button').off('click',fn1);
$('button').off('click',fn2);
// 解绑通过事件委托给p注册的事件处理程序 fn2
$('div').off('click','p',fn2);
</script>
4.触发事件
语法：jQuery对象.trigger('事件名');
5.事件对象
1）鼠标事件对象相关的属性
事件对象.clientX/Y 参照浏览器
事件对象.pageX/Y 参照文档
事件对象.offsetX/Y 参照元素
2）键盘事件对象相关的属性
事件对象.keyCode 返回键码数字
事件对象.alt/shift/ctrlKey 返回是布尔值。 检测是否按下（true）
3）公共的属性或方法
属性：事件对象.target;
方法：
事件对象.preventDefault(); 阻止默认行为
事件对象.stopPropagation(); 阻止事件冒泡
（四）链式编程
可以用连续点点方式调用其他方法。
css方法只能jQuery对象调用
1.end方法
在链式上可以返回到上一个jQuery对象
代码举栗：
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('ul li').eq(0).css('color','red') //返回索引为0的li的jQuery对象
.parent().css('border','1px solid blue') //返回ul这个jQuery对象
.end().css('background','gold'); //返回了索引为0的li的jQuery对象
</script>
</body>
2.星级评级案例
<style>
span {
font: bold 100px '宋体';
float: left;
color: gold;
cursor: pointer;
}
</style>
<body>
<div>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
<span>☆</span>
</div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('span').mouseenter(function () {
$(this).text('★').prevAll().text('★').end().nextAll().text('☆');
});
$('span').mouseleave(function () {
$('span').text('☆');
$('.active').text('★').prevAll().text('★').end().nextAll().text('☆');
});
$('span').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
</script>
</body>
