jquery事件 | 易学教程

jquery学习文档笔记

阅读更多关于 jquery学习文档笔记

1、未见过的事件： focusin跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。 focusout跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。 2、使用wrapAll方法举例如下原始代码： <div class="mm"><p>我们在公司</p></div> <div class="mv"> <p>我们在公司</p> <p>我们在公司</p> <p>我们在公司</p> </div> jquery操作：$("p").wrapAll('<div class="test"></div>'); 输出代码： <div class="mm"> <div class="test"><p>我们在公司</p> <p>我们在公司</p> <p>我们在公司</p> <p>我们在公司</p> </div> </div> <div class="mv"> </div> 总结： //该方法会将所有的的p标签移动到一个第一个p标签出现的位置，并将其appendTo到<div class="test"></div>中 3、对于detach方法的使用：描述：remove()方法会移除所有的事件处理程序以及可能绑定到被移除元素上的其他数据。detach()方法和remove()雷士，但是不会移除事件处理程序和数据。想临时从文档中移除元素以便后续再次插入时

jQuery学习笔记：文档处理

阅读更多关于 jQuery学习笔记：文档处理

转： http://blog.sina.com.cn/s/blog_677b66170100m1ke.html 一、内部插入 1、 append(content) 向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。返回值 jQuery 参数 content (String, Element, jQuery) : 要追加到目标中的内容示例： // 向所有段落中追加一些HTML标记 $( " p " ).append( " <b>Hello,world.</b> " ); 2、 appendTo(content) 把所有匹配的元素追加到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。返回值 jQuery 参数 content (String) :用于被追加的内容示例： // 把所有段落追加到ID值为foo的元素中 $( " p " ).appendTo( " #foo " ); 3、 prepend(content) 向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。。返回值 jQuery 参数 content (String, Element, jQuery) :

看几道JQuery试题后总结（上篇）

阅读更多关于看几道JQuery试题后总结（上篇）

无意中拿到的JQuery题目，拿来分享顺便总结总结在JQuery对象中区分.text();.val();.html();.innerHTML;.innerTEXT()的用法与区别，用例子证明在JQuery选择器中空格与大于号的区别在一个表单中，查找所有选中的input元素,JQ的写法指定的为某个div内部动态添加一个div的写法，外部添加一个div的写法(包括在该节点的前面以及后面) JQuery对象与dom对象的区别，以及两者互相转换的方法如何动态的为某个div添加class属性，如何移除class属性，以及如何获取div中某个属性的值，比如说Id的名称或者其他属性的值 JQuery里面的动画函数一般用什么？时间设置函数都有哪些,setTimeout()与setInterval()有何区别写一个ajax例子出来，要标清楚各个参数的含义。以及ajax数据传输的时候有几种数据格式要做出一个demo具体功能如下：页面中有一个按钮，点击按钮后弹出一个遮罩层，在遮罩层上面有一个div,在点击按钮后5秒后div内部出现内容。在div下面有一个隐藏按钮，点击后，遮罩层消失，div缓慢消失。回到页面打开状态　　友情提示：遮罩要用到层级z-index,以及透明效果，5秒要用到时间函数，缓慢消失要用到动画效果，自己查询API文档。第一题题目：在JQuery对象中区分.text

jQuery中的mouseleave和mouseout的区别

阅读更多关于 jQuery中的mouseleave和mouseout的区别

$("li").each(function(i) { //删除的鼠标划过的显示与隐藏 $(this).mouseover(function() { $(this).find(".del").fadeIn(10); }) $(this).mouseleave(function() { $(this).find(".del").fadeOut(10); }) }) 上面的代码中如果不是用的mouseleave而是mouseout的话你会发现尚未离开类名的.del这个DIV这个DIV有时候就会闪动。那是因为你可能离开了该DIV的子元素，所以会出发mouseout事件。具体mouseleave和mouseout两者之间的区别主要有以下两点： 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。做评论这块儿的时候发现会这样的闪动却怎么都不知道原因，今天在博客园闲逛看到了，记录一下。 PS：我的淘宝店铺新开业，经营各种桌游，棋牌，希望大伙儿能来看看！http://201314yes.taobao.com/ 来源： https://www.cnblogs.com/jenney-qiu/archive/2012/02/10/2345338.html

Jquery中each的三种遍历方法

阅读更多关于 Jquery中each的三种遍历方法

1、选择器+遍历 $('div').each(function (i){ i就是索引值 this 表示获取遍历每一个dom对象 }); 2、选择器+遍历 $('div').each(function (index,domEle){ index就是索引值 domEle 表示获取遍历每一个dom对象 }); 3、更适用的遍历方法 1）先获取某个集合对象 2）遍历集合对象的每一个元素 var d=$("div"); $.each(d,function (index,domEle){ d是要遍历的集合 index就是索引值 domEle 表示获取遍历每一个dom对 }); 案例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>属性选择器学习</title> <script language="javascript" type="text

jQuery 初识筛选器属性选择器

阅读更多关于 jQuery 初识筛选器属性选择器

---------------------------大事使我们惊讶，小事使我们沮丧，久而久之，我们对这二者都会习以为常。一 jQuery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。回到顶部二什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() 意思是指：获取ID为test的元素内的html代码

第三篇 jQuery操作DOM

阅读更多关于第三篇 jQuery操作DOM

3-1 DOM页面文档 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOM 树状文档</title> <style type="text/css"> body{ font-size:13px;} table,div,p,ul{ width:280px; border:solid 1px #666; margin:10px 0px 10px 0px; padding:0px; background-color:#eee;} </style> </head> <body> <table> <tr><td>TD1</td></tr> <tr><td>TD2</td></tr> </table> <div>Div</div> <p>P</p> <div><span>Span</span></div> <ul> <li>Li1</li> <li

通过案例来剖析JQuery与原生JS

阅读更多关于通过案例来剖析JQuery与原生JS

首先来个例子：我们在登陆或者注册一些网站时，如果某一项点过了但没填，鼠标移走后是不是经常看到网站有相应的红色字体提示呢？那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别，来上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script> <style> /*字体设置为红色*/ .c1{ color: red; } </style> </head> <body> <div class="container"> <form action=""> <div class="username"><label for="i1">用户名 <input type="text" id="i1"> <span></span> </label></div> <div

jQuery框架-1.jQuery基础知识

阅读更多关于 jQuery框架-1.jQuery基础知识

jQuery简介 jQuery，顾名思义是JavaScript和查询（Query），jQuery是免费、开源的。它可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程且兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。 jQuery 优势体积小，使用灵巧（只需引入一个js文件）。方便的选择页面元素（模仿CSS选择器更精确、灵活）。动态更改页面样式/页面内容（操作DOM，动态添加、移除样式）。控制响应事件（动态添加响应事件）。提供基本网页特效（提供已封装的网页特效方法）。快速实现通信（ajax）。易扩展、插件丰富。支持链式写法。引入jQuery 通过script引入本地jQuery文件。通过引入CDN上面jQuery文件。版本选择 1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日) 2.x：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日) 3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本

jQuery CSS()方法改变CSS样式实例解析

阅读更多关于 jQuery CSS()方法改变CSS样式实例解析

转自： http://www.jbxue.com/article/24588.html 分享一个 jQuery 入门实例：使用CSS()方法改变现有的CSS样式表，css()方法在使用上具有多样性。其中有一种可接受两个输入参数：样式属性和样式值，两者之间用逗号分隔。比如要改变链接颜色，可以这样编写代码： $("#61dh a").css('color','#123456'); //选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 //.css(‘color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式属性，可先定义属性变量，然后直接赋值给css()方法。 var mycss = { background: '#EEE', width: '478px', margin: '10px 0 0', padding: '5px 10px', border: '1px solid #CCC' }; $("#result").css(divcss); 上述代码先定义了一个CSS样式属性变量“mycss”，类似于建立一个外部CSS文件，之后通过css()方法，把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以查看某个元素的css属性值。（www.jbxue.com 脚本学堂）例如查看链接的颜色

订阅 jquery事件