需求描述:为按钮添加单击事件,然后再解绑,这时候你在点击按钮看看是不是不会输出信息了 按钮 $('button').on('click',function () {...需求描述:为 ul 下的所有 li 添加单击事件,要求将该单击事件委托给 ul,当单击 li 时,所对应的 li 背景变为红色 ul> 1111 2222单击函数,然后点击按钮,在控制台输出 “按钮被单击了” 按钮 $('button').click(function () { console.log...需求描述:为按钮绑定一个双击函数,然后双击按钮,在控制台输出 “按钮被单击了” 按钮 $('button').dblclick(function () { console.log...> $('.outer').mouseout(function () { console.log('mouse out'); }); # 9. mousemove() 方法描述:当鼠标指针在元素内移动时
二、鼠标单击事件 我们先来将最常用的鼠标单击事件click,jQuery的基本语法如下所示: 1 $("selector").click(function(){ 2 //事件触发执行的代码 3...1 2 ul> 3 1 4 2 5 3 6 ul>...标题> 6 7 。...标题> 6 7 。...然后通过console.log()方法在控制台输出x坐标和y坐标。 课后练习 滑动显示和隐藏的右边栏,点击按钮弹出,电气其他位置隐藏。 让图片跟随鼠标移动。 返回顶部
-- bxSlider Javascript file --> jquery.bxslider.js"> 创建一个幻灯片区块: ul class...randomStart 随机初始滑动位置 true infiniteLoop 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 true easing 切换动画扩展,可以借助jQuery...Easing 动画效果扩展设置不同的切换动画效果 null captions 设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题 false video 支持视频,当设置为true...时,需要jquery.fitvids.js支持 false pager 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 true controls 设置是否显示上一副和下一幅按钮 true...auto 设置是否自动滑动 false pause 自动滑动时停留时间,数字,ms 4000 autoHover 当鼠标滑向滑动内容上时,是否暂停滑动 false Simple, focused
这个ul元素应该有类”dropdown-menu”。现在,我们有了一个简单的下拉菜单,在单击链接时显示菜单。我们可以在浏览器中查看它,如图所示。 ?...Bootstrap为下拉插件提供了一些附加事件,它们是: show.bs.dropdown: 这个事件在句柄被单击时触发;下拉句柄收到请求去显示隐藏菜单; shown.bs.dropdown: 这个事件在菜单被显示时触发...当你点击按钮时,你会看到一个类似于插图效果的样式;在再次单击时,它返回到原来的样式,如图所示。data-toggle=”button”实现了这个切换功能。 ?...类slide是用来给carousel的每张幻灯片产生滑动效果的。它还应该有一个自定义属性data-ride,它告诉Bootstrap在页面加载时就可以启动滑动效果。...Bootstrap模式对话框有一个选项,当单击该句柄时,将该链接加载到它的modal-body元素中。这个特性在默认情况下是关闭的。
"fast"、"normal"、"slow")或表示动画时长的毫秒值; 2)easing:用来指定切换效果,默认是"swing",效果是先慢,中间快,最后又慢;参数"linear",匀速; 3)fn:在动画完成时执行的函数..."> $(function () { //1.获取所有的ul下的li var citys = $("#city li...this.innerHTML); //alert($(this).html()); //3.2 获取li对象 第二种方式 在回调函数中定义参数...,当点击对应组件时,会执行fn1,再次点击会执行fn2...,若只有2个,则循环执行。注意:JQuery1.9后该功能删除了,要使用的话引入jquery-migrate-1.0.0.js插件。...使用off解除btn按钮的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件
或表示动画时长的毫秒数值(如:1000) easing:用来指定切换效果,默认是"swing",可用参数"linear" swing:动画执行时效果是 先慢,中间快,最后又慢 linear:动画执行时速度是匀速的 fn:在动画完成时执行的函数...$("#showDiv").slideDown("slow"); //滑动方式 $("#showDiv").slideToggle("slow"); //滑动方式 $("#showDiv").slideUp...jq的遍历方式 jq对象.each(callback) 语法: jquery对象.each(function(index,element){}); index:就是元素在集合中的索引 element:就是集合中的每一个元素对象...for(元素对象 of 容器对象) ul id="city"> 北京 上海 天津 重庆 ul...当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
前四个文件几乎是在使用jQueryUI微件时都需要导入的文件。 上述代码使用accordion函数使一个id是acc的div元素初始化成了手风琴组件,见斜体部分。...Ø icons:用来设置每组标题的图标,子属性header用来设置分组闭合时的图标,headerSelected用来设置分组展开时的图标。...>标题2 标题3 ul> jquery.effects.scale.js shake 左右晃动元素 jquery.effects.shake.js slide 从左往右滑动元素直到全部显示 从右往左滑动元素直到全部隐藏 jquery.effects.slide.js...主题 需求说明 从jQuery官方网站上下载一个UI主题,然后把前面的实训任务改成这个主题。
") 列出 index 小于 3 的元素 :not(selector) $("input:not(:empty)") 所有不为空的 input 元素 :header $(":header") 所有标题元素...事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中....图片轮播特效 导航栏上下滑动效果 导航栏滑动卷帘效果 滑动效果展示 图片翻转效果 图片翻转 <!
如下图所示: 自定义对象级插件——lifocuscolor插件 自定义的lifocuscolor插件可以在ul>元素中,鼠标在表项元素移动时,自定义其获取焦点时的背景色,即定义元素选中时的背景色...“手风琴”的折叠效果,即点击标题时展开内容,再点另一标题时,关闭已展开的内容,调用格式如下: $(selector).accordion({options}); 其中,参数selector为整个面板元素...3-5选项卡插件——tabs 使用选项卡插件可以将ul>中的选项定义为选项标题,在标题中,再使用元素的“href”属性设置选项标题对应的内容,它的调用格式如下: $(selector)....ul>创建多级内联或弹出式菜单,支持通过键盘方向键控制菜单滑动,允许为菜单的各个选项添加图标,调用格式如下: $(selector).menu({options}); selector参数为菜单列表中最外层...在列表ul>元素中,鼠标在列表项元素移动时,可以自定义其获取焦点(focus)时的背景颜色,即设置表项元素选中时的背景色.
于是,为了在有限的空间里容纳更多的内容,滑动门式的标签切换(Tabs)方式越来越受欢迎。通过滑动门技术,可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。...最近我在实际应用中,逐步完善出一种基于 jQuery,但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。...的标题按钮中设置 onclick="showTabs(1)"来设置第二块内容显示,而其它块隐藏。...并且,由于 jQuery 的强大,我们可以在页面中放置多组滑动门,然后一次性设定。...其实分析一下,我们在实现滑动门的时候,用以下 HTML 结构就可以满足需要: ul> 标签一 标签二
Zepto 主要使用在移动端浏览器上面,由于移动端的浏览器都是比较新的平台,而 jQuery 主要是在 PC 上为了浏览器的兼容性而使用的,所以在移动端一般不使用 jQuery,因为它的兼容性失去了意义...tap :触摸屏幕时触发。 singleTap :单击屏幕时触发 doubleTap:双击屏幕时触发。(如果你不需要检测单击、双击,使用 tap 代替)。 longTap :长按时触发。...swipe:滑动屏幕时触发。 swipeLeft, swipeRight, swipeUp, swipeDown:屏幕左滑,右滑,上滑,下滑时触发。...三、Zepto 模块化 Zepto 有一点和 jQuery 是不同的,就是 Zepto 是分模块的。在使用的时候不是像 jQuery 只需要引入一个 js 文件就可以了。Zepto 是分模块的。...手动轮播操作完成后再开启定时器 timerStart(); }); //------------------------------------------------ // 搜索栏上下滚动时改变透明度
ul li a:hover{ background-color:#f6b544; } jquery...-1.12.4.min.js"> $(function(){ // 单击一级菜单...,滑动显示对应的二级菜单 -- 小ul $('.level1').click(function(){ // $(this).next().slideDown.../js/jquery-1.12.4.min.js"> $(function(){ // 左侧的span单击,隐藏left.../ $('.right span').click(function(){ // $('.right').hide(500) // }) // 单击
操作dom 必须先得到dom ) 3:出色的DOM操作的封装 4:可靠的事件处理机制(对事件进行了一个封装) 5:完善的Ajax(底层封装xmlhttprequest) 6:不污染顶级变量(在jquery...加载 从 http://jquery.com/ 下载后,复制到项目(路径:WebContent/js)中,然后在页面生命: 1 jquery 对象时jQuery 独有的,不能调用dom 对象里面的属性和方法,jQuery 对象是一个数组。...jQuery 对象与dom 对象时可以相互转换的,转换之后它们就可以相互调用了 jQuery 选择器 注意,如果获取到多个元素将是一个数组,可以直接用数组的属性方法,比如 length 当前元素: 1...slideToggle() 对被选元素进行滑动隐藏和滑动显示的切换 slideUp() 通过调整高度来滑动隐藏被选元素 stop() 停止在被选元素上运行动画 toggle() 对被选元素进行隐藏和显示的切换
在 jQuery Mobile 中,页眉的默认用法是作为固定在 Web 页面顶部的页面标题;在大部分情况下,页脚是 Web 页面中的最后一个元素,并且包括版权信息、其他超链接等内容。...当用户与 Web 页面交互时,工具栏出现,使用户能够与它们进行交互,然后,当用户停止与页面进行交互时,工具栏消失(清单 2)。在显示一个视频播放器、照片集或类似的内容时,该选项十分有用。 清单 2....增强列表 在您明白创建基本列表有多简单后,您可能就会想要更多选项。对列表提供更多功能的一个选项称为拆分按钮列表。拆分按钮列表使您能够在同一个列表项中提供两个可单击的选项。...> 清单 7 中的拆分按钮列表所提供的列表项包括一个标题和一个概述,用户可以单击它查看有关该项的更多详细信息。...滑块包括一个图柄和一个供图柄在上面滑动的槽 。随着图柄的移动,滑块的值被存储起来,然后,在表单被提交时,该值也被提交。
将项目命名为“ProductsApp”,然后单击“确定”。 ? 在“ 新建ASP.NET项目 ”对话框中,选择“ 空”模板。在“添加文件夹和核心参考”下,查看Web API。单击确定。 ?...在解决方案资源管理器中,右键单击Models文件夹。从上下文菜单中,选择添加,然后选择类。 ? 将类命名为“产品”。将以下属性添加到Product类中。...2 要通过ID获取产品,请输入ID并单击搜索: ? 如果您输入的ID无效,则服务器返回HTTP错误: ? 使用F12查看HTTP请求和响应 当您使用HTTP服务时,查看HTTP请求和请求消息非常有用。...选择此条目,然后单击转到详细视图。在详细视图中,有选项卡来查看请求和响应标题和主体。...例如,如果您单击请求标题选项卡,您可以看到客户端在Accept标头中请求“application / json”。 ? 如果您单击响应体选项卡,您可以看到产品列表如何序列化为JSON。
不过,和DropDownList控件相比,还缺少以下内容 1、当点击菜单中的某一项,菜单的文字自动显示在文本框中 2、当点击菜单中的某一项,提供一个函数来获得相关的数据(可以是菜单的文字,也可以是相关的文本...每个组包含ItemHeader属性(组标题文字)、Items属性(该组菜单条目的集合)。每个组之间有一条分割线。...DropDownList的组件代码如下,由于是基于JQuery,故要把该代码置于JQuery引用代码之下: 代码比较简单,主要就是依据属性值来拼接HTML代码,下面简单的说明一下: ReadOnly的实现...="") { SetData(SelText,SelData); } //给所有的条目绑定单击事件,单击后调用设置活动条目的函数 Obj.find...=Obj.find("ul"); if (UL.height()>o.MaxHeight) { UL.css({ 'height':o.MaxHeight
jquery Mobile 在开始运行的时候,它会在document 对象上触发一个mobileinit 事件。我们可以通过该事件重写默认的相应的函数。配置各种属性参数。 ...用法:$.mobile.subPageUrlkey = "page" 描述:改变jQuery Mobile 视图在 URL 地址中的key 参数名,当选参数改成 subPageUrlKey...= "page "时 url 地址会被改成 example.html?...6.ajaxEnabled 类型:布尔值,默认值是true 用法:$.mobile.ajaxEnabled = false 描述:设置当单击连接或提交表单或按钮时...,可选的参数 slideup (左右滑入)slideup(由下向上滑动) slidedown (由上像下滑入)pop (由中心) 9.touchOverflowEnabled
我先给大家说下这里要实现的效果,就是当鼠标移入导航栏的某个栏目时,顶部的4px 的蓝色滑动条要尾随着鼠标,如丝般顺滑地滑入相应栏目的顶部位置,当鼠标leave时,蓝色滑动条要退回到当前current的栏目顶部...刚开始我的布局是,导航栏是一个ul,ul下面有八个li,分别是八个栏目。在每个li的顶部设置一个border-top: 4px solid #2ea0ff;html结构如下: ?...下午又研究了大半天,突然灵光一现,想到了一招,可以在ul的外层包一层div,和ul同级新增一个span元素,这个span就是那个公用的蓝色滑动条。然后给父元素设置为相对位置,给span设置为绝对位置。...于是,我又用原生javascript写了一遍,还是取不到值,然后又改回来jquery的写法。在经过多次翻阅jquery的api文档,多次试错之后,终于效果写出来了,以下是最终的业务代码: ?...在这里,我先解释下: 第一步,通过filter方法筛选出className为current的li,获得它的index,然后赋值给变量currentNum; 第二步,在浏览器刷新时初始化滑动条sliderBar
标题图 目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight...选取索引为偶数的所有元素 $(" li:odd" ):选取索引为奇数的所有元素 $(" li:not(.three)" ):选取class不是three的元素 $(":header" ):选取网页中所有标题元素...“洛丽塔”原指1955年由俄裔美国作家的小说《洛丽塔》,或指小说中的女主角12岁的洛丽塔,后在日本引申发展成一种次文化,用来表示小女孩,或用在与其相关的事物,例如罗莉塔时装。...li>JavaScript高级编程 JQuery权威指南 JQuery实战 ul> JavaScript与CSS交互 Style属性 document.getElementById("title").style.color="#f00f00"; 常用事件 onclick单击