jQuery基础知识篇一

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的顶级对象$(jQuery的另外的名字)
${(}^{\prime }di{v}^{\prime }).hide()jQuery{(}^{\prime }di{v}^{\prime }).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对象
${(}^{\prime }vide{o}^{\prime });2）我们已经使用原生的js，获取过来jQuery对象varmyvideo=document.querySelector{(}^{\prime }vide{o}^{\prime });//$(myvideo).play();错误，jq里面没有这个方法
2.jQuery对象转换为DOM对象
myvideo.play();//谷歌浏览器禁用自动播放功能，其他浏览器可以，加上muted就可以了
1）$(‘div’)[index] index是索引号
$(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>li”),最近一级（亲儿子）
find(selector) $("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)”),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).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();
})
})