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

前端架构师之01_JQuery

([[data],function]) 当元素的值发生改变时触发 表单事件 focusin([data],function) 在父元素上检测子元素获取焦点的情况 表单事件 focusout([data]...,function) 在父元素上检测子元素失去焦点的情况 表单事件 select([[data],function]) 当文本框(包括和)中的文本被选中时触发 表单事件...语法 说明 on(events,[selector],[data],function) 在匹配元素上绑定一个或多个事件处理函数 off(events,[selector],[function]) 在匹配元素上移除一个或多个事件处理函数...设置焦点图的外边框的宽度以及超出隐藏,限定其只能显示一张图片。 切换到下一张时,只需要修改焦点图外层样式中的left值,就可以将焦点图整体向左移动,从而显示第2张图片。...7.3 jQuery UI jQuery UI是在jQuery基础上新增的一个库。 特点: 拥有强大的可扩展功能,具有吸引人的漂亮页面,能够更轻松地在网页中添加专业级的UI元素。

6800

利用jquery ui的datepicker开发一个课程日历

它就像台历一样,只负责显示日期列表及标记一些特定日子的作用,当然,它比台历更加复杂和先进一点,因为它是根据后台的课程开课日期设置来自动在日历中做标记的。    ...实现的细节:     1)怎样让datepicker默认就显示在指定的地方而不是通过输入框焦点触发?...hover事件触发时显示的内容,相当于a的title。...,默认的样式中,不可选的日期的opacity(不透明度)是1来的,也就是,基本上处于蒙住的状态了,看起来很不和谐,所以我通过CSS把它的默认样式修改了,而在返回false的日期中,jquery ui自动是把它的日期文本由...选中有课程的日期时,会触发控件的onSelect事件,弹出课程列表的操作写在onSelect事件的响应方法里面就可以了。下面是初始化控件的完整代码,仅供参考。

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

    jQuery Cheat—Sheet(jQuery学习笔记)

    混合选择 eg: $('#selected-plays > li') 子元素选择符 > 查找ID为selected-plays元素的子元素(>)中所有的列表项 ---- jQuery 事件 什么是事件...}); 常用的 jQuery 事件方法 文档DOM加载完成 $(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。...在下面的实例中,当点击事件在某个 元素上触发时,隐藏当前的元素: $("p").click(function(){ $(this).hide(); }); 双击事件 当双击元素时,会发生...; }); 获得焦点事件 当元素获得焦点时,发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。...**Chaining 允许我们在一条语句中运行多个 jQuery 方法**(在相同的元素上) ### jQuery 方法链接 有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery

    16.2K30

    求超大文件上传方案( BS )

    第一步: 前端修改 由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify文件上传组件,在项目使用的jslib项目中找到了BJUI框架集成jQuery...,则每次上传文件时自动加上一串随机字符串参数,防止URL缓存影响上传结果 progressData ‘percentage’ 设置上传进度显示方式,percentage显示上传百分比,speed显示上传速度...queueSizeLimit 999 队列最多显示的任务数量,如果选择的文件数量超出此限制,将会出发onSelectError事件。    ...removeCompleted true 是否自动将已完成任务从队列中删除,如果设置为false则会一直保留此任务显示。...removeTimeout 3 如果设置了任务完成后自动从队列中移除,则可以规定从完成到被移除的时间间隔。

    1.4K20

    10个基于web的JavaScript最优秀的应用程序库和框架

    例如,有时jQuery在多个浏览器上的工作方式并不完全相同。JQuery首先关注这些问题,您可以在站点上找到有关浏览器支持的信息。 最后,与其他库不同,jQuery并不是一个完整的解决方案。...在合并jQuery之后,使用jQuery UI向应用程序添加基本的图形元素。...在模型-视图-控制器(MVC)方法的上下文中,React提供了视图部分。它不假设您正在使用的基础技术堆栈来建模或控制数据。所有的React兴趣的就是在屏幕上显示数据。...这个产品更像jQuery而不是jQueryUI,因为您不使用它来创建用户界面。相反,您可以创建响应事件的代码——客户端生成事件,服务器响应这些事件。用户界面是显示任何结果的独立元素。...基本上,reactivity指的是在Vue中自动更新一个JavaScript对象,并且不引人注意地更新Vue模板。 Vue是为任何具有HTML、CSS和JavaScript工作知识的人而构建的。 ?

    2.2K20

    用APICloud如何开发出运行体验良好、高性能的 App

    Android 上要在 Window 中才能监听到 keyback 事件,Frame 中无法监听到 keyback 事件;在 iOS7 以上的系统上可以在 openWin 的时候通过设置 slidBackEnabled...列表滚动: 滚动效果要平滑流畅,不能使用 iscroll 等 JS 的方式来实现滚动 建议使用 Window+Frame 的 UI 结构,以 Native 的方式来实现列表页面的滚动。...在 iOS 上要支持点击状态栏能自动回到顶部的效果,可以通过在 openWin 或 openFrame 的时候配置 scrollToTop 参数来实现;此效果在 FrameGroup 中使用的时候要注意确保只有当前显示的...键盘处理: 在打开带有输入框的 Window 或 Frame 的是,默认要自动让输入框自动获得焦点。...由于在 Android 上 input 元素的 focus 事件存在兼容性问题,要完成输入框自动获取焦点的功能,建议使用扩展模块 UIInput 模块。

    2.3K20

    UI自动化 --- UI Automation 基础详解

    引言 上一篇文章UI自动化 --- 微软UI Automation中,介绍了UI Automation能够做什么,且借助 Inspect.exe 工具完成了一个模拟点击操作的Demo,文章结尾也提出了自己的一些想法...它包含传达用户界面中真实信息的UI项,包括可以接收键盘焦点的UI项以及一些不是UI项上的标签的文本。例如,下拉组合框中的值将出现在内容视图中,因为它们代表终端用户正在使用的信息。...控件模式支持定义控件中可用的离散功能所需的方法、属性、事件和关系。 UI自动化元素与其父级、子级和同级之间的关系描述了元素在UI自动化树中的结构。 方法允许UI自动化客户端操作控件。...在UI自动化中,UI自动化客户端可以询问控件支持哪些控件模式,然后通过支持的控件模式公开的属性、方法、事件和结构与控件进行交互。...事件 说明 属性更改 当 UI 自动化元素上的某个属性或控件模式更改时引发。 例如,如果客户端需要监视应用程序的复选框控件,它可以注册来侦听 ToggleState 属性上的属性更改事件。

    3.2K20

    20个为前端开发者准备的文档和指南6

    它是一个很长的列表,几乎涉及到CSS的每一个术语,当点击某一个术语时,它还会链接到该术语或者该功能的内容上。...在一些示例中,当点击示例时,链接会链接到参考手册的某个地方关于该示例的一个简单定义,在另一些示例里,它会链接到参考手册上该功能所在的地方。 ? 4....Popular Coding Convention on Github(在Github上受欢迎的编码规范) 可以在网页上选择包括JavaScript、Ruby和PHP语言,当选择后,这个页面将会显示一张图表数据...7. jQuery UI Events Cheatsheet(jQuery UI Events(事件)参考手册) 它以图表的形式,详细说明了哪种jQuery 事件可以用到桌面,哪种可以用到手机上,以及哪种可以用在鼠标上...Default Browser Focus Outline Styles(默认浏览器焦点轮廓样式) 它是一张图表,使用屏幕截图来显示不同的浏览器在不同的情况下在各种表单元素上是如何处理焦点样式的。

    1.3K100

    jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

    ,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等...其中以下的四个文件时必须要上传到服务器上: jquery.mCustomScrollbar.js jquery.mousewheel.min.js jquery.mCustomScrollbar.css...这里使用了 Google 的 CDN 加速服务来加载 jQuery 和 jQuery UI,当然你也可以把这两个库上传到自己的服务器上。...我还用了window load ((window).load()) 来激活我的插件功能,因为这样,就可以保证在页面对象全部加载完成之后,加载我的插件。...例如表单使用类似TAB键那样跳转焦点 值:true false callbacks:{ onScrollStart:function(){} }:使用自定义的回调函数在滚动时间开始的时候执行 具体请看

    14.2K30

    jQuery中的常用内容总结(二)

    完整写法不一致,对于这个问题,我的解释是:在js中,方法调用和方法申明这两者之中前者的参数可以少于后者的参数数量~,遂,大家不要介意哈(●´∀`)~ B>事件  jQuery事件是在开发中几乎是每天都会有...(){})  on():用于绑定未来元素的事件,一般在插入dom时会使用到 blur():匹配的dom失去焦点事件,一般用于绑定input输入框 change():用于匹配的dom的值改变事件,常用于表单中...():鼠标指针穿过dom事件 mouseleave():鼠标指针离开dom事件 mousemove():鼠标指针在dom中移动事件 mouseout():鼠标指针从dom上移开事件 mouseover...():鼠标指针位于元素上方事件 mouseup():鼠标在dom上松开事件  好了(◕ܫ◕),以上事件列举完毕,现在实例应用一个重要的不怎么用到的事件bind(): ?   ...5>jQuery UI弹窗(需要引入jquery UI) ? ?

    1.5K110

    jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

    事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发)...mouseenter() 鼠标进入(进入子元素不触发) mouseleave() 鼠标离开(离开子元素不触发) hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单 编写一个form表单,用来演示输入框获取焦点和失去焦点的示例 ?...其实通过focus()函数只是简单用来初始化文本框的焦点输入的而已,如下: ? 当刚进入页面,文本框就自动获取焦点,这基本上就是这个方法的大部分用法了。.../jquery-3.3.1.min.js"> $(function(){

    12.4K30

    jQuery中的常用内容总结(二)

    完整写法不一致,对于这个问题,我的解释是:在js中,方法调用和方法申明这两者之中前者的参数可以少于后者的参数数量~,遂,大家不要介意哈(●´∀`)~ B>事件  jQuery事件是在开发中几乎是每天都会有...(){})  on():用于绑定未来元素的事件,一般在插入dom时会使用到 blur():匹配的dom失去焦点事件,一般用于绑定input输入框 change():用于匹配的dom的值改变事件,常用于表单中...():鼠标指针穿过dom事件 mouseleave():鼠标指针离开dom事件 mousemove():鼠标指针在dom中移动事件 mouseout():鼠标指针从dom上移开事件 mouseover...():鼠标指针位于元素上方事件 mouseup():鼠标在dom上松开事件  好了(◕ܫ◕),以上事件列举完毕,现在实例应用一个重要的不怎么用到的事件bind(): ?   ...5>jQuery UI弹窗(需要引入jquery UI) ? ?

    2.9K40

    jQuery中的常用内容总结(二)

    完整写法不一致,对于这个问题,我的解释是:在js中,方法调用和方法申明这两者之中前者的参数可以少于后者的参数数量~,遂,大家不要介意哈(●´∀`)~ B>事件  jQuery事件是在开发中几乎是每天都会有...(){})  on():用于绑定未来元素的事件,一般在插入dom时会使用到 blur():匹配的dom失去焦点事件,一般用于绑定input输入框 change():用于匹配的dom的值改变事件,常用于表单中...():鼠标指针穿过dom事件 mouseleave():鼠标指针离开dom事件 mousemove():鼠标指针在dom中移动事件 mouseout():鼠标指针从dom上移开事件 mouseover...():鼠标指针位于元素上方事件 mouseup():鼠标在dom上松开事件  好了(◕ܫ◕),以上事件列举完毕,现在实例应用一个重要的不怎么用到的事件bind(): ?   ...5>jQuery UI弹窗(需要引入jquery UI) ? ?

    1.2K30

    jQuery基础(五)一Ajax应用与常用插件-imooc

    ajaxStart()方法用于在Ajax请求发出前触发函数,ajaxStop()方法用于在Ajax请求完成后触发函数。...Ajax请求时,元素显示,请求完成时,动画元素自动隐藏。...例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示: 图片放大镜插件——jqzoom 在调用jqzoom图片放大镜插件时...如下图所示: 自定义对象级插件——lifocuscolor插件 自定义的lifocuscolor插件可以在元素中,鼠标在表项元素移动时,自定义其获取焦点时的背景色,即定义元素选中时的背景色...在列表元素中,鼠标在列表项元素移动时,可以自定义其获取焦点(focus)时的背景颜色,即设置表项元素选中时的背景色.

    16.6K20

    day41_jQuery学习笔记_02

    () {             // 1、所有的分组的列表项默认都是隐藏的             // 2、分组可以点击,控制其列表项的显示与隐藏             // 3、当前分组的列表项显示时...js中是:focus         focusin事件跟focus事件区别在于:它可以在父元素上检测子元素获取焦点的情况。     focusout    失去焦点。...js中是:blur         focusout事件跟blur事件区别在于:它可以在父元素上检测子元素失去焦点的情况。...即完成3个方法的功能:.bind()、.delegate()、和 .live() off(events)             解绑 trigger(type)           在每一个匹配的元素上触发某类事件...例如:A.trigger("submit");    类似:A.submit(); triggerHandler(type)    在每一个匹配的元素上触发某类事件。

    3.9K20

    Python全栈之jQuery笔记

    3.3动画队列与停止动画: 在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画 执行完成才会执行. stop(clearQueue, jumpToEnd...事件机制 jQuery事件: 事件函数列表: blur() 元素失去焦点 focus() 元素获得焦点 change() 表单元素的值发生变化 click() 鼠标单击...主动触发事件: 可使用jquery对象上的trigger方法来触发对象上绑定的事件....这些工作是重复乏味的,为了优化开发流程,提高工作效率,前端自动化工具就出现了,自动化工具可以通过配置,自动完成这些工作....grunt、gulp grunt和gulp是使用node.js编写的,前端首选的自动化工具,gulp在书写配置上比grunt更简洁,运行的性能更高,gulp逐渐成为主流.

    5.5K40

    WEB入门之十四 jQuery事件

    5.1.4 焦点相关事件 jQuery中跟焦点相关的事件有2个,跟DOM中的焦点事件差不多,详见表5-1-4所示。...,在该事件中通过两个匿名函数控制类名是content的div,第一个函数控制该div显示,第二个函数控制该div隐藏。...本章主要学习jQuery事件,例如鼠标相关事件、键盘相关事件、焦点相关事件等,这些事件都是jQuery在DOM事件上进行了简单的封装。...4:种族选择 ​训练技能点​ jQuery change事件 ​需求说明​ 使用jQuery change事件实现种族选择。选择下拉列表框中不同的项,就显示不同的图片。 ​...实现步骤​ (1) 实现图5.2.4所示的界面,默认不显示任何图片 (2) 给下拉列表框设置change事件,并实现选择下拉列表框中不同的项,就显示不同的图片,参考代码如下所示。

    12910
    领券