jquery事件 | 易学教程

JQuery高性能优化

阅读更多关于 JQuery高性能优化

使用JQuery时，你可以使用多种选择器，选择同一个元素，各种方法之间的性能是不一样的，有时候差异会特别大。通常比较常用的选择器有以下几个： ID选择器 $("#id") 标签选择器 $("td") 类选择器 $(".target") 属性选择器 $("td[target='target']") 伪类选择器 $("td:hidden") 根据经验，我们应该知道这5种选择器的性能是依次下降的测试html片段： <table width="98%" cellspacing="1" cellpadding="0" border="0" style="table-layout:fixed" id="mytable"> <tr> <td bgcolor="#aaaaaa" align="center" class="target" target="target" style="display:none;" id="target-td">e</td> </tr> </table> 测试结果测试方案：对每个脚本执行1w次，统计3次运行结果的平均值方案 IE6 IE7 IE8 IE9 chrome firefox opera safari $("#mytable td.target") 5150 5630 780 293 69 148 31 102 $("#mytable .target"

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); bind的特点就是会把监听器绑定到目标元素上

jQuery设计思想

阅读更多关于 jQuery设计思想

【目录】　　一、选择网页元素　　二、改变结果集　　三、链式操作　　四、元素的操作：取值和赋值　　五、元素的操作：移动　　六、元素的操作：复制、删除和创建　　七、工具方法　　八、事件操作　　九、特殊效果【正文】一、选择网页元素 jQuery 的基本设计思想和主要用法，就是 " 选择某个网页元素，然后对其进行某种操作 " 。这是它区别于其他 Javascript 库的根本特点。使用 jQuery 的第一步，往往就是将一个选择表达式，放进构造函数 jQuery() （简写为 $ ），然后得到被选中的元素。选择表达式可以是 CSS 选择器： $(document) //选择整个文档对象$('#myId') //选择ID为myId的网页元素$('div.myClass') // 选择class为myClass的div元素$('input[name=first]') // 选择name属性等于first的input元素也可以是jQuery特有的表达式：$('a:first') //选择网页中第一个a元素$('tr:odd') //选择表格的奇数行$('#myForm :input') // 选择表单中的input元素$('div:visible') //选择可见的div元素$('div:gt(2)') // 选择所有的div元素，除了前三个$('div

JavaScript入门学习之四——JQuery入门

阅读更多关于 JavaScript入门学习之四——JQuery入门

在前面一章我们已经点到过，很多的情况我们都是通过JQuery来对标签进行操作的，在这一章我们就来好好讲一讲这个JQuery。 JQuery初识先看看JQuery的使用 JQuery的特点：可以用及其简练的语言来做JS做的事情(write less,do more) JQuery就是一个JS文件,相当于一个Python的第三方模块，直接拿过来用就可以了（但是需要按照要求的规则）。但是原生的JS DOM是基础，其实还是通过这些基础来实现所有的操作。我们要学习的，JQuery最常用的方向，也就是改变标签的属性、样式和事件相关的一系列操作。 JQuery的基础语法 JQuery的语法还是比较简单的，只有一句必须要掌握的 $(selector).action() 前面的selector就相当于一个标签选择器，后面的action就是相对应的操作标签选择器 id选择器 $("#id") 标签选择器 $("tagName") class选择器 $(".className") 所有元素选择器 $("*") 选择器的配合使用 $("tagName.className") //两个条件一定不能加空格，要紧挨着，加了空格就有层级的效果，下面会讲到组合选择器同时符合多个条件 $("condition1,condition2...") 练习题结合上面的各种基本组合器看看下面的方法应该怎么实现

jQuery基础事件

阅读更多关于 jQuery基础事件

<body> <input type="text" value="" /> <div style="width:100px; height:100px; background-color:#0E0"> <div style="width:50px; height:50px; background-color:blue"></div> </div> </body> </html> <script> $(document).ready(function(e) { //mouseover,mouseout //mouseenter,mouseleave 效果差不多，只不过enter和leave 对子元素无效,over和out 会触发子节点 $('input').keydown(function(e){ alert(e.keyCode); }) $('input').keypress(function(e){ alert(e.charCode); }) $('input').focus(function(){ alert('光标激活'); }) $('input').blur(function(){ alert('光标离开'); }) //focus和blur必须是当前元素才能激活,focusin和focusout可以使子元素激活 $('div').hover(function(){ $

jQuery基础之事件处理

阅读更多关于 jQuery基础之事件处理

jQuery基础之事件处理方法，如下图：代码实现： 1 <script src="JS/jquery-1.12.4.min.js"></script> 2 <script> 3 // 事件代理的第一种方式 4 // 事件冒泡，子标签的事件会传递给父标签 5 // 当点击子标签时会将单击事件传递给父标签，导致父标签也执行单击事件 6 $(function(){ 7 var $div1 = $('#div1'); 8 $div1.click(function(){ 9 alert('父标签' + $div1.html()) 10 }); 11 var $div2 = $('#div2'); 12 $div2.click(function(){ 13 alert('子标签' + $div2.html()) 14 }); 15 }); 16 // 事件代理的第二种方式 17 // 使用delegate方法完成事件代理 18 19 $(function(){ 20 // 获取父标签对象 21 $div3 = $('#div3'); 22 $div3.delegate('p','click',function(){ 23 // this这是表示子标签元素对象 24 $(this).css({ 25 color:'red', 26 width:'300px', 27 height:'200px

js,JQuery实现,带筛选,搜索的select

阅读更多关于 js,JQuery实现,带筛选,搜索的select

代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网上找了个插件，但是不好用</title> <script src="jquery.js" charset="utf-8"></script> <style> body,html{padding:0;margin:0;width:100%;height:100%;} </style> </head> <body> <div style="height:500px;margin:20px;">  <select id="magicsuggest" data-edit-select="1"> <option value="1">哇哈哈</option> <option value="2">天天</option> <option value="3">xx</option> <option value="1">哇哈哈哇哈哈哇哈哈哇哈哈哇哈哈</option> <option value="2">天天</option> <option value="3">xx</option> <option value="1">哇哈哈</option> <option value="2">天天</option> <option

jQuery triggerHandler

阅读更多关于 jQuery triggerHandler

jQuery triggerHandler — 触发指定事件类型上所有绑定 triggerHandler(type,[data]) 这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。这个方法的行为表现与trigger类似，但有以下三个主要区别： * 第一，他不会触发浏览器默认事件。 * 第二，只触发jQuery对象集合中第一个元素的事件处理函数。 * 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。返回值 : jQuery 参数 : type (String) : 要触发的事件类型 data (Array) : (可选)传递给事件处理函数的附加参数示例 : 如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。 HTML 代码: <button id="old">.trigger("focus")</button> <button id="new">.triggerHandler("focus")</button><br/><br/> <input type="text" value="To Be Focused"/> jQuery 代码:

jQuery绑定事件的四种方式

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

【JQuery】基础

阅读更多关于【JQuery】基础

event.pageX;event.pageY, function参数传入event，并返回当前鼠标的位置 $(document).mousemove(function(event){ $("span").text("X: " + event.pageX + ", Y: " + event.pageY); }); 常用的事件： select(): input 里面的文本被选中 $('input').select(function(){ alert('selected!') }) $('input').select();//导致文本内容被选中 trigger() 与 .triggerHandler()：两者都是触发事件，具体区别： https://www.runoob.com/jquery/event-trigger.html $("input").trigger("select"); $("p").trigger("myPara", [参数1，参数2，参数n]); bind():被on()替代 on():在被选元素及子元素上添加一个或多个事件处理程序 https://www.runoob.com/jquery/event-on.html $('div').on(event, [childSelector], [data], function(){}) $('div').on(

订阅 jquery事件