jquery事件 | 易学教程

jQuery中的键盘事件、取消事件冒泡、不同的元素不同的设置方式---each()、多库共存$.noConflict()

阅读更多关于 jQuery中的键盘事件、取消事件冒泡、不同的元素不同的设置方式---each()、多库共存$.noConflict()

1、键盘事件keydown()、e.keyCode;//键盘按下后的键对应的键值 $ ( document ) . keydown ( function ( e ) { var keyCode = e . keyCode ; //键盘按下后的键对应的键值 switch ( keyCode ) { case 65 : $ ( "#div" ) . css ( "backgroundColor" , "red" ) ; break ; case 66 : $ ( "#div" ) . css ( "backgroundColor" , "green" ) ; break ; case 67 : $ ( "#div" ) . css ( "backgroundColor" , "blue" ) ; break ; case 68 : $ ( "#div" ) . css ( "backgroundColor" , "yellow" ) ; break ; case 69 : $ ( "#div" ) . css ( "backgroundColor" , "black" ) ; break ; } } ) ; 2、取消事件冒泡 //事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发 //元素A中有一个元素B

JQuery 初识

阅读更多关于 JQuery 初识

什么是JQuery？ JQuery是一个JavaScript库，是一个轻量级的“写的少，做的多”的库。 JQuery语法：$(selector).action() selector ：可以是this，或者通过CSS选择器方式选择的HTML元素; action()：执行对元素的操作书写格式注意： $(document).ready( Function(){ //此处为JQuery主体 } ); 为什么要放到document ready 函数中？为了防止文档在完全加载之前运行JQuery代码。（个人拙见：使用javascript调用函数的时候，例如某按钮点击事件调用某方法，这个是在按钮初始化后点击事件触发时才执行的函数，而JQuery使用CSS选择器的选择方式获取事件元素，那么事件元素的加载还有JQuery代码的执行先后顺序就需要注意了）选择HTML元素? 通过CSS选择器的方式选择，语法为$(“CSS选择器的选择方式”)，注意双引号来源： CSDN 作者：云朵儿的媛码链接： https://blog.csdn.net/qq_38889321/article/details/103993626

jQuery---手风琴案例

阅读更多关于 jQuery---手风琴案例

手风琴案例 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style-type: none; } .parentWrap { width: 200px; text-align: center; } .menuGroup { border: 1px solid #999; background-color: #e0ecff; } .groupTitle { display: block; height: 20px; line-height: 20px; font-size: 16px; border-bottom: 1px solid #ccc; cursor: pointer; } .menuGroup>div { height: 200px; background-color: #fff; display: none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { //思路分析：给所有的span注册点击事件

jQuery---jQuery初体验

阅读更多关于 jQuery---jQuery初体验

jQuery初体验 1. 引入jquery文件 2. 入口函数标准 jQuery优点总结 (对应的就是js的缺点)：查找元素的方法多种多样，非常灵活拥有隐式迭代特性，因此不需要手写for循环完全没有兼容性问题实现动画非常简单，而且功能更加强大代码简单粗暴什么是jQuery? jQuery的官网 http://jquery.com/ jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。 js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { height: 200px; margin-bottom: 10px; background-color: #a43035; display: none; } </style>

jQuery绑定事件的四种方式

阅读更多关于 jQuery绑定事件的四种方式

jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前一：bind(type,[data],function(eventObject)) bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下： type:事件类型，如click、change、mouseover等; data:传入监听函数的参数，通过event.data取到。可选; function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意 bind的源码： 1 2 3 4 5 6 7 bind: function ( types, data, fn ) { return this .on( types, null , data, fn ); } $( '#myol li' ).bind( 'click' ,getHtml);

jQuery绑定事件的四种方式区别

阅读更多关于 jQuery绑定事件的四种方式区别

jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前一：bind(type,[data],function(eventObject)) bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下： type:事件类型，如click、change、mouseover等; data:传入监听函数的参数，通过event.data取到。可选; function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意 bind的源码： 1 2 3 4 5 6 7 bind: function ( types, data, fn ) { return this .on( types, null , data, fn ); } $( '#myol li' ).bind( 'click' ,getHtml); bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”，点击它是没有反应的，必须再bind一次才行。要想不这么麻烦，我们可以使用live。

jQuery绑定事件的四种方式

阅读更多关于 jQuery绑定事件的四种方式

jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前一：bind(type,[data],function(eventObject)) bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下： type:事件类型，如click、change、mouseover等; data:传入监听函数的参数，通过event.data取到。可选; function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意 bind的源码： ? 1 2 3 4 5 6 7 bind: function ( types, data, fn ) { return this .on( types, null , data, fn ); } $( '#myol li' ).bind( 'click' ,getHtml);

我所知道的Javascript

阅读更多关于我所知道的Javascript

javascript到了今天，已经不再是我10多年前所认识的小脚本了。最近我也开始用javascript编写复杂的应用，所以觉得有必要将自己的javascript知识梳理一下。同大家一起分享javascript给我们带来的福利。索引工具库参考资料技能工具 Online Javascript interpreter[在线javascript解析器] 可以在线运行javascript代码。这篇文章中的所有代码都在里面运行过。用它来做javascript实验，它是不错的选择。运行地址： http://math.chapman.edu/~jipsen/js/ Html5 在线运行地址： W3School在线测试工具 –canvas JQuery在线运行地址： W3School在线测试工具-JQuery Closure Compiler 这是google提供的一款用于编译javascript的工具。所谓编译，是将一般可读的javascript代码编译成紧凑的，短小的javascript代码。其效果类似于jquery-x.min.js。下载地址： https://developers.google.com/closure/compiler/ 运行命令：java -jar compiler.jar --js=..\carports\assets\www\js

jQuery事件绑定方法bind、 live、delegate和on的区别

阅读更多关于 jQuery事件绑定方法bind、 live、delegate和on的区别

jQuery事件绑定方法bind、 live、delegate和on的区别我们试图绑定一些事件到DOM元素上的时候，我相信上面这4个方法是最常用的。而它们之间到底有什么不同呢？在什么场合下用什么方法是最有效的呢? 1.准备知识当我们在开始的时候，有些知识是必须具备的： 1).DOM树下图仅仅是一个示例，这是一个在browser环境下的一棵模拟DOM树，在下面的代码中仅起到演示的作用： 2).Event bubbling (aka event propagation)冒泡我们的页面可以理解为一棵DOM树，当我们在叶子结点上做什么事情的时候（如click一个a元素），如果我们不人为的设置stopPropagation(Moder Browser), cancelBubble(IE)，那么它的所有父元素，祖宗元素都会受之影响，它们上面绑定的事件也会产生作用。看一个示例：复制内容到剪贴板程序代码 $('a').bind('click', function() { alert("That tickles!") }); 当我们在a 上面点击的时候，首先会触发它本身所绑定的click事件，然后会一路往上，触发它的父元素，祖先元素上所有绑定的click事件，就像下图演示的那样。 3).示例HTML 为了对下面的代码进行演示，添加一些HTML代码：复制内容到剪贴板程序代码 1 <ul

jQuery设计思想

阅读更多关于 jQuery设计思想

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的各种方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。目前，互联网上最好的jQuery入门教材，是 Rebecca Murphey 写的《jQuery基础》（jQuery Fundamentals）。在Google里搜索"jQuery培训"，此书排在第一位。jQuery官方团队已经同意，把此书作为官方教程的基础。这本书虽然是入门教材，但也足足有100多页。我对它做了一个详细的笔记，试图理清jQuery的设计思想，找出学习的脉络。我的目标是全面掌握jQuery，遇到问题的时候，心里有底，基本知道使用它的哪一个功能，然后可以迅速从手册中找到具体的写法。下面就是我的笔记，它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识，就能看懂它，在最短的时间里

订阅 jquery事件