JQuery常用知识秘密

1.什么是jQuery

就是一个小型前端的框架，多用于开发中小型项目

2.如何使用jQuery(引入jquery-3.2.1.min.js即可)

  <script src="js/jquery-3.2.1.min.js"></script>

3.查找元素

• 按标签选择元素（标签选择器）：var ul = $("ul");
• 按类选择元素（类选择器）：var ul = $(".nav");
• 按id名称选择元素（id选择器）：var ul = $("#nav");
• this选择器：选择当前元素：var ul = $(this);

4.事件

• 点击事件：click(funcation(){})
• 双击事件：dblclick(funcation(){})
• 鼠标的移进、移出事件：mouseenter(funcation(){}),mouseleave(funcation(){});
• 鼠标的移进、移出事件：mouseover(funcation(){}),mouseout(funcation(){});
• 鼠标的移进、移出事件:  hover(funcation(){}, funcation(){})
• 鼠标按下：mousedown(funcation(){})
• 鼠标移动：mousemove(funcation(){})
• 鼠标松开：mouseup(funcation(){})

5.遍历

• 兄弟遍历：
  • next()：表示的是寻找下一个兄弟节点（一个）
  • nextAll()：表示寻找下面所有的兄弟节点（多个）
  • nextUntil()：表示寻找两个元素之间的所有下面的兄弟元素
  • sibling()：寻找除了自己之外的所有同胞元素（多个）
  • prev()：寻找上一个兄弟元素（一个）
  • prevUntil()：表示寻找两个元素之间的所有上面的兄弟元素
  • prevAll()：寻找上面所有的兄弟元素（多个）
• 子元素遍历
  • children()：找到所有的直接子元素，可以给元素限定
  • find()：找到所有的子元素，可以给元素限定
• 祖先元素
  • parent()：寻找父元素
  • parents()：寻找所有的祖先元素
• attr和prop
  • attr()：设置或者获取自定义属性
    • attr("属性名")：表示获取自定义属性的值
    • attr("属性名", "属性值")：表示设置自定义属性的值
  • prop()：表示获取或者设置固有的属性的值
    • prop("属性名")：表示获取固有属性的值
    • prop("属性名", "属性值")：表示设置固有属性的值

6.隐藏和显示

• hide()：隐藏
• show()：显示
• toggle()：来回切换，自动判断显示或隐藏

7.类的添加和删除

• addClass()：为元素添加类
• removeClass()：移除元素的类
• toggleClass()：来回切换某一个类，有就删除，没有就添加
• hasClass()：判断某个元素中是否有某一个类，有就返回true，没有就返回false

8.上下滑动

• slideDown()：向下滑动
• slideUp()：向上滑动
• slideToggle()：自动判断

9.数组的删除和添加（js中的函数）

• pop()：是删除数组中的最后一个元素
• shift()：删除数组中的第一个元素
• push()：在数组的末尾处添加一个新的元素
• unshift()：在数组的开头添加一个新的元素
• jQuery中的函数
• merge()：将两个数组重新组合，返回一个新的数组
• splice()：切割数组，返回切割掉的数组，在原数组上操作
  • splice(0,2)代表的是从数组的第一个元素开始寻找，从左向右寻找两个
  • splice(-3)代表从数组的倒数第三个开始寻找，从左往右开始寻找到结尾

10.定时器

• timer = setInterval(funcation(){}, time)：每隔time时间，自动执行，返回一个定时器对象
• clearInterval(timer)：清除定时器
• setTimeout(funcation(){},time)：延时函数

11.checkbox全选和不全选

  <div class="input-header">
            <input type="checkbox" />全选
        </div>
        <div class="input-list">
            <input type="checkbox"  />1
            <input type="checkbox"  />2
            <input type="checkbox"  />3
            <input type="checkbox"  />4
        </div>
        
        <script type="text/javascript">
            $(".input-header input").click(function(){
                var n = $(this).prop("checked")
                $(this).parent().next().find("input").prop("checked",n)
            })
            
            $(".input-list input").click(function(){
                var n = 4
                $(".input-list input").each(function(){
                    if($(this).prop("checked")!=true){
                        n--
                    }
                })
                
                if(n==4){
                    $(".input-header input").prop("checked",true)
                }else{
                    $(".input-header input").prop("checked",false)
                }
            })
        </script>

12.$.ajax请求

  <script type="text/javascript">
        var getDatas = {
            "getHtml":function(callBack){

                //发送ajax请求
                $.ajax({
                    url:"xx.html",
                    type:"get",
                    data:"",
                    success:function(result){

                        //result是
                        callBack(result)
                    }
                })
            }
        }
        
        //回叫函数
        var callBack = function(result){
            // $(".result").append(`<div Style="height: 100px; background: black;"></div>`)
            console.log(result)
            $(result).replaceAll("footer")
        }
        $(document).ready(function(){
            //调用ajax请求
            getDatas.getHtml(callBack)
            console.log(123)
        })
    </script>

12.audio标签

• play()：播放音乐
• pause()：暂停音乐