首页 > 代码库 > js学习总结----jquery常用方法

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

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")

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