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 = i
	  var _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')
	  })
  })
})