标签：tle 用户 20px length 也会 指定 替换 last mouseover
1、 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
2、jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3、它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现
动画效果，并且方便地为网站提供AJAX交互。非常好用
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件
可供选择。
通俗讲，就是封装了JavaScript，使写JavaScript代码更加简洁，高效，解决了兼容问题。变成了非常好用的调用接口。但是使用之前一定要先加载jQuery的模块代码！
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();而且约定俗成的，在其前面加上$符号
var $variable = jQuery 对象 //这个是jQuery的对象声明 var variable = DOM 对象 //这个是DOM对象的声明
1、选择器，就是寻找某个元素
1.1 基本选择器:跟CSS样式差不多很好学，注意加上双引号
$("*") : 就是选择到所有的元素呗，一般是全体元素设置公共属性设置
$("#id") : 根据id找到某一标签，id是唯一的，所以找到的也是唯一的
$(".class") : 根据class属性找到相应的标签
$(".class,p,div") : 多内容查找，是或的关系
1.2 层级选择器：层层选择的意思，这层选择还要下一层选择，跟北影的复试差不多
$(".outer div") .outer的子孙后代中的div
$(".outer>div") .outer子代的儿子代的div
$(".outer+div") .outer紧随的兄弟div（后面一个）
$(".outer~div") .outer后面的所有的div兄弟
1.3 属性选择器 ：根据某些属性找到某些标签
$(‘[id="div1"]‘) ：id不建议这么写
$(‘["zhiwei"="qunzhu"]‘) :一般都是自定义的属性才会这么查找
1.4表单选择器：
| $(":input") | 所有 <input> 元素 | |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
2、筛选器，就是找到之后再做筛选
2.1 过滤筛选器
$("li").eq(2) : 找到一堆li，然后取第三个，因为是从0开始的
$("li").first() : 找到一堆li,然后取第一个，也就是.eq(0)
$("li").last() : 找到一堆li,然后取最后一个
$("ul li").hasclass("test") 找到一堆li，然后看谁的class里面有test
2.2 查找筛选器
$("div").children(".test") : 找到所有儿子代中class带有test的
$("div").find(".test") ： 找到所有子孙中class带test的
$(".test").next() 紧随的兄弟（后面一个）
$(".test").nextAll() 紧跟的所有兄弟们（后面的所有）
$(".test").nextUntil() 紧跟的兄弟直到。。。
$("div").prev() ： 前面的。。。
$("div").prevAll() ：前面的
$("div").prevUntil() ：前。。。
$(".test").parent() ：.test的父对象
$(".test").parents() ：.test的父亲，爷爷。。。直到标签的尽头
$(".test").parentUntil() ：.test的父亲，爷爷。。。直到某个条件
$("div").siblings() ： div的兄弟姐妹们
4.1 属性操作
-------------------------属性----------
$("").attr(); $("").removeAttr();
$("").prop(); $("").removeProp();
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。
--------------------------CSS类
$("").addClass(class|fn) ：给class属性的加个值 $("").removeClass([class|fn])：删除class属性的某个值
--------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("").css("color","red")
4.2 文档处理：增删改复制标签
/创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
4.3 单独说说CSS样式操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
1、页面载入
$(document).ready(function(){}) -----------> $(function(){})
两个是等效的，后面的是缩写
2、事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
好处在于.on方法为动态添加的元素也能绑上指定事件；新增加的标签也会有相应的方法哟、
其他常用的方法比如onMouseover,onClick....在jQuery之需要去掉on就可以很方便的使用了
3、一些动画效果：括号里面一般都是ms，表示完成需要多长时间
1、显示和隐藏
$("p").hide(1000); 隐藏
$("p").show(1000); 显示
$("p").toggle(1000); 点一下隐藏再点一下显示，切换的作用，相当于开关
2、滑动
$("#content").slideDown(1000);向下滑动
$("#content").slideUp(1000);向上滑动
$("#content").slideToggle(1000);滑动切换
3、淡入淡出
$("#id1").fadeIn(1000);
$("#id1").fadeToggle(1000);
$("#id1").fadeIn(1000);
$("#id1").fadeTo(1000,0.4);淡到指定的透明度
4、回调函数
函数完成后调用某个指定的函数
$("p").hide(1000,function(){
alert($(this).html())
})
$.extend(object) //为JQuery 添加一个静态方法。 $.fn.extend(object) //为JQuery实例添加一个方法。
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));
//-----------------------------------------------------------------------$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});
八 jQuery的实例应用
1、jQuery轮播图：请先找五张大小一致的图片命名为1.jpg .....
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .outer { 14 width: 670px; 15 height: 360px; 16 margin: 100px auto; 17 position: relative; 18 overflow: hidden; 19 } 20 21 ul, li { 22 list-style: none; 23 display: inline-block; 24 float: left; 25 } 26 27 .btn { 28 /*position: relative;*/ 29 height: 50px; 30 width: 39px; 31 32 top: 150px; 33 cursor: pointer; 34 } 35 36 .left-btn { 37 position: absolute; 38 background: url("left-arrow-small.png"); 39 left: 0px; 40 41 } 42 .right-btn{ 43 position: absolute; 44 background: url("right-arrow-small.png"); 45 right: 0px; 46 47 48 } 49 .bottom{ 50 position: absolute; 51 background-color: hsla(0,0%,100%,.3); 52 bottom: 20px; 53 left: 260px; 54 height: 20px; 55 width: 180px; 56 /*border: 1px solid red ;*/ 57 border-radius: 12px; 58 line-height: 20px; 59 padding-top: 4px; 60 } 61 .bottom li{ 62 display: inline-block; 63 margin-right: 12px; 64 margin-left: 12px; 65 margin-top: 3px; 66 width: 12px; 67 height: 12px; 68 border-radius: 100%; 69 background-color: white; 70 text-align: center; 71 } 72 .bottom ul li.current-point{ 73 background-color: red; 74 } 75 .hide{ 76 display: none; 77 } 78 79 80 </style> 81 <script src="jquery-3.1.1.js"></script> 82 <script> 83 $(function () { 84 85 }) 86 </script> 87 <body> 88 <div class="outer"> 89 <ul class="imgs"> 90 <li class="img current"><a href=""><img src="1.jpg" alt="" ></a></li> 91 <li class="img"><a href="" ><img src="2.jpg" alt="" ></a></li> 92 <li class="img"><a href="" ><img src="3.jpg" alt=""></a></li> 93 <li class="img"><a href="" ><img src="4.jpg" alt=""></a></li> 94 <li class="img"><a href="" ><img src="5.jpg" alt=""></a></li> 95 </ul> 96 <div class="left-btn btn hide"></div> 97 <div class="right-btn btn hide"></div> 98 99 <div class="bottom hide"> 100 <ul> 101 <li class="bottom-slider current-point" id="0"></li> 102 <li class="bottom-slider" id="1"></li> 103 <li class="bottom-slider" id="2"></li> 104 <li class="bottom-slider" id="3"></li> 105 <li class="bottom-slider" id="4"></li> 106 </ul> 107 </div> 108 </div> 109 <script> 110 //定义计时器 111 var index = 0 112 var timer = setInterval(run,2000) 113 114 function run() { 115 index++; 116 var $imgs = $(".outer ul.imgs li") 117 // console.log(index) 118 if (index >= $imgs.length) { 119 index=0; 120 } 121 122 changeimg(index) 123 } 124 125 //定义切换至第index张图片的函数 126 function changeimg(index) { 127 // console.log(index) 128 $(".outer ul li.current").fadeOut(1000).removeClass("current") 129 $(".bottom ul li.current-point").removeClass("current-point") 130 $(".bottom ul li.bottom-slider").eq(index).addClass("current-point") 131 $(".outer ul.imgs li").eq(index).fadeIn(500).addClass("current") 132 133 // console.log($(".outer ul.imgs li").eq(index)) 134 } 135 136 //当鼠标移至outer区域，停止轮播 137 $(".outer").mouseover(function () { 138 clearInterval(timer); 139 $(".left-btn,.right-btn,.bottom").removeClass("hide") 140 141 }) 142 143 //当鼠标移除outer区域，继续进行轮播 144 $(".outer").mouseout(function () { 145 timer = setInterval(run,3000) 146 $(".left-btn,.right-btn,.bottom").addClass("hide") 147 }) 148 149 //当鼠标点击向左的箭头,向前切换 150 $(".left-btn").click(function () { 151 if (index == 0) { 152 index = $imgs = $(".outer ul.imgs li").length-1 153 }else { 154 index-- 155 } 156 157 changeimg(index) 158 }) 159 //当鼠标点击向右的箭头,向后切换 160 $(".right-btn").click(function () { 161 if (index == ($(".outer ul.imgs li").length-1)) { 162 index = 0 163 }else { 164 index++ 165 } 166 167 changeimg(index) 168 }) 169 170 //bottom切换 171 var $num = $(".bottom ul li") 172 // console.log($num.length) 173 // for (var i=0;i< $num.length;i++){ 174 // console.log($num[i]) 175 // console.log($num[i].id) 176 $num.click(function () { 177 console.log(this.id) 178 changeimg(this.id) 179 }) 180 181 // } 182 // for (var ) 183 </script> 184 185 </body> 186 </html>
2、
标签：tle 用户 20px length 也会 指定 替换 last mouseover
原文地址：http://www.cnblogs.com/skiler/p/6414864.html
