JS Jquery如何选择鼠标单击目标>父级> .Class - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

JQuery

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

8.4K2 0

一些经典案例

案例一：（实现效果，鼠标移动到哪个菜单上，哪个菜单会显示二级菜单，移开会收回。）案例二：tab栏（选项卡）鼠标滑过，显示对应的特殊样式，下面的内容替换为需要的内容。和无缝滚动一样是专有名词。.../jquery-1.12.4.min.js"> $(function(){ // 按钮鼠标移入: 这个按钮高亮（添加类active），...// 单击一级菜单，滑动显示对应的二级菜单 -- 小ul $('.level1').click(function(){ // $(this).next...}) 案例五：父级选择器.../js/jquery-1.12.4.min.js"> $(function(){ // 左侧的span单击，隐藏left

1.2K3 0

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

是的

没有找到

Jquery入门基础教程免费版

[a-zA-Z]{2,3}){1,2}$/; 邮箱总结： 1.选择器重点讲了好几个，今天是表单选择器； 2.掌握如何针对某个选择器进行操作，规律:三个字总结:找事匿 3.jQuery...Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件方法描述执行时机 click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的.../jquery-1.12.4.min.js"> $(function(){ //在按钮上单击的时候，进行操作; $("#app").click.../jquery-1.12.4.min.js"> $(function(){ //在按钮上单击的时候，进行操作; $("#app").click.../jquery-1.12.4.min.js"> $(function(){ //在按钮上单击的时候，进行操作; $("#app").click

2.2K1 0

继续死磕前端

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

3.7K1 0

学习jQuery这一篇就够了

/1.9.1/jquery.min.js"> # 1.5 jQuery 快速使用 <!...子元素筛选器需求描述：选择所有父级元素 ul 下的第一个子元素 li，设置其背景为红色我是列表项1 我是列表项2 我是列表项...3 我是列表项4 $('ul li:first-child').css('background', 'red'); 需求描述：选择所有父级元素 ul 下的最后一个子元素...我是列表项3 我是列表项4 $('ul li:last-child').css('background', 'red'); 需求描述：选择所有父级元素...('鼠标左键松开'); }); # 5. mouseenter() 方法描述：当鼠标进入目标元素的时候调用所绑定的函数。

3.5K5 0

WEB入门之十四 jQuery事件

学习内容 jQuery各种事件 jQuery事件绑定能力目标能熟练使用jQuery各种事件能熟练绑定jQuery事件本章简介 JavaScript是事件驱动型的编程语言，即JavaScript...图5.1.10 hover事件 5.3.2 toggle事件该事件用于模拟鼠标的连续单击事件，第1次单击时触发第1个函数的执行；第2次单击时触发第2个函数的执行；第n次单击时触发第n个函数的执行。...假设给所有的文本框通过bind绑定了鼠标单击事件，然后再动态创建一个文本框，此时绑定的鼠标单击事件对这个新创建的文本框无效；但是如果使用live进行绑定，那么新创建的文本框也会绑定鼠标单击事件。...实现步骤（1）实现图5.2.2所示的界面（2）给一级菜单设置hover事件实现二级子菜单的显示和隐藏，参考代码如下所示。...4：种族选择训练技能点 jQuery change事件需求说明使用jQuery change事件实现种族选择。选择下拉列表框中不同的项，就显示不同的图片。

1.8K1 0

WEB入门之十四 jQuery事件

学习内容 jQuery各种事件 jQuery事件绑定能力目标能熟练使用jQuery各种事件能熟练绑定jQuery事件本章简介 JavaScript是事件驱动型的编程语言，即JavaScript...假设给所有的文本框通过bind绑定了鼠标单击事件，然后再动态创建一个文本框，此时绑定的鼠标单击事件对这个新创建的文本框无效；但是如果使用live进行绑定，那么新创建的文本框也会绑定鼠标单击事件。...一次移除多个事件，中间用空格隔开 $("p").die("click mouseover"); //移除段落元素的鼠标单击事件和鼠标悬浮事件 5.4.3 on和off on是jQuery 1.7...实现步骤（1）实现图5.2.2所示的界面（2）给一级菜单设置hover事件实现二级子菜单的显示和隐藏，参考代码如下所示。...4：种族选择训练技能点 jQuery change事件需求说明使用jQuery change事件实现种族选择。选择下拉列表框中不同的项，就显示不同的图片。

1.9K1 0

杨老师课堂之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函数。

10.2K2 0

JQuery 入门 - 附案例代码

-1.12.4.js”> $(function () { //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。...// 给一级菜单li设置鼠标离开事件，二级菜单隐藏。...-1.12.4.js”> $(function () { //需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。...// 给一级菜单li设置鼠标离开事件，二级菜单隐藏。... jquery-1.12.4.js”> $(function () { //1.需求 //给小图片a标签设置一个单击事件.

15K1 0

Python全栈之jQuery笔记

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

6.7K4 0

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

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

2.4K3 0

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.事件介绍鼠标单击事件

8.4K3 0

前端之jquery函数库

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

6K2 0

jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

，简单的来描述下参考下面3层结构 class="left"> class="aaron"> 目标节点 //点击在这个元素上 jquery.js"> 事件委托，通过事件对象区别触发元素 class="left">...被调用过了 event.stopPropagation() 方法：阻止事件冒泡事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数 event.which：获取在鼠标单击时...，单击的是鼠标的哪个键 event.which 将 event.keyCode 和 event.charCode 标准化了。.../1.9.1/jquery.js"> 自定义事件triggerHandler class="left"> <div id

4.9K3 0

JQuery高级

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

2K5 0

JQuery的学习

最新版本：3.2.1（2017年3月20日） * jquery-xxx.js 与 jquery-xxx.min.js区别： 1. jquery-xxx.js...--导入JQuery的js文件--> js/jquery-3.3.1.min.js"> ...JQuery对象和JS对象区别与转换： 1.JQuery对象在操作时，更加方便； 2.JQuery对象和JS对象方法不通用； 3.两者相互转换： * JQuery --> JS : JQuery...对象[索引] 或者 JQuery对象.get(索引) * JS --> JQuery ： $(JS对象) 选择器 * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素 4. 并集选择器： * 语法： $("选择器1,选择器2....")

18.5K2 0

JavaWeb18-jquery学习笔记（Java全栈开发）

jquery一.筛选筛选与之前的选择器雷同,筛选提供的都是函数. 1..../js/jquery-1.8.3.js"> $(document).ready(function(){ $("#e01".../js/jquery-1.8.3.js"> $(document).ready(function(){ var i=1;.../js/jquery-1.8.3.js"> $(document).ready(function(){ var i= 0.../js/jquery-1.8.3.js"> $(function(){ $("#e02").hover(function

7.7K9 0

jQuery

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

5K2 0

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

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

9219 0

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

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.8K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭