jquery事件 | 易学教程

Jquery链式编程

阅读更多关于 Jquery链式编程

// 链式编程是为了节省代码量，看起来更优雅。 $ ( this ) . css ( 'color' , 'red' ) . sibling ( ) . css ( 'color' , '' ) ; $ ( this ) . css ( ) ; // 返回的是调用者 $ ( this ) . slibilng ( ) ; // 返回我的兄弟姐们 //jq的操作方法： css(),hide(),show()，事件等等，会将调用者返回 //jq的筛选方法，会将筛选完的对象返回。非筛选方法（操作方法），会将调用者（jq对象）返回来源： CSDN 作者：陈善强链接： https://blog.csdn.net/chenshanqiang/article/details/103462377

JQuery页面随滚动条动态加载效果实现

阅读更多关于 JQuery页面随滚动条动态加载效果实现

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 有一个AJAX scollLoad效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其是浏览最新的数据，利用浏览器滚动条来加载，是很好的尝试…… 我试着用jquery来实现这个功能。先要得到滚动条的总长属性值：scrollHeight，还有滚动条当前位置属性值：scrollTop。然后通过计算，若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为<div id=”mypage”></div>，该元素overflow样式为scroll，也就是元素中的内容溢出元素指定高度时启用滚动条。利用jquery的load方法为元素加载一个已经存在的文件，我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。 <script type=”text/javascript” src=” jquery.js “>// 加载jquery库</script> <script type=”text/javascript”> var hght=0;

Jquery浅克隆与深克隆

阅读更多关于 Jquery浅克隆与深克隆

克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆 .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。 clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(true)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了 <div></div> JavaScript部分 $("div").on('click', function() {//执行操作}) //clone处理一 $("div").clone() //只克隆了结构，事件丢失 //clone处理二 $("div").clone(true) //结构、事件与数据都克隆使用上就是这样简单，使用克隆的我们需要额外知道的细节： clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上 clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享

js语法

阅读更多关于 js语法

js选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js选择器</title> </head> <body> <div id="d" class="box"></div> <input type="text" id="d2" class="box" /> <h3 class="h3"></h3> </body> <script> // 1、标签id名会存放到页面的名称空间中，在js内可以直接访问该名称空间，如果有同id的，多个对象都会获取，放在一个列表里 // console.log(d); // 2、getElement系列 // 根据id获取，如果有同id，会有阻隔机制，只会获取第一个 var d1 = document.getElementById('d'); console.log(d1); var d2 = document.getElementById('d2'); console.log(d2); // 根据类名获取，可以有相同类名，会全部获取放在列表里 var boxs = document.getElementsByClassName('box'); console.log(boxs[0]); // 不管结果是几个(0~n)，都用列表来存放查询的结果 let h3 = document

Jquery动画，排队与并发

阅读更多关于 Jquery动画，排队与并发

一、事件绑定 1.鼠标事件：模拟触发什么是模拟触发？虽然没有点在按钮上，也可以触发按钮的事件处理函数。如何：$元素.trigger("事件名") 即使没有点在指定的元素上，也能触发该元素上绑定的事件处理函数。简写：如果要触发的事件，刚好是21种简写中的一种，可使用事件处理函数一个函数两用的方法触发： $元素.事件名() 强调：()中不要加处理函数二、动画简单动画：写死的固定不变的三种动画效果： 1.显示隐藏：.show()、.hide()、.toggle() 问题：.show() 、.hide()不加参数时，默认使用display:block和display:none控制瞬间显示隐藏。如果想有动画效果，必须加持续事件参数。 2.上滑下滑: .slideUp()、.slideDown()、.slideToggle() 3.淡入淡出：.fadeIn()、.fadeOut()、.fadeToggle() 简单动画所有函数的共性问题： 1.效果是写死的！几乎不可维护! 2.用js定时器和DOM操作模拟的动画效果-----效率极低但是，.show()、.hide()、.toggle()在不加参数时，代替的是.css("display","block/none"), 这个是没有效率和可维护性损失的。所以，这三个不加参数的情况，还是非常推荐使用的。 2.万能动画：什么是

jQuery基础之事件

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

jQuery基础之事件方法，如下图：代码实现： 1 <script src="JS/jquery-1.12.4.min.js"></script> 2 <script> 3 $(function(){ 4 var $btn = $('#btn1'); 5 // 鼠标点击事件 6 $btn.click(function(){ 7 alert('使用JS实现鼠标单击事件！'); 8 }); 9 // 元素获取焦点事件 10 var $txt = $('#txt1'); 11 $txt.focus(function(){ 12 $txt.val('获取到焦点。') 13 }); 14 // 元素失去焦点事件 15 $txt.blur(function(){ 16 $txt.val('元素失去焦点。') 17 }); 18 // 鼠标进入范围mouseover()事件 19 var $div = $('.div1'); 20 $div.mouseover(function(){ 21 // this表示当前对象 22 $(this).css({ 23 'width':'200px', 24 'height':'200px', 25 'background':'red' 26 }); 27 }); 28 // 鼠标离开范围mouseout()事件 29 $div.mouseout

jQuery图片延迟加载插件jQuery.lazyload

阅读更多关于 jQuery图片延迟加载插件jQuery.lazyload

原帖地址：点我演示地址：点我插件描述：jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度。在某些情况下，它也能帮助减轻服务器负载。使用方法引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></script> <script src="jquery.lazyload.js?v=1.9.1"></script> html图片调用方法为图片加入样式lazy 图片路径引用方法用data-original <img class="lazy" data-original="img/bmw_m1_hood.jpg"> <img class="lazy" data-original="img/bmw_m1_side.jpg"> <img class="lazy" data-original="img/viper1.jpg"> <img class="lazy" data-original="img/viper_corner.jpg"> <img class="lazy" data-original="img/bmw_m3_gt.jpg"> <img class="lazy" data-original="img/corvette_pitstop.jpg">

jQuery的入口函数

阅读更多关于 jQuery的入口函数

jQuery中常见的两种入口函数： // 第一种: 简单易用。 *** $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现（ready：准备，dom准备好了） $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); 总结：等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。相当于原生 js 中的 DOMContentLoaded。不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。更推荐使用第一种方式。来源： CSDN 作者：陈善强链接： https://blog.csdn.net/chenshanqiang/article/details/103461080

jQuery资料之常用事件

阅读更多关于 jQuery资料之常用事件

◆ hover事件：语法： hover([over,]out) // 其中over和out为两个函数 over:鼠标移到元素上要触发的函数（相当于mouseenter） out:鼠标移出元素要触发的函数（相当于mouseleave）如果只写一个函数，则鼠标经过和离开都会触发它来源： CSDN 作者：宅羽链接： https://blog.csdn.net/sky6even/article/details/103460730

jquery pageX属性语法

阅读更多关于 jquery pageX属性语法

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/11961959.html

订阅 jquery事件