jquery事件

day47总结

由 拜拜、爱过 提交于 2019-12-06 07:10:24
目录 jQuery基本筛选器 jQuery属性选择器 jQuery表单筛选中 jQuery筛选器方法 jQuery标签操作 模态框 开关灯示例 链式操作 位置操作 文本操作 用户注册校验示例 属性操作 节点操作 clone jQuery时间 jQuery绑定事件的语法 鼠标悬浮绑定事件 input实时监听事件 阻止标签默认的事件 事件冒泡 事件委托 jQuery动画效果 点赞动画效果示例 each循环 data方法隐式设置属性 .data()方法设置的属性对外部不可见 jQuery基本筛选器 $('ul li:first'); // 筛选出第一个元素, [li] $('ul li:last'); // 筛选出最后一个元素 $('ul li:eq(1)'); // 筛选出索引等于1的元素, 从0开始计数 $('ul li:even'); // 筛选出索引为偶数的元素 $('ul li:odd'); // 筛选出索引为奇数的元素 $('ul li:gt(3)'); // 筛选出索引大于3的元素 $('ul li:lt(3)'); // 筛选出索引小于3的元素 $('div:not(".c1")'); // 筛选出不包含c1样式的元素 $('div:has(".c1")'); // 筛选出包含c1样式的元素, 从div标签的后代元素中筛选 jQuery属性选择器 $('[userName

02 jQuery中的事件与动画

由 江枫思渺然 提交于 2019-12-06 05:34:46
jQuery中的事件 在JavaScript中，常用的基础事件有鼠标事件、键盘事件、window事件、表单事件、事件绑定和处理函数的语法格式如下 语法 　　 事件名 = "函数名()"； 或者 DOM对象.事件名 = 函数； 1、载入事件 $(function () {}); //推荐使用 $(document).ready(function () {}); //推荐使用 window.onload = function () {} 2、鼠标事件 click() 　　　　　　 触发将函数绑定到指定元素的click事件　　　　　　鼠标单击时 mouseover() 　　　 触发将函数绑定到指定元素的mouseover事件　　　鼠标指针移过时　　　　 mouseout() 　　　　触发将函数绑定到指定元素的mouseout事件　　　 鼠标指针移出时 mouseenter()　　　 触发将函数绑定到指定元素的mouseenter事件　　 鼠标指针进入时 mouseleave()　　 触发将函数绑定到指定元素的mouseleave事件　　 鼠标指针离开时 mouseover() 和 mouseenter()的区别：mouseover()包含子元素绑定，而mouseenter不包含子元素绑定 3、键盘事件 keydown()　　　 触发或将函数绑定到指定元素的keydown事件　　键盘按下时

jQuery中的100个技巧（译）

由 可紊 提交于 2019-12-06 05:27:43
1.当document文档就绪时执行JavaScript代码。 　　我们为什么使用jQuery库呢？原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行。 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script> // Different ways to achieve the Document Ready event // With jQuery $(document).ready(function(){ /* ... */}); // Short jQuery $(function(){ /* ... */}); // Without jQuery (doesn't work in older IE versions) document.addEventListener('DOMContentLoaded',function(){ // Your code goes here }); // The Trickshot (works everywhere): r(function(){ alert('DOM Ready!'); }) function r(f){/in/.test(document.readyState)?setTimeout('r(

jQuery中$()函数的7种用法汇总

由 我的梦境 提交于 2019-12-06 05:21:46
前言 jQuery对象是一个类数组的对象，含有连续的整形属性以及一系列的jQuery方法。它把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口。 其中我们用的非常频繁的一个函数是$()或者说是jQuery()，当我们调用他的时候会根据传入的参数的不同而达到不同的效果。 接下来会一一说一下这7中用法，欢迎大家指正其中不正确的地方。 简要的说是：接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。 默认情况下，对匹配元素的查找都是从根元素ducument对象开始，也就是说查找范围是整棵文档树。但是如果给定了上下文context，则在指定上下文中查找 html <span>body span</span> <span>body span</span> <span>body span</span> <div class="wrap"> <span>wrap span</span> <span>wrap span</span> <span>wrap span</span> </div> js $('span').css('background-color','red');//所有的span都会变红 $('span','.wrap').css('background-color',

jquery target属性 语法

由 风流意气都作罢 提交于 2019-12-06 05:02:41
jquery target属性 语法 作用： target 属性规定哪个 DOM 元素触发了该事件。 大理石平台精度等级 语法： event.targe 参数： 参数 描述 event 必需。规定需要检查的事件。这个 event 参数来自事件绑定函数。 jquery target属性 示例 <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p, button, h1, h2").click(function(event){ $("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发"); }); }); </script> </head> <body> <h1>这是一个标题</h1> <h2>这是另一个标题</h2> <p>这是一个段落</p> <button>这是一个按钮</button> <p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件，下面的 div 会显示出哪个元素触发了该事件。</p> <div><

jquery result属性 语法

由 本小妞迷上赌 提交于 2019-12-06 04:45:27
jquery result属性 语法 作用： result 属性包含由被指定事件触发的事件处理器返回的最后一个值，除非这个值未定义。 大理石平台精度等级 语法： event.resul 参数： 参数 描述 event 必需。规定返回的最后一个值来自哪个事件。这个 event 参数来自事件绑定函数。 jquery result属性 示例 <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(e) { return ("最后一次点击的鼠标位置是： X" +e.pageX + ", Y" + e.pageY); }); $("button").click(function(e) { $("p").html(e.result); }); }); </script> </head> <body> <p>这是一个段落。</p> <button>请点击这里</button> </body> </html> 来源： https://www

jquery pageX属性 语法

由 天涯浪子 提交于 2019-12-06 04:44:37
jquery pageX属性 语法 作用： pageX() 属性是鼠标指针的位置，相对于文档的左边缘。 语法： event.page 参数： 参数 描述 event 必需。规定要使用的事件。这个 event 参数来自事件绑定函数。 jquery pageX属性 示例 <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); }); }); </script> </head> <body> <p>鼠标指针位于： <span></span></p> </body> </html> 来源： https://www.cnblogs.com/furuihua/p/11962493.html

jquery pageY属性 语法

由 戏子无情 提交于 2019-12-06 04:44:32
jquery pageY属性 语法 作用： pageY() 属性是鼠标指针的位置，相对于文档的上边缘。 直线模组 语法： event.page 参数： 参数 描述 event 必需。规定要使用的事件。这个 event 参数来自事件绑定函数。 jquery pageY属性 示例 <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).mousemove(function(e){ $("span").text("X: " + e.pageX + ", Y: " + e.pageY); }); }); </script> </head> <body> <p>鼠标指针位于： <span></span></p> </body> </html> 来源： https://www.cnblogs.com/furuihua/p/11962495.html

jquery preventDefault()方法 语法

由 假如想象 提交于 2019-12-06 04:44:29
jquery preventDefault()方法 语法 作用： preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。 大理石平台价格 语法： event.preventDefault() 参数： 参数 描述 event 必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。 jquery preventDefault()方法 示例 <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(event){ event.preventDefault(); }); }); </script> </head> <body> <a href="http://www.furuihua.cn/">大理石平台</a> <p>preventDefault() 方法将防止上面的链接打开 URL。</p> </body> </html> 来源： https://www.cnblogs.com

jquery error()方法 语法

由 不打扰是莪最后的温柔 提交于 2019-12-06 04:31:22
jquery error()方法 语法 作用： 当元素遇到错误（没有正确载入）时，发生 error 事件。error() 方法触发 error 事件，或规定当发生 error 事件时运行的函数。该方法是 bind('error', handler) 的简写方式。 直线模组 触发error事件语法： $(selector).error() 将函数绑定到error事件语法： $(selector).error(function) 参数： 参数 描述 function 可选。规定当发生 error 事件时运行的函数。 jquery error()方法 示例 <html> <head> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("img").error(function(){ $("img").replaceWith("<p><b>图片未加载！</b></p>"); }); }); </script> </head> <body> <img src="http://img.php.cn/upload
订阅 jquery事件