jquery事件

摘要： jQuery的.bind()、.live()和.delegate()之间的区别并非总是那么明显的，然而，如果我们对所有的不同之处都有清晰的理解的话，那么这将会有助于我们编写出更加简洁的代码，以及防止在交互应用中弹出错误。 $( 'a' ).bind( 'click' , function () { alert( "That tickles!" ) }); 　　基本要素 DOM树 　　首先，可视化一个HMTL文档的DOM树是很有帮助的。一个简单的HTML页面看起来就像是这个样子： 　　事件冒泡(又称事件传播) 　　当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。 　　 　　因此一个单击操作会触发alert函数的执行。 　　click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。 　　在操纵DOM的语境中，document是根节点。 　　现在我们可以较容易地说明.bind()、.live()和.delegate()的不同之处了。 .bind() $( 'a' ).bind( 'click' , function () { alert( "That tickles!" ) }); 　　这是最简单的绑定方法了。JQuery扫描文档找出所有的$(

本篇文章介绍了，关于jQuery新的事件绑定机制on()的使用技巧。需要的朋友参考下 今天浏览jQuery的deprecated列表，发现live()和die()在里面了，赶紧看了一下，发现从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。 on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。 selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。 替换bind() 当第二个参数'selector'为null时，on()和bind()其实在用法上基本上没有任何区别了，所以我们可以认为on()只是比bind()多了一个可选的'selector'参数，所以on(

前段时间完成了公司一个产品的 HTML5 触屏版，开发中使用了 Zepto 这个著名的 DOM 操作库。 为什么不是 jQuery 呢？因为 jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的。 而 Zepto 只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery ，所以学习成本也很低。 但是在开发过程中，我发现 Zepto 还远未成熟，其中包含了一些或大或小的“坑”，与 jQuery 的差距还是很明显的，所以写篇文章记录下，希望对后来者有帮助 注意，本文撰写时 Zepto 版本为 1.0 正式版 从哪里下载 Zepto 这个问题看起来很蠢，从官网下载不就行了嘛！可是你有没有发现下载链接上面有行小字呢？ There are more modules; a list of all modules is available in the README. 在这个 README 里面你会惊奇地发现，Zepto 源码中有 14 个模块，而官网提供的标准版里面只有 7 个模块！而且居然不包含对移动端开发非常重要的 touch 模块（提供对触摸事件的支持）！ 所以我的建议是，不要从官网下载，而是从 Github 下载了源代码之后自己 Build 一个版本，这样你可以自行挑选适合的模块

网页编程之jQuery常用知识点整理 备注：本文的知识点针对后端编程人员的需求进行整理，所涉知识较为基础。 1.1 jQuery是什么 jQuery是一个JavaScript代码库，极大的简化了JavaScript编程。 1.2 如何在网页中添加jQuery 从jquery.com下载jQuery库 从CDN中载入jQuery jQuery有两个版本 Production version ：用于实际的网站中，精简了注释和源码，体积小。 Development version：用于测试和开发，包含注释和源码，体积大。 jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 script标签引用它： < head > < script src = " jquery-1.10.2.min.js " > </ script > </ head > 1.3 jQuery语法 通过jQuery语法，可以查询HTML元素，并对其执行一些操作。 1.3.1 基础语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() 美元符号定义jquery 选择符（selector）用于查询和查找HTML元素 通过action（）方法对元素进行操作，这里的action（）方法是泛指，并非实际方法。 1.3.2

jQuery特殊属性操作 val方法： val方法用于设置和获取表单元素的值，例如input、textarea的值 $("#name").val() html方法与text方法： $(“div”).html()----------$(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 width方法与height方法： 设置或者获取高度 $(“img”).height()--------获取网页的可视区宽高 $(window).width() $(window).height() scrollTop与scrollLeft： 设置或者获取垂直滚动条的位置 $(window).scrollTop()--------$(window).scrollLeft() offset方法与position方法： offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。 $(selector).offset()=======$(selector).position() jQuery事件机制： jQuery事件发展历程：简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定 简单事件注册 ： click(handler) 单击事件 mouseenter

jQuery特殊属性操作 1.val()方法 val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数，则返回被选元素的当前值。 $(selector).val(value) 获取 实例 $("input:text").val() 实例中，只返回了第一个input的值，是因为jQuery中有隐式迭代：设置操作时，会给jq中所有对象都设置成相同的值；获取的时候，只会返回第一个元素对应的值 改变或设置文本域的值 实例1 实例2 $(":text").val("Hello Kitty"); 清空 $("#name").val(""); 2.html()和text()方法 html()相当于innerHtml()：内容加标签 html() 方法返回或设置被选元素的内容 获取元素内容 $("p").html() 修改元素内容 $("p").html("Hello <b>world!</b>");//返回Hello world!（world!加粗） text()相当于innerText()：内容，innerText有兼容性 text() 方法方法设置或返回被选元素的文本内容。 获取文本内容 $("p").text(); 设置文本内容 $("p").text("Hello <b>world</b>!");/

第三天 1. jQuery特殊属性操作 1.1. val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); 操作value一般用val方法 例1： <input type="button" value="hehe1" id="btn"> <input type="text" id="txt"> console.log($("#btn").val()); console.log($("#btn").attr("value")); $("#txt").val("haha"); 例2：京东搜索输入框聚焦和失去焦点 <input type="text" id="txt" value="小仙女"> $(function(){ $("#txt").focus(function(){ if($(this).val() === "小仙女"){ $(this).val(""); } }) $("#txt").blur(function(){ if($(this).val() === ""){ $(this).val("小仙女"); } }) }) 1.2. html方法与text方法 html方法相当于innerHTML text方法相当于innerText

目录 jQuery特殊属性操作 val方法 html方法与text方法 width方法与height方法 scrollTop与scrollLeft offset方法与position方法 jQuery事件机制 jQuery事件发展历程(了解) on注册事件 ​事件解绑 触发事件 jQuery事件对象 jQuery补充知识点 链式编程 each方法 多库共存 jQuery插件 常用插件 jquery.color.js jquery.lazyload.js jquery.ui.js插件 制作jquery插件 jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() ​ //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串

jQuery特殊属性操作 js获取文本内容： 普通标签的文本内容：innerText textContent innerHTML 表单元素的文本内容：value jquery获取文本内容： 普通标签：text() html() 表单标签：val() val(): 获取值：对象.val() 设置值：对象.val("值") html方法与text方法 html方法相当于innerHTML text方法相当于innerText width方法与height方法 对象.css("width")获取的是字符串 对象.width() 获取的是数字 对象.innerWidth() width+padding 对象.outerWidth() width+padding+border 对象.outerWidth(true) width+padding+border+margin scrollTop与scrollLeft 设置或者获取垂直滚动条的位置 empty()清空节点 remove ()删除节点 jQuery事件机制 第一个阶段：简单事件绑定 注册简单事件，缺陷：一次只能注册一个事件 第二阶段：bind() 缺点：新增的元素不能使用事件 第三个阶段： delegate() 委托 缺点:只能注册委托事件,不能给自己注册事件 第一个参数：选择器：事件由谁来执行 第二个参数：事件的类型 第三个参数

jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $ ( "#name" ) . val ( “张三” ) ; //获取值 $ ( "#name" ) . val ( ) ; 【案例：京东搜索.html】 $(function () { //console.log($("#btn").val()); //$("#btn").val("哈哈"); //console.log($("#btn").attr("value")); //$("#txt").val("123"); $("#txt").focus(function () { //如果是默认值，清空内容 if($(this).val() === "洋酒"){ $(this).val(""); } }); $("#txt").blur(function () { if($(this).val() === ""){ $(this).val("洋酒"); } }); }); html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $ ( “div” ) . html ( “ < span > 这是一段内容 < / span > ” ) ; //获取内容 $ ( “div” ) . html ( )