使用jquery中的第n个子事件将click事件添加到li - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

JQuery从入门到实战

JS里面的功能 // 将 jQuery对象转换为JS对象 let js = jqDiv[0]; alert(js.innerHTML); 2.2、事件的基本使用常用的事件在 jQuery 中将事件封装成了对应的方法...> 2.3、时间的绑定和解绑绑定事件 //jQuery 对象.on(事件名称,执行的功能); //给btn1按钮绑定单击事件 $("#btn1").on("click",function(){ alert...; }); 解绑事件如果不指定事件名称，则会把该对象绑定的所有事件都解绑 //jQuery 对象.off(事件名称); //通过btn2解绑btn1的单击事件 $("#btn2").on("click...jQuery 对象[索引] jQuery 对象.get(索引)：将 jQuery 对象转为 JS 对象。事件在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法。..." value="将雄起添加到上海上方"> li id="bj">北京li> li id

16.2K3 0

jQuery 教程

(n) $(“p:nth-last-child(2)”) 属于其父元素的第二个子元素的所有元素，从最后一个子元素开始计数 :nth-of-type(n) $(“p:nth-of-type(2)...如：$('div:animated) :eq(n) 选取第n个元素，如：$('ul.tonav li:eq(n)') :even 选取偶数个元素，如：$('li:even') :odd 选取奇数个元素，...:nth-child()选择同父代的第n个子代元素。 :nth-last-child()选择同父代的倒数第n个子代元素。 :nth-last-of-type()选择同父代的倒数第n个子代元素。...:nth-of-type()选择同父代的第n个子代元素。 :only-child选择只有一个子代的元素。 :only-of-type()选择所有没有同名元素的兄弟元素。...当我们在教程中演示 jQuery 时，会将函数直接添加到部分中。

21K2 0

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

是的

没有找到

JQuery最全常用方法指南

map(callback) 将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。 not(expr) 从匹配的元素集合中删除与指定的表达式匹配的元素。...slice(start, [end]) 从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。 add(expr) 把与表达式匹配的元素添加到jQuery对象中。...andSelf() 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素，添加border类属性。...$(”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

13.2K3 1

python测试开发django-167. jQuery中append() 动态新增的元素 click 事件无效的解决办法

前言使用append新增的div元素，绑定click事件无效的几种解决办法遇到问题绑定select下拉框click事件 // 绑定select下拉框click事件...使用live live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。...}) 看到网上很多都是用的live方法，但是会报错：TypeError: $(…).live is not a function 主要原因是jquery中的live()方法在jquery1.9...及以上的版本中已被废弃了，受版本限制，大于1.9版本就用不了。...使用on 接下来还是使用on的方法，把点击事件绑定到它父元素上，这样就可以了 // 绑定select下拉框click事件 $('#cards').on('click',

1.3K2 0

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

map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。...add( expr ) 把与表达式匹配的元素添加到jQuery对象中。 children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素，添加border类属性。...子元素过滤选择器 $("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

3.8K1 0

使用jQuery中hover事件时遇到的一个小问题

搜索官方jQuery文档中hover()方法的说明我们就会发现，其实这是jQuery中hover()内置方法的问题。...函数就是我们想让它在移入和移出时都被执行的函数，也就相当于将这个函数执行了两遍。...很简单，我们在hover事件中写入两个function函数就好了，其中第一个是我们要让它在移入的时候执行的效果，第二个是让它在移出的时候执行的效果。...}) 当然，像这些效果的话，其实也有很多别的方法可以完成的，比如我们也可以使用jQuery中的一些其他鼠标事件（例如：onmouseover、onmouseout、onmouseenter...、onmouseleave等）来实现，没必要一味地使用hover()来进行事件的编写。

2.5K2 0

前端之jquery函数库

jquery介绍　　jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。...，做得多） 1、http://jquery.com/ 官方网站 2、https://code.jquery.com/ 版本下载 jquery文档加载完再执行　　将获取元素的语句写到页面头部，会因为元素还没有加载而出错... jquery事件事件函数列表： blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout...事件冒泡的作用事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...元素节点操作指的是改变html的标签结构，它有两种情况： 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中创建新标签 var $div = $(''); //创建一个空的div

6K2 0

继续死磕前端

昨天将所有的基础知识进行了回顾，今天继续磕，不死不休～今天要说的便是 jquery 这个函数库，毕竟它影响范围之广，不会都不好意说自己会前端？...可以使用如下的过滤条件： 1.has 包含条件： $('div').has('p'); 包含 p 元素的 div 元素 2.判等条件： $('div').eq(5); 第 5 个 div 元素 3.寻找条件...当我们验证邮箱格式、手机号、身份证号时必不可少，那么 jquery 中如何使用呢？...出现零次或一次（最多出现一次） + 出现一次或多次（至少出现一次） * 出现零次或多次（任意次） {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次范围：使用中括号将可选内容列出，代表内容中任意一个...答：事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

3.7K1 0

JQuery

jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。...$(this).html(event) }) }) jquery事件事件描述 click() 点击事件 blur() 失去焦点 focus() 获取焦点 mouseover(...submit() 提交表单表单验证规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上...，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...（前面后面） // 步骤：1、声明变量保存节点数据；2、使用追加函数追加节点 var $li = $('li>2222li>') // ul子级追加

1.9K2 1

Web前端基础（07）

$(“div:nth-child(n)”) 匹配是div并且是第n个而且要求元素是子元素 n从1 开始 ###表单选择器 $(":input") 匹配所有表单中的控件 $(":password") 匹配所有密码框..."> //给第一个按钮添加点击事件 $("input:eq(1)").click(function(){ //创建li var li = $("li>li>");...str); //把创建的li添加到ul里面 $("ul").prepend(li); }) $("input:eq(2)").click(function(){ var..."> //先把所有二层ul隐藏 $("li>ul").hide(); //给第一层的所有li添加点击事件 $("body>ul>li").click(function(){...//在事件方法中this代表触发该事件的元素对象 //this是js对象如果需要使用jq中的方法需要将 //js对象转成jq对象$(this) //得到点击li里面的子元素ul

5.8K2 0

JQuery常用命令

:nth-child(index) 第 index 个子元素语法: $('li:nth-child(2)')；奇数个: $('li:nth-child(odd)')；偶数个: $('li:nth-child...:only-child 只有一个子元素的元素语法：$('li:only-child')； 12. 属性选择器 (1)....// 添加到父节点 (2)....JQuery 函数第二部分：事件处理函数 JQuery 的历史上先后出现了若干事件处理函数 (1). one(事件名称, fn) 仅对指定事件监听一次 (2). on() / off() (3). click...JQuery 中的 trigger()函数使用 JS 代码代替用户触发指定的事件，调用之前绑定的监听函数 ('.btn').trigger( 'click' ) 可简写：('.btn').click

7.5K1 0

jq---方法总结

什么是jQuery 在使用jQuery之前，我们必须先了解什么是jQuery，它能够干什么(不然我们为啥要用它)。 jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。...对象，他们包含筛选到的元素 $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素) $("ul li").first(); // 选取ul li中匹配的第一个元素...$("ul li").last(); // 选取ul li中匹配的最后一个元素 $("ul li").slice(1, 4); // 选取第2 ~ 4个元素 $("ul li").filter(":even...属性 find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象 children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象 $("selector...( typeof value === "number"){ return null; // 如果函数返回null或undefined，则不会添加到结果数组中 }else{ return value; }

3.8K2 0

前端架构师之01_JQuery

li>元素 :even 获取索引为偶数的指定选择器中的奇数行数据，索引默认从0开始 $("li :even")获取所有li元素中，索引为偶数的奇数行数据，如索引为0,2,4的第1个、第3个和第5个li...>元素 :odd 获取索引为奇数的指定选择器中的偶数行数据，索引默认从0开始 $("li :odd")获取所有li>元素中，索引为奇数的偶数行数据，如索引为1,3,5的第2个、第4个和第6个li>元素...n个子元素。...计数从最后一个元素开始到第一个 :nth-of-type(index/even/odd/公式)) 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 :first-of-type 选择所有相同的元素名称的第一个子元素.../odd/公式) 选择所有它们的父级元素的第n个子元素，计数从最后一个元素到第一个带有“of-type” 与未带有“of-type”项的选择器有一定的区别。

3.1K0 0

jQuery事件委托

在jQuery中，事件委托是一种优化事件处理的技术，它利用事件冒泡的机制，将事件处理程序绑定到一个父级元素上，从而减少事件处理函数的数量，并实现对动态添加的子元素的事件处理。什么是事件委托？...通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理集中在父级元素上，从而减少了事件处理函数的数量，提高了性能和代码的可维护性。为什么使用事件委托？...使用事件委托有以下几个好处：减少事件处理函数的数量：通过将事件处理程序绑定到父级元素上，我们无需为每个子元素都绑定事件处理程序，从而减少了事件处理函数的数量，使代码更加简洁和可维护。...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...事件委托适用于以下场景：当页面上的元素是通过动态方式添加到文档中时。当需要为多个子元素绑定相同的事件处理程序时。当需要减少事件处理函数的数量，提高性能和可维护性时。

2.1K1 0

前端基础：jQuery

也都能做，但使用 jQuery 能大幅提高开发效率 jQuery Advantages 体积小，压缩后只有 100 KB 左右强大的选择器出色的 DOM 封装可靠的事件处理机制出色的浏览器兼容性...基本的语法介绍 $(selector).action(); 工厂函数 $()：将 DOM 对象转化为 jQuery 对象选择器 selector：获取需要操作的..."color","red"); // 下标小于 2 的 li $("li:lt(2)").css("color","red"); // 使用转义符 $("#h2\\#x"...(){ // 获取框中的值 var str = $(this).val(); // 将 h3 元素中的文本内容更改为 str $("h3"...x = $("ul").children().text(); // ul 中的第一个子节点 var x = $("ul").children("li:first")

14.4K2 0

jQuery基础图文系列

jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合中 .addSelf() 把堆栈中之前的元素添加到当前集合中 .children() 获取匹配元素集合中每个元素的所有子元素 .closest...find() 获取当前匹配元素集合中的每个元素的后代，由选择器进行筛选 .first() 将匹配元素集合缩减为集合中的第一个元素 .has() 将匹配元素集合缩减为包含特定元素的后代的集合 .is()...是否存在一个匹配元素 .last() 将匹配元素集合缩减为集合中的最后一个元素 .map() 把当前匹配集合中的每个元素传递给函数 .next() 获取下一个元素 .nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素...() 在指定的 HTML 内容或元素中放置所有被选的元素 wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML) ?...(){ 加入的内容 }); 简写 jQuery(function($) { // 你可以在这里继续使用$作为别名... }); jQuery 对象中元素的个数，开发中通常要用来计算元素个数，然后做循环等超值

5.3K1 0

jQuery基础系列

jQuery选择器匹配的元素 .add() 将元素添加到匹配元素的集合中 .addSelf() 把堆栈中之前的元素添加到当前集合中 .children() 获取匹配元素集合中每个元素的所有子元素 .closest...find() 获取当前匹配元素集合中的每个元素的后代，由选择器进行筛选 .first() 将匹配元素集合缩减为集合中的第一个元素 .has() 将匹配元素集合缩减为包含特定元素的后代的集合 .is()...是否存在一个匹配元素 .last() 将匹配元素集合缩减为集合中的最后一个元素 .map() 把当前匹配集合中的每个元素传递给函数 .next() 获取下一个元素 .nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素...() 把所有匹配的元素用指定的内容或元素包裹起来 wrapinner() 将每一个匹配的元素的子内容用指定的内容或元素包裹起来 jQuery hide() 和 show()隐藏和显示 HTML 元素...() 在指定的 HTML 内容或元素中放置所有被选的元素 wrapInner() 方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML) ?

3.4K2 0

jQuery DOM操作

var $li = $("ul li:eq(1)").remove(); // 获取第2个li>元素节点后，将它删除 $li.appendTo("ul"); // 将刚才删除的节点重新添加到...=菠萝]"); //将li>元素中title属性不等于“菠萝”的li>元素删除（2）detach() detach()也是从DOM中去掉所有匹配的元素。...需要注意的是，这个方法不会将匹配的元素从jQuery对象中删除，其所有绑定的事件和附加数据可以保留下来。如果将来再使用这个元素，相关事件和数据依然存在。...// 如果使用remove()方法删除元素，那么之前绑定的事件将会失效。（3）empty() 清空元素中的所有后代节点。...$("ul").empty(); 复制节点可以使用clone()方法来复制节点。如果在clone方法中传人参数true，表示复制元素的同时也复制元素中绑定的事件。

2.6K6 0

jQuery

事件冒泡的作用事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...($li); //事件委托，将li要发生的事件委托给li的父级 $('.list').delegate('li...中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。...，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数...localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便

5K2 0

JQuery_

$(this).html(event) }) }) jquery事件事件描述 click() 点击事件 blur() 失去焦点 focus() 获取焦点 mouseover(...submit() 提交表单表单验证规则: var re = new RegExp(‘规则’,’可选参数’) var re =/规则/参数; 事件冒泡作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上...，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。...（前面后面） // 步骤：1、声明变量保存节点数据；2、使用追加函数追加节点 var $li = $('li>2222li>') // ul子级追加...ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

1.1K1 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭