就是说它非常请求,大小在30kb左右;具有强大的选择器和dom操作的封装,可靠的事件处理机制,有完善的ajax,jquery将所有的ajax操作封装到函数``$.ajax()`中;具有丰富的插件,完善的文档...jquery安装,从jquery下载jquery库,二是从cdn中下载。...入口函数如下 window.onload = function(){ // 执行代码 } JavaScript的入口函数与jquery入口函数: jquery的入口函数是在HTML所有标签都加载后执行...注意:$(A).before(B)的操作,不是将B插入A前面,而是将A插入B前面 删除HTML元素 删除HTML元素一般使用jquery中的remove()和empty() remove()的作用就是从...当键盘被松开时发生keyup事件。
enter键 方法一:$ele.submit() submit 无参,只是绑定一个事件,在函数里可以实现其他的绑定事件 方法二:$ele.submit (handler(eventObject)) submit...的参数是函数(回调函数),文本被选中后会执行函数里的操作,如果里面含有this,this指向触发事件元素的对象 //回车键或者点击提交表单,禁止浏览器默认跳转: $('#target2').submit...注:如果要阻止浏览器的某些默认行为,可以传统的调用事件对象e.preventDefault()来处理;也可以在函数上返回false 12、jQuery键盘事件之keydown与keyup事件 keydown...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框,这时如果在keydown事件中输出文本框中的文本得到的是触发键盘事件前的文本,而keyup事件触发时整个键盘事件的操作已经完成...){}, mouseout:function(){} }) 将数据传递到处理程序 function greet( event ) { alert( "Hello " + event.data.name
AJAX Utilities 环境准备 在网页中使用 jQuery 可以使用以下方法: 从 jquery.com 下载 jQuery 库 从 CDN 中载入 jQuery, 如从 Google 中加载...> 入口函数 为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。...可以将 jQuery 代码位于一个 $(document).ready() 函数中 $(document).ready(function(){ // 执行代码 alert...: window.onload = function () { // 执行代码 } jQuery 入口函数与 JavaScript 入口函数的区别: jQuery 的入口函数是在 html 所有标签...鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus
jQuery基础教程之事件监听操作 一、事件监听方法 1.执行事件 $("p").click(); 2.监听事件 $("p").click(function(){...mouseleave 鼠标离开 touch 触摸事件 touchstart 触摸开始 touchmove 移动 touchend 触摸结束 键盘事件 keydown 键盘按下 keyup...窗口更改大小 scroll 滚动 三、回调函数 $("p").on("click", function(e){ $(this).html("我被点击"); console.log.../jquery.min.js"> $(".list").on("click",".item",function(e){...console.log(event.type) }) $(document).on("keypress keydown keyup
keyup([[data],fn]) $('p').keyup(fn); 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。...实例: // 解绑所有事件 $("p").unbind() // 将段落的click事件取消绑定 $("p").unbind( "click" ) // 删除特定函数的绑定,将函数作为第二个参数传入...实例: // 从p元素删除由 delegate() 方法添加的所有事件处理器: $("p").undelegate(); // 从p元素删除由 delegate() 方法添加的所有click事件处理器:...foo); 2.6.4 解绑on的事件 (off) 语法:off(events,[selector],[fn]) 如果一个简单的事件名称,比如提供"click",所有 这种类型的事件(包括直接和委派)从jQuery
--作用是 响应回来时 ajax引擎会调用回调函数 将数据返回 //回调函数将会被执行四次 xmlHttp.onreadystatechange = function(){ /...name="username" value="jack"/> submit...Jquery -- ajax(重点) Jquery:底层就是js 特性:兼容浏览器,api都是封装好的. Get方式: function sendGetAjax(){ //1.导入jquery的类库 //2.jquery...弹起) 使用keyup弹起事件 2.发送ajax,携带参数searchWord 3.编写servlet 4.回调函数中获得数据 将一根div显示,再往框里加数据
jQuery 1.3 新增该函数,从jQuery 1.7开始被标记为已过时,在jQuery 1.9中被移除,请使用on()函数来替代。请使用on()函数来替代。 5,die 同上。...从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。...以表单元素为例,使用trigger("submit")可以触发该表单绑定的submit事件,也会执行表单submit事件的默认行为——表单提交操作。...; return false; // 返回值为false,将阻止表单提交 } } ); 24,keydown 25,keypress 26,keyup keydown事件会在按下键盘按键时触发...keyup事件会在按下键盘按键并释放时触发。 例如:你一直按住A键,直到10秒钟后才释放,只会在释放按键的时候触发一次keyup事件。
自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能 实时验证:可以通过keyup和blur事件触发验证,而不仅仅在表单提交的时候验证.../js/jquery.validate.messages_cn.js"> 2.jQuery表单插件——Form: jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易的...jQuery Form有两个核心方法-ajaxForm()和ajaxSubmit,他们集合了从控制表单formSerialize()、fieldSerialize()、fieldValue()、clearForm...欢迎下次再来”的提示 核心方法 ajaxForm()和ajaxSubmit() 通过核心方法ajaxForm(),能很容易地将表单升级为Ajax提交方式 $("#myForm").ajaxForm(function...address',responseXML).text(); $("#xmlOut").html(name+" "+address); } (3)当dataType属性被设置为json时,回调函数的第一个参数是从服务器返回的
常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter...keyup focus scroll mouseleave blur unload hover jQuery 事件方法语法 在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery...您可以通过一个事件函数实现: $("p").click(function(){ // 动作触发后执行的代码!!...}); ---- 常用的 jQuery 事件方法 $(document).ready() $(document).ready() 方法允许我们在文档完全加载完后执行函数。...该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。...jQuery允许将所有操作连接在一起,以链条的形式写出来,比如: 1 $('div').find('h3').eq(2).html('Hello'); 我们可以这样拆封开来,就是下面这样: 1 $...它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。...9 .keydown() 按下键盘(长时间按键,只返回一个事件) 10 .keypress() 按下键盘(长时间按键,将返回多个事件) 11 .keyup() 松开键盘 12 .load...$('p').fadeOut(300, function(){$(this).remove(); }); 更复杂的特效,可以用.animate()自定义。
change:当元素改变时运行脚本 submit:当提交表单时运行脚本 keydown:当按下按键时运行脚本 keypress:当按下并松开按键时运行脚本 keyup:当松开按键时运行脚本...(selector).first() – 将匹配元素集合缩减为集合中的第一个元素。 (selector).last() – 将匹配元素集合缩减为集合中的最后一个元素。...(selector).each() 对对象进行迭代,为每个元素执行函数 (selector).toArray() 以数组的形式返回 jQuery 选择器匹配的元素 (selector).text()...(selector).clone() – 创建匹配元素集合的副本 (selector).load() – 从服务器加载数据,然后把返回到 HTML 放入匹配元素 jQuery对CSS的操作 (selector...() – 对被选元素进行添加/删除类的切换操作 (selector).css() – 设置或返回样式属性 jQuery Ajax 操作函数 .ajax() – 执行Ajax异步请求 .get() –
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口) submit([[data],fn]) $("form").submit(); 当提交表单时,会发生 submit 事件。...keyup([[data],fn]) $('p').keyup(fn); 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。...// 3、可以接受一个dom对象,将dom对象转换 jQuery包装对象 // 4、可以接受一个html标签字符串,创建成jQuery包装对象 // On 替代delegate...实例: // 解绑所有事件 $("p").unbind() // 将段落的click事件取消绑定 $("p").unbind( "click" ) // 删除特定函数的绑定,将函数作为第二个参数传入
1 把所有 p 元素的背景颜色更改为红色: 2 $("p").css("background-color","red"); jQuery选择器一览: 选择器 实例 选取 * $("*") 所有元素 #id...press 事件 keyup() 触发、或将函数绑定到指定元素的 key up 事件 live() 为当前或未来的匹配元素添加一个或多个事件处理器 load() 触发、或将函数绑定到指定元素的 load...select() 触发、或将函数绑定到指定元素的 select 事件 submit() 触发、或将函数绑定到指定元素的 submit 事件 toggle() 绑定两个或多个事件处理器函数,当发生轮流的...,现在或将来 unload() 触发、或将函数绑定到指定元素的 unload 事件 jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数....last() 将匹配元素集合缩减为集合中的最后一个元素。 .map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
触发、或将函数绑定到指定元素的 key press 事件 keyup() 触发、或将函数绑定到指定元素的 key up 事件 live() 触发、或将函数绑定到指定元素的...scroll 事件 select() 触发、或将函数绑定到指定元素的 select 事件 submit() 触发、或将函数绑定到指定元素的 submit 事件...undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来 unload() 触发、或将函数绑定到指定元素的 unload 事件 jQuery 效果函数...jQuery 队列控制函数 函数 描述 .clearQueue() 从队列中删除所有未运行的项目。....dequeue() 从队列最前端移除一个队列函数,并执行它。 jQuery.dequeue() 从队列最前端移除一个队列函数,并执行它。
jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行...keydown 和 keyup 事件组合示例: 函数的参数对象)来迭代数字索引,从0到length-1.其他对象通过其属性名进行迭代。....each() 方法用来迭代 jQuery 对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。...多用于插件开发者向 jQuery 中添加新函数时使用。 示例: jQuery.extend({ min:function(a, b){return a < b ?
我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从手册中找到具体的写法。...使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。...$.extend() 将多个对象,合并到第一个对象。 $.makeArray() 将对象转化为数组。 $.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。....keydown() 按下键盘(长时间按键,只返回一个事件) .keypress() 按下键盘(长时间按键,将返回多个事件) .keyup() 松开键盘 .load() 元素加载完毕...$('p').fadeOut(300, function() { $(this).remove(); }); 更复杂的特效,可以用.animate()自定义。
jQuery 是一个非常实用且实用的库,但随着浏览器对 ES6 的广泛支持(截至撰写本文时超过 96%),现在可能是时候从 jQuery 过渡到原生 JavaScript 了。...我最近从我的博客中移除了 jQuery,并发现自己不断地在谷歌上搜索一些模式。...为了节省大家的时间,我编写了这个实用的参考指南,列出了一些最常见的 jQuery 模式及其在 JavaScript 中的等价物。我们将涵盖如何从这些概念和函数迁移到纯 JavaScript。...// jQuery // 选择 .box 并将文本颜色更改为 #000 $(".box").css("color", "#000"); // JavaScript // 选择第一个 .box 并将文本颜色更改为...// jQuery // 隐藏和显示元素 $(".box").hide(); $(".box").show(); // JavaScript // 通过将 "display" 更改为 "none" 和
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。...(function(){...}) keydown和keyup事件组合示例: 函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。....each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。...多用于插件开发者向 jQuery 中添加新函数时使用。 示例: jQuery.extend({ min:function(a, b){return a < b ?
jQuery(selector).action(); selector选择器 比 HTML 5 Selector 和 CSS 3 Selector 更强大 action方法 将许多 JavaScript...(element1,element2).css({ 'color': 'red', 'display': 'block' }); //不需要像原生JS一样将属性名称改为大小写 width...相当与$(element selector); $(element).filter([selector]); //从初始结果中筛选,找自己。...//增加事件监听器 $(element).on('eventType1 eventType2 eventType3', handler); //顺带一提,有些元素是无法聚焦的,设置keydown或者keyup...); //ajax发送前执行的函数 $.ajaxSend(callback); //ajax开始时执行的函数 $.ajaxStart(callback); //ajax结束时执行的函数 $.ajaxStop
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。...示例:开关灯和模态框 CSS css("color","red")//DOM操作:tag.style.color="red" 示例: $("p").css("color", "red"); //将所有p...,必须等待着图片资源加载完成之后才能调用 jQuery的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数) 事件委托 事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。...数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。....each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数)。