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

JQuery笔记

JQuery语法 (selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作...示例 (this).hide() - 隐藏当前元素("p").hide() - 隐藏所有段落 (".test").hide() - 隐藏所有 class="test" 的所有元素 JQuery选择器...() 当鼠标指针离开元素时,会发生 mouseleave 事件 mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件 mouseup() 当在元素上松开鼠标按钮时...,会发生 mouseup 事件 hover() 方法用于模拟光标悬停事件 focus() 当元素获得焦点时,发生 focus 事件 blur() 当元素失去焦点时,发生 blur 事件 JQuery 效果...可选的 callback 参数是隐藏或显示完成后所执行的函数名称 toggle(speed,callback) 切换 hide() 和 show() 方法 淡入淡出 fadeIn(speed

6.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery Mobile的学习时间botton按钮的事件学习

    生命的绝唱来机只争朝夕,如诗的年华更需惜时如金。不要让今天的懈怠成为一生的痛。 每天都在进步。最近在学习jquery mobile开发,使用的button,绑定事件,和大家一起学习,一起分享!...://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> div data-role="...pageremove 在窗口视图从 DOM 中移除外部页面之前触发。 pageshow 在过渡动画完成后,在"到达"页面触发。 scrollstart 当用户开始滚动页面时触发。...swiperight 当用户从右划过元素超过 30px 时触发。 tap 当用户敲击某元素时触发。 taphold 当元素敲击某元素并保持一秒时触发。...throttledresize 启用可标记 #hash 历史记录 updatelayout 由动态显示/隐藏内容的 jQuery Mobile 组件触发。

    1.6K20

    JQ事件和事件对象

    1 事件 一 .鼠标事件    1.ready()页面载入事件:载入文档节点    2 click()熟悉的单击事件    3 dbclick()双击事件    4 mousedown() /mouseup...()/mouseout()和mouseenter()/mouseleave()的区别    首先来了解一下事件冒泡和捕获     事件冒泡:内部事件先触发,然后在触发外部事件     事件捕获:外部事件先被触发...,如果鼠标移入所选元素的后代时,不会触发(增加阻止事件冒泡功能) div class="div1"> div class="div2">div> 和keypress区别    keydown()按下任意键都会触发,但keypress()事件只在按下键盘中任意字符键(A-Z)时触发,功能键不会触发(如shift ctrl 等)     4 event.which...触发事件     6 select():当选中单行文本text或者多行文本areatext时,触发事件    7 submit()  :表单提交事件  //focus()和focusin() 的区别

    4.1K20

    深入浅出 RxJS 之 函数响应式编程

    ">msdiv> div id="rank">div> div> <script src="https://code.jquery.com/jquery-...上面 mouseDown 和 mouseUp 都是数据流,分别代表按钮上的 mousedown 事件和 mouseup 事件集合,不光包含已经发生的事件,还包含没有发生的鼠标事件。...“流”可以通过多种方法创造出来,mouseDown 和 mouseUp 通过 fromEvent 函数从网页的 DOM 元素中获得,holdTime 这个流则是通过 mouseDown 和 mouseUp...“变”,赋值时是什么值,就会一直保持这些值,代码是一个一个函数,每个函数只是对输入的参数做了响应,然后返回结果。...面向对象的思想是把数据封装在类的实例对象中,把数据藏起来,让外部不能直接操作这些对象,只能通过类提供的实例方法来读取和修改这些数据,这样就限制了对数据的访问方式。

    1.2K10

    jquery 使用方法

    5 $('div').eq(5); //选择第6个div元素 有一些时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法: 1 $('div').next(...假定我们选中了一个div元素,需要把它移动到p元素后面。...使用这种模式的操作方法,一共有四对 1 .insertAfter()和.after():在现存元素的外部,从后面插入元素 2 .insertBefore()和.before():在现存元素的外部,从前面插入元素...删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。...: 1 event.pageX 事件发生时,鼠标距离网页左上角的水平距离 3 event.pageY 事件发生时,鼠标距离网页左上角的垂直距离 5 event.type 事件的类型(比如click

    1.6K10

    jQuery Cheat—Sheet(jQuery学习笔记)

    ; }); 鼠标移入并点击事件 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。 在下面实例中,鼠标移入元素,并点击时,弹出“Bye!...; }); 鼠标释放事件 当在元素上松开鼠标按钮时,会发生 mouseup 事件。 在下面实例中,鼠标点击元素,释放时,弹出“Mouse up over p1!”...当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter,); 当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。...下面实例中,元素获得焦点,将其CSS样式做出修改。...---- #jQuery 效果 隐藏和显示 jQuery hide() 和 show() jQuery hide() 和 show() 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示

    16.2K30

    JQuery最全常用方法指南

    这是一个Ajax事件 当所有AJAX请求都停止时,隐藏loading信息。...$(”div: hidden”) 匹配所有隐藏的元素,也包括表单的隐藏域 $(”div: visible”) 匹配所有可见的元素 属性过滤选择器 $(”div[id]”) 匹配所有具有指定属性的元素...2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是 jquery对象。...如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。...当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over,离开时置为out。

    11K31

    WEB入门之十四 jQuery事件

    使用传统的JavaScript就能处理这些交互,但是jQuery增加并扩展了JavaScript事件处理机制,使其使用起来更加优雅和灵活。本章我们重点讲解jQuery中的各种事件以及事件的绑定。...] , fn ] ) 松开鼠标按钮时发生的事件 下面我们通过一些示例来演示jQuery中鼠标相关事件的用法,先看示例5.7,该示例演示了mousedown、mouseup和mousemove事件,代码如下所示...3表示鼠标右键 pageX/Y 获取事件发生时相对于页面的坐标 keyCode 获取在键盘事件中键盘对应的键值 screenX/Y 获取事件发生时相对于屏幕的坐标 data 事件发生时传递的参数的信息都保持在该属性中...事件,在该事件中通过两个匿名函数控制类名是content的div,第一个函数控制该div显示,第二个函数控制该div隐藏。...div>div> 该示例与5.12差不多,只是由hover事件换成了toggle事件,当鼠标单击绿色的标题时,下面的内容就会显示出来;当鼠标再次单击绿色的标题时,下面的内容就会隐藏起来

    8110

    WEB入门之十四 jQuery事件

    使用传统的JavaScript就能处理这些交互,但是jQuery增加并扩展了JavaScript事件处理机制,使其使用起来更加优雅和灵活。本章我们重点讲解jQuery中的各种事件以及事件的绑定。 ​...( [ [data] , fn ] ) 松开鼠标按钮时发生的事件 下面我们通过一些示例来演示jQuery中鼠标相关事件的用法,先看示例5.7,该示例演示了mousedown、mouseup和mousemove...;值3表示鼠标右键 pageX/Y 获取事件发生时相对于页面的坐标 keyCode 获取在键盘事件中键盘对应的键值 screenX/Y 获取事件发生时相对于屏幕的坐标 data 事件发生时传递的参数的信息都保持在该属性中...的div元素设置hover事件,在该事件中通过两个匿名函数控制类名是content的div,第一个函数控制该div显示,第二个函数控制该div隐藏。...div> div> 该示例与5.12差不多,只是由hover事件换成了toggle事件,当鼠标单击绿色的标题时,下面的内容就会显示出来;当鼠标再次单击绿色的标题时

    12910

    jQuery设计思想

    /选择第6个div元素 有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:   $('div').next('p'); //选择div元素后面的第一个...假定我们选中了一个div元素,需要把它移动到p元素后面。...使用这种模式的操作方法,一共有四对: .insertAfter()和.after():在现存元素的外部,从后面插入元素 .insertBefore()和.before():在现存元素的外部,从前面插入元素...删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。 清空元素内容(但是不删除该元素)使用.empty()。...: event.pageX 事件发生时,鼠标距离网页左上角的水平距离 event.pageY 事件发生时,鼠标距离网页左上角的垂直距离 event.type 事件的类型(比如click)

    2.2K60

    学习jQuery这一篇就够了

    jQuery 核心对象:即执行 jQuery 核心函数返回的对象,jQuery 对象内部包含的是 dom 元素对象的伪数组 (可能只有一个元素),jQuery 对象拥有很多有用的属性和方法,让程序员能方便的操作...注意:如果存在(不存在)就删除(添加)一个样式类 需求描述:当单击按钮的时候,隐藏 div,再次单击按钮的时候,显示 div .hide { width: 100px; height...).scrollLeft(); 设置页面滚动条滚动到指定位置 (兼容 chrome 和 IE) $('body,html').scrollLeft(60); 需求描述:设置页面的宽度为 2000px,设置滚动条的...).scrollTop(); 设置页面滚动条滚动到指定位置 (兼容 chrome 和 IE) $('body,html').scrollTop(60); 需求描述:设置页面的高度为 2000px,设置滚动条的...需求描述:为 ul 下的所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li 时,所对应的 li 背景变为红色 1111 2222</

    1K50

    如何在 React 中点击显示或隐藏另一个组件?

    然后,我们在组件的返回值中渲染一个按钮和一个条件渲染的 div 元素。当用户单击按钮时,onClick 事件处理函数会调用 setIsVisible 函数,并将 !...显示/隐藏菜单我们可以使用事件处理函数来显示或隐藏菜单。当用户单击菜单按钮时,菜单应该出现,然后当用户单击菜单外部时,菜单应该消失。...否则,菜单保持可见。我们还使用了 useEffect 钩子来添加和删除事件监听器。useEffect 钩子在组件挂载时注册事件监听器,并在卸载时删除它们,以避免内存泄漏。...显示/隐藏模态框我们可以使用事件处理函数来触发模态对话框的显示或隐藏。当用户单击打开模态框的按钮时,模态框应该出现;当用户单击关闭按钮或模态框之外时,模态框应该消失。...如果用户单击的元素不在模态对话框中,则将可见性设置为 false,模态对话框将被隐藏。否则,模态对话框保持可见。我们还添加了一个关闭按钮,用于关闭模态对话框。

    5.1K10

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

    事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素和元素的click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素时,只 触发元素的click...事件,而不触发 和元素上的 click事件.当单击 元素时,只触发 元素上的click事件, 而不触发元素上的click事件....事件对象: 由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同 浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩 展和封装,从而使得在任何浏览器中能很好的轻松的访问获取事件对象以及事...; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....该方法的作用是获取到光标相对于页面的x坐标和y坐标.如果没有使用jquery时,那么IE浏览器中 是使用event.pageX()和event.pageY()方法.如果页面上有滚动条,则还要加上滚动条的宽度和高

    8.3K20

    前端开发JS——jQuery常用方法

    1、jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作,这两个方法用法及其类似,所以这只介绍click事件,只有单击释放后才生效...handlerOut(eventObject):当鼠标指针离开元素时触发执行的事件函数 7、jQuery鼠标事件之focusin与focusout事件 focusin 方法用于监听用户元素聚焦操作(如...(on和bind是一样的, 推荐使用on) 基本用法:.on(event, [selector] , [data]) 如:$ele.on("click", function(){}) 和上述提到的事件最大的不同点是...自定义事件对象,是jQuery模拟原生实现的 自定义事件可以传递参数 ---- jQuery基础(四)---动画篇 1、jQuery中元素的隐藏和显示之hide和show方法 (改变样式display...以及fadeToggle的比较 操作元素的显示与隐藏可以有 改变样式display:none/block/inline/inline-block ======>toggle 横向动作 (显示从左到右

    5K20

    Web前端学习 第4章 jQuery 2 jQuery常用方法

    二、鼠标单击事件 我们先来将最常用的鼠标单击事件click,jQuery的基本语法如下所示: 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...}) 我们先通过$(“selector”)选择器获取元素,然后通过click为元素定义事件,这样当我们用鼠标单击这个元素的时候,就会执行花括号中的代码。...三、其他鼠标事件 上一节我们说了鼠标单击事件,其实鼠标事件还有很多,这节我们讲解鼠标移入,移出和移动事件。 鼠标移入移出改变样式 鼠标的移入和一出事件分别是mouseenter和mouseleave。...鼠标移动获取坐标 鼠标在元素上移动的时候也会触发事件,下面我们来实现一个功能,当鼠标移动到一个div的时候,获取鼠标在网页页面上的坐标,代码如下所示: 1 和y坐标。 课后练习 滑动显示和隐藏的右边栏,点击按钮弹出,电气其他位置隐藏。 让图片跟随鼠标移动。 返回顶部

    1.9K30

    【融职培训】Web前端学习 第4章 jQuery 2 jQuery常用方法

    二、鼠标单击事件 我们先来将最常用的鼠标单击事件click,jQuery的基本语法如下所示: 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...}) 我们先通过$(“selector”)选择器获取元素,然后通过click为元素定义事件,这样当我们用鼠标单击这个元素的时候,就会执行花括号中的代码。...三、其他鼠标事件 上一节我们说了鼠标单击事件,其实鼠标事件还有很多,这节我们讲解鼠标移入,移出和移动事件。 鼠标移入移出改变样式 鼠标的移入和一出事件分别是mouseenter和mouseleave。...鼠标移动获取坐标 鼠标在元素上移动的时候也会触发事件,下面我们来实现一个功能,当鼠标移动到一个div的时候,获取鼠标在网页页面上的坐标,代码如下所示: 1 和y坐标。 课后练习 滑动显示和隐藏的右边栏,点击按钮弹出,电气其他位置隐藏。 让图片跟随鼠标移动。 返回顶部

    1.6K10

    jQuery 入门指南教程

    ).hide() - 隐藏所有 id="test" 的元素 通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jQuery...选择所有的div元素,除了前三个 $('div:animated') // 选择当前处于动画状态的div元素 dom对象和jQuery对象区别 只有jQuery对象才能使用jQuery定义的方法。...注意dom对象和jQuery对象是有区别的,调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。...如:$(document.getElementById(”msg”))则为jQuery对象,可以使用jQuery的方法。...div 元素 $('div').eq(5); // 选择第六个 div 元素 有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法: $('div').next

    1.2K11
    领券