JQuery

得到当前索引号的方法.index()

一、JQuery概述

js库，里面封装许多的函数

1.基本使用

引入JQuery文件

2.jquery的入口函数

        // $('div').hide();
        // 1.等着页面DOM元素加载完毕再去执行js代码
        $(document).ready(function(){
            $('div').hide();
        })
        // 2.等着页面DOM元素加载完毕再去执行js代码
        $(function(){
            $('div').hide();
        })

3.jquery对象和DOM对象

• jquery对象使用jQuery方式获取
• DOM对象使用原生的js获取
• jQuery对象只能使用jQuery方法，DOM使用js的属性和方法

4.jQuery对象和DOM对象转换

• $(DOM对象) 即可转换为jQuery对象
• $('div')[index] index是索引 可以将jQuery对象转换为DOM对象
• $('div'）.get(index) index是索引 可以将jQuery对象转换为DOM对象

二、jQuery常用的API

1.jQuery选择器

$("选择器"）//里面的选择器直接写CSS选择器即可，但是要加引号

2.jQuery筛选选择器

语法	用法	描述
:first	$("li:first")	获取第一个li元素
:last	$("li:last")	获取最后一个li元素
:eq(index)	$("li:eq(2)")	获取的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$("li:odd")	获取的li元素中，选择索引号为奇数的元素
:even	$("li:even")	获取的li元素中，选择索引号为偶数的元素

3.jQuery筛选方法

parents(）：选择祖先元素

语法	用法	说明
parent（）	$("li").parent()	查找父级，最近一级的父级元素
children（selector）	$("ul").children("li")	最近一级的子元素
find（selector）	$("ul").find("li")	相当于后代选择器
siblings(selector)	$(".first").find("li")	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(".first").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$("div").hasClass("protected")	检查当前的元素是否含有某个特定的类，如果有,返回true
eq(index)	$("li").eq(2)	相当于$("li:eq(2)")，index从0开始

4.jQuery排他思想

三、jQuery样式操作

1.css方法

• 参数只写属性名，则返回属性值 $(this).css("color");
• 参数是属性名，属性值，逗号分割，是设置一种样式，属性必须加引号，值是数字可以不用单位和引号 $(this).css("color","red");
• 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号  $(this).css({"color"："red"，"font-size":"10px"}); 如果是符合属性则采取驼峰命名法

2.设置类样式方法

• 添加类addClass()：$("div").addClass("current");
• 移除类removeClass()：$("div").removeClass("current");
• 切换类toggleClass()：$("div").toggleClass("current");

注意：添加和移除均是追加，不影响原先的类名

四、jQuery效果

1.显示隐藏效果

• 显示 show([speed,[easing],[fn])
• 隐藏 hide([speed,[easing],[fn]) 
• 切换 toggle([speed,[easing],[fn]) 
  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次
  • easing:用来指定切换效果，默认是‘swing’，可用参数“linear”（匀速）
  • speed:三种预定速度之一的字符串（“slow”,“normal”,"fast"）或表示动画时长的毫秒数值（如：1000）

一般情况，都不加参数直接显示隐藏

2.滑动效果

• 下滑动slideDown([speed,[easing],[fn])
• 上滑动slideUp([speed,[easing],[fn]) 
• 切换滑动 slidetoggle([speed,[easing],[fn]) 
  • fn:回调函数，在动画完成时执行的函数，每个元素执行一次
  • easing:用来指定切换效果，默认是‘swing’，可用参数“linear”（匀速）
  • speed:三种预定速度之一的字符串（“slow”,“normal”,"fast"）或表示动画时长的毫秒数值（如：1000）

3.事件切换

hover（[over,]out）

            // 事件切换hover就是鼠标经过和离开的复合写法
            $('.nav>li').hover(function(){
                $(this).children('ul').slideDown()
            },function(){
                $(this).children('ul').slideUp()
            })

            // 事件切换hover 如果只写一个函数，那么鼠标经过和离开都会触发这个函数
            $('.nav>li').hover(function(){
                $(this).children('ul').slideToggle()
            })

4.停止排队

stop（）必须写到动画的前面

$('.nav>li').hover(function(){
    $(this).children('ul').stop().slideToggle()
})

5.淡入淡出效果

1）.淡入效果 fadeIn([speed,[easing],[fn]])

2）.淡出效果fadeOut([speed,[easing],[fn]])

3）.淡入淡出切换fadeToggle([speed,[easing],[fn]])

• fn:回调函数，在动画完成时执行的函数，每个元素执行一次
• easing:用来指定切换效果，默认是‘swing’，可用参数“linear”（匀速）
• speed:三种预定速度之一的字符串（“slow”,“normal”,"fast"）或表示动画时长的毫秒数值（如：1000）

4）.渐进方式调整到指定的不透明度 fadeTo([speed,opacity,[easing],[fn]])

• fn:回调函数，在动画完成时执行的函数，每个元素执行一次
• easing:用来指定切换效果，默认是‘swing’，可用参数“linear”（匀速）
• speed:三种预定速度之一的字符串（“slow”,“normal”,"fast"）或表示动画时长的毫秒数值（如：1000）必须写
• opactity透明度必须写 0-1之间

案例：

$(function(){
            $(".wrap li").hover(function(){
                $(this).siblings().stop().fadeTo(400,0.5)
            },function(){
                $(this).siblings().stop().fadeTo(400,1)
            })
        })

6.自定义动画animate，不能是文档，只能是元素

animate（params,[speed],[easing],[fn]）

• params:想要修改的样式属性，以对象形式传递，必须写
• fn:回调函数，在动画完成时执行的函数，每个元素执行一次
• easing:用来指定切换效果，默认是‘swing’，可用参数“linear”（匀速）
• speed:三种预定速度之一的字符串（“slow”,“normal”,"fast"）或表示动画时长的毫秒数值（如：1000）必须写

案例：手风琴效果

$(function(){
            $(".king li").mouseenter(function(){
                $(this).stop().animate({
                    width:224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
                $(this).siblings("li").animate({
                    width:69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut()
            })
        })

五、jQuery属性操作

• element.prop("属性名") 获取元素固有属性值
• element.prop("属性名"，"属性值") 设置元素固有属性的属性值
• 设置或获取元素自定义属性值attr()
• 数据缓存data()这个里面的数据是存放在元素的内存里面

案例：购物车全选

$(function(){
    // 点击全选，数据全选
    $(".checkall").change(function(){
        $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
    })
    // 每个复选框选择，全选
    $(".j-checkbox").change(function(){
        // 如果小复选框选择的数量等于小复选框的数量，则全选按钮选上，否则全选按钮不选
        if($(".j-checkbox:checked").length==$(".j-checkbox").length) {
            $(".checkall").prop("checked",true)
        }else 
        { 
            $(".checkall").prop("checked",false)
        };
    })
})

六、jQuery内容文本值

获取设置元素内容html()

获取设置元素文本内容text()

获取设置表单值val()

七、jQuery元素操作

1.遍历元素

$("div").each(function(index,domele){})

里面回调函数有2个参数，index是每个元素的索引号，domELe是每个DOM元素对象，不是jQuery对象

2.遍历数据

$.each(object，function(index,domele){})

.toFixed(2)保留2位小数

3.创建元素 $("<li></li>")

4.添加元素

• 内部添加
  • element.append() 放到内容的内部并且在内容的最后面
  • element.prepend()放到内容的内部并且在内容的最前面
• 外部添加
  • element.after（）放在内容的外部并且在最后面
  • element.before（）放在内容的外部并且在最前面

5.删除元素

element.remove（）删除元素的本身

element.empty（）删除匹配的元素集合中所有的子节点

element.html("") 清空匹配元素内容

八、jQuery尺寸大小

width（）获取设置元素的宽度

height（）获取设置元素的高度

innerWidth()/innerHeight() 获取设置元素width/height+padding大小

outerWidth()/outerHeight() 获取设置元素width/height+padding+border大小

outerWidth(true)/outerHeight(true)获取设置元素width/height+padding+border+margin大小

九、jQuery位置方法

offset：获取设置距离文档的位置，可设置

position：获取距离带有定位父级位置，只能获取不能设置

十、jQuery被卷去的头部

scrollTop 被卷去的头部/scrollLeft()被卷去的左侧

电梯导航案例：

$(function() {
    var toolTop= $(".recommend").offset().top;
    toggleTool()
    // 节流阀 互斥锁
    var flag=true;
    function toggleTool(){
        if($(document).scrollTop()>= toolTop){
            $(".fixedtool").fadeIn();
        }else{
            $(".fixedtool").fadeOut();
        }
    }
   $(window).scroll(function(){
    toggleTool()
    if(flag){
        $(".floor .w").each(function (i,ele){
            // 被卷去头部大于每个内容距离头部的距离
            if($(document).scrollTop()>=$(this).offset().top){
                $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current")
            }
        })
    }
   })
   $(".fixedtool li").click(function(){
    flag=false
    console.log($(this).index());
    // 选出对应内容索引号的内容区的盒子，计算它的offset.top
    var current=$(".floor .w").eq($(this).index()).offset().top
    $("body,html").stop().animate({
        scrollTop:current
    },function(){
        flag=true
    })
    $(this).addClass("current").siblings().removeClass("current")
   })
})