jquery事件

jquery事件绑定与事件委托

柔情痞子 提交于 2020-04-02 09:26:04
//事件绑定简写形式 $(".div2 button").click(function () { $(".div1").scrollTop(0) }) //写全了方式 $('.div2 button').bind('click', function () { }) //解除绑定 $('.div2 button').unbind('click', function () { }) //事件委托 注意三个参数的顺序,第一个是绑定事件,第二个是标签,第三个是方法 /* $('ul').on('click','li', function () { alert(999) }); $('button').click(function () { var $ele=$('<li></li>'); var len=$('ul li').length; console.log(333) $ele.html((len+1)+111); $('ul').append($ele); }) //页面载入 第一种方法 $(document).ready(function () {//等整个document执行完成之后,在执行这些代码 $('ul li').html(5); }); //页面载入 第二种方法 $(function () { }); 来源: https://www.cnblogs.com

第1章 jQuery入门

早过忘川 提交于 2020-04-01 07:25:30
学习要点: 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及运行 jQuery 一.什么是 jQuery jQuery 是一个 JavaScript 库,它通过封装原生的 JavaScript 函数得到一整套定义好的方法。它的作者是 John Resig ,于 2006 年创建的一个开源项目,随着越来越多开发者的加入, jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。 主旨:以更少的代码、实现更多的功能 二.学习 jQuery 的条件 jQuery 是 JavaScript 库,所以 jQuery 在使用上要比原生的 JavaScript 要简单,但是对于网页编程来说,有些通用的基础知识是必备的: 1.XHTML 或 HTML5 (含 CSS ,网页必备的基础技术, XHTML 已完结 90 课); 2.JavaScript (虽然 jQuery 使用比 JavaScript 简单,但各种语法来自 JavaScript ,只要掌握已出课程的第一季 149 课即可,并不需要完全精通,只要理解语法和项目中简单的用法即可。);

第 1 章 jQuery 入门

[亡魂溺海] 提交于 2020-04-01 07:24:31
学习要点: 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及运行 jQuery 学习网址:https://jquery.com/ 一.什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方 法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入, jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码, 完成更多复杂而困难的功能,从而得到了开发者的青睐。 二.学习jQuery的条件 jQuery是JavaScript库,所以jQuery在使用上要比原生的JavaScript要简单,但是对于 网页编程来说,有些通用的基础知识是必备的: 1.XHTML或HTML5(含CSS,网页必备的基础技术,XHTML已完结90课); 2.JavaScript(虽然jQuery使用比JavaScript简单,但各种语法来自JavaScript,只要掌 握已出课程的第一季149课即可,并不需要完全精通,只要理解语法和项目中简单的用法即 可。); 3.服务器语言如:PHP(jQuery属于前端技术

ExtJS与JQuery对照

痞子三分冷 提交于 2020-04-01 07:05:15
首先在介绍ExtJS和JQuery,然后进行比较 一个、什么是ExtJS? 1、ExtJS能够用来开发RIA也即富 client 的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与 后台 技术无关的前端 ajax框架 。因此。能够把ExtJS用在 .Net 、 Java 、 Php 等各种开发语言开发的应用中。 ExtJs最開始基于YUI技术。由开发者JackSlocum开发。通过參考JavaSwing等机制来组织可视化组件,不管从UI界面上CSS样式的应用,到数据解析上的 异常处理 ,都可算是一款不可多得的JavaScript client 技术的精品。 2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和 Java平台 上Swing两者,并为开发人员屏蔽了大量跨 浏览器 方面的处理。相对来说,EXT要比开发人员直接针对DOM、W3C对象模型开发UI组件轻松。 二、什么是JQuery? jQuery是一个兼容多浏览器的 javascript 框架,核心理念是write less,do more(写得更少,做得很多其它)。jQuery在2006年1月由美国人 John Resig 在纽约的 barcamp 公布。吸引了来自世界各地的众多JavaScript高手增加,由Dave Methvin率领团队进行开发。现在。 jQuery

jquery回车能够提交表单

删除回忆录丶 提交于 2020-03-30 21:06:42
jquery 键盘事件参考如下: 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3、keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 实际例表单如下: <form name="loginform" id="loginform" method="post"> <div> <p>用户名:<input type="text" name="username" /></p> <p>密码:<input type="password" name="password" /></p> <p><input type="button" value="" class="log_btn" /></p> </div> </form> juqery实现方法: $("#loginform").keydown(function(e){ var e = e || event, keycode = e.which || e.keyCode; if (keycode==13) { $(".log_btn").trigger("click"); } }); 在这里,我们选择使用的是keydown方法,然后监听了表单下的键盘事件

jQuery 事件方法

走远了吗. 提交于 2020-03-30 16:11:35
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。 触发实例: $("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件。 绑定实例: $("button#demo").click(function(){$("img").hide()}) 上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change() 触发、或将函数绑定到指定元素的 change 事件 click() 触发、或将函数绑定到指定元素的 click 事件 dblclick() 触发、或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序。 error() 触发、或将函数绑定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。 event.pageX 相对于文档左边缘的鼠标位置。 event.pageY 相对于文档上边缘的鼠标位置。

jquery获取dom元素身上的绑定事件的问题

一个人想着一个人 提交于 2020-03-30 16:07:07
在 jQuery 1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data('events') jQuery 1.8.0版本开始,jQuery突然不支持这样使用了,而是改到了一个叫'_data'的函数功能上了,即,1.8.0及以后的版本你可以这么用: $._data(domObj,'events');//注意,这里不能像$('selector')._data('events')这样用了。 /*例如可以写成*/ $._data($('#box').get(0),'events') // 这里是获取id为box的dom元素身上绑定的所有事件 $._data($('#box').get(0),'events')['click']// 这里是获取id为box的dom元素身上绑定的click事件 /*或写成*/ $._data($('#box').get(0)).events /*或还可以写成*/ $.cache[$('#box').get(0)[$.expando]].events 兼容兼容各个jQuery版本的方式,这样获取即可: var eventsData = $.data(domObj,'events') || $._data(domObj,'events');/

当jquery添加新元素后的绑定事件的处理

余生颓废 提交于 2020-03-30 16:04:48
Java交流学习教室 copy Bookmark http://space.itpub.net/14734416 博客 图片 商品 下载 收藏 影音 圈子 好友 论坛 留言 空间管理 您的位置: ITPUB个人空间 » Java交流学习教室 » 日志 汇聚你我之力...... jquery 新建的元素事件绑定问题(上) 上一篇 / 下一篇 2008-10-20 21:40:00 / 个人分类: jQuery 查看( 1565 ) / 评论( 8 ) / 评分( 30 / 5 ) demo: http://www.cnjquery.com/demo/jquery页面加载完成后元素绑定事件.html 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是 在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不一样,css只要设定好了样式,不论是原来就有的还是新添加的,都有一样的表现。而事件监听不是,你必须给每一个元素单独绑定事件。 常见的例子是处理表格的时候。每行行末有个删除按钮,点了这个能够删除这一行。 < table > < tbody > < tr > < td > 这行原来就有 </ td > < td >< button class = " del " > 删除 </ button ></ td > </ tr > < tr

jquery load 事件用法

此生再无相见时 提交于 2020-03-30 15:52:23
如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象和图像。如果绑定在元素上,则当元素的内容加载完毕后触发。 注意: 只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以 不要 在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。因此,使用load方法时尽量把load方法写在页面顶部。 调用load方法的完整格式是: load( url, [data], [callback] ), 其中: url :是指要导入文件的地址。 data :可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。 callback :可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。 一:如何使用data 1.加载一个php文件,该php文件不含传递参数 $("#myID").load("test.php"); //在id为#myID的元素里导入test.php运行后的结果 2. 加载一个php文件,该php文件含有一个传递参数 $("#myID").load("test.php",{"name" : "Adam"}); /

jquery篇

徘徊边缘 提交于 2020-03-30 12:42:37
jQuery 快速、简洁的 JavaScript 框架,设计宗旨: write Less, Do More 。 作用:简化原生 js 的语法,解决浏览器兼容性问题。 引入 jQuery 可以直接引入在线地址,也可以在 jQuery [官方网站][1]上下载,然后使用 src 属性引入: [1]: https://jquery.com/ 基础语法: $(selector).action() $ : jQuery 对象 selector :选择器,用于定位 HTML 元素 action() :方法,用于对元素进行操作 文档就绪函数 //HTML文档加载完成后,再开始执行该方法里面的函数 $(document).ready(function(){ //代码段 }) jQuery 选择器 jQuery 选择器相比原生 javascript 功能更加强大 元素选择器 $('#id') : id 选择器,类似 document.getElementById("#id") $('.class') : class 选择器,类似 document.getElementsByClassName('.class') $('tag') : tag 选择器,类似 document.getElementsByTagName('tag') $('tag.class') :父子选择器 属性选择器 $("[attr