jquery的常用api和两个特性
jquery的三大版
- v1.xxx 第一代版本
- jquery-1.11.3.min.js 这个比较常用
- 第一代版本的特点:大而全，方法是兼容所有浏览器的（包括ie6），主要应用于需要考虑兼容的pc项目中（老的政府项目）
- v2.xxx第二代版本
- 主要是为移动端的开发准备的，不在兼容低版本浏览器（例如：ie8及一下）。配合出现的还有jquery mobile等UI库，但是（在第二代版本的年代），第二代版本在移动端方面的处理不如Zepto.js，所以第二代的版本比较鸡肋
- v3.xxx第三代版本
- 也不再兼容ie低版本浏览器了，它从性能等方面都要比之前强，但是生不逢时，此时，正好是angular/vue/react这种框架崛起的时代，大家已经不再基于操作DOM的思想开发，jquery也就慢慢退出舞台了（此时，前端的开发模式已经逐渐改变了）
jquery中常用的方法
//1=>.获取DOM元素
//操作方法：jq选择器（根据选择器类型快速获取需要的元素）
$([selector],[context]) context：上下文
$('#box')
$('.imgBox')
$('.box a') 获取box类名下的所有a标签
$('a',box) 所获取和上面一样
。。。。
//节点之间关系的属性：用jq选择器h获取的元素，我们设置变量名的时候一般都以$开始
//=>还可以在设置选择器二次筛选
let $box = $('.box')
$box.chrildren('a')
$box.prev(); 获取上一个哥哥元素 // $box.prev('a')获取它上一个标签名为p的哥哥
$box.prevAll();
$box.next(); 获取下一个弟弟元素
$box.nextAll();
$box.sibilings() 获取所有的兄弟元素
$box.index() 获取索引
$('a').filter('.active')
------------------------------------------------------------------------------
//2.=>DOM增删改
//传统方式：
let divBox = document.createElement('div');
divBox.id = 'box';
divBox.className = 'box';
document.body.appendChild(divBox) //放在所有元素末尾
let str = `<div id="box" class="box"></div>`
document.body.innerHTML = str; //会替换掉所有元素
//jquert方式：
let str = `<div id="box" class="box"></div>`
$('body').append(str) //追加到末尾
$A.appendTo($B) //把A加到B的后面，与上面不同的是主体的调换
$('body').html(str) //等价于innerHTML，整体替换，如果html（）不传参数表示获取body中的所有元素
$link.insertBefore(str) //把其放到$link元素的前面，insertAfter放在之后
let $list= $('.list').clone() //实现元素克隆
$A.remove() //实现元素的删除
//=>操作表单元素的内容
$inp.val() //获取表单元素内容
$inp.val('aaa') //设置表单元素内容
-----------------------------------------------------------------------------------
//3.=>操作自定义属性
$box.attr('data-type') //获取自定义属性值
$box.attr('data-type','B') //设置自定义属性值
$box.attr({
'type':1,
'name':'aaa'
}) //批量设置
$box.removeAttr('data-type') //移除自定义属性
//表单元素操作内置或者自定义属性一般使用prop和removeProp
$radio.prop('checked')
$radio.prop('checked',true)
...
----------------------------------------------------------------------------------
//4.=>操作CSS样式（盒子模型属性）
//设置样式
$box.css('width,200');//=>css方法是设置或者批量设置样式（原理是style行内样式）
$box.css({width:200,height:200}) //批量设置，写的值不加单位，方法会帮我们自动设置上px
$box.addClass('active') //设置样式类（原理是对className的操作），removeClass是移除，hasClass验证是存在某个样式类 ，toggleClass之前有就是移除，没有就是新增
//获取样式
$box.css('width') //不设置值的时候就是获取（原理是getComputedStyle，所有经过计算的样式都可以获取）
$box.offset() //获取当前元素距离BODY的左偏移和上偏移
$box.position() //当前元素距离父参照物的左偏移和上偏移
$box.width() //没有值为获取，加入值为设置
除了DOM，jq中还提供了其他有助于项目开发的方法：
//=>事件处理
//$元素.on([event type],[function]) 添加事件
//$元素.off([event type],[function]) 移除事件
//$元素.bind() $元素.unbind() $元素.delegate()....
//$元素.click() .mouseover .mouseout ..等常用事件的快捷绑定
$box.on('click',function(){});
$box.click(function(){});
//=>动画处理
$box.animate({
})
jq选项卡demo
原生js版：
<style>
/* 清除ul>li的默认样式 */
.tab ul {
list-style: none;
padding: 0;
margin: 0;
}
/* 清除浮动，ul盒子就会自动计算高度，不会压在div上面 */
.tab ul:after {
content: "";
clear: both;
display: block;
}
/* 右浮动，浮动之后可以设置宽高，颜色，文字居中 */
.tab ul li {
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background: #ccc;
margin-right: 10px;
}
/* 选中的为粉色 */
.tab ul li.selected {
background: lightpink;
}
/* div默认隐藏，且给盒子设置宽高 */
.tab div {
display: none;
width: 360px;
height: 200px;
text-align: center;
line-height: 200px;
background: lightpink;
}
/* 选中项显示*/
.tab div.selected {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul>
<li class="selected">图片</li>
<li>专栏</li>
<li>热点</li>
</ul>
<div class="selected">图片内容</div>
<div>专栏内容</div>
<div>热点内容</div>
</div>
<script type="text/javascript">
var tab = document.getElementsByClassName('tab')[0];
var lis = tab.getElementsByTagName('li');
var divs = tab.getElementsByTagName('div');
// 当tab标签改变的时候（就是li改变）,先清空所有样式，在给被点击的tab和div添加selected样式
var changeTab = function (n) {
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
divs[i].className = '';
}
lis[n].className = 'selected';
divs[n].className = 'selected';
}
// 遍历所有nav（li）,给每个li赋予一个索引和点击事件，当点击事件触发的时候，传入当前被点击的索引
for(var i =0;i<lis.length ;i++){
var item = lis[i];
item.myIndex = i ;
item.onclick = function(){
changeTab(this.myIndex)
}
}
</script>
html，css都不变
JQ版（讲解JQ的两大特性）1.内置循环处理机制 2.链式写法：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// $([function]):等到页面中所有DOM结构加载完成才会执行这个方法
// 等价于 => $(document).ready([function])
// window.onload =function{} :等待页面中所有的资源（DOM结构，内容，其他的富媒体资源等）加载完成才会执行函数
$(function(){
let $tabBox = $('.tab'),
$navList =$('.tab li'),
$divList =$('.tab div')
// 不用像下面一样循环出每一项在绑定事件
// =>JQ特性：内置循环处理机制（基于一个JQ集合去操作某个方法，我们无需循环每一项单独操作，JQ内部帮我们处理了）
$navList.on('click',function(){
//=>this:当前点击操作的元素 =>$this才能调取JQ方法
//=>JQ特性：链式写法（链式标准：操作的是JQ实例）
let index = $(this).index();//获取当前点击这个元素的索引
$(this).addClass('selected').siblings().removeClass('selected');
//=>根据点击li的索引，在div集合中找到对应的哪一项，然后这一项选中，然后它的兄弟项都移除选中即可
$divList.eq(index).addClass('selected').siblings().removeClass('selected');
})
// //=>基于JQ中的EACH遍历集合中的每一项
// $navList.each(function(index,$item){
// //参数顺序和内置的forEach是反着的，forEach:(item,index) each(index,item)
// //这里如果将函数换成了箭头函数，所以这里的this不再是循环的这一项（箭头函数中没有this）
// $item.on('click',function(){
// //...
// })
// })
})
</script>
JQ最终版本：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//通过内置循环和链式操作，不断的.操作后.操作
$('.tab > ul > li').click(function(){
let index = $(this).index();
$(this).addClass('selected')
.siblings().removeClass('selected')
.parent()
.nextAll('div').eq(index).addClass('selected')
.siblings().removeClass('selected')
})
})
</script>
