**

下拉框滑动显示与隐藏

**
知识点
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({ w

idth:‘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()

如果引入的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对象,返回这个对象在原先集合中的索引位置

(’#bar’)); //1,传递一个jQuery对象
(‘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指定的路径