jquery事件 | 易学教程

jQuery2.x源码解析(缓存篇)

阅读更多关于 jQuery2.x源码解析(缓存篇)

jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 缓存是jQuery中的又一核心设计，jQuery自身的很多东西都依赖于缓存，比如事件、一些中间变量、动画等。同时他还为用户提供接口了使用缓存的接口，方便用户在元素节点上保存自己的数据，并且帮助用户解决直接把数据保存到DOM元素是可能引起的内存泄漏、命名冲突等问题。同时，html5提出了一种通过属性缓存元素数据的功能，就是 data-*属性，他可以以字符串的形式保存数据，并且不会和元素固有属性冲突。jQuery的缓存提供了访问data-*的接口，与html5标准结合更加紧密，更加规范。提问：jQuery不同版本的缓存实现原理是什么？答：jQuery1.x与jQuery2.x、jQuery3.x是不同的。 jQuery1.x系列中，需要兼容ie6、ie7等早期的浏览器，在ie6、ie7这样的浏览器中，根据艾伦的博客，我们可以知道DOM元素与js对象相互引用，是会引起浏览器的内存泄漏问题。所以 jQuery1.x中，最大的问题是要防止在ie6、ie7浏览器上出现内存泄漏。为了避免DOM元素与js对象相互引用而造成的内存泄漏，jQuery必须从设计解决对象循环引用的问题。所以jQuery1.x将需要缓存到元素上的数据

jQuery 结构分析

阅读更多关于 jQuery 结构分析

jquery核心转自 http://www.iteye.com/topic/783260 (function( window, undefined ) { // 构造jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // 工具函数 Utilities // 异步队列 Deferred // 浏览器测试 Support // 数据缓存 Data // 队列 queue // 属性操作 Attribute // 事件处理 Event // 选择器 Sizzle // DOM遍历 // DOM操作 // CSS操作 // 异步请求 Ajax // 动画 FX // 坐标和大小 window.jQuery = window.$ = jQuery; })(window); 一构造jquery. 相对于其它库里传统的构造对象方法. jquery提供了一种截然不同的方法. 它选择创造一个全新的奇异世界. 首先所有的jquery代码被一个自动执行的闭包包裹起来, 只在后面暴露$和jQuery这2个变量给外界尽量避开变量冲突. Java代码 (function(window, undefined){ ….. })

JQuery学习笔记之事件绑定和切换(六)

阅读更多关于 JQuery学习笔记之事件绑定和切换(六)

概述 (一)jquery标准的绑定方式 (二)on绑定事件/off解除绑定 (三)事件切换：toggle (一)jquery标准的绑定方式语法：jq对象.事件方法(回调函数)；注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为表单对象.submit();//让表单提交代码： < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < script src = "../js/jquery-3.3.1.min.js" type = "text/javascript" charset = "utf-8" > < / script > < script type = "text/javascript" > $ ( function ( ) { //（一）获取name对象，绑定click事件 // $("#name").click(function () { // alert("我被点击了。。。") // }); //（二）给name绑定鼠标移动到元素之上的事件，再绑定一个鼠标移出事件 // $("#name").mouseover(function () { // alert("鼠标来了。。。"); // }); // $("#name")

js 有用的代码

阅读更多关于 js 有用的代码

1. 如何创建嵌套的过滤器： // 允许你减少集合中的匹配元素的过滤器， // 只剩下那些与给定的选择器匹配的部分。在这种情况下， // 查询删除了任何没（ :not ）有（ :has ） // 包含 class 为“ selected ”（ .selected ）的子节点。 .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("div#container1 div.item"); // 现在你可以继续使用这些 jQuery 对象来工作了。例如， // 基于复选框裁剪“ keep list ”，复选框的名称 // 符合 < DIV >class names: $(formToLookAt + " input:checked").each(function() { keepList = keepList.filter("." + $(this).attr("name")); }); < /DIV> 3. 任何使用 has() 来检查某个元素是否包含某个类或是元素： //jQuery 1.4.* 包含了对这一 has 方法的支持。该方法找出 // 某个元素是否包含了其他另一个元素类或是其他任何的 // 你正在查找并要在其之上进行操作的东东。 $(

jQuery元素操作

阅读更多关于 jQuery元素操作

1.1 元素操作 1.1.1 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别：返回值不同，.height()方法返回的是数字类型(20)，.css(“height”)返回的是字符串类型(20px)，因此.height()方法常用在参与数学计算的时候 1.1.2 坐标值 $(“div”).offset(); // 获取或设置坐标值设置值后变成相对定位 $(“div”).position(); // 获取坐标值子绝父相只能读取不能设置 1.1.3 滚动条（滚动事件） $(“div”).scrollTop(); // 相对于滚动条顶部的偏移 $(“div”).scrolllLeft(); // 相对于滚动条左部的偏移案例：两次跟随的广告案例：防腾讯固定导航栏 1.2 jQuery事件 1.2.1 绑定 click/mouseenter/blur/keyup // 绑定事件 bind：$node.bind(“click”,function(){}); // 触发一次 one : $node.one(“click”,function(){}); delegate : $node.delegate(“p”,”click”,function(){}); on：

进击的JQuery

阅读更多关于进击的JQuery

进击的 JQuery 乱七八糟的关系呀子集们: children([expr]) 父集: parent([expr]) 父集们: parents([expr]) 下一个兄弟: next([expr]) 下面所有的兄弟: nextAll([expr]) 上一个兄弟: prev([expr]) 上面所有的兄弟: prevAll([expr]) 兄弟们: siblings([expr]) 索引匹配 :eq(index) 匹配一个给定索引值的元素 :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有小于给定索引值的元素 :even 匹配所有索引值为偶数的元素，从 0 开始计数（即索引值0、2、4...） :odd 匹配所有索引值为奇数的元素，从 0 开始计数（即索引值1、3、5...）获取文本 html() 返回标签 text() 返回文本 val() 返回value 属性操作 attr(name|pro|key,val|fn) 添加属性 $('a').attr({ 'href':'https://www.baidu.com' }); 查询属性 $('a').attr('href') removeAttr(name) prop(n|p|k,v|f) removeProp(name) 小技巧 && 解决加载过程中页面样式变化导致闪烁的问题 <body

[转帖]Jquery 提交方法

阅读更多关于 [转帖]Jquery 提交方法

[转帖] 项目开始了几天了，项目中我用到了自学了的jQuery，但是对jQuery的ajax方法不太熟，因为它是基于Httprequest实现的，也觉得插件AjaxPro能更好的实现ajax异步调用，ajaxPro调用ajax可以直接传datatable、ilist等对象，能够方便的实现功能。不过昨天下午发现了问题，IE里，当jQuery、AjaxPro同时使用时，出现了BUG，只要注册了AjaxPro的页面，jQuery的事件就会报错，我测试了很多次，问题是出现在AjaxPro的core.ashx文件里，网上找了很多资料没有什么结果，但经过了我的测试我断定这是BUG，他们内部的js起了冲突。这是core.ashx文件里js错误截图，报出的错误为 “无法得到 type 属性。参数无效” 或者 “对象不支持此操作” 但是在Firefox里，运行没问题，但会也有点小问题，按钮触发ajax事件，触发完了，按钮就变成文本框了。没办法，jQuery里不能用事件，让我觉得很郁闷，今天我项目没怎么做，专门去学学jQuery里的ajax，一般的调用我还懂，比如dataType为xml、html的还能马马虎虎，今天看了点资料，找到了好东西，其实jQuery调用集合有个很好的办法-- json，开始我也试过这样的测试，但是由于时间原因一直没通过，呵呵，今天晚上呆公司好好找了找，不错，先记下。。

jQuery第一章

阅读更多关于 jQuery第一章

一、jQuery的优势 1.轻量级：压缩之后大小只有30KB左右。 2.强大的选择器：jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器。 3.出色的DOM操作的封装：jQuery封装了大量常用的DOM操作，是开发者在编写DOM操作相关程序的时候能够得心应手。 4.可靠的事件处理机制：jQuery事件处理机制在处理事件绑定的时候相当可靠。 5.完善的Ajax：jQuery将所有的Ajax操作封装在一个函数$.ajax()里面，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 6.不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝不污染其他对象。 7.出色的浏览器兼容性：jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。 8.链式操作方式：jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。 9.隐式迭代：当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。 10.行为层与结构层分离：开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。

jQuery补充及Django基本使用_Day18

阅读更多关于 jQuery补充及Django基本使用_Day18

jQuery扩展 onclick 1. onclick属性的正确写法是onclick="函数名()",它是带括号的，而不是onclick="函数名" 2.如果onclick属性没有传入this对象，则在函数定义中不能使用$(this),否则解释器会因为找不到该对象而停止运行。绑定事件在标签上绑定找到标签绑定 1 $('.title').click(function(){ var v = $(this).text(); console.log(v) }) 2 $('.title').bind('click',function(){ var v = $(this).text(); console.log(v) }) 上面两种完全一致 3.委托 $('.title').delegate('.title','click',function(){ var v = $(this).text(); console.log(v) }) 4. $('.c1').on('.title','click',function()){ var v = $(this).text(); console.log(v) } 四种结果一样 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title>

jquery

阅读更多关于 jquery

jQuery对象和javascript对象间的转换 // js对象转换为jq对象 var tdiv = document.getElementById("tDiv"); $(tdiv).html("nihao"); // jq对象转换为 $("#tDiv")[0].innerHTML="java"; $("#tDiv")get(0).innerHTML="java"; 使用jQuery操作元素的属性使用css方法 # 使用:jq对象.css(属性参数); * $("div").css("background", "red"); // 单个参数时,属性和属性值用逗号隔开 * $("div").css({"background":"red","border":"2px solid blue"}); // 多个参数时,使用键值对形式使用CSS类的方法 # 添加属性:addClass()方法 * 用法:jq对象.addClass(class类) * $("tbody tr:odd").addClass("odd"); // 将tbody标签内的奇数行添加样式类odd # 删除属性:removeClass()方法 * 用法:jq对象.removeClass(class类) * $("tbody tr:odd").removeClass("odd"); //

订阅 jquery事件