开始学习jQuery

一 jQuery是什么？

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 对象就是通过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"]') :一般都是自定义的属性才会这么查找

$("#updatemagic option[value='"+ list[4] +"']") 当属性的值有变量时，需要用到字符串标签

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的兄弟姐妹们

四 操作元素(属性，css，文档处理)

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())
       })

七 扩展方法 (插件机制)：也就是自定义jQuery方法

$.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 .....

 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <style>
     * {
         margin: 0;
         padding: 0;
     }

     .outer {
         width: 670px;
         height: 360px;
         margin: 100px auto;
         position: relative;
         overflow: hidden;
     }

     ul, li {
         list-style: none;
         display: inline-block;
         float: left;
     }

     .btn {
         /*position: relative;*/
         height: 50px;
         width: 39px;

         top: 150px;
         cursor: pointer;
     }

     .left-btn {
         position: absolute;
         background: url("left-arrow-small.png");
         left: 0px;

     }
     .right-btn{
         position: absolute;
         background: url("right-arrow-small.png");
         right: 0px;

     }
     .bottom{
         position: absolute;
         background-color: hsla(0,0%,100%,.3);
         bottom: 20px;
         left: 260px;
         height: 20px;
         width: 180px;
         /*border: 1px solid red ;*/
         border-radius: 12px;
         line-height: 20px;
         padding-top: 4px;
     }
     .bottom li{
         display: inline-block;
         margin-right: 12px;
         margin-left: 12px;
         margin-top: 3px;
         width: 12px;
         height: 12px;
         border-radius: 100%;
         background-color: white;
         text-align: center;
     }
     .bottom ul li.current-point{
         background-color: red;
     }
     .hide{
         display: none;
     }

 </style>
 <script src="jquery-3.1.1.js"></script>
 <script>
     $(function () {

     })
 </script>
 <body>
 <div class="outer">
     <ul class="imgs">
         <li class="img current"><a href=""><img src="1.jpg" alt="" ></a></li>
         <li class="img"><a href="" ><img src="2.jpg" alt="" ></a></li>
         <li class="img"><a href="" ><img src="3.jpg" alt=""></a></li>
         <li class="img"><a href="" ><img src="4.jpg" alt=""></a></li>
         <li class="img"><a href="" ><img src="5.jpg" alt=""></a></li>
     </ul>
     <div class="left-btn btn hide"></div>
     <div class="right-btn btn hide"></div>

     <div class="bottom hide">
         <ul>
             <li class="bottom-slider current-point" id="0"></li>
             <li class="bottom-slider" id="1"></li>
             <li class="bottom-slider" id="2"></li>
             <li class="bottom-slider" id="3"></li>
             <li class="bottom-slider" id="4"></li>
         </ul>
     </div>
 </div>
 <script>
     //定义计时器
     var index = 0
     var timer = setInterval(run,2000)

     function run() {
         index++;
         var $imgs = $(".outer ul.imgs li")
 //        console.log(index)
         if (index >= $imgs.length) {
             index=0;
         }

         changeimg(index)
     }

     //定义切换至第index张图片的函数
     function changeimg(index) {
 //        console.log(index)
         $(".outer ul li.current").fadeOut(500).removeClass("current")
         $(".bottom ul li.current-point").removeClass("current-point")
         $(".bottom ul li.bottom-slider").eq(index).addClass("current-point")
         $(".outer ul.imgs li").eq(index).fadeIn(500).addClass("current")

 //        console.log($(".outer ul.imgs li").eq(index))
     }

     //当鼠标移至outer区域，停止轮播
     $(".outer").mouseover(function () {
         clearInterval(timer);
         $(".left-btn,.right-btn,.bottom").removeClass("hide")

     })

     //当鼠标移除outer区域，继续进行轮播
     $(".outer").mouseout(function () {
         timer = setInterval(run,2000)
         $(".left-btn,.right-btn,.bottom").addClass("hide")
     })

     //当鼠标点击向左的箭头,向前切换
     $(".left-btn").click(function () {
         if (index == 0) {
             index = $(".outer ul.imgs li").length-1
         }else {
             index--
         }

         changeimg(index)
     })
     //当鼠标点击向右的箭头,向后切换
     $(".right-btn").click(function () {
         if (index == ($(".outer ul.imgs li").length-1)) {
             index = 0
         }else {
             index++
         }

         changeimg(index)
     })

     //bottom切换
     var $num = $(".bottom ul li")
 //    console.log($num.length)
 //    for (var i=0;i< $num.length;i++){
 //        console.log($num[i])
 //        console.log($num[i].id)
         $num.click(function () {
             console.log(this.id)
             changeimg(this.id)
         })

 //    }
   //  for (var )
 </script>

 </body>
 </html>

jQuery轮播图

2、jQuery之面板拖动

鼠标位置：

pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。可以理解为：相对#（0.0）坐标绝对定位
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化。可以理解为：相对可视化左上角坐标绝对定位

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点
也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点

对象位置：

position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
offset()始终返回相对于浏览器文档的距离，它会忽略外层元素

 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
     <div class="model" style="border: 1px solid #ddd;width: 600px;position: absolute;">
         <div class="title" style="background-color: black;height: 40px;color: white;">
             标题
         </div>
         <div style="height: 300px;" class="content">
             内容
         </div>
     </div>
 <script type="text/javascript" src="jquery-3.1.1.js"></script>
 <script>
     $(function () {
         //内容加载完自动执行下面代码
         $(".title").mouseover(function () {
             //移至标题区域鼠标变成move样式
             $(this).css('cursor','move')
         }).mousedown(function (e) {
             //clientX和clientY都是鼠标的坐标
             var mouse_origin_x  = e.clientX;
             var mouse_origin_y  = e.clientY;

             //model对象在窗口的位置,用offset取元素的
             var model_x = $(this).parent().offset().left;
             var model_y = $(this).parent().offset().top;
 //            console.log($(this).parent())
 //            console.log(model_y)
 //            console.log(model_x)

             $(this).bind("mousemove",function (e) {
                 var mouse_dest_x = e.clientX;
                 var mouse_dest_y = e.clientY;

                 var model_dest_x = model_x + mouse_dest_x-mouse_origin_x;
                 var model_dest_y = model_y + mouse_dest_y-mouse_origin_y;
                 $(this).parent().css("left",model_dest_x)
                 $(this).parent().css("top",model_dest_y)

             })
         }).mouseup(function () {
             $(this).unbind("mousemove")
         })

     })
 </script>
 </body>
 </html>

3、jQuery的放大镜

请先找两张图片，一大一小

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <style>
         * {
             padding: 0;
             margin: 0;
         }

         .outer .small_box {
             position: relative;
             height: 400px;
             width: 400px;
             border: solid 2px red;
             overflow: hidden;
         }

         .outer .small_box .float {
             height: 200px;
             width: 200px;
             background-color: darkgrey;
             opacity: 0.5;
             position: absolute;

         }

         .outer .big_box {
             height: 400px;
             width: 400px;
             overflow: hidden;
             position: absolute;
             left: 410px;
             top: 0px;
             z-index: 1;
             border: 2px solid rebeccapurple;

         }

         .outer .big_box img {
             position: absolute;
             z-index: 5;
         }

         .hide {
             display: none;
         }

     </style>
 </head>
 <body>
 <div class="outer">
     <div class="small_box">
         <div class="float hide"></div>
         <img src="small.png" alt="">
     </div>
     <div class="big_box hide"><img src="big.jpg" alt=""></div>
 </div>

 <script src="jquery-3.1.1.js"></script>
 <script>
     $(function () {
         $(".small_box").mouseover(function () {
             $(".float,.big_box").removeClass("hide");

         });
         $(".small_box").mouseout(function () {
             $(".float").addClass("hide")
             $(".big_box").addClass("hide")
         });
         $(".small_box").mousemove(function (e) {

             //找到一大堆的距离
             var float_width = $(".float").width();
             var float_height = $(".float").height();
 //        console.log(float_height,float_width)
             var float_height_half = float_height / 2;
             var float_width_half = float_width / 2;
             var small_box_width = $(".small_box").width()
             var small_box_height = $(".small_box").height()

             var float_position_x = (e.clientX - float_height_half) < 0 ? 0 : (e.clientX - float_height_half)
             var float_position_y = (e.clientY - float_width_half) < 0 ? 0 : (e.clientY - float_width_half)
             if (float_position_x > float_width ) {
                 float_position_x = float_width;

             }
             if (float_position_y > float_height) {
                 float_position_y = float_height;
             }
             $(".float").css("left", float_position_x + "px")
             $(".float").css("top", float_position_y + "px")

             var img_width = $(".big_box img").width();
             var img_height = $(".big_box img").height();
             var bigbox_width = $(".big_box").width()
             var a = small_box_width-float_width;
             var percentX = ($(".big_box img").width() -$(".big_box").width())/(small_box_width-float_width)
             var percentY = ($(".big_box img").height() -$(".big_box").height())/(small_box_height-float_height)

             $(".big_box img").css("left", -percentX*float_position_x+"px")
             $(".big_box img").css("top", -percentY*float_position_y+"px")

         })
     })

 </script>
 </body>
 </html>

jQuery的放大镜效果

参考：

http://www.cnblogs.com/jicheng/p/5945057.html

http://www.cnblogs.com/yuanchenqi/articles/6070667.html