jquery事件 | 易学教程

jQuery第一篇（帅哥）

阅读更多关于 jQuery第一篇（帅哥）

同学心目中的 jQuery ：简单易用，功能强大，对移动端来说，体积稍大。 1.1 回顾前面学到的 js 我们遇到的一些痛点 window.onload 事件有个事件覆盖的问题，我们只能写一个代码容错性差浏览器兼容性问题书写很繁琐，代码量多代码很乱，各个页面到处都是动画效果，我们很难实现 1.2 jQuery 解决问题解决了我们上面遇到所有问题 1.3 jQuery 的基本使用 min ：它是压缩过的版本区别：我们开发过程中，会用未压缩的版本，或者压缩的。项目上线的时候，我们要用压缩过的版本。版本问题： 1.xxx 版本 jQuery-1.11.1.js 2.xxx 版本不再支持 IE6 、 7 、 8 1.3.1 引包 1. 要把我们的 jQuery 源文件拿到我们的项目里面来 2. 在我们的页面中引用 jQuery 文件问题：如果遇到这种问题，那肯定是没有引用我们的 jQuery 源文件。用 jQuery 之前，先引入 jQuery ，然后，再去写我们的 jQuery 代码。 1.3.2 入口函数 $(document).ready(function(){}); $(function(){}); 1.3.3 事件处理程序事件源 Js方式：document.getElementById(“id”) jQuery方式：$(“#id”) 事件 Js方式

input的onchange 和oninput事件

阅读更多关于 input的onchange 和oninput事件

一个小的功能，也体现了了这几天写程序过程中的遇到的一些常发事件，准备有时间研究一下jQuery和原生js,问题的出现：使用jQuery获取到的节点到底是属于什么，有些事件居然不能用，就如我今天用到的事件 onchange 和oninput ，还有对于onclick 和click，先总结一下这个小小的功能：输入框要输入money，那就只有两位小数，我们要确保输多位小数时，不让他提交，提交按钮变灰色，当小数点后是两位则回复按钮状态， onchange事件，监听input 输入的值是否符合要求，不符合则改变按钮状态：代码如下： bid.onchange=function(){ var num = bid.value; var dot = num.split('.'); if(dot[1]!=null){ if(dot[1].length>2){ var addbtn = document.getElementById("addbtn"); addbtn.setAttribute("disabled",true); alert("请保留两位小数"); } } } oninput事件，随时监听input输入的值，小数点后的位数，当时两位时，按钮回复状态：代码如下： bid.oninput=function(){ var num = bid.value; var dot = num

Calendars - 日历插件

阅读更多关于 Calendars - 日历插件

Calendars - 日历插件 1)jQuery Frontier Calendar 是一个可灵活定制的月日历jQuery插件，看起来类似于Google Calendar。当在一个日期单元格中有比较多的待办事项时，将出现一个更多的链接，点击这个链接会弹一个 jQuery模式对话框来显示所有的事务。这个日历还支持通过CSS文件改变整个日历的背景。主页: http://code.google.com/p/jquery-frontier-calendar/ 2)NoGray 制定了一个像我们这样的Web开发人员自由和高度可定制的JavaScript日历组件。它外观和日历的感觉也可以很容易使用CSS改变。你可以在任何网页上有一个这样的日历。您还可以启用多个日期选择。日历看起来真的很容易集成到您的网站。主页: http://nogray.com/calendar.php 3) MooMonth 一个完整的日历应用程序，他以mootools框架的JavaScript写成。高度重配置和可定制。它具有平滑性感和不视角之间的过渡。 MooMonth提供的CC – GNU的LGPL许可。所以，你可以自由下载并使用它。它看起来很漂亮，我非常喜欢它的淡入和淡出效果。主页: http://code.google.com/p/moomonth/ 4) Plans

如何在ASP.NET MVC 2中使用jQuery UI控件

阅读更多关于如何在ASP.NET MVC 2中使用jQuery UI控件

问：我想给我的ASP.NET MVC输入表单添加一个日期选择控件，但模型-视图-控制器（MVC）并没有提供这样的辅助方法，我该如何添加控件？答：和ASP.NET Web表单不一样，MVC架构没有提供可以在设计面板中拖放的有状态的服务端控件，相反，MVC鼓励使用简单的HTML布局元素和基于数据的标签作为页面布局的要素，功能和最终的布局用客户端JavaScript和CSS样式表控制。 MVC提供了一套基于HtmlHelper的扩展方法渲染大部分HTML标签，对于更复杂的功能，你需要自己编写HTML/JavaScript代码，购买第三方MVC控件包或使用开源的JavaScript库，目前最流行的开源JavaScript库是jQuery，当你在Visual Studio 2010中创建新的MVC 2项目时，实际上已经包括了jQuery核心库。 jQuery架构一直遵循“不唐突JavaScript（Unobtrusive JavaScript）”的原则，它将HTML标签和添加客户端行为的JavaScript脚本分离开来，使用这个技术，开发人员可以使用简单的<div>，<span>和<table>标签及class属性创建页面布局，使用没有连接JavaScript事件的HTML列表，锚和基于表单的标签收集和显示数据，最终的页面将会很干净，在任何浏览器中都能显示，并且更适合搜索引擎机器人抓取

JQuery的使用

阅读更多关于 JQuery的使用

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。【JQuery语法】 1、JQuery("选择器").action()；通过选择器，调用时间函数但JQuery中，JQuery中可以用$代替，即$("选择器").action()； ①选择器，可以直接使用css选择器，选中元素 ②.action() 表示对元素执行的操作； 2、文档就绪函数：防止文档在完全加载（就绪）之前，运行JQuery代码 $(document).ready(function(){ //JQuery代码 }); 简写：$(function(){ }); 3、[文档就绪函数&window.onload区别] ① window.onload需在网页所有内容加载完成后执行(包括图片音频) 文档就绪函数，只需要在网页DOm结构加载以后便会执行 ② window.onload，只能写一个，写多个只会执行最后一个；文档就绪函数，可以写多个，也不会被覆盖 4

jQuery hover() 方法

阅读更多关于 jQuery hover() 方法

1 $("p").hover(function(){ 2 $("p").css("background-color","yellow"); 3 },function(){ 4 $("p").css("background-color","pink"); 5 }); 定义和用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。语法 $( selector ).hover( inFunction,outFunction ) 调用: $( selector ).hover( handlerIn, handlerOut ) 等同以下方式： $( selector ).mouseover( handlerIn ).mouseout( handlerOut ); 注意：如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。调用: $(selector).hover(handlerInOut) 等同于： $( selector ).on( "mouseover mouseout", handlerInOut ); 来源： https://www.cnblogs.com

jquery mouseover与mouseenter,mouserout与mouseleave的区别

阅读更多关于 jquery mouseover与mouseenter,mouserout与mouseleave的区别

mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件只有在鼠标指针穿过被选元素时，才会触发mouseenter事件 <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript"> x=0; y=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(x+=1); }); $("div.enter").mouseenter(function(){ $(".enter span").text(y+=1); }); }); </script> </head> <body> <p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p> <p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p> <div class="over" style="background-color:lightgray;padding:20px

jQuery中使用ajax

阅读更多关于 jQuery中使用ajax

基本属性 $.ajax({ url:'add.php', type:'post', data:{id:1,name:'ashen'}, success:function(res){ console.log(res); } }) dataType：设置响应体数据类型 success函数：只有状态码为200即请求成功才会执行 error函数：只有请求不正常才执行，即状态码不是200 complete函数：请求完成后执行，即成功或失败都会执行 beforeSend函数：在发送请求之前执行高度封装函数 $.get(url,数据,成功后执行的函数) 发送get请求 $.post(url,数据,成功后执行的函数) 发送post请求 $.getJSON(url,数据,成功后执行的函数) 发送get请求并设置响应体为json格式 $.getScript() 发送get请求并设置响应体为javascript格式全局事件处理函数 $(selector).ajaxStart(function(){}); 给某一元素注册请求开始时触发的事件全局事件处理函数 $(selector).ajaxStop(function(){}); 给某一元素注册请求结束时触发的事件全局事件处理函数　　其中加入css或其他效果，可以实现正在加载或加载进度条等用户体验性较好的页面如： $(document)

Jq学习笔记（7）JQ动画

阅读更多关于 Jq学习笔记（7）JQ动画

一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你会瞬间成为别人(那些不知道jQuery的人)眼里的动画高手! 本文将介绍jQuery的动画相关函数.原来做动画如此简单! 二.前言本系列文章的实例都是针对某一个技术细节的, 因为我们要学习的是基础知识, 虽然总有人希望要复杂一些的应用示例, 但是我想还是让我们先把基础打牢, 有了扎实的基础凭借每个人的智慧一定能创造出更多更好的应用. 就在写这篇文章的前几天, 还有不止一个同事在为了"弹出层"效果而犯愁. 但是以后再面对这样的功能看过本篇文章的每一个人都可以开心的微笑了. jQuery, make work easy ! 三.从实例开始做web程序经常要使用弹出层, 比如单击文字或按钮显示一段提示文字等. 假设有如下需求: 单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层. 单击任何空白区域或者弹出层,弹出层消失. 用原始javascript我们也完全可以完成这个工作. 有以下几点注意事项: 1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置. 2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托,

jquery中remove()与detach()的区别

阅读更多关于 jquery中remove()与detach()的区别

3 月，跳不动了？>>> 说到删除节点，马上就会想到remove，不过原来还有一个detach，而且它们还是有区别的，就是detach保留了jquery的数据，而remove就会完全删除干净。所以如果在删除一个dom节点后还想保留它的数据以供使用就要用detach了。 jquery是一个很大强的东西，在工作中常能用到，可是有些方法还是因为不常用到，或是没有注意到而被我们而忽略。 remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了。可能我用的不够精吧，我是一次也没有用过。可是这次因为一个项目中一个问题，而用到它，感觉很有意思就记录下来，与大家分享。 remove():官方的解释是从DOM中删除所有匹配的元素。这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。我的理解就是将元素移除了。但是怎么再找回来，说真的，我一直也没有找到，哪个朋友用过。可以告诉我，十分感谢，用法：从DOM中把所有段落删除 HTML 代码: 　　<p>Hello</p> how are <p>you?</p> jQuery 代码: 　　$("p").remove(); 结果: 　　how are 这个方法，不多说了

订阅 jquery事件