目录
滚动监听案例（滚动到那个div那个li有激活样式 其余的li显示div背景色）
jQuery中的迭代方法
jQuery中可以分为工具方法 和 实例方法
工具方法
$.map(迭代对象,callBack);
$/jQuery.方法();
$.map(迭代对象,callBack);
- 返回值：map返回一个新数组
- callBack函数中this是window
需要的元素
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script src="./js/jquery.1.12.4.js"></script>
<script>
var arr = [10, 20, 30, 100, 200, 99, 77, 55];
var oLis = document.getElementsByTagName("li");
var obj = {
name: "哈哈",
age: 100,
hobby: "篮球",
sex: "未知"
};
var res = $.map(arr, function (val, index) {
console.log(val, index);//10 0 20 1...
//console.log(this);//Window {window: Window, self: Window, document: document, name: "", location: Location, …}
return val * 100;
});
console.log(res);//[1000, 2000, 3000, 10000, 20000, 9900, 7700, 5500]
var res1 = $.map(oLis, function (val, index) {
console.log(val, index);//遍历的元素 和索引 <li></li> 0
// console.log(this);
return "哈哈";
});
console.log(res1);// ["哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈"]
var res2 = $.map(obj, function (val, index) {
console.log(val, index);
console.log(this);
return res2;
});
console.log(res2);//[]each返回原数组
返回值：each返回原数组
相对性能要比map好，只是做一个迭代
this->val值
元素迭代使用each更好
遍历数组
var res3 = $.each(arr, function (index, val) {
console.log(index, val);
console.log(this);
});
console.log(res3);
遍历li
var res4 = $.each(oLis, function (index, val) {
console.log(index, val);
console.log(this);
this.innerHTML = "哈哈哈";
});
console.log(res4);
遍历对象
var res5 = $.each(obj, function (index, val) {
console.log(index, val);
console.log(this);
});
console.log(res5);
实例方法
jQuery实例.方法();
jQuery实例.map(callBack);
jQuery中支持链式调用，因为每次返回值当前jQuery这个类实例
jQuery实例.map(callBack);
返回一个新的jQuery对象
$(arr).map(function (index, val) {
console.log(index, val);
console.log(this);
});
$(oLis).map(function (index, val) {
console.log(index, val);
console.log(this);
});
// 不用来迭代对象
$(obj).map(function(index,val){
console.log(index,val);
// console.log(this);
}); 
jQuery实例.each(callBack);
返回当前这个jQuery对象
var res = $(arr).each(function (index, val) {
console.log(index, val);
console.log(this);
});
console.log(res);
var res = $(oLis).each(function (index, val) {
console.log(index, val);
console.log(this);
});
console.log(res); 
jQuery的盒子模型
给值就是设置，不给值就是获取
盒子模型属性
// width([val]) /height([val]); 获取元素自身宽度 或 高度
console.log($(".t").width());
console.log($(".t").height());
// $(".t").width(80);
// $(".t").height(80);
// innerWidth() / innerHeight(); 相当于clientWidth / clientHeight:width / height + 左右/上下padding
console.log($(".t").innerWidth());
console.log($(".t").innerHeight());
// outerWidth([false])/outerHeight([false]);
// 不传递参数默认值false 相当于offsetWidth/offsetHieght: clientWidth / clientHeight + 左右/上下边框
// 传递参数true 相当于offsetWidth/offsetHieght + 左右/上下margin
console.log($(".t").outerWidth());
console.log($(".t").outerHeight(false));
console.log($(".t").outerWidth(true));
console.log($(".t").outerHeight(true));
console.log("__________________________________________");
// 获取可视区域的宽高
console.log($(window).width());
console.log($(window).height());
console.log($(window).innerWidth());
console.log($(window).innerHeight());
console.log($(window).outerWidth());
console.log($(window).outerHeight());
// position();
// 获取定位的值，没有定位就是外间距到父元素内边框的距离
// 返回一个对象 {left:xx,top:xx}
console.log($(".w").position());
console.log($(".c").position());
// offset();
// 获取距离body的距离
// 返回一个对象 {left:xx,top:xx}
console.log($(".c").offset());
// 滚动条滚动的距离 给值就是设置，不给值就是获取
// scrollLeft([val])/scrollTop([val]);
$(window).scroll(function () {
// console.log($(window).scrollLeft());
console.log($(window).scrollTop());
});
document.onclick = function () {
$(window).scrollTop(200);
}滚动监听案例（滚动到那个div那个li有激活样式 其余的li显示div背景色）
<ul>
<li class="active"><a href="#div1">新闻一</a></li>
<li><a href="#div2">新闻二</a></li>
<li><a href="#div3">新闻三</a></li>
<li><a href="#div4">新闻四</a></li>
</ul>
<div style="background: rosybrown" id="div1"></div>
<div style="background: #99CCFF" id="div2"></div>
<div style="background: #ffffcc" id="div3"></div>
<div style="background: salmon" id="div4"></div>
<script src="./js/jquery.1.12.4.js"></script>
<script>
$(window).scroll(function () {
// 滚动条滚动的距离>=第1个div距离body的距离
// if ($(window).scrollTop() >= $("div").eq(0).offset().top) {
// $("ul li").eq(0).addClass("active").siblings().removeClass("active");
// }
// 滚动条滚动的距离>=第2个div距离body的距离
// if ($(window).scrollTop() >= $("div").eq(1).offset().top) {
// $("ul li").eq(1).addClass("active").siblings().removeClass("active");
// }
// 滚动条滚动的距离>=第3个div距离body的距离
// if ($(window).scrollTop() >= $("div").eq(2).offset().top) {
// $("ul li").eq(2).addClass("active").siblings().removeClass("active");
// }
// 滚动条滚动的距离>=第3个div距离body的距离
// if ($(window).scrollTop() >= $("div").eq(3).offset().top) {
// $("ul li").eq(3).addClass("active").siblings().removeClass("active");
// }
$("div").each(function (index, val) {
if ($(window).scrollTop() >= $(val).offset().top) {
$("ul li").eq(index).addClass("active").siblings().removeClass("active");
}
});
});