首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS Jquery如何选择鼠标单击目标>父级> .Class

在JS和jQuery中,可以使用选择器来选择鼠标单击的目标元素。根据给定的问题,我们需要选择鼠标单击目标元素的父级元素,并且该父级元素具有特定的类名(.Class)。

在jQuery中,可以使用以下代码来实现这个选择过程:

代码语言:txt
复制
$(document).on('click', '.Class', function(event) {
  var target = $(event.target); // 获取鼠标单击的目标元素
  var parent = target.parent(); // 获取目标元素的父级元素

  // 进行相关操作,例如添加样式、修改内容等
});

上述代码中,$(document).on('click', '.Class', function(event) { ... })表示当具有类名为.Class的元素被单击时,执行后面的回调函数。event.target表示鼠标单击的目标元素,target.parent()表示获取目标元素的父级元素。

这种选择方式适用于需要在特定的父级元素中处理鼠标单击事件的情况。例如,当需要在一个列表中的某个项被单击时,修改该项的样式或内容,可以使用这种选择方式。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版:https://cloud.tencent.com/product/cdb_mysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 人工智能机器学习平台(AI Lab):https://cloud.tencent.com/product/ailab
  • 物联网开发平台(IoT Explorer):https://cloud.tencent.com/product/iotexplorer
  • 移动推送服务(信鸽):https://cloud.tencent.com/product/tpns
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链服务(TBC):https://cloud.tencent.com/product/tbc
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
  • 更多腾讯云产品:https://cloud.tencent.com/product
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JQuery

js选择器都可以用,而且还有更多的选择器 eq equal 选中下标等于某个数字的标签(两种写法,可以看下面的代码块) 选择器转移(选择集转移):.next() .prev() .nextAll...xx,执行了命令 find选中子集执行了命令 下面的选择器很重要 .parent()选择元素的元素 可以先用一个this,然后找到这个元素的。...()鼠标离开(离开子元素不触发) 上面的这些鼠标移入和离开,触发和不触发指的是不再次触发。...验证两组不一样的时候,鼠标先进入,再进入子,然后没有再次触发,验证成功。如果是直接进入子的话,因为子是一体的,会触发。 $(function(){ // 鼠标移入标签向下运动150px, 鼠标离开回到默认状态

7.7K20
  • 继续死磕前端

    对象用 $(this) }; js 对象与 jquery 对象有些许不同,jquery 对象是对 js 对象的封装,然后让其拥有了 jquery 的操作方法。...2.3 属性操作 还记得昨天总结中 js 对象如何获取元素内容嘛?没错,是 innerHTML。...onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活...答:事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层的不同级别捕获事件。...接下来说一下 js如何创建一个对象,并对其进行操作。

    2.8K10

    Python全栈之jQuery笔记

    返回被选元素的直接元素,该方法只会向上一对 DOM 树进行遍历....() 表单元素的值发生变化 click() 鼠标单击 dblclick() 鼠标双击 当单击元素时,发生click事件....,那么此事件就会调用这个处理程序, 如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活), 或者它到达了对象层次的最顶层...事件冒泡的作用: 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层的不同级别捕获事件....Zepto的一些可选功能是专门针对移动端浏览器的,它的最初目标是在移动端提供一个精简的类似jqueryjs库. zepto官网: http://zeptojs.com/ zepto中文api: http

    5.5K40

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

    /js/jquery-1.8.3.js"> $(document).ready(function...可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...); return false;//阻止链接跳转 }); (7)event.which()方法 该方法的作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘的按键..../js/jquery-1.8.3.js" type="text/javascript"> body{ margin:0;...跨域:在一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

    8.3K20

    自写JQ控件-树状菜单控件

    /js/jquery-1.8.1.min.js"> <script type="text/javascript" charset="gb2312" src="....这里面依赖了<em>JQuery</em>、XBGMenuTree.css、XBGMenuTree.<em>js</em>。 <em>JQuery</em>文件没什么好说的。...样式可能会比较好理解一些,就是一些初始背景颜色、<em>鼠标</em>放过去的样式、被选中的样式、缩进、子菜单字体等等。所以不多介绍了。 主要<em>js</em>可能需要解释一下。...(1)比如一些位置的知识: <em>jquery</em>获取元素位置的方法有两个: position方法: 获取匹配元素集中第一个元素的坐标,获取的是该元素相当于最近的一个拥有绝对或者相对定位的<em>父</em>元素的偏移位置。...(3)JQ的<em>选择</em>器,以及CSS<em>选择</em>器,都有很多十分巧妙的用法。了解理解后,会大大提高你的效率。 先到这里吧,有空再相互交流学习分享!

    1.9K30

    Web前端知识(四)

    鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作.../jquery-2.1.0.min.js'>script> script> $(function () { $('button')...4.1.9.5.jq动画综合案例 4.1.9.5.1.二下拉菜单 【效果图】: Html和css代码: 接下来:先隐藏起来所有的二菜单 Js代码思路: 对于上面的代码,下拉菜单基本已经实现了...4.9.5.2.折叠菜单 效果图: Html和css Js代码 4.1.9.6.淡入和淡出动画 jQuery 提供了一组专门用于透明度变化的方法: .fadeIn() 淡入 .fadeOut...}); 4.1.9.7.3.自定义动画-延迟 4.1.9.7.4.自定义动画-停止动画 4.1.9.7.5.综合案例-轮播图 4.2.0.jq中事件深入 4.2.0.1.事件介绍 鼠标单击事件

    7.4K30

    前端之jquery函数库

    jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。... jquery的口号和愿望 Write Less, Do More(写得少... jquery事件 事件函数列表: blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入(进入子元素也触发) mouseout...事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活...事件冒泡的作用  事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层的不同级别捕获事件。

    5.2K20

    JQuery高级

    jQuery中定义变量的时候,一般命名用$开头。同事一看就知道是使用了jQuery,然后使用jQuery的语法。 其实$是jQuery中的一个函数。...***事件冒泡 现象:父子标签 触发子的事件,这个事件会逐层向传递。 子集执行了某一事件,会逐层向上触发相同事件,直到被处理或者遇到return。...比如子单击事件,那么如果有单击事件也会被触发,如果有单击事件也会被触发。 任何一个操作,计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...="father"> 1 3.事件委托 把子的事件委托给:最近的能包含住将来发生事件的所有子.../jquery-1.12.4.min.js"> $(function(){ // 单击li,弹出这个li的下标

    1.5K50

    jQuery

    $('.level1').click(function(){ //当前点击的元素紧挨的同辈元素向下展开,再跳到此元素的(li),再跳到此的其他的同辈元素...事件 事件函数列表: blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发...,那么这个事件会向这个对象的对象传播,从里到外,直至它被处理(对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。...事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个元素上,避免把事件处理器添加到多个子元素上),它还可以让你在对象层的不同级别捕获事件。...,原生js中的鼠标滚轮事件不兼容,可以使用jquery的滚轮事件插件jquery.mousewheel.js

    4K20

    【前端】Web前端学习笔记【1】

    DOM 需要了解要删除的元素,以及它的元素。...在没有class机制,只有函数的语言里,借助闭包,同样可以封装一个私有变量。...针对表单元素,jQuery还有一组特殊的选择器: :input:可以选择,,和; :file:可以选择<input type="file...============================================ 18. <em>jQuery</em>能够绑定的事件主要包括: <em>鼠标</em>事件 click: <em>鼠标</em><em>单击</em>时触发; dblclick:<em>鼠标</em>双击时触发...“DOM2<em>级</em>事件流”规定的事件流包括三个阶段:事件捕获阶段、事件处于<em>目标</em>阶段、事件冒泡阶段。 当一个事件发生以后,它会在不同的DOM节点之间传播(propagation)。

    38490

    jQuery

    : //直接获取元素即可 $('div'); ---- jQuery常用API jQuery选择jQuery 基础选择器 原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery...$(“选择器”) //里面选择器直接写 CSS 选择器即可,但是要加引号 获取方式与原生js无异: jQuery 层级选择jQuery设置样式的方法: $('div').css('属性', '值...()/scrollLeft() 1.offset() 设置或获取元素偏移 offset() 相对于文档的偏移坐标,跟没有关系。...可以设置元素的偏移:offset({ top: 50, left: 50 }); 2.position() 获取元素偏移 position() 返回被选元素相对于带有定位的偏移坐标,如果都没有定位...position().top 获取距离定位顶部的距离,position().left 获取距离定位左侧的距离。 该方法只能获取。

    21.1K50

    前端中那些让你头疼的英文单词

    css属性) var 声明变量使用 alert 弹框 number 数值型 string 字符串 boolean布尔型 null 无 object 对象 undefined 没有定义 onclick 单击...(js中,在jQuery中是click) onmouseover鼠标滑过 onmouseout 鼠标离开 上面的内容如果哪一个单词忘记了具体的用法,可以点击链接查看具体内容:JavaScript入门 -...值 prop 访问修改属性值 css 控制css属性的函数 siblings 同级的 parent 的 children 子的 addClass 添加类 removeClass删除类 hover...事件委托 给子加: append 新增节点 appendTo新增节点 perpend给前面新增节点 perpendTo给前面新增节点 给加: after给后面增加节点 insertAfter给指定的后面新增节点...before 给前面新增节点 insertBefore 给指定的前面新增节点 empty 清空节点 remove 删除节点 allow允许 上面的单词,如果你哪一个忘记了具体的功能,不要怕,仍旧是老规矩

    2.3K20

    jQuery 事件

    规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 data 可选。规定传递到函数的额外数据。 function 可选。...text-indent:24px; border-top: 1px solid #0050D0;display:block;display:none; }              jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006...该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。 注意:如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。...http-equiv="Content-Type" content="text/html; charset=utf-8" /> test <script src="scripts/<em>jquery</em>.<em>js</em>

    2.9K70
    领券