比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等 演示代码 .../ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() /.... events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。...案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。2.点击的删除按钮,可以删除当前的微博留言。 ...代码实现 $(function () { // 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中 $
1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制,是开发人员抑郁操作优缺点如下: 优点: 操作简单,且不用担心事件覆盖等问题。...比如mouseover. mouseout. blur. focus. change. keydown. keyup. resize. scroll 等 演示代码 </div.../ triggerHandler(): 事件触发 2.1 事件处理 on() 绑定事件 因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate...; }); 在此之前有bind0, live0 delegate)等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。...("p").off() //解绑p元素所有事件处理程序 演示代码 ul> 我们都是好孩子 <li
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。 keyup([[data],fn]) $('p').keyup(fn); 当按钮被松开时,发生 keyup 事件。...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。...on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。...on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。on汇总了bind和live两种绑定事件的方式。可以支持一般的bind方法或者委托的方法。...再也不会被触发 foo 2.6.2 解绑live的事件(die) 语法: $dom.die(type, [fn]) 元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)
就不需要花费更多的时间来搜索 //你想要的元素。...还要记住的一点是, //针对于你的页面上的元素的操作越具体化, //就越能降低执行和搜索的时间。...$("ul > li").click(function () { var index = $(this).prevAll().length; //prevAll([expr]): 查找当前元素之前所有的同辈元素...: $('button.someClass').live('click', someFunction); //注意,在jQuery 1.4.2中,delegate和undelegate选项 //被引入代替...如何在jQuery中克隆一个元素: var cloned = $('#somediv').clone(); 在jQuery中如何测试某个元素是否可见 if($(element).is(':visible
绑定事件:bind()、on()、live()、delegate()、keyup(); 触发事件:trigger(‘keyup’)、keyup(); 解绑事件:unbind()、off()、die...,还有 on()、live()、one() 等 事件的绑定方法。...中的 bind()、live()、delegate()事件方法的区别,请查阅: http://www.php100.com/html/program/jquery/2013/0905/5993.html...动画 在Jquery 中,提供了一系列显示动画效果的方法,其中, show() ——— 方法控制元素的显示; hide() ———-方法控制元素的显示; toggle() ——-方法切换元素的可见状态...; fadeIn() ——-方法淡入; fadeOut() ——方法淡出; slideUp()——方法实现元素的收缩 slideDown()—方法实现元素的展开 ----
如何从一个未排序的集合中找出某个元素的索引号 $("ul > li").click(function () { var index = $(this).prevAll().length; });...如何为任何与选择器相匹配的元素设置事件处理程序: $('button.someClass').live('click', someFunction); //注意,在jQuery 1.4.2中,delegate...如何在一段时间之后自动隐藏或关闭元素(支持1.4版本): //这是1.3.2中我们使用setTimeout来实现的方式 setTimeout(function() { $('.mydiv').hide...在jQuery中如何测试某个元素是否可见 if($(element).is(':visible') == 'true') { //该元素是可见的 } 16....如何强制在新的选项卡中打开链接: jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href);
DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup...focus scroll mouseleave blur unload 事件绑定 文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用on()方法来对被选元素及子元素上添加一个或多个事件处理程序...注意:自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。...event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素 event.isDefaultPrevented... ul>
“中” 11:jQuery部分方法练习 test1.html ------- //1、简单:伪类 //:first var firstul = $("ul:first"); //alert(firstul.get...; //找到当前ul下所有li子元素集合 toggle() 切换的显示和隐藏 //ulNode.children("li").toggle("slow"); //完善点一 方法一、nextAll() prevAll...var obj={name:"mike",age:12}; jquery中的两大特性:链式调用和隐式递归 html() html(val) //匹配第一个元素 text() text(val) //匹配所有的元素...val() val(val) //匹配第一个元素 jquery中的相当于js中的onload方法 //jQuery(function() $(document).ready(function() /...$(html):根据提供的HTML字符串,创建DOM 元素,如:$(“Hello") $(elements):将一个或多个DOM元素转化为jQuery对象,如:$(document.body
"div:first") 匹配所有div中第一个div元素 后代选择器 $("ancestor descendant") 匹配给定的祖先元素的所有后代元素 $("#ul li") 匹配 id 为null...() 在前面选择器匹配到的元素中去除某个或者某几个 $("选择器").add() 在前面选择器中再追加节点 选择器对象遍历 ul id="test"> d...dom是一种与浏览器,平台,语言无关的接口,jquery中的dom操作就是对HTML中的元素进行操作。...").append($li1); $("ul").append($li2); }); }); 插入HTML元素 append() 向每个匹配的元素内部追加内容 appendTo() 将所有匹配的元素追加到另一个指定的元素集合中...当键盘被松开时发生keyup事件。
,如$("div[id][class$='Bar']" e)子元素选择器 :nth-child(index/even/odd/equation)//选取第index个子元素或者奇偶元素 :first-child...//选取每个父元素的第一个元素(返回整个文档中每个元素的第一个子元素), 如$("ul li:first-child");选择每个ul>中第1个元素 :last-child//选取每个父元素的最后一个元素...:only-child//若某子元素是其父元素中惟一的子元素,将会被匹配 f)表单对象属性选择器 :enabled//选择所有可用元素,例$("#form1:enabled") :disabled...image.png 案例三:利用jq内容选择器实现模糊搜索 结构: 小猫 猫头鹰...p>头大 你好 jq: $(function(){ $("#box p").hide(); $(":text").keyup
jQuery中发送jsonp 第一种方式 通过$.ajax 常用参数 $.ajax({ url:''//请求地址 datatype:'jsonp'//发送jsonp请求必须指定数据类型为...jsonp jsonp:'参数名'//服务器接收回调函数的参数名如callback ,cb等等默认callback jsonpCallback:'回调函数名'//默认jQuery123545...pre=1&p=3&ie=utf-8&json=1&prod=pc 1.当键盘抬起时发送请求,并将请求的结果显示在输入框下面 $(function(){ $('#input').keyup...后面加wd,cb参数这是因为jq发送jsonp时会自动帮我们补上,我们只需设置相关属性即可 已经获取到数据,我们格式化一下即可 $(function(){ $('#input').keyup...html += ""+e.q+""; }) html+='ul
这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式: ul id='nav'> 导航一 导航二 导航三 </...('.tclass').removeClass('tclass');; }); 2.反序访问JQuery对象里的元素 在某些场景下,我们可能需要反序访问通过JQuery选择器获取到的页面元素对象...,所以你需要知道怎么去访问IFrame里的元素 var iFrameDOM = $("iframe#someID").contents(); //然后,就可以通过find方法来遍历获取iFrame中的元素了...管理搜索框的值 现在各大网站都有搜索框,而搜索框通常都有默认值,当输入框获取焦点时,默认值消失。...页面部分刷新的特效在JQuery中也很容易实现: setInterval(function() { //每隔5秒钟刷新页面内容 //获取的内容将增加到 id为content的元素后
事件委托 事件委托也称为事件代理,在jQuery里面被称为事件委派 事件委托的原理 不是给每个子节点单独设置事件监听器,而是将事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点...JS中当触发某些具有冒泡性质的事件时,首先在触发元素寻找是否有相应的注册事件,如果没有再继续向上级父元素寻找是否有相应的注册事件作出响应,这就是事件冒泡。...也就是说,由于是冒泡阶段,所以是按照 li->ul->body->html->document的顺序查找的,由于在li中没有找到触发事件,就向上一级(ul)寻找触发事件,ul设置了触发事件,所以会弹出警示框...如果想要居中那就x-盒子宽度的一半,y减去盒子高度的一半 常用的键盘事件 keyup和keydown是不区分大小写的,keypress区分大小写 如果同时写了onkeydown和press,会先执行...onkeydown再执行press,因为press多了一层判断 案例时间到: 我们做个京东的案例,就算用户点击了页面中的其他地方,只要按下's'键,光标就能回到搜索框: 贴一下我一开始的做法:
jQuery 选择器 选择器同意对元素组或单个元素进行操作。 jQuery 元素选择器和属性选择器同意通过标签名、属性名或内容对 HTML 元素进行选择。...在 HTML DOM 术语中:选择器同意对 DOM 元素组或单个 DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。...(“p”) 选取 元素。 jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(“[href]”) 选取全部带有 href 属性的元素。...如:(“ul li:first”)、(“div#intro .head”)) 选取当前 HTML 元素:$(this) 嵌套选择器 如:选取指定标签中的其他标签中的元素:$(标签名 *) (注意指定的标签中一定要有其他标签...在某些浏览器中可能出问题。 不要使用数字开头的类名!在某些浏览器中可能出问题。 详细使用时,能够參考“jQuery 选择器參考手冊”。看看有哪些选择器。
); // jQuery 选择到 ul> 元素 for (var i=0, l=top_100_list.length; i<l; i++){ $mylist.append("" + top...在上面代码中,父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。 如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。...jQuery( expression, context ); 通过它,能缩小选择器在DOM中搜索的范围,达到节省时间,提高效率。...普通方式: $('.myDiv') 改进方式: ('.myDiv' , ("#listItem") ) 10,慎用 .live()方法(应该说尽量不要使用) 这是jQuery1.3.1版本之后增加的方法...你可以改成.live("click")方式解决此问题,代码如下: $(function(){ $("p").live("click",function(){ //改成live方式 alert
child 选择指定元素下的指定子元素,如:$(‘ul.tonav > li’) ancestor descendant 选择一个元素里所有的后代元素,如:$(‘form input’) prev...如:$('div:animated) :eq(n) 选取第n个元素,如:$('ul.tonav li:eq(n)') :even 选取偶数个元素,如:$('li:even') :odd 选取奇数个元素,...() 添加/触发 keyup 事件 live() 在版本 1.9 中被移除。...() 从匹配元素中搜索给定元素 $.noConflict() 释放变量 $ 的 jQuery 控制权 $.param() 创建数组或对象的序列化表示形式(可在生成 AJAX 请求时用于 URL 查询字符串中...jQuery animate() – 使用相关值 演示如何在 jQuery animate() 方法中使用相关值。
前言: 在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...3、select()事件: 当 textarea 或文本类型的 input 元素中的文本被选择时,会发生 select 事件。...三、键盘事件: 1、keydown()、keyup()和keypress(): keydown类似于mousedown,按下键盘时的事件;keyup就类似于mouseup,按下键盘再松开的那个时候触发的事件...type="text/javascript"> //多事件绑定 $("ul").on('click',function(e){ alert('触发的元素是内容是:...类似的event.currentTarget : 在事件冒泡过程中的当前DOM元素,等同于this。
:odd") 所有奇数 元素 :eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始...) :gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素 :lt(no) $("ul li:lt(3)") 列出 index...移除所有通过 live() 函数添加的事件处理程序。...触发、或将函数绑定到指定元素的 key press 事件 keyup() 触发、或将函数绑定到指定元素的 key up 事件 live() 触发、或将函数绑定到指定元素的...jQuery 遍历函数 函数 描述 .add() 将元素添加到匹配元素的集合中。 .andSelf() 把堆栈中之前的元素集添加到当前集合中。
环境 VS code + Live Server ¶VS code快捷键 Ctrl+D 每按一次选中一个之后一样的,可以一起替换 Ctrl+\ 注释或取消注释 ¶清除谷歌浏览器缓存 设置(万恶的缓存啊...: Pictures ul-> Robin Li...myList.length myList.shift() //返回第一个元素,并将其从array中删除 myList.pop() //返回最后一个元素,并将其从array中删除 myList.forEach...alert("Hi"); }); 其余事件还有:click, mouseenter, mouseleave, mousedown, mouseup, mousemove, keydown, keyup...: 一个JavaScript库 使用:在html文件的body最后写 jquery/jquery.js">