jq - 常用tab、增加删除、手册

学习文献
常见的JQ动画效果	必须要掌握的原生JS实现JQuery—— coCo；
`jQuery在线手册`	jQuery 博客；
	`jq 效果图（有很多效果插件）`；
	——
阅读目录：
	1、导航栏滚动到一定距离时隐藏 / 显示；
	2、a标签锚点加入jq（offset().top）缓动效果；
	3、点击增加删除class；

4、导航栏滚动到一定距离时隐藏 / 显示 / (JQ实现点击返回顶部)

（1）、animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态；
（2）、在页面想顶部移动过程中,势必要触发window.scroll事件；onscroll是在元素轴滚动时触发的，window.onscroll或document.onscroll是在浏览器滚动条滚动时触发的

点击返回顶部按钮：
scroll() 方法	监听网页的方法
scrollTop()方法	获取网页偏移位置

$(function() {//获取距离顶部的距离 还有当前可视区域的高度$(window).scroll(function() {if ($(window).scrollTop() > 100 ) { // 判断是否滚到指定位置$('#gotop').fadeIn(800);} else {$('#gotop').fadeOut(800);}})//当点击跳转链接后，回到页面顶部位置$("#gotop").click(function() {$('body,html').animate({scrollTop:0} , 1000);return false;})
});//第二种方法：
window.onsrcoll = function() {//document.documentElement.scrollTop || document.body.scrollTop;var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;var node = document.getElementById('topBar');if(top > 500) {node.style.display = "none";} else {node.style.display = "block";}
};

.animate( properties [, duration] [, easing] [, complete] )
properties ，一个包含样式属性及值的映射，所有指定的属性必须用骆驼形式
duration ，`可选的速度参数`，既可以是预置的字符串，也可以是一个毫秒数值
easing ，`可选的缓动类型`，jquery默认的只有两种：swing和linear,要使用其它效果需要安装缓动类的插件
complete ， `可选的回调函数`，在动画结束时被调用

锚点加入缓动效果：

scrollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移；

$('#elementid').click(function() {$('body,html').animate({scrollTop:$('#swiper-top').offset().top}, 1000);return false;
})//为了增强性能，可以将$('body,html')选择器缓存起来，这样在每次点击时就不需要重新查找了：
var $root = $('html, body');
$('#elementid').click(function() {$root.animate({scrollTop:$('#swiper-top').offset().top}, 1000);return false; //不要这句会有点卡顿
})也可以： $root.animate({scrollTop:$($(this).attr("href")).offset().top}, 1000);// $($(this).attr("href")).offset().top —— 是获取id等于 $(this).attr("href") 块所在的位置，

offset():

获取匹配元素在当前视口的相对偏移。返回.offset().left和.offset().top,
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
$("#sntetwt").offset()：获得位移对象（此时其实啥也没做）
$("#sntetwt").offset().top：获得位移高度

两者的区别：
offset():	获取匹配元素在当前视口的相对偏移。.offset()方法可以让我们重新设置元素的位置。此方法对可见元素有效
position():	获取匹配元素相对父元素的偏移。

jQuery 效果 - fadeIn() 方法

1、显示与隐藏

1、slideToggle 方法 - 检查被选元素的可见状态。
2、slow- 动画缓动值。
3、scrollTop 方法 - 返回或者设置匹配元素的滚动条的垂直位置，方法对于可见元素和不可见元素具有效。

/* 支持JQ 1.10.2.min.js*/
$(function() {$(".downmenu").click(function() {$(".slideMenu").slideToggle("slow");})$(window).scroll(function() {/* 导航顶部 */if ($(window).scrollTop > 120 ) {$(".slideMenu").hide();}})
})

2、attr() 添加类，不推荐用其添加class

1、 attr 其实就是原生js中 getAttribute 的简化实现，设置或返回被选元素的属性和值，而removeAttr 就是 removeAttribute 的简写；
2、find() 方法返回被选元素的后代元素，会一路向下直到最后一个后代，即返回 paylist-item 后代中所有的 icon-select 元素；

 $(".paylist-item").click(function () {//siblings是循环遍历$(".paylist-item").siblings().find(".icon-select").attr('class', 'icon-select');$(this).find(".icon-select").attr('class', "icon-select item-selecteds");})

jQuery 遍历 - 后代（ find() ）

3、添加、移除类

$(document).ready(function(){var liTags = $('.div').find('li');//$.each() 遍历处理二维数组  $.each(liTags,function(i,li) {let cid = ivar _this = $(this)_this.on('mouseover',function() {var tops = $('.divs').find('.pp');$.each(tops,function(i,top) {var _this = $(this)_this.removeClass('actives')})$.each(liTags,function(i,li) {var _this = $(this)_this.removeClass('active')})_this.addClass('active')$('[cid='+cid+']').addClass('actives')})})
})