CSS/JQuery |过滤元素时，最后一个元素的一部分不会消失 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式

伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。...:hover 结构化伪类：会在标记中存在某种结构上的关系时例如：某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。...特别提示：一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。上面的Selcotor选择器可以省略，如果省略则可以匹配处于某种状态下的多个元素。...在HTML文档中，根元素永远是元素 Selector:first-child 表示一组同胞元素中的第一个元素。 Selector:last-child 表示一组同胞元素中的最后一个元素。...伪元素就是说在你的文档中若有实无的元素 (解释说明：在HTML代码中没有，我们可以通过css的样式设置伪元素，让它显示给我们看到) 伪元素： ::first-letter 伪元素第一个字母 ::

1731 0

jQuery学习笔记

(){ //jQuery代码 }); 选择器语法: jQuery的选择器语法格式和CSS的调用方法一样的哦！...unload 事件 | 过滤选择器基本标签层次过滤器 :first/:last :first:选取第一个元素 :last:选取最后一个元素 :not(*):去除选择器给定的元素...$("div:last").addClass("myClass");//最后一个标签 }); 内容过滤选择器 :contains(text) 选取包含text文本内容的元素；区分大小写...删除元素的class加载 empty() 删除被选元素的子元素 jQuery CSS 获取/设置 addClass() 向被选元素添加一个或多个Class类 removerClass() 从被选元素中删除指定的一个或多个...() 返回被选元素与参数之间的所有同级元素遍历过滤 first() 返回被选元素的首个子元素 last() 返回被选元素的最后子元素 eq() 返回被选元素中带有指定索引的元素(可选参数

8.8K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

jQuery (二)

对象的data属性，在调用最后一个处理函数的时候，会将第二个值作为对象的data属性,这样即可避免使用闭包操作 ps jquery 中所有的处理程序都有一个函数例如 hover() mouseenter...实时事件实时事件为，如果先前将所有a元素绑定了一个事件，接着在创建一个新的a的节点，如果此时触发事件，则新创建的a元素不会被触发事件，因为绑定的不是实时的事件。...由于更新，live，bind，delegate，die，undelegate 全部废弃注意，这一部分全部废弃动画效果动画效果实质上是通过定时的修改css属性，达到动画的效果一个栗子 https:...，top接受两个可选的参数，如果第一个为true将会清楚当前队列，否则队列将不会被清除，第二个为是否保留当前值，如果未true将会变化到终值，如果为false将会保持当前值，然后开始执行动画 // 当属性悬浮在图片上时...，即，使用queque()方法，给队列添加一个新函数 // 淡入的显示一个元素，稍等片刻，设置一些文字，然后变化边框,为对队列的操作，添加到队列的最后 $('#message').fadeIn().delay

10.8K3 0

好久不用 jQuery，来复习一下

除非特殊要求， ♞ 一般不会使用 3.x 版本的，很多老的 jQuery 插件不支持这个版本。 ♞ 目前该版本是官方主要更新维护的版本。... 过滤选择器主要是通过特定的规则筛选出 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同，即选择器都以一个 : 开头。...先慢，中间快，最后又慢 ♞ linear：动画执行时速度是匀速的 ③ fn：在动画完成时执行的函数，每个元素执行一次。...fadeOut() 方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(display：none)。fadeln() 方法则相反。...如果一个元素的 display 属性值为"none"，当调用 slideDown() 方法时，这个元素将由上至下延伸显示。slideUp() 方法正好相反，元素将由下到上缩短隐藏。

6.2K4 0

前端基础：jQuery

jQuery Usage jQuery 作为一个单独存在的 js 文件，并不会与其他的 js 文件发生冲突 jquery-3.4.1.min.js">...子代选择器，只选取子层的元素 $("#x>p").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟元素 h3 $("#x+h3").css("color...> // 第一个 li $("li:first").css("color","red"); // 最后一个 li $("li:last").css("color","red...).text( str ); } ); 表单事件当元素获得焦点时，会触发 focus 事件，失去焦点时，会触发 blur 事件。...").find().text(); alert(x); }); 元素的过滤 first() 过滤第一个元素 last() 过滤最后一个元素 eq(index)

14.4K2 0

jQuery中常用的函数和属性详细解析

而filter()则是筛选div的class为rain的元素。一个是对它的子集操作，一个是对自身集合元素筛选。 is(expr)//判断现有集合是否属于‘expr'集合中的一部分或是相等。...再也不会被触发 foo hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。...这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。...的标签元素的所有的属于同一个父元素的div标签基本过滤选择器 $("tr:first") 匹配第一个选择的元素 $("tr:last") 匹配最后一个选择的元素 $("input:not(:checked...$("select option:selected") 匹配所有已选择的元素 JQuery CSS 方法说明 css( name ) 访问第一个匹配元素的样式属性。

3.8K1 0

前端(四)-jQuery

标签名:过滤选择器；作用：过滤指定标签；语法说明 :first 选取第一个元素 :last 选取最后一个元素 :not(selector) 选取除selector选择了的元素之外的元素 :even...，多一个或少一个空格，都会影响选择器的效果； 2.6 $("选择器").css() 方法说明 $("选择器").css("属性名称","属性值") 对单个css属性赋值 $("选择器").css({"...；可以查找当前元素下的子元素； html //当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失 3三八线加入看单元素集还原为之前的状态； //end():结束当前的最后一次筛选,恢复到初始状态 $(".gameList li").first().css("background-color","orange...").end().last().css({"background-color":"pink"}); //可以选取到第一个li和最后一个li //先选取第一个li，然后end()清除.first()的过滤

9.9K3 0

JQuery中的动画

show()方法和hide()方法在没有带任何参数的情况下，作用是立即显示或者隐藏匹配的元素，不会有任何动画。...如果希望元素能动起来，我们可以为其指定一个速度参数，如$("element").hide("fast")这里的fast是一个速度关键字，记住使用关键字时都要给它加上引号，一共有3个速度关键字：fast=...，最后在为该元素设置border。...但是上面的代码并不能够达到预期的值，实际上在刚开始执行动画的时候，css()方法就执行了，原因是css()方法并不会出现在动画队列中，而是立即执行，那么怎么改动代码才能实现预期的效果呢？...库里会出现问题总结： (1)一组元素上的动画效果当在一个animate()方法中应用多个属性时，动画时同时发生的。

4.1K3 0

JQuery基础

ps2：以上函数均有最后一个参数设置为回调函数。回调函数有两个值：当前选中元素下标，旧值。...3.jQuery 删除元素： remove()：删除被选元素及子元素。ps：remove()可接受一个参数，对被删元素进行过滤。参数是jQuery选择器的语法。...2.遍历--后代（子元素一下都是后代元素）： children()：返回被选元素的直接子元素 find()：返回被选元素的所有子元素（一直遍历到最后一个子元素） 3.遍历--同胞（siblings；兄弟元素...，具有相同的父元素） siblings()：返回被选元素的所有同胞（兄弟）元素；可选参数可以用来进行过滤：$('h2').siblings('p')：返回与h2具有相同父元素的p元素 next()：返回被选元素的下一个同胞元素...4.遍历--过滤 first()：返回被选元素的第一个元素 last()：返回被选元素的最后一个元素 eq()：返回被选元素中带有指定索引号的元素；索引号从0开始；如：$('p').eq(1)：返回第二个

6.8K5 1

Web阶段：第五章：JQuery库

(){ $("#two~div").css("background", "#bbffaa"); }); }); 过滤选择器基本过滤器 :first 获取第一个元素 :last...(function(){ $("div:first").css("background", "#bbffaa"); }); //2.选择最后一个 div 元素 $...选出最后一个元素和:last功能一样 hasClass(class) 是否含有class值 filter(expr|obj|ele|fn) 按照表达式过滤 is(expr|obj|ele|fn)1.6...动画基本动画 show() 显示隐藏的元素第一个参数是动画执行的时候，（单位是毫秒）第二个参数是动画执行完成时的回调函数 hide() 隐藏可见的元素第一个参数是动画执行的时候，（单位是毫秒...() 淡入让隐藏可见 fadeOut() 淡出让可见消失 fadeTo() fadeToggle() 让消失的可见，让可见的慢慢消失案例： <!

28.8K2 0

jQuery选择器和选取方法

注意该过滤器不会匹配元素( jQuery的扩展) :input 匹配用户输入元素:, , 和( jQuery的扩展)...:last 匹配选中列表中的最后一个元素(( jQuery的扩展) :last-child 匹配的元素是其父节点的最后一个子元素。...">的子元素注意:CSS和jQuery选择器语法允许在简单选择器的某些过滤器中使用圆括号，但并不允许使用圆括号来进行更常见的分组。...它会在每一个当前选中元素的子孙元素中寻找与指定选择器字符串匹配的元素，然后它返回一个新的 jQuery对象来代表所匹配的子孙元素集。注意这些新选中的元素不会并入已存在的选中元素集中。...大部分都接受可选的选择器字符串作为参数。不传入选择器时，它们会返回所有子元素、兄弟元素或父元素。传入选择器时，它们会过滤元素集，仅返回匹配的。

6.1K4 0

jQuery选择器大全(48个代码片段+21幅图演示)2

属性过滤选择器 ——4.1 [attribute]（取拥有attribute属性的元素）下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。...举个例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集合。...——5.2 :only-child 当某个元素有且仅有一个子元素时，:only-child才会生效。...456 这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了

2.1K8 0

JQuery最全常用方法指南

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。...这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。...children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。...(”#prev ~div”) 同胞选择器，选择prev的所有同胞节点基本过滤选择器 $(”tr: first”) 匹配第一个选择的元素 $(”tr: last”) 匹配最后一个选择的元素 $(”input...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。

13.2K3 1

与Ajax同样重要的jQuery（1）

③：基本过滤选择器 :first 选取第一个元素 $("tr:first") :last 选取最后一个元素 $("tr:last") :not(selector) 去除所有与给定选择器匹配的元素 $("...在动画完成时执行的函数 fadeOut(speed, [callback]) 概述通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。...这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。...在动画完成时执行的函数 ④：内容过滤选择器内容选择器是对子元素和文本内容的操作 :contains(text) 选取包含text文本内容的元素 $("div:contains...区别 eq :first-child 选取第一个子元素 :last-child 选取最后一个子元素 :only-child 选取唯一子元素，它的父元素只有它这一个子元素练习7： ² 选择id属性mytable

11.5K6 0

弹出层之2：JQuery.BlockUI

JQuery.BlockUI是众多JQuery插件弹出层中的一个，它小巧（原版16k，压缩后10左右）,容易使用, 功能齐全，支持Iframe，支持Modal，可定制性高也意味他默认谦虚的外表。...jQuery的BlockUI插件可以让你在使用AJAX时模拟同步行为，锁定浏览器(模式窗口)。当被激活时，它会防止用户活动的页面（或页面的一部分），直到它被禁用。...BlockUI添加元素的DOM，给它的外观和阻止用户交互行为。...color: '#fff'} }); }); $('#Button4').click(function() { //定义弹出的信息为页面的某一个元素...; }); 阻止页面的用户的活动,不会自动消失，请刷新： $.blockUI();

4.9K2 0

JQuery第一节

css选择器 jQuery完全兼容css选择器名称用法描述 ID选择器 $(“#id”); 获取指定ID的元素类选择器 $(“.class”); 获取同一类class的元素标签选择器 $(“div...过滤选择器这类选择器都带冒号: 名称用法描述 :eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index...li元素中，选择索引号为偶数的元素 :first $(“li:first”).css(“color”, ”red”); 获取到的li元素中的第一个 :last $(“li:last”).css(“color...”, ”red”); 获取到的li元素中的最后一个【案例：隔行变色】筛选选择器(方法) 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。...mouseenter与mouseleave是一对事件，只有当鼠标经过当前元素时，事件会触发，鼠标经过子元素，mousenter事件是不会触发的。

2.2K3 0

jQuery 选择器

通过过滤选择呢亲选择元素 (1) 基本过滤选择器 (2) 可见性过滤选择器详解：通过css选择器选取元素 jQuery支持大多数css选择器最常用的有：基本选择器，层次选择器和属性选择器在jQuery..."的元素的情况通过条件过滤选取元素过滤：把不要的滤掉，留下需要的语法标识：（：）主要通过特定的过滤规则来筛选出所有的DOM元素同样：过滤规则与css中伪类语法相同，即选择器都以一个冒号（:）...冒号前是需要过滤的元素栗子：（1）a:hover 表示当鼠标指针移过元素时（2）Tr:visited 表示当鼠标指针访问过元素后经典栗子：实现列表隔行变色注意：奇偶过滤选择器...基本过滤选择器 ? ? 注：$(“:header”) 选取的时所有h1`h6的标签让文本框获取焦点：$(“input”).focus（）；过滤选择器是通过元素所处的位置来获取元素的 2. ...而代码: /1不带空格的jQuery选择器 var $t b= $(".test:hidden") ; 选取的是隐藏的class 为“test" 的元素。最后： ? （C）房上的猫。

3.6K9 0

jQuery学习笔记之概念（1）

jQuery是继承prototype之后又一个优秀的JavaScript库。现在jQuery主要包括核心库、UI和插件等。。...，在jQuery里面只有一个对象 jQuery == $ 7.出色的浏览器兼容性 8.链式操作方法 jQuery.size.css() 9.隐式迭代，屏蔽了for，我可以迭代一个数组..." value="选择最后一个div元素." id="btn2"/> $("#btn2").click(function(){ $("div:last"..."/>点击下列按钮时先自动重置页面一个div元素...." id="btn1"/> 最后一个div元素." id="btn2"/> <input type="button" value="选择

2.9K2 0

day41_jQuery学习笔记_02

这个元素的位置是从0算起。即：0表示开始第一个 -index：负数，从尾开始获得指定索引的元素。从集合中的最后一个元素开始倒数。..." value="选择第一个div元素" id="btn2"/> 最后一个div元素" id="btn3"/> 元素开始匹配寻找； 2、前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤； 3、前者返回...代码，当鼠标在父元素和子元素之间穿越时，将不会触发父元素的事件 $("#outerDiv").mouseenter(function() { $(...不会自动缓存结果。除非设置了"cache"参数。 * 注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。

4.4K2 0

贯穿jQuery的内部栈（一） -- 使用

即使我只看那么一次，我不把书拿回家也不会太影响吧（拿回家也是在那儿扔的，没什么用）？ jQuery在内部使用了栈，用来存放从页面中选取到的元素。...当多次用到某个元素时，不需要多次从页面获取（jQuery获取元素是很费劲的，尤其是根据ID查找）。...大多数jQueryDom遍历方法来操作jQuery对象实例，并创建一个新的对象，匹配一个不同的DOM元素集合。当发生这种情况时，实际上是新的元素集合被压入到对象内部维护的栈中。...每次过滤方法都会被压入栈中，当我们需要返回到前一个状态时，可以使用end()进行出栈操作，来返回前一个状态。...最后，调用.addBack() 合并这两个组元素在一起，创建一个jQuery对象，指向所有三个项元素（按照文档中的顺序）：{[,, ]}。

7832 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭