JQ复习

    一选择器
            1.基本选择器
            2.层级选择器
            3.过滤选择器
            :first 选取第一个元素
            :last 选择最后一个元素
            :not()去除所有与给定选择器匹配的元素$('input:not(.first)')
            :even选取索引是偶数的元素,从0开始
            :odd选取索引是奇数的元素,从0开始
            :eq(index)选取等于index
            :gt(index)选取大于index
            :lt(index)选取小于index
            :animated选取当前正在执行动画的所有元素
            内容过滤器
            :contains(text)选取文本内容为text的元素
            :empty选取不包含子元素或文本的空元素
            :parent选取含有子元素或文本的元素
            :has(selector)选取含有(后代元素)选择器所匹配的元素与:not的主要区别在一个相当自己一个相当子元素
            可见性过滤器
            :hidden 选取所有不可见的元素
            :visible 选取使用可见的元素
            属性选择器
            [id] 选取拥有属性ID的元素
            [id = aa] 选取ID属性值为aa的元素
            [!=][^=][$=][*=]含有
            可以合并成为复合选择器
            表单对象
            :enabled 选取所有可用元素
            :disabled 选取所有不可用元素
            :checked 选取所有被选中的元素(单选框。复选框)
            :selected 选取所有被选中的选项元素(下拉列表)
    二.DOM操作
            获取和设置属性
            js get(set)Attribute
            JQ attr()来获取和设置元素属性
            删除属性
            js removeAttribute()
            JQ removeAttr()
            创建节点
            js createElement("p");
            JQ $("<li></li>");
            插入节点
            JS appendChild
            JQ append
            $("ul").append("$li_1");
            创建文本
            js createTextnode
            JQ JQ $("<li>文本节点</li>");
            插入节点
            append(),向元素内部追加到他指定内容
            $("p").append("<li>文本内容</li>") = <p><li>文本内容</li></p>
            appendTo(),将内容追加到他指定的元素//与append的区别一个放元素一个放内容
            $("<li></li>").appendTo("p");
            prepend()在他指定元素内容前增加新元素
            prepend()将内容增加到他指定元素内容前
            after()在匹配的元素之后加入指定内容,加入不等于追加和增加
            $("p").after("<li>文本内容</li>") = <p></p><li>文本内容</li>
            insertAfter()将指定内容加入到匹配元素之后
            before()在匹配的元素之前加入指定内容,
            insertBefore()将指定内容加入到匹配元素之前
            删除节点
            1.remove()删除该节点包含的所有后代节点,所绑定的事件也移除
            2.detach()删除该节点包含的所有后代节点,所绑定的事件没移除
            3.empty()清空节点和后代节点,但标签还在这是文本节点没了
            复制节点
            clone(),复制节点在当前父级元素的最下面
            替换节点
            replaceWith()
            replaceAll()
            $('ul li:last').replaceWith("<li>乒乓球</li>");
            $('<li>乒乓球</li>').replaceAll('ul li:last');
            遍历节点
            children();用于获得元素的子元素集合,不考虑其他后代元素
            next();用于获得匹配元素后面紧邻的同辈元素;
            prev();用于获得匹配元素前面紧邻的同辈元素;
            siblings();用于匹配元素前后所有的同辈元素;
            parent();获得当前匹配元素集合中每个元素的父元素;
            parents();获得当前匹配元素集合中每个元素的祖先元素;
            获取和设置style对象的值
            css("","");
            获取和设置class样式
            attr()也就是对属性的设置
            追加和移除样式
            addClass();
            removeClass();
            判断是否含有某个样式
            hasClass();返回boolean值
三JQ事件
            加载DOM()
            $(document).ready():只要DOM就绪就会执行,因此可能这个时候元素的关联文件未下载完毕
            $().ready()
            $(window).load(function(){
                //代码;
            })
            事件绑定(事件监听)
            js document.addEventListener() 方法
            JQ $(selector).bind(type,[data],function)
            事件移除
            JQ $(selector).unbind(type,[data],function)
            事件对象
            js在事件处理函数中默认传递了event对象,也就是事件对象
            event.type获取这个事件的事件类型,例如click
            event.target 获取绑定事件的DOM元素
            event.data  获取事件调用时传入的额外参数
            事件冒泡
            当出现了重叠的元素都绑定在同一个事件,那么久会出现冒泡问题
            event.stopPropagation()取消所有上层的冒泡行为
            event.preventDefault()阻止默认行为(超链接跳转,提交表单跳转)
            return false 是上面两者与一身
            合成事件 
            hover(fn1,fn2)
            当光标移到元素上执行第一个函数,当光标移出这个元素的时,会触发第二个函数
            特殊事件
            one(event,[data],function)
            one()事件只执行一次即被删除
            模拟操作
            trigger()
            时间命名空间
            $('ul li[title="篮球"]').bind('click.aaa',function(){
                alert($(this).html());
            })
            'click.aaa' == 'click' 
 JQ制作动画
            显示 $(selector).show(speed,callback);
            隐藏 $(selector).hide(speed,callback);
            $(selector)表示选中的元素
            speed表示动画速度
            callback是回调函数
            淡入,淡出
            fadeIn(speed,callback)方法实现淡入效果
            fadeOut()方法实现淡出效果
            fadeToggle()交替淡入淡出
            fageTo(speed,opacity,callback)以不透明度以渐进的方式调整到指定的不透明度
            滑动效果
            slideDown(speed,callback)方法用来实现向下滑动动画效果
            slidUp()方法用于实现向上滑动
            slideToggle()交替显示向下滑动动画效果
            自定义动画方法
            $(selector).animate({params},speed,callback)
            params:动画效果属性
            speed:动画变化时间
            callback:回调函数
            累加,累减动画
            $('div').animate({left: '+=250px'});
            用,隔开属性多个动画(驼峰式)
            停止动画和判读是否处于动画状态
            stop([clearQueue],[gotoEnd]);默认都是false
            clearQueue:代表是否要清空未执行的动画队列
            gotoEnd:将动画跳转到那个动画的末状态,并不是队列的最后一个
            通常解决:hover光标移入移出太快,用户光标动作不一致,用stop(true)清空未完成的动画
            判断元素是否处于动画状态
            if(! $(element).is(":animated")){
                //如果当前没有进行动画,则添加新动画
            }
            延迟动画
            delay(duraion,[queueName])
            duraion:定义多少毫秒
            queueName 可选,为队列名的字符串

猜你喜欢

转载自blog.csdn.net/qq_39148344/article/details/83501086
jq