jQuery-->基本理论知识
一、jQuery其是对javascript封装的一个框架包，简化对javascript的操作。
二、各自含义：
JavaScript：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象
jQuery: javascript + query
前期: 侧重快速找到页面上各种节点。
后期：jquery 丰富了事件操作、 ajax操作，东湖效果 Dom 操作等等。
三、使用jQuery的好处：
3.1、第一是无需考虑浏览器兼容问题。
3.2、代码足够少。
四、使用jQuery版本问题：
原则：最新的版本不要，较老的版本也不要。
1.0（兼容到IE.8 一下） 2.0（IE8以上 ）3.0（兼容ECMA5/6）
jquery.js(开发板) 完整无压缩，用于测试与学习
jquery.min.js(发布版) 高度压缩，用于实际开发。
五、引入问题：
jQuery库其实就是一个js文件，安装jQuery很简单，只要把jQuery库文件在HTML页面中引用即可使用，
跟我们引用外部js文件是一样的道理。
jQuery文件一般放在js文件的第一位，方便后面的文件使用jQuery方法。
六、选择器：
6.1基本选择器：
6.1.1id选择器
$('#id选择器');
案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <script type="text/javascript"> 8 function f1(){ 9 $('#username').css('background','red'); 10 $('#username').css('width','500px'); 11 } 12 </script> 13 </head> 14 <body> 15 <input type="text" name="username" id="username" value="点击调用函数" /> 16 <button type="button" onclick="f1()">点击</button> 17 </body> 18 </html>
6.1.2、class选择器
$('.class属性值')
案例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <script type="text/javascript"> 8 function f1(){ 9 $('input').css('background','blue'); 10 } 11 </script> 12 </head> 13 <body> 14 <input type="text" name="username" id="username" value="点击调用函数" /> 15 <button type="button" onclick="f1()">点击</button> 16 </body> 17 </html>
6.1.3、标签选择器
$(‘标签选择器’）
案例：
1 //③ $('.class属性值') class类别选择器 2 $('.apple').css('background-color','green');
6.1.4、通配符选择器
$('*')
案例：
1 //④ $('*') 通配符选择器 2 $('*').css('background-color','gray');
6.1.5、联合选择器
$('s1,s2,s3')
案例：
1 //⑤ $('s1,s2,s3...')联合选择器selector 2 $('p,#username,.apple').css('font-size','25px');
6.1.6 属性值选择器 [title=box]
6.2、伪类选择器：（又叫基本筛选）
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>新建网页</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 <script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> 9 <script type="text/javascript"> 10 function f1(){ 11 //$("li").css('background-color','blue'); 12 //① :first 找到第一个 13 //li元素同时，还需要是第一个 14 $("li:first").css('background-color','blue'); 15 16 //② :last 找到最后一个 17 //$("li:last").css('background-color','green'); 18 19 //③ :eq(下标) 下标从0计算, equal() 20 //$("li:eq(4)").css('background-color','pink'); 21 22 //④ :gt(索引值) 下标大于条件索引值, great than 23 //$("li:gt(4)").css('color','red'); 24 25 //⑤ :lt(索引值) 下标小于条件索引值, less than 26 //$("li:lt(3)").css('color','orange'); 27 28 //⑥ :even 下标索引值等于偶数的 29 //$("li:even").css('background-color','gray'); 30 //⑦ :odd 下标索引值等于奇数的 31 //$("li:odd").css('color','red'); 32 33 //⑧ :not(选择器) 去除与“选择器”匹配的元素 34 //$("li:not(#zhao,#zhang)").css('color','red'); 35 36 //⑨ :header 获得h1/h2/h3...的标题元素 37 //$(":header").css('color','blue'); 38 } 39 </script> 40 </head> 41 <body> 42 <h1 style="background-color: red;">并且选择器</h1> 43 <h2>并且选择器</h2> 44 <h3>并且选择器</h3> 45 <h4>并且选择器</h4> 46 <ul> 47 <li>刘备</li> 48 <li id="zhang">张飞</li> 49 <li>关羽</li> 50 <li id="zhao">赵云</li> 51 52 <li>孙权</li> 53 <li>周瑜</li> 54 <li>黄盖</li> 55 <li>吕蒙</li> 56 </ul> 57 58 <input type="button" value="触发" onclick="f1()" /> 59 </body> 60 </html>
6.3、许多选择器都可以作为“并且”选择器使用
案例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>新建网页</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script> 10 <script type="text/javascript"> 11 function f1(){ 12 //许多选择器都可以作为“并且”选择器使用 13 //$(s1s2s3s4s5)----->并且选择器(保证不会产生歧义) 14 //$(s1,s2,s3,s4,s5)----->联合选择器 15 // $("li.hero").css('color','blue'); 16 // $(".hero").css('color','blue'); 17 //$(':header.hero').css('background-color','green');//没有歧义 18 $('.hero:header').css('color','red');//没有歧义 19 } 20 </script> 21 </head> 22 <body> 23 <h1>并且选择器</h1> 24 <h2 class="hero">并且选择器</h2> 25 <h3 class="hero">并且选择器</h3> 26 <h4>并且选择器</h4> 27 <ul> 28 <li>刘备</li> 29 <li id="zhang">张飞</li> 30 <li class="hero">关羽</li> 31 <li id="zhao">赵云</li> 32 33 <li class="hero">孙权</li> 34 <li>周瑜</li> 35 <li class="hero">黄盖</li> 36 <li>吕蒙</li> 37 </ul> 38 39 <input type="button" value="触发" onclick="f1()" /> 40 </body> 41 </html>
6.4内容过滤选择器
6.4.1 :contains(内容)
1 包含内容选择器，获得节点内部必须通过标签包含指定的内容 2 $(“div:contains(beijing)”) 3 <div>linken love beijing</div> 4 <div>jack love shanghai</div>
6.4.2 :empty
1 获得空元素(内部没有任何元素/文本(空) )节点对象 2 $(“div:empty”) 3 <div>linken love beijing</div> 4 <div>jack love shanghai</div> 5 <div></div> 6 <div><img /></div> 7 <div> </div>
6.4.3:has
1 内部包含指定元素的选择器 2 3 $(“div:has(#apple)”) 4 <div>hello</div> 5 <div><p></p></div> 6 <div><span id=”apple”></span></div> 7 <div><span class=”apple”></span></div>
6.4.4 :parent
1 寻找的节点必须作为父元素节点存在(必须是别人的父亲) 2 $(“div:parent”) 3 <div>linken love beijing</div> 4 <div>jack love shanghai</div> 5 <div></div> 6 <div><img /></div> 7 <div> </div>
6.5、css样式操作
1 $().css(name，value); //设置 2 $().css(name); //获取
css()样式操作特点：
1 ① 样式获取，jquery可以获取 行内、内部、外部的样式。 2 dom方式只能获得行内样式 3 ② 复合属性样式需要拆分为"具体样式"才可以操作 4 例如：background 需要拆分为 background-color background-image 等进行操作 5 border： border-left-style border-left-width border-left-color 等
6.5、链式操作 可以进行连续进行点
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 height: 100px ; 9 background: #000; 10 } 11 </style> 12 <!-- <script src="./js/public.js" type="text/javascript" charset="utf-8"></script> --> 13 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 14 <script type="text/javascript"> 15 $(function(){ 16 // $('#id').css('background', 'blue'); 17 // $('#id').mouseover(function(){ 18 // console.log('mouseover') 19 // }); 20 // $('#id').mouseout(function(){ 21 // console.log('mouseout') 22 // }); 23 // $('#id').mousemove(function(){ 24 // console.log('mousemove') 25 // }); 26 27 //jq链式操作 28 $('#id').css('background', 'blue') 29 .mouseover(function(){ 30 console.log('mouseover') 31 }).mouseout(function(){ 32 console.log('mouseout') 33 }).mousemove(function(){ 34 console.log('mousemove') 35 }) 36 37 38 39 }) 40 </script> 41 </head> 42 <body> 43 <div id = 'id'></div> 44 </body> 45 </html>
七、$()下的常用方法
7.1、attr() 获取/修改属性 两个参数为修改，也可以传一个对象 js原生 set/get/removeAttribute()
1 JS: 2 itnode.属性名称 3 itnode.属性名称= 值; 4 itnode.getAttribute(属性名称); 5 itnode.setAttribute(属性名称，值); 6 自定义的属性例如address，只能通过getAttribute方式。 7 8 9 jquery方式操作属性(attribute)：property 10 $().attr(属性名称); //获得属性信息值 可以去id，可以取title 可以取class 11 $().attr(属性名称，值); //设置属性的信息 12 $().removeAttr(属性名称); //删除属性
一次性修改多条属性
$('#div').attr（{
key:value,
key:value
}）
7.2、 find() find方法是查找子节点，括号可以传参，参数筛选条件 //$("div h2") //具体某个它的子元素
$('ul').find('[name = hello]').css("background","red"); //把页面中name 等于 hello的个设置一下
7.3、 filter() 在已经被选择的元素节点里面进行筛选，叫做过滤
7.4、 not() filter反义词
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 height: 100px ; 9 background: #999; 10 } 11 </style> 12 <!-- <script src="./js/public.js" type="text/javascript" charset="utf-8"></script> --> 13 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 14 <script type="text/javascript"> 15 $(function(){ 16 //find方法，找到元素符合条件的子元素 17 // $('#id').find('div').css('background', 'red'); 18 // $('#id').find('p').css('background', 'blue'); 19 20 //filter 从符合条件元素中筛选出具体某一些 21 // $('div').filter('.id').css('background', 'red') 22 23 24 //not filter过滤后的 25 $('div').not('.id').css('background', 'blue') 26 27 28 }) 29 30 </script> 31 </head> 32 <body> 33 <div id = 'id' title = 'aaa' xxx = 'xx'></div> 34 <div class = 'id' title = 'aaa' xxx = 'xx'></div> 35 <div id = 'id' title = 'aaa' xxx = 'xx'></div> 36 <div class = 'id' title = 'aaa' xxx = 'xx'></div> 37 <div class = 'id' title = 'aaa' xxx = 'xx'></div> 38 </body> 39 </html>
7.5、next() 找到当前兄弟节点的下一个节点。
7.6、 prev() 找到当前兄弟节点的上一个节点。
7.7、 eq() eq可以获取对应下标的元素节点 //$("h3:eq(1)")。
$('h3').eq(3);
7.8、 index() 获取，当前节点在兄弟节点中的下标。
// 找到某个子元素，其实是对父元素进行 修改。
7.9、has() 在获取到元素节点中，查找，拥有符合条件的子节点的元素节点。//先找到一组，然后子元素有某个
八、方法2：
8.1、insertBefore : 将一个节点插入到另一个节点的前面
1 /* 把div这个节点插入到 p标签这个节点的前面 */ 2 // $('div').insertBefore('p');
8.2：insertAfter : 将一个节点插入到另一个节点的后面
1 /* 把p 标签插入到div的前面 */
把div这个节点插入到 p标签后面
2 // $('div').insertAfter('p');
8.3:before 前面是某一个节点
1 /* div的前面是某一个元素 就是 div的前面是p标签元素*/ 2 $('div').before($('p'));
8.4：after 后面是某一个节点
1 /* div的后面是某一个元素 */ 2 $('div').after($('p'));
8.5:appendTo ：将某一个节点插入到另一个节点的子节点中，处于子节点的末尾
1 /* 将某一个节点插入到另一个节点中间 把div 标签插入到 p标签中 */ 2 // $('div').appendTo($('p'));
8.6:append ：将某一个节点插入到另一个节点的子节点中，处于子节点的末尾
1 /* 把 p标签插入到div标签里面 */ 2 $('div').append($('p'));
8.7:prependTo:将某一个节点插入到另一个节点的子节点中，处于子节点的首位
1 /* 把div插入到标签里面 */ 2 // $('div').prependTo($('p'));
8.8: prepend 将某一个节点插入到另一个节点的子节点中，处于子节点的首位
1 /* 把p标签插入到 div里面 */ 2 // $('div').prepend($('p'));
8.9 移出：remove() 删除某一个节点 原生element.removeChild(element)。
1 $('#ip').remove();
九、方法绑定
on
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 /* $('div').on('click',function(){ 10 console.log("这个是jq的点击事件"); 11 }) */ 12 13 /* $('div').on('click mouseover mouseout',function(){ 14 console.log("这个是jq的点击事件"); 15 }) */ 16 17 $('div').on({ 18 click:function(){ 19 console.log("这是一个点击事件"); 20 }, 21 mouseover : function(){ 22 console.log("这是一个 鼠标移入事件"); 23 }, 24 mouseout : function(){ 25 console.log("这是一个鼠标移出事件"); 26 }, 27 }) 28 29 /* 通过 on 进行事件委托 ,委托给li */ 30 /* this 就是 li */ 31 $('ul').on('click','li',function(){ 32 $(this).css('background','red'); 33 }) 34 35 }) 36 </script> 37 </head> 38 <body> 39 <div>这个是个div标签</div> 40 <ul> 41 <li></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 </ul> 46 </body> 47 </html>
9.2: one 只点击一次，其他时间在点击的时候则不会触发了
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!-- one 只点击一次，其他时间在点击的时候则不会触发了 --> 7 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 8 <script type="text/javascript"> 9 $(function(){ 10 11 /* $('div').one('click',function(){ 12 console.log("这个是jq的点击事件"); 13 }) */ 14 15 /* $('div').one('click mouseover mouseout',function(){ 16 console.log("这个是jq的点击事件"); 17 }) */ 18 19 $('div').one({ 20 click:function(){ 21 console.log("这是一个点击事件"); 22 }, 23 mouseover : function(){ 24 console.log("这是一个 鼠标移入事件"); 25 }, 26 mouseout : function(){ 27 console.log("这是一个鼠标移出事件"); 28 }, 29 }) 30 /* 通过 on 进行事件委托 ,委托给li */ 31 /* this 就是 li */ 32 $('ul').one('click','li',function(){ 33 $(this).css('background','red'); 34 }) 35 36 }) 37 </script> 38 </head> 39 <body> 40 <div>这个是个div标签</div> 41 <ul> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 </ul> 47 </body> 48 </html>
9.3:off 解绑绑定事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 div{ 7 height: 20px; 8 width: 20px; 9 background-color: red; 10 } 11 </style> 12 <title></title> 13 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 14 <script type="text/javascript"> 15 $(function(){ 16 $('div').on('click',function(){ 17 console.log("这个是一个点击事件") 18 }) 19 $('button').on('click',function(){ 20 $('div').off(); 21 }) 22 }) 23 </script> 24 </head> 25 <body> 26 <div></div> 27 <button type="button">关闭事件</button> 28 <button type="button"></button> 29 </body> 30 </html>
9.3.2可以进行解绑多个事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 background: #f00; 9 } 10 </style> 11 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 15 16 //同一元素绑定多个不同方法 17 18 var fn = function(){ 19 console.log(11) 20 }; 21 $('div').click(fn) 22 $('div').on({ 23 click:function(){ 24 console.log('click') 25 }, 26 mouseover:function(){ 27 console.log('mouseover') 28 }, 29 mouseout:function(){ 30 console.log('mouseout') 31 }, 32 }) 33 //off解除事件 可以解除多个数据 34 $('button').click(function(){ 35 // $('div').off(); 36 // $('div').off('click'); 37 $('div').off('click', fn); 38 }) 39 40 }) 41 </script> 42 </head> 43 <body> 44 <div>ssfsdf</div> 45 <button>解除事件</button> 46 </body> 47 </html>
十、冒泡事件：
什么是冒泡事件：
冒泡事件就是在一个对象触发某类事件(比如点击事件)如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，
如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活）
解决冒泡的方法有三种：
第一种： event.stopPropagation(); //传一个事件对象，js的解决方法。
第二种： return false; // jq的一种解决方法
第三种： event.preventDefault(); //和第一种差不多。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 200px; 9 height: 200px; 10 background-color: #845F3F; 11 } 12 #id1{ 13 width: 100px; 14 height: 100px; 15 background-color: red; 16 } 17 #id2{ 18 width: 50px; 19 height: 50px; 20 background-color: olive; 21 } 22 </style> 23 <!-- js阻止冒泡 --> 24 <!-- 点击最里面的，外面和最外面也逐渐触发--> 25 <!-- e 来进行防止冒泡 --> 26 <!-- e.stop js的写法 --> 27 <script src="jq/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 28 <script type="text/javascript"> 29 $(function(){ 30 $('div').click(function(e){ 31 /* e 就是事件对象 和argument一样*/ 32 console.log(this.id); //触发一个。其他的都会触发 33 // console.log(e); 34 e.stopPropagation(); //这个就是js阻止冒泡。 就会只运行你点击的那一个。 35 36 // return false; //这个是jq的阻止冒泡的方法 37 }) 38 }) 39 </script> 40 </head> 41 <body> 42 <div id="id"> 43 <div id="id1"> 44 <div id="id2"></div> 45 </div> 46 </div> 47 </body> 48 </html>
十一： offset() position()
//“获取”或“设置”当前元素相对于“其被定位的祖辈元素”的偏移距离
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #id{ 12 width: 200px; 13 height: 200px; 14 background-color: pink; 15 margin-left: 100px; 16 position: fixed; 17 } 18 #id1{ 19 width: 100px; 20 height: 100px; 21 background-color: goldenrod; 22 margin-left: 50px; 23 } 24 #id2{ 25 width: 50px; 26 height: 50px; 27 background-color: #A400D3; 28 margin-left: 25px; 29 } 30 </style> 31 <script src="jq/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 32 <script type="text/javascript"> 33 $(function(){ 34 /* offset: #id2 = count(内容) ，用内容在去比较左边的距离*/ 35 /* console.log($('#id2').offset().left); //175 36 console.log($('#id1').offset().left); //150 37 console.log($('#id').offset().left); //100 */ 38 39 /* position #id2 = 内容+margin */ 40 /* 并且算的距离是 找到第一个定位的在进行算距离 */ 41 console.log($('#id2').position().left); //150 42 console.log($('#id1').position().left); //100 43 console.log($('#id').position().left); //0 44 /* 给 id 设置定位，然后根据定位在进行计算 */ 45 console.log($('#id2').position().left); //50 46 console.log($('#id1').position().left); //0 47 console.log($('#id').position().left); //0 48 }) 49 </script> 50 </head> 51 <body> 52 <!-- offset 距离左边距离 只算内容， --> 53 <!-- position 把内容和magin 等都计算上 找到第一个定位的计算距离 --> 54 <div id="id"> 55 <div id="id1"> 56 <div id="id2"></div> 57 </div> 58 </div> 59 </body> 60 </html>
十二：parent /offsetParent
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 #id{ 8 width: 500px; 9 height: 500px; 10 background: #999; 11 position: relative; 12 } 13 #id1{ 14 width: 300px; 15 height: 300px; 16 background: #99f; 17 } 18 #id2{ 19 width: 100px; 20 height: 100px; 21 background: #f00; 22 } 23 </style> 24 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 25 <script type="text/javascript"> 26 $(function(){ 27 28 //parent 获取父级 29 $('#id2').parent().css('background', '#fff'); 30 31 //offsetParent 获取有定位的父级，如果找不到就到最大的 32 $('#id2').offsetParent().css('background', '#000'); 33 }) 34 </script> 35 </head> 36 <body> 37 <div id = 'id'> 38 <div id = 'id1'> 39 <div id = 'id2'></div> 40 </div> 41 </div> 42 </body> 43 </html>
十三：val() input的value
1 $('button').click(function(){ 2/* js获取input的数据 是 value 这个值 */ 3 /* 这个是jq获取 input里面的数据 是val */ 4 // val里面有参数就是赋值，没有值就是从页面上获取值。 5 console.log($('input').val()); 6 })
十四：size() each()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 //size 获取的元素的个数 10 console.log($('div').size()); 11 12 //each 遍历获得的元素， 参数第一个为下标第二个为每个元素 13 $('div').each( function( index, item ){ 14 console.log(index) 15 console.log(item) 16 } ) 17 }) 18 </script> 19 </head> 20 <body> 21 <div>sdfdsf</div> 22 <div>sdfdsf</div> 23 <div>sdfdsf</div> 24 <div>sdfdsf</div> 25 <input type="text"> 26 <button>按钮</button> 27 </body> 28 </html>
十五： 特效：
15.1 、hover 添加hover事件。
hide() 和 show() 这两个方法。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 div{ 8 width: 100px; 9 height: 100px; 10 margin:100px auto; 11 background: #f00; 12 } 13 </style> 14 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 15 <script type="text/javascript"> 16 /* 可以进行点，然后写两个方法 */ 17 $(function(){ 18 $('#id').hover(function(){ 19 $('#id1').hide(1000,function(){ 20 $('#id').html('移出'); 21 22 }); 23 },function(){ 24 $('#id1').show(2000,function(){ 25 $('#id').html("移出"); 26 }); 27 }) 28 }) 29 </script> 30 </head> 31 <!-- hover 划入划出 --> 32 <body> 33 <div id="id"></div> 34 <div id="id1"></div> 35 </body> 36 </html>
15.2、
淡入 fadeOut (如果元素已经显示，则该效果不产生任何变化)
• fadeIn() 淡出
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html> 3 <head> 4 <title>新建网页</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta name="description" content="" /> 7 <meta name="keywords" content="" /> 8 9 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 10 <script type="text/javascript"> 11 function f1(){ 12 //淡入 13 $('div').fadeOut(3000); 14 } 15 function f2(){ 16 //淡出 17 $('div').fadeIn(3000); 18 } 19 </script> 20 <style type="text/css"> 21 div {width:300px; height:200px; background-color:blue;} 22 </style> 23 </head> 24 <body> 25 <h2>颜色渐变动画效果</h2> 26 <div></div> 27 <input type="button" value="隐藏" onclick="f1()" /> 28 <input type="button" value="显示" onclick="f2()" /> 29 </body> 30 </html>
15.3、 fadeTo() 淡入或淡出到，第二个参数，是透明变 0-1的小数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 div{ 9 width: 100px; 10 height: 100px; 11 margin:100px auto; 12 background: #f00; 13 } 14 </style> 15 <script type="text/javascript"> 16 $(function(){ 17 //hover 滑入 滑出 18 $('#id').hover(function(){ 19 //fadeOut 淡出 20 // $('#id1').fadeOut(1000, function(){ 21 // $('#id').html('淡出') 22 // }) 23 // //淡入 24 // $('#id1').fadeIn(1000, function(){ 25 // $('#id').html('淡入') 26 // }) 27 //fadeTo 第二个参数到某种透明度 28 $('#id1').fadeTo(1000, 0.5, function(){ 29 $('#id').html('淡入') 30 }) 31 }, function(){ 32 $('#id1').fadeOut(1000, function(){ 33 34 }) 35 }) 36 37 38 }) 39 </script> 40 </head> 41 <body> 42 <div id = 'id'></div> 43 <div id = 'id1'></div> 44 </body> 45 </html>
15.4：slideDown() slideUp()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 div { 9 width: 100px; 10 height: 100px; 11 margin: 100px auto; 12 background: #f00; 13 } 14 </style> 15 <script type="text/javascript"> 16 $(function() { 17 //hover 滑入 滑出 18 $('div').hover(function() { 19 // 向上划消失 20 $('#id1').slideUp(1000, function() { 21 $('#id').html('划上') 22 }) 23 console.log($(this).index()) 24 25 }, function() { 26 // 向下滑出现 27 $('#id1').slideDown(1000, function() { 28 $('#id').html('划下') 29 }) 30 }) 31 32 33 }) 34 </script> 35 </head> 36 <body> 37 <div id='id'></div> 38 <div id='id1'></div> 39 </body> 40 </html>
15.5:animate(json) //动画持续时间默认是400毫秒
<script type="text/javascript"> $(function() { //hover 滑入 滑出 $('#id').click(function() { //默认400毫秒 慢快慢过程 swing/linear 回调函数 //第一个是必写的 // $('#id1').animate({ width: 300, height:300 }); // $('#id1').animate({ width: 300, height:300 }, 4000 ); // $('#id1').animate({ width: 300, height:300 }, 2000, 'linear' ); $('#id1').animate({ width: 300, height:300 }, 2000, 'linear', function(){ console.log(111111) } ) }) }) </script>
停止问题：
1 <script type="text/javascript"> 2 $(function() { 3 //stop 停止动画 4 $('#id1').click(function() { 5 6 $('#id1').animate({ width: 600},1000 ).animate({ height: 300}, 1000); 7 8 $('button').click(function(){ 9 // $('#id1').stop(); //终止当前的动画进行下一个动画 10 // $('#id1').stop(true); //终止所有 11 // $('#id1').stop(true, true); //终止所有,使当前动画直接打到目的 12 $('#id1').finish(); //终止所有动画，直接达到目的值 13 }) 14 }) 15 16 17 }) 18 </script>
第二种：在每一个停止前面都写一个 stop
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> 7 <style type="text/css"> 8 div { 9 width: 100px; 10 height: 100px; 11 margin: 100px auto; 12 background: #f00; 13 } 14 /* button{ 15 16 width: 400px; 17 height: 200px; 18 } */ 19 </style> 20 <script type="text/javascript"> 21 $(function() { 22 //stop 停止动画 23 $('#id1').hover(function() { 24 //当添加动画时前面添加一个stop方法，解决一直动画 25 // $('#id1').animate({ width: 300, height:300},1000 ) 26 // $('#id1').stop().animate({ width: 300, height:300},1000 ) 27 28 //delay参数是延迟时间 29 $('#id1').animate({ width: 600},1000 ).delay(2000).animate({ height: 300}, 1000); 30 31 },function(){ 32 $('#id1').animate({ width: 100, height:100},1000 ) 33 // $('#id1').stop().animate({ width: 100, height:100},1000 ) 34 } 35 ) 36 37 38 }) 39 </script> 40 </head> 41 <body> 42 <!-- <div id='id'></div> --> 43 <button>按钮</button> 44 <div id='id1'></div> 45 </body> 46 </html>
选择网页元素/获取元素节点
浙公网安备 33010602011771号