JQ复习

2023-05-16

    一选择器
            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 可选,为队列名的字符串

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JQ复习 的相关文章

  • localStorage和sessionStorage区别和使用

    一 什么是localStorage 在HTML5中 xff0c 新加入了一个localStorage特性 xff0c 这个特性主要是用来作为本地存储来使用的 xff0c 解决了cookie存储空间不足的问题 cookie中每条cookie的
  • 前端小测----DOM测试38

    得分 我得了2分 xff0c 难受 xff0c 明明感觉是3分的 哈哈 分析 其实这个题目就是对伪类进行了一定考察 xff0c 我太菜了 xff0c 呜呜呜 第一问 xff1a 获取所有匹配required必选的单选框元素 我的答案 var
  • 在vue-cli中使用vue-property-decorator装饰器

    安装 npm i s vue property decorator 如果你的项目是安装了TS那么就可以直接使用 xff0c 如果没有安装TS但是还是想用vue property decorator装饰器那么就还需要去配置一下了 使用vue
  • 图片懒加载

    什么的图片懒加载和预加载大家应该都明白 xff0c 那么小面就来看看如何用JS书写原生懒加载 下面我们在写出懒加载代码块的时候我们先来复习一些下面会遇到的一些知识点 获取客户端高度 var viewHeight 61 document bo
  • 移动端配置

    物理像素 iphone 6 的宽度有750个物理像素 逻辑像素 也叫设备的独立像素 xff0c css像素也是逻辑像素的一种 逻辑像素比 xff08 dpr xff09 物理像素 逻辑像素 xff0c iphone6 的dpr 61 2 常
  • csdn代码片教程

    代码片 代码片功能是一项非常实用的重要功能 xff1a 该功能允许您仅上传一段代码而非整个项目 xff0c 并且您可以像管理git项目一样对代码片进行管理 使用代码片 xff0c 您可以 xff1a 很容易的创建 分享一段代码 在其它网页中
  • 执行上下文

    执行上下文 执行上下文也叫执行环境 xff1f 为什么呢就让我这个英语zz来解释下 context xff1a 环境 xff1b 上下文 执行上下文 xff1a 执行环境中定义了变量或函数有权访问的其他数据 xff0c 决定了他们给各自行为
  • table-call布局

    学习了旭哥的文章总结 等分 lt style gt container display table height 300px width 100 border 1px solid red child display table cell b
  • css小测--两栏布局

    目标效果 这个题得分我是6分中国题是针对表格布局 xff0c flex布局 xff0c inline block布局 xff0c absolute布局来完成 xff0c 大家突然问题来了为什么没float xff0c 嗯 xff0c 这个看
  • Vue $nextTick

    使用场景 1 当改变了DOM中的数据后 xff0c 立马去获取DOM中的数值 2 当我们在watch侦听器中改变了数据 xff0c 立马用这一些数据去做一些操作 xff0c 这里为什么不可以呢 xff1f 因为watch其实应该也算是会被推
  • javaScript 快速排序

    简单理解 首先我觉得我们要明确一般算法都是需要递归的 xff0c 所以我们首先完成第一循环 第一个循环我们找到一个主元 xff08 数组的中间 xff09 xff0c 我们把大于的放右边 xff0c 小于的放左边 然后在分别把主元左边的和右
  • for..in 和 for..of的区别

    in xff1a 支持IE6 43 xff08 老 xff09 枚举对象枚举字符串 xff08 IE9 43 后支持 xff09 枚举数组 xff0c 但是数组只身的方法 xff0c 和原型上的方法也会枚举出来 xff0c xff08 可以
  • 垂直水平居中的方法

    垂直水平居中 HTML解构 lt div class 61 34 container 34 gt lt div class 61 34 box box 11 34 gt 1 lt div gt lt div gt lt div class
  • line-height理解

    行高的单位 百分比 xff1a 突出了行高和字体大小的基佬关系当字体行高的单位为百分比的时候 xff0c 行高以字体大小为依据 em xff1a em这个单位 xff0c 当作用在行高的时候是以当前文字大小为依据 xff0c 当作用在字体大
  • 剖析Vue数据劫持的实现原理

    原文 xff1a https github com DMQ mvvm xff08 包含原文源码 xff09 由于源码的注释比较少 xff0c 我自己加了注释的地址 xff1a https github com zengqingxiao MV
  • css弹性动画

    通过css让生硬的动画变得更加自然 下面我们会通过javaScript和css分别实现 效果图 xff1a 我们知道没一个物体运动都有一个运动轨迹 xff0c 例如上面的小球是模拟的弹簧运动从而让动画更加自然 xff0c 而上图的运动轨迹图
  • C#利用服务器实现客户端之间通信

    这篇文章主要为大家详细介绍了C 利用服务器实现客户端之间通信 xff0c 感兴趣的小伙伴们可以参考一下 先来讲述下我自己对于整个Socket通信过程的理解 xff0c 毕竟初学 xff0c 说错见谅 xff0c 知道错了会改正 1 首先在服
  • js中的节流和防抖

    在学习Element ui源码的过程中有注意到题目使用的节流防抖居然是引用的一个npm包 xff0c 而不是自己写的一个utils为什么我会这样想呢 xff0c 因为在看Data组件的时候E没有使用一些常见的比如 moment 这样的组件库
  • 设计模式

    订阅发布者 事件监听 xff0c 发布 class Pubsub constructor this handles 61 事件的订阅 64 param String type 发布的事件类型 64 param Function handle
  • JS中的变量提升和函数提升问题

    学习完后的总结 Js代码分为两个阶段 xff1a 编译阶段和执行阶段 Js代码的编译阶段会找到所以的申明 xff0c 并用合适的作用域将他们关联起来 xff0c 这个是词法作用域的核心内容 包括变量申明和函数声名都会在代码被执行前的编译阶段

随机推荐

  • this的由来

    JS的数据结构 xff1a var obj 61 foo 5 面的代码将一个对象赋值给变量obj JavaScript 引擎会先在内存 xff08 堆 xff09 里面 xff0c 生成一个对象 foo 5 xff0c 然后把这个对象的内存
  • div中动态文字内容的处理(内容在文字少的时候文字居中,在文字多的时候局左)

    如何实现板块中的内容在文字少的时候文字居中 xff0c 在文字多的时候局左 HTML lt div class 61 34 box2 34 gt lt p class 61 34 content 34 gt 当文字少的时候 lt p gt
  • css流体布局下发宽度分离原则与box-sizing的使用

    学习完了CSS世界的总结 因为默认的box sizing 为content box宽度作用在内容 所以当出现 box width 100px border 1px solid red 或 box width 100px padding 20
  • css任意高度收缩动画技术

    弹性动画学习 学习css世界后 xff1a 利用max height和overflow hidden来实现 HTML lt div class 61 34 box 34 gt lt input id 61 34 check 34 type
  • 学校CSS世界第三章总结

    1 块级元素 块级元素并不等于display xff1a black xff1b li的默认display xff1a list item xff1b table的display默认是table xff1b 他们都符合块级元素的基本特征 x
  • padding属性详细分析

    lt p gt 1 padding会增加元素的尺寸 lt p gt lt p gt 2 padding对内联元素的影响 xff0c 对内联元素的垂直方向的影响是有的但视觉是没有 lt p gt lt a href 61 34 javasvr
  • 利用margin来实现两端对起

    为什么会对齐一般我们给li标签设置margin left最后一个总是会有一个不需要的left那为什么如何去除呢 xff1f 答案是 xff1a margin xff1a 负值 如果ul右边多了20px xff0c 那么给ul设置个margi
  • 裸机通过u盘以hostengine的方式成功安装ovirt4.5

    本次安装是在两台服务器上进行 xff0c 采用hostengine的方式安装 xff0c 也就是一台机上先安装oVirt node xff0c 再安装oVirt engine xff0c 另外一台机安装oVirt node xff0c 并加
  • 关于paddin-bottom的中的未定义的问题

    css世界的学习后 xff1a padding的兼容问题一般遇不到 xff0c 滚轮什么时候出现 xff1a Chrome浏览器的滚轮是在子元素超过content box的时候显示 xff1b IE Firefox是在超过padding b
  • 流动性的深入学习

    何为 34 流 34 流 61 文档流 xff1b 当我们在一个容器中倒入足量的水时 xff0c 水一定会均匀平铺整个容器 所以流动性也就是100 自适应 但width 61 100 xff01 61 流动性自适应100 原因 xff1a
  • 如何用border来画三角形

    学习总结 HTML lt div class 61 34 son 34 gt lt div gt CSS son width 0px border 20px solid border color black transparent tran
  • window和document的区别

    window对象 它是一个顶层对象 而不是另一个对象的属性 xff0c 即浏览器的窗口 document 当前显示的文档 该属性本身也是一个对象
  • JS距离的理解

    偏移量 offsetWidth 元素在水平方向上占用的空间大 xff0c 包括元素的宽度 可见的垂直滚动条宽度 左边框高度和右边框高度 offsetWidth 61 width 43 padding 43 border offsetHeig
  • 汉堡按钮的制作以及其中的问题

    第一种自己写的 xff0c 下面的第二种是网上的用一个span使用做出来的 HTML lt div class 61 34 box 34 gt lt chang用来判断是否变换 gt lt span class 61 34 s1 34 gt
  • 对js动画和时间控制的使用

    JavaScript Document 打算移动的元素ID xff1b elementID 该元素的目的地的 34 左 34 位置 xff1b final x 该元素的目的地的 34 上 34 位置 xff1b final y 停顿时间 x
  • css动画小结

    一 转换 transform IE9 43 1 旋转rotate transform rotate 30deg ms transform rotate 30deg IE 9 webkit transform rotate 30deg Saf
  • Django 判断访问来源是PC端还是手机端

    pc or mobile py 判断访问来源是pc端还是手机端 import re def judge pc or mobile ua 34 34 34 param ua 访问来源头信息中的User Agent字段内容 return 34
  • 圆形进度条是学习

    学习网站 xff1a http www cnblogs com jr1993 p 4677921 html CSS margin 0px padding 0px box margin 50px auto 0 width 300px heig
  • 定位插件

    写了个等位插件 xff0c 点击nav中的LI xff0c 位移 xff08 与href有视觉效果 xff09 到达相应板块 xff08 这里的类比li中的类中多了个H字母 xff09 的位置 lt li class 61 34 wz 34
  • JQ复习

    一选择器 1 基本选择器 2 层级选择器 3 过滤选择器 first 选取第一个元素 last 选择最后一个元素 not 去除所有与给定选择器匹配的元素 39 input not first 39 even选取索引是偶数的元素 xff0c