爱站程序员基地javasciprt库
封装了很多js函数的文件夹
常见的javascript库：
jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto
jQuery概念：
javascript query查询
把js中的DOM操作做了封装，我们可以快速查询使用里面的功能
jQuery的基本使用：
jQuery的入口函数：
$(function(){
…//此处是DOM加载完成的入口
});
(document).ready(function()…//此处是页面DOM加载完成的入口)相当于DOMContentLoaded不必等js文件、css文件、图片加载完毕jQuery的顶级对象(document).ready(function(){…//此处是页面DOM加载完成的入口})相当于DOMContentLoaded不必等js文件、css文件、图片加载完毕jQuery的顶级对象(document).ready(function()…//此处是页面DOM加载完成的入口)相当于DOMContentLoaded不必等js文件、css文件、图片加载完毕jQuery的顶级对象(jQuery的另外的名字)
(′div′).hide()jQuery(′div′).hide()jQuery对象和DOM对象：1.DOM对象：用原生js获取过来的对象就是DOM对象2.jQuery对象：用jQuery方式获取过来的对象就是jQuery对象。本质：通过(\’div\’).hide()jQuery(\’div\’).hide()jQuery对象和DOM对象：1.DOM对象：用原生js获取过来的对象就是DOM对象2.jQuery对象：用jQuery方式获取过来的对象就是jQuery对象。本质：通过(′div′).hide()jQuery(′div′).hide()jQuery对象和DOM对象：1.DOM对象：用原生js获取过来的对象就是DOM对象2.jQuery对象：用jQuery方式获取过来的对象就是jQuery对象。本质：通过把DOM元素进行了包装
3.jQuery对象只能使用jQuery方法，DOM对象则使用原生的javascript属性和方法,不能混用
$(‘div’);
$(‘div’).style.display=‘none’;(x)jQuery对象只能使用jQuery方法，不能使用原生的属性和方法
jQuery对象和DOM对象之间是可以相互转换的：
1.把DOM对象转换成jQuery对象：
静音的意思
1）直接获取视频得到的就是jQuery对象
(′video′);2）我们已经使用原生的js，获取过来jQuery对象varmyvideo=document.querySelector(′video′);//(\’video\’);2）我们已经使用原生的js，获取过来jQuery对象var myvideo=document.querySelector(\’video\’);//(′video′);2）我们已经使用原生的js，获取过来jQuery对象varmyvideo=document.querySelector(′video′);//(myvideo).play();错误，jq里面没有这个方法
2.jQuery对象转换为DOM对象
myvideo.play();//谷歌浏览器禁用自动播放功能，其他浏览器可以，加上muted就可以了
1）$(‘div’)[index] index是索引号
(myvideo)[0].play();2）(myvideo)[0].play();2）(myvideo)[0].play();2）(‘div’).get(index) index是索引号
$(myvideo).get(0).play()
jQuery常用API
jQuery选择器：
$(“选择器”);//里面选择器直接写CSS选择器即可，但是要加引号
ID选择器 $(\”#id\”) 获取指定ID的元素
全选选择器 $(’*’) 匹配所有元素
类选择器 $(\”.class\”) 获取同一类class的元素
标签选择器 $(“div”) 获取同一类标签的所有元素
并集选择器 $(“div,p,li”) 选取多个元素
交集选择器 $(“li.current”) 交集元素
jQuery层级选择器：
子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有元素，包括孙子等
jQuery设置样式：
$(“div”).css(‘属性’,‘值’)
给div（有四个）设置为粉色
$(“div”).css(“background”,“pink”);//4个div都改了颜色
隐式迭代：遍历内部的DOM元素（为数组形式存储）的过程
把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
jQuery筛选选择器：
语法 用法 描述
:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd $(“li:odd”) 获取到的元素中，选择索引号为奇数的元素
:even $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素
jQuery筛选方法：
语法 用法 说明
parent() $(“li”).parent(); 查找父级
children(selector) (\”ul\”).children(\”li\”)相当于(\”ul\”).children(\”li\”) 相当于(\”ul\”).children(\”li\”)相当于(“ul>li”),最近一级（亲儿子）
find(selector) (\”ul\”).find(\”li\”);相当于(\”ul\”).find(\”li\”); 相当于(\”ul\”).find(\”li\”);相当于(“ul li”)后代选择器
siblings(selector) $(\”.first\”).siblings(“li”); 查找兄弟节点，不包括自己本身
nextAll([exper]) $(\”.first\”).nextAll() 查找当前元素之后所有的同辈元素
prevtAll([exper]) $(\”.last\”).prevtAll() 查找当前元素之前所有的同辈元素
hasClass(class) $(‘div’).hasClass(“protected”) 检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index) (\”li\”).eq(2);相当于(\”li\”).eq(2); 相当于(\”li\”).eq(2);相当于(“li:eq(2)”),index从0开始
新浪下拉菜单案例：
判断是否有某个类名：
排他思想：
$(function(){
$(“button”).click(function(){
$(this).css(“background”,“pink”);
KaTeX parse error: Expected \’EOF\’, got \’}\’ at position 49: …ckground\”,\”\”);}̲);})淘宝服饰精品案例：…(this).index()
$(function(){
KaTeX parse error: Expected \’EOF\’, got \’#\’ at position 3: (\”#̲left li\”).mouse…(this).index();
console.log(index);
$(\”#content div\”).eq(index).show();
$(\”#content div\”).eq(index).siblings().hide();
});
})
jQuery样式操作：
1.参数只写属性名，则是返回属性值
$(this).css(“color”);
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(“color”,“red”);
3.参数可以是对象形式、方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({“color”:“white”,“font-size”:“20px”});
$(“div”).css({
width:400,
height:400,
backgroundColor:“pink”//符合属性，驼峰命名法
})
设置类样式方法：
$(“div”).addClass(“current”);//操作类里面的参数不要加点
$(“div”).removeClass(“current”);
切换类：
$(“div”).toggleClass(“current”);
tab栏切换：
$(function(){
$(\”.tab_list li\”).click(function(){
(this).addClass(\”current\”).siblings().removeClass(\”current\”);varindex=(this).addClass(\”current\”).siblings().removeClass(\”current\”);var index=(this).addClass(\”current\”).siblings().removeClass(\”current\”);varindex=(this).index();
console.log(index);
$(\”.tab_con .item\”).eq(index).show().siblings().hide();
});
})
类操作与className的区别：
className覆盖原先的类名
类操作不会覆盖原先的类名
jQuery效果：
显示隐藏：
show([speed,[easing],[fn]])
speed:三种预定速度之一的字符串（“slow”,“normal”,or “fast”）或表示动画时长的毫秒数值(如：1000).
easing:切换效果（swing，linear）
fn:回调函数
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
//一般情况下都不加参数
滑动：
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
淡入淡出：
fadeIn()
fadeOut()
fadeToggle()淡入淡出相互切换
fadeTo([speed],opacity,[easing],[fn])调整不透明度
必须写 透明度 切换效果 回调函数
* *
自定义动画：
animate(params,[speed},[easing],[fn])
{left:200,top:300,opacity:.4}
事件切换：
hover([over,]out)
over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
事件切换：
$(\”.nav>li\”).hover(function(){
$(this).children(“ul”).slideDown(200);
},function(){
$(this).children(“ul”).slideUp(200);
})
简化：hover（）如果只写一个函数那么鼠标经过和鼠标离开都会触发
$(\”.nav>li\”).hover(function(){
$(this).children(“ul”).slideToggle();
})；
动画队列及其停止排队的方法：
stop();
$(\”.nav>li\”).hover(function(){
//stop方法必须写在动画的前面
$(this).children(“ul”).stop().slideToggle();
})；
王者荣耀手风琴案例：
$(function(){
$(\”.king li\”).mouseenter(function(){
$(this).stop().animate({
width:224
},200).find(\”.small\”).stop().fadeOut().siblings(\”.big\”).stop().fadeIn();
$(this).siblings(“li”).stop().antimate({
width:224
}).find(\”.small\”).fadeIn().siblings(\”.big\”).fadeOut();
})
})
