jq问题总结，动画及下拉框滑动的显示与隐藏

**

下拉框滑动显示与隐藏

**
知识点
slideUp(sd,fn)//向上滑动隐藏
slideDown(sd,fn)//向下滑动显示
slideToggle(sd,fn)//上下滑动隐藏显示开关
//参数都是可选的,sd是速度可填slow fast normal 或数字(ms) fn是回调函数
三种实现方式：
1 .$(".uls").on(‘click’,function(){
$(this).next().slideToggle();
//其中slideToggle底层函数已经包含了显示和隐藏两种方法
})
2. 闭包的实现方法，使得局部变量的值随点击的对象不同而变化，而不是点谁都用一个变量。
for(var i=0;i<2;i++){
(function(){
var flag=0;//flag是局部变量
$(’.uls’).eq(i).on(‘click’,function(){//用jq方法给当前事件绑定事件处理函数
if(flag%20){
$(this).next().slideDown();
console.log(flag);
}else{
$(this).next().slideUp();
console.log(flag);
}
flag++;
})
})()
}
3. jq中的each( )方法-----可以遍历类数组中的每一个对象。
$(‘a’).each(function(index,old){
var flag=0; 获取到的下标，值
$(’.uls’)[index].function(){
//jq对象取下标表示节点，给节点添加监听事件
if(flag%20){
$(this).next().slideDown();
}else{
$(this).next().slideUp();
}
flag++;
}
})
**

自定义//帧动画(资源),补间动画(样式)

**

知识点
自定义/帧动画：同元素的属性在时间段内动态改变的过程 //css src
（很多张图片随时间属性发生改变，例如打地鼠，飞机大战背景）
animate({属性},sd,fn)//动画
要让元素实现动画,必须设置定位-------在实验中设置了fix定位
参数:{}必填,sd可选动画时间,fn可选,回调函数
属性必须用驼峰命名法写,不能用原始的css属性:margin-left改为marginLeft
动画队列,队列按照顺序依次执行:
jq(“button”).click(function(){
jq(".div").animate({ width:‘200px’});//队列1
jq(".div").animate({ width:‘2000px’});//队列2
jq(".div").animate({ width:‘200px’});//队列3
})
2.停止属性改变
jq(".div").stop(bool,bool)//停止动态改变属性的现象:比如动画 滑动(参数:都可选布尔值,第一个是否停止所有队列,第二个是否立即执行完所有效果)
-----------用到的时候把true,false带入实验得到效果，不用死记硬背
**

实现手风琴的效果

**

**

动画效果—隐藏

**
知识点
hide(sd,fn)隐藏元素
show(sd,fn)显示元素
toggle(sd,fn)隐藏显示开关(来回调用)
//参数都是可选的,sd是速度可填slow fast normal 或数字(ms),fn是回调函数
//jq(“p”).hide(2000,function(){alert(666)})
示例代码
$(’.hidden’).on(‘click’,function(){
$(‘div’).hide(1000);//这里省略了回调函数
})
$(’.hidden’).next().on(‘click’,function(){
$(‘div’).show(1000);
})
$(’.hidden’).prev().on(‘click’,function(){
$(‘div’).toggle(1000);//集隐藏和显示于一身
})

**

动画效果—淡入淡出

**
知识点
fadeIn(sd,fn)//淡入已经隐藏的元素
fadeOut(sd,fn)//淡出已经显示的元素
fadeToggle(sd,fn)//淡出入开关
fadeTo(sd,alpha,fn)//自定义透明度
//参数都是可选的,sd是速度可填slow fast normal或数字(ms),alpha是透明度,fn是回调函数
$(’.fade_show’).on(‘click’,function(){
$(‘div’).fadeOut(1000,function(){
console.log(66666);
});
})
$(’.fade_show’).prev().on(‘click’,function(){
$(‘div’).fadeIn(500);
})
$(’.fade_show’).next().on(‘click’,function(){
$(‘div’).fadeToggle();
})
$(’.fade_show’).on(‘click’,function(){
KaTeX parse error: Expected 'EOF', got '}' at position 45: …adeTo自定义透明度 }̲) 事件触发 知识点 事件的触…(‘#div’).click()
②$(‘#div’).trigger(‘click’)

=====我是分割线=_=ha
**

如果引入的CDN实效了怎么办？

**

<script>window.jQuery||document.write('<script>xxxxxx<\ /script>')</script>

第一行代码很就是正常引入cdn的地址。
下面一行就是首先判断Windows.jQuery是否存在 也就是说判断一下这个CDN是不是挂掉了，如果没有挂掉，那么就直接使用，如果挂掉了，那么就要在后面引入自己的本地资源库（指代码中的xxxxxx）。这样就可以保证在可以使用cdn的时候使用cdn不可以使用的时候就加载本地的。
addeventListener , onclick
. addEventListener可以控制listener的触发阶段，（捕获/冒泡）。addEventListener为添加，相对应的为removeListener即注销事件。但是如果用匿名函数的方式注册的事件，不能使用removeListener注销，因为没用对应事件的引用。

addEventListener除了可以设置元素触发顺序外，还能多次绑定事件，然而 onclick事件多次绑定的话会出现覆盖。

**

filter ， find , has区别与使用

**
has只起判断作用。以has参数中的选择器或DOM元素做为条件，检测原结果集中的元素是否符合。去掉不符合的元素，将符合的元素构成一个新结果集。比如判断新闻模块中是否有vip图标，如果有则删除该新闻模块。
这与find()方法不同，find()方法是获得在当前结果集中每个元素的后代。参数（选择器、jquery集合或DOM元素）做为过滤条件，满足过滤条件的则保留，保留的是后代。而has()方法中，参数只做为条件，符合条件的，它的前元素加入新的结果集，而不是后代加入新的结果集。

**

eq , index , get用法

**

1. jquery的index()方法 搜索匹配的元素，并返回相应元素的索引值，从0开始计数，如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。如果找不到匹配的元素，则返回-1。
   如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。 如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。

• foo
• bar
• baz

$(‘li’).index(document.getElementById(‘bar’)); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
${(}^{\prime }l{i}^{\prime }).index($(’#bar’)); //1，传递一个jQuery对象
${(}^{\prime }l{i}^{\prime }).index($(‘li:gt(0)’)); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$(’#bar’).index(‘li’); //1，传递一个选择器，返回#bar在所有li中的做引位置
$(’#bar’).index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
2.eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
3.get方法–通过检索匹配jQuery对象得到对应的DOM元素，如下代码：
aaa
bbb
$(“li”).get(0); //由于索引是以0开始计数的，所以返回第一个列表项
aaa
$(“li”).get(-1); //负的索引表示从匹配的集合汇总末尾开始倒数，返回最后一项
bbb
====get与eq的区别
①get返回的是一个DOM对象，eq返回的是一个jQuery对象
(“li”).get(0).css(“color”,”red”);//错误(“li”).eq(0).css(“color”,”red”); //正确
②get方法本质上是把jQuery对象转换成DOM对象，但是css属于jQuery构造器的，DOM是不存在这个方法的。
**

input标签中submit的功能

**
获取表单中所有的value值，提交给action指定的路径