开始学习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>

 

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>

 

 

参考：

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

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