用于显示/隐藏第n个子对象范围的简化jQuery代码 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

前端架构师之01_JQuery

2 元素操作 2.1 jQuery对象 jQuery对象：是对DOM对象的一层包装。作用：是通过自身提供的一系列快捷功能来简化DOM操作的复杂度，提高程序的开发效率。...n个子元素。...计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个带有“of-type” 与未带有“of-type”项的选择器有一定的区别。...设置焦点图的外边框的宽度以及超出隐藏，限定其只能显示一张图片。切换到下一张时，只需要修改焦点图外层样式中的left值，就可以将焦点图整体向左移动，从而显示第2张图片。

4.8K0 0

JQuery常用命令

:nth-child(index) 第 index 个子元素语法: $('li:nth-child(2)')；奇数个: $('li:nth-child(odd)')；偶数个: $('li:nth-child...attr() 一般只用于操作元素的 HTML 字面属性，如 src、href、name.. val() 操作的是HTML 元素对应的 JS 对象的 value 属性 prop() 操作的是 HTML 元素对应的...JQuery 中的函数第三部分：动画函数 — 隐藏和显示动画隐藏和显示函数通过使用定时器修改目标元素的 width / height / opcaity 三个样式的值来实现动画 (1). $(..)....[index] 获取类数组中封装的第 index 个 DOM 对象 (3). $(..).get(index) 获取类数组中封装的第 index 个 DOM 对象 (4). $(..).each(...JQuery 对象插件函数 JQuery 对象插件函数就是为所有的 jQuery 对象添加的公共函数，用于操作当前选定的 DOM 元素声明方式：JQuery.fn.max = function( ){

8K1 0

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

是的

没有找到

Web-第四天 jQuery学习

列举常见的五种选择器，并简单描述其作用通过选择器，获得jQuery对象学会给标签绑定事件可以实现显示或隐藏标签。...固定字符串：slow, normal, or fast 参数2fn，显示成功之后回调函数。 hide() 隐藏 toggle() 切换 1.2.3.2 滑动通过改变元素高度显示或隐藏 ?...slideDown() 显示，高度变大。 slideUp() 隐藏，高度变小。 slideToggle() 切换 1.2.3.3 淡入淡出通过改变元素透明度显示或隐藏 ?...min 最小值 max 最大值 range [min,max] 值范围 equalTo jQuery表达式两个值相同 remote url路径 ajax校验 9.3 检验方式：js 代码方式...jQuery基础入门2案例第11章模拟用户分组 11.1 案例介绍使用jQuery模拟用户分组，要求如下： 1.页面加载不显示所有分组的列表项。 2.点击分组名称，显示当前分组列表。

4.7K4 0

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

jQuery对象" class="item">DOM对象和jQuery对象 jQuery选择器大全" class="item-selected...——5.3 :nth-child 看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。...:nth-child有三种用法： 1) :nth-child(x)，获取第x个子元素 2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素...例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。...表单对象属性过滤选择器 ——6.1 :enabled和:disabled（取可用或不可用元素） :enabled和:diabled的匹配范围包括input, select, textarea。

2.5K8 0

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

contains(str)匹配集合中包含str这个变量文本的元素集合，返回匹配元素集合 end()用于返回到调用find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象...Effects 方法说明 show( ) 显示隐藏的匹配元素。...这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式隐藏或显示。...子元素过滤选择器 $("ul li:nth-child(2)"), $("ul li:nth-child(odd)"), 匹配父元素的第n个子元素 $("ul li:nth-child(3n + 1)...") $("div span:first-child")匹配父元素的第1个子元素 $("div span:last-child") 匹配父元素的最后1个子元素 $("div button:only-child

4.4K1 0

JavaScript学习笔记（四）—— jQuery入门

终于到了js框架的学习部分了，这部分内容主要讲jQuery，也是非常重要的内容。 jQuery应用入门 jQuery是一个JavaScript库，极大的简化了JavaScript编程。...：不分元素类型的选择器说明 :first-child 选择父元素的第一个子元素 :last-child 选择父元素的随后一个子元素 :nth-child(n) 选择父元素下的第n个或奇偶元素,n的值为...选择同元素类型的随后一个子元素 :nth-of-type 选择同元素类型的第n个或奇偶元素,n的值为"整数或odd或even" :only-of-type 匹配父元素中特定类型的唯一子元素(该父元素可以有多个子元素...元素的显示与隐藏使用hide()方法使用hide()方法可以隐藏被选元素 $(document).ready(function () { $(".ex .hide...元素的淡入与淡出使用hide()与show()方法 show和hide方法可以接受参数控制隐藏的过程.: show(speed,callback) speed参数规定显示或隐藏的速度: - slow

12.9K5 0

jq---方法总结

前者是jQuery库的源代码版本，它带有注释信息，建议你在开发环境中使用该文件，以便于调试或阅读源代码。...class="foo bar">Hello CodePlayer'); // 包含一个临时的div元素，其内嵌一个子节点p元素六：元素的筛选 // 以下方法都返回一个新的jQuery...对象，他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素...$("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似 /* 下面的slide*、fade*系列方法与上面的show()、hide...").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果 $("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果 $("

4.3K2 0

JQuery最全常用方法指南

Effects 方法说明 show() 显示隐藏的匹配元素。...show(speed, [callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 hide() 隐藏所有的匹配元素。...slice(start, [end]) 从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。 add(expr) 把与表达式匹配的元素添加到jQuery对象中。...$(”ul li: nth - child(2)”), $(”ul li: nth - child(odd)”), 匹配父元素的第n个子元素 $(”ul li: nth - child(3n + 1)...”) $(”div span: first - child”) 匹配父元素的第1个子元素 $(”div span: last - child”) 匹配父元素的最后1个子元素 $(”div button

14.2K3 1

jQuery介绍，一篇就够了！

Element 显示时 :hidden //当 Element 隐藏时 :header //选择属于 header...//结果为第 index 个节点的 Element :even //结果属于偶数的 Element :first...$(document.querySelector('h1')); //dom对象转jquery对象 $('h1')[0]; or $('h1').get(0);...//jquery对象转dom对象 $('a'); //现在chrome好像也可以使用$()选取元素了 DOM-Insertion...$(element).hide([duration][, complete]); //隐藏元素 $(element).toggle([duration][, complete]); //显示元素开关

1.9K2 1

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

1 筛选[掌握]  筛选与之前“选择器”雷同，筛选提供函数 1.1 过滤 eq(index|-index)，获取第N个元素 •index：一个整数，指示元素基于0的位置...(type,[,data],fn); 第1个参数是事件类型,.当然也可以是自定义名称第2个参数是可选参数,作为event.data属性值传递给事件对象的额外的数据对象第3个参数则是用来绑定的处理函数...，fn) 显示当显示成功后触发fn hide()隐藏 toggle(speed[,fn]) 切换,如果隐藏就显示，如果显示就隐藏。...，可以使匹配的元素以“滑动”的方式隐藏或显示  滑动：改变高度 slideDown，显示（从上往下） slideUp，隐藏（从下往上） slideToggle()切换 ——...serialize()方法 •该方法作用于一个jQuery对象，可以将DOM元素内容序列化为字符串。方便客户端发送请求。

11.2K2 0

第86节：Java中的JQuery基础

第86节：Java中的JQuery 前言复习定时器： setInterval clearInterval setTimeout clearTimeout 显示： img.style.display...简单来说jquery是一个JavaScript库，简化了JavaScript的编程，很容易学习。...("slow","normal",or"fase")或表示动画时长的毫秒数值，fn: 在动画完成执行的函数，每个元素执行一次 // 显示段落 html代码： hello jquery代码 $("p").show() jquery库可以通过一行简单的代码添加到网页中，库包含html元素选取和操作，css操作，html事件函数，JavaScript特效和动画...this).hide()隐藏当前的 HTML 元素 $(selector).action() $(this).hide() - 隐藏当前元素 jquery函数 // 为了防止文档完全加载就绪之前运行的代码

3.9K3 0

jQuery（选择器）

基本选择器（*）在开发过程中，jQuery对象的定义 var $obj=$("选择的对象")； //$obj为自定义的元素名 id选择器 $("#id"); 选中的结果是该元素的jQuery对象标签选择器...$("标签名称");jquery对象的集合，如果选择结果只有一个，那么是当前对象类选择器 $(".类名"); jQuery对象的集合，类名是在css中定义并集选择器 $("selector1seletor2...全局选择器 $("*"); jQuery对象的集合，会选中所有层次选择器（*）后代选择器 $("selector1 selector2"); 选择selector1内部所有满足selector2的元素...； eq后的元素index重新按照0进行排列才能取出正确的数据（推荐显示先用lt，再使用eq）；可见性过滤选择器 :visible 选取所有可见元素（占据文档流的位置。...(index) 匹配其父元素下的第N个子或奇偶元素；注意：index值从1开始，可以是数字，可以是even偶数，odd奇数，可以使用表达式2n,3n,3n+1.

2.7K1 0

真因验证

”/> 最简单、最便捷，提示消息使用jQuery.Validate的内置的消息（自定义扩展验证规则也属于此项），但是由于是以样式名的方式进行验证，导致了日后修改必须找到相应的input对象，同时无法使用高级验证规则...，具体说明请向下看 2、同第1条，这种验证规则方式也是在input对象中书写class样式，只不过书写的方式改为了JSON格式，但是这种方式提供了自定义验证消息的支持：如对象纠缠在一起，并且还增加消息自定义，使得input对象变的更大了，干扰了页面代码的阅读，但可以使用高级验证规则（实际就是将第3种JS以JSON的格式放到具体的class中 3、这种方式使用纯JS的方式...：var opts = null;，这样根据HTML从上到下的解析方式首先opts被定义，然后在每个子页面被赋值，最后再返回母版页中的jQuery.Validate初始拦截form方法： jQuery...2、下一篇将对jQuery.Validate的使用过程中会碰到的问题进行介绍，如第2种验证方式更改验证规则所处的属性、指定验证信息显示位置等。源代码下载：点我下载

3.1K1 0

jQuery常用函数汇总

jQuery是一个流行的JavaScript库，它简化了在网页开发中对DOM操作、事件处理、动画效果和AJAX等功能的实现。...主要特点包括：简化的DOM操作： jQuery通过提供简洁的API，简化了对DOM元素的选择、遍历和操作，使得开发者能够更轻松地操作网页元素。...获取元素//$(选择器)$('div')//获取页面中的所有div元素,返回的是jQuery对象get()参数为索引，返回值是原生对象eq()参数为索引，返回值为jQuery对象操作类名hasClass...show()让该元素显示hide()让该元素隐藏fadeIn()淡入fadeOut()淡出操作元素html()操作元素的标签内容，用法与原生innerHTML相似text()操作元素的文本内容，用法与原生...:50, fontSize:20, paddingLeft:10})// 若传一个对象就是批量设置remove()删除该元素及其子元素empty()删除该元素的子元素插入元素append()作为元素的最后一个子节点插入

1K2 0

day40_jQuery学习笔记_01

，需要把js代码放在input标签的下面 // jQuery 中获得jQuery对象的语法： // $("选择器") == jQuery("选择器") .../script> 2.2、jQuery对象和dom对象的相互转换 2-dom对象和jQuery对象的相互转换.html 的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="btn2"/> 隐藏域, ...父元素下的第2个子元素" id="btn1"/> $("#btn1").click(function() { // 子元素选择使用前提：表达式前面必须是元素...).ready(function() { // 从第5个开始，不要最后一个，来控制显示或隐藏 // 1、隐藏 var $allLi

7.6K2 0

JavaScript 学习-35.jQuery 基础语法与事件

前言 jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。...极大地简化了 JavaScript 编程 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改...隐藏和显示 jQuery 提供了隐藏和显示元素的基本方法 hide() 隐藏元素 show() 显示元素 toggle() 切换显示和隐藏示例如果你点击“隐藏” 按钮，我将会消失... 隐藏显示 toggle...是你定位的元素对象点我提交按钮 $(document).ready

3.1K1 0

jQuery，和嵌入其中的Ajax

jQuery是一个JavaScript函数库。 jQuery极大地简化了 JavaScript 编程。..."#test").hide() - 隐藏所有 id="test" 的元素 jQuery 是为事件处理特别设计的。...回调函数可以设置不同的参数： responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象下面的例子会在 load...() 方法完成后显示一个提示框。...GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。 POST也可用于从服务器获取数据。

5K2 0

继续死磕前端

昨天将所有的基础知识进行了回顾，今天继续磕，不死不休～今天要说的便是 jquery 这个函数库，毕竟它影响范围之广，不会都不好意说自己会前端？...就是 js 代码放在何处执行的问题。要么老老实实放置在所需应用样式的标签后面，要么将其丢到 window.onload 方法内部。...2. fadeOut() 淡出 3. hide() 隐藏 4. show() 显示 5. toggle() 切换元素的可见状态 6. slideDown() 向下展开 7. slideUp() 向上卷起...出现零次或一次（最多出现一次） + 出现一次或多次（至少出现一次） * 出现零次或多次（任意次） {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次范围：使用中括号将可选内容列出，代表内容中任意一个...答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

4.3K1 0

jQuery选择器（20171026）

image.png 二. jQuery链式变成的原理 var obj={ n:2 }; obj.write = function(){ console.log...("我是谁") //就是在对象的函数里返回this； return this }; //obj.say().write();//4，我是谁三.jQuery...，如$("div[id][class$='Bar']" e)子元素选择器 :nth-child(index/even/odd/equation)//选取第index个子元素或者奇偶元素 :first-child...//选取每个父元素的第一个元素（返回整个文档中每个元素的第一个子元素），如$("ul li:first-child");选择每个中第1个元素 :last-child//选取每个父元素的最后一个元素...:only-child//若某子元素是其父元素中惟一的子元素，将会被匹配 f）表单对象属性选择器 :enabled//选择所有可用元素，例$("#form1:enabled") :disabled

1.6K2 0

jQuery选择器和选取方法

(n) 与“:eq(n)”相同(jQuery的扩展) :nth-child(n) 匹配的元素是其父节点的第n个子元素。。...更常见的情况是，n是xn或x n+y这种计算公式，其中x和y是整数，n是字面量n。因此可以用nth-child(3n+1)来选取第1个、第4个、第7个等元素。...注意该过滤器的序号是从1开始的，因此如果一个元素是其父节点的第一个子元素，会认为它是奇数元素，匹配的是3n+1，而不是3n。...考虑以下代码: //寻找所有元素，然后在其中寻找元素 //高亮显示元素，然后给元素添加一个边框 //首先，不使用链式调用 var divs = $("div"); var...作为例子，考虑上面代码的下述变化:高亮显示元素及其父节点中的元素，然后给这些元素添加边框: $("div").find("p").andSelf().

6.8K4 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭