js学习总结----jquery常用方法

Posted 2020-09-28

http://jquery.cuishifeng.cn(可以看一下他的手册)

1、jQuery的回调函数　

function fn1(value){
            console.log(‘fn1函数‘+value)
        }
        function fn2(value){
            console.log(‘fn2函数‘+value)
        }
        var $call = $.CallBacks();//创建一个回调函数的列表集合
        $call.add(fn1)//向集合中增加一个叫做fn1的函数
        $call.fire(100);//触发fire方法的时候，把回调函数集合中的方法执行，并且把对应的参数值传递给对应的方法->fn1:100
        $call.add(fn2)
        $call.fire(200);//fn1:200  fn2:200
        $call.remove(fn1);//在集合中移除fn1这个方法
        $call.fire(200);//fn2:200

        $(document).ready(function(){});<===>$(function(){})
        //和原生JS中的window.onload对应
        //window.onload的意思是:当页面中的html结构、图片、文字等多有资源都加载完成才触发这个行为，并且在页面中它只能执行一次，后面写的会覆盖前面的。
        //$(document).ready(function(){}):只要HTML结构加载完成就会触发对应的行为，而且在一个页面中可以使用多次

2、属性操作方法

//所有的HTML都加载完成了，形成了一个闭包
        $(function(){
            /*
                attr:获取和设置元素的自定义属性，等价于原生JS中的set/getAttribute
                removeAttr:移除
            */

            var $box = jQuery("#box");
            $box.attr(‘fq‘,200);
            console.log($box.attr(‘fq‘));
            $box.attr(‘fq‘,1000);
            $box.attr({
                index:1,
                name:‘fq‘
            })
            $box.removeAttr(‘fq‘);
            /*
                prop:获取和设置元素的自定义属性(和attr是不同的两套方式，两者之间不能相互混用，用attr获取的只能用attr删除或者修改或者获取，prop同理)
                removeProp
                注意:prop内置的属性可以在HTML结构中体现出来，但是不是内置的属性是体现不出来的（但是可以获取到值）

                attr和prop的区别:
                attr一般都用来设置和操作元素的自定义属性的；
                prop一般用来操作元素的内置属性的（尤其是表单元素的操作我们大部分都在使用prop）
            */
            var $box = jQuery("#box");
            $box.prop(‘fq‘,100);
            /*    
                jQuery(selector,context) context一般不需要传递，默认是document，但是我们也可以指定具体的上下文来获取需要的元素
                addClass/removeClass/toggleClass(toggle系列都是之前有就是移除，没有就是新增)
                通过jQuery选择器获取到一个集合，然后让集合直接的调用jQuery中提供的方法，相当于给集合中的每一个元素都调取了对应的方法(jQuery内置循环操作)
                each:可以遍历jQuery集合中的每一项(和数组中的forEach类似)
            */
            $box.addClass(‘w100‘)
            $box.removeClass(‘w100‘)
            $box.toggleClass(‘w100‘)
        })

/*
                css:获取或者设置（批量设置）当前元素的样式值

                offset:不管父级参照物是谁，获取当前元素距离body的偏移距离/position:获取当前元素距离父级参照物的偏移距离

                scrollTop/scrollLeft:获取/设置滚动条卷去的高度/宽度

                width/height:获取或者设置元素的width/height

                innerWidth/innerHeight:获取/设置元素可视区域的宽高（获取的时候等价于clientWidth/clientHeight），设置的时候，保留padding的值，把width值进行改变（width的值最小是0）

                outerWidth/outerHeight:获取/设置元素可视区域的宽高(包含边框)，设置具体值的时候和上边的效果一样。如果传递进来的参数是true，默认的把margin的值也计算在内了。

                
            */

3、文档处理

/*
                append:向指定元素的末尾位置追加一个新的元素 容器.append(元素)
                appendTo 元素.appendTo(容器)
                prepend/prependTo:向指定元素的开头位置追加一个新的元素

                after/before:在当前元素的后面/前面追加新的元素
                insertAfter/insertBefore:把选择器获取到的元素追加到指定元素的后面或者前面
            */
            var oDiv = document.createElement(‘div‘);
            oDiv.id = "div5";
            $box.append(oDiv);
            $(oDiv).appendTo($box);
            $(oDiv).insertAfter($box)//把创建的oDiv追加到$box的后面（和$box是同级的）
            /*
                replaceAll(selector):用匹配的结果替换所有的selector匹配的元素

                remove:把匹配的结果在页面中移除掉

            */
            $(oDiv).replaceAll("ul")//页面中所有的ul都用oDiv给替换掉
            $box.remove();
            $(‘ul‘).remove("#ul2")

4、筛选:

/*
                eq(index)、first()、last()、hasClass(strClass)检测当前元素中是否包含某一个样式类名
                filter、children、find：常用的三个筛选方法
                filter：同级过滤 首先通过选择器获取一个集合，在获取的内容中在进行二次筛选
                children:子集过滤
                find:后代过滤
                
                map:遍历jQuery集合中的每一项，并且可以支持返回值把每一项进行修改，类似于数组中的map这个方法
                parent:父亲节点 parents:所有的父亲节点（从当前开始一直找到HTML，把每一级都记录下来）
                next、nextAll、siblings、prev、prevAll

            */
            $(‘div‘).hasClass(‘w1‘);
            $box.children()//还可以通过传递参数来进行筛选
            $box.find()//结果是一个空集合
            $box.find(‘li‘)
            $("div").filter("#div4")