jQuery代码库

一、jQuery概述

jQuery 就是一款免费且开放源代码的JavaScript代码库。
官方下载地址：http://jquery.com/download

二、jQ对象与DOM对象

<body>
    <div id='div'>666</div>
    <input type="text">
    <input type="text">
</body>
<script>    
    //$('input')为jQ对象
    //$('input')[0]则转为DOM对象

    //var d = document.getElementById("div")为DOM对象
    //$(d)则转为jQ对象
</script>

三、jQuery中的选择器

语法：$("#div");
详见手册：

四、jQuery中的属性和CSS

1、基本属性attr

<body>
    <img src="./a.jpg" id="img">
</body>
<script>
    //获取被选元素的属性值
    console.log($('#img').attr('src'));
    //设置被选元素的属性值
    $('#img').attr('src','./abc.jpg');
    //设置被选元素的多个属性值
    $('#img').attr({'width':'100px','height':'100px'});
    //将函数的返回值作为属性值
    $('#img').attr('width',function(){
        return 50*5;
    });
    //删除元素属性
    $('#img').removeAttr('height');
</script>

2、class属性

<style type="text/css">
    .red{
        color:red;
    }
</style>
<body>
    <div id="div">666</div>
</body>
<script>
    //给元素添加class属性
    $('#div').addClass('red');
    //移除元素的class属性
    $('#div').removeClass('red');
    //切换元素的class属性，存在就移除，没有就添加
    $('#div').toggleClass('red');
    //判断元素是否具有某个class属性
    if($('#div').hasClass('red')){
        alert('yes');
    }
</script>

3、css样式设置

<style type="text/css">
    .red{
        color:red;
    }
    .bg{
        background:gray;
    }
</style>
<body>
    <div id="div" class="red bg">666</div>
</body>
<script>
    //根据name获取元素的css属性值
    console.log($('#div').css('color'));
    //设置元素的属性值
    $('#div').css('width','100px');
    //一次为元素设置多个属性值
    $('#div').css({width:100,"height":'100px'});
</script>

jQ中也有专门设置宽高的方法：

width()：获取元素的宽度
width(value)：设置元素的宽度
height()：获取元素的高度
height(value)：设置元素的高度

4、offset位置

<style type="text/css">
    .style{
        width: 100px;
        height: 50px;
        background: gray;
        position: absolute;
        left: 10px;
        top: 10px;
    }
</style>
<body>
    <div id="div" class="style">666</div>
</body>
<script>
    //获取元素的横纵坐标，返回一个对象，包含left和top属性
    console.log($('#div').offset());    //{top:10,left:10}
    //设置元素位置，必须包含left和top属性
    $('#div').offset({top:60,left:80});
    console.log($('#div').offset());    //{top:60,left:80}
</script>

5、表单值、元素内容、元素文本内容

val()：获取表单元素的value值
val(value)：设置表单元素的value值

html()：取得第一个匹配元素的html内容，这个函数不能用于XML文档，但可以用于XHTML文档
html(value)：设置所有匹配元素的内容（字符串中的标签可以被解析）

text()：取得所有匹配元素的内容
text(value)：设置所有匹配元素的文本内容

五、事件编程

1、jQ中的事件绑定

jQ对象.事件名称(事件处理程序);
注意：①事件名称前边不加on（jQ中的事件绑定方法就是原生中对应绑定事件去掉on）
②jQ事件的绑定属于事件监听

2、页面载入事件ready

<script>
    //当DOM加载完毕就会被触发运行
    //注意：只是DOM加载完毕就触发，并不等待资源加载完成，此处要区别于原生对象的onload事件
    $().ready(function(){
        alert(666);
    });
    //ready的简化写法
    $(function(){
        alert(666);
    });
</script>

3、事件切换

<body>
    <div class="style">666</div>
    <div class="style">888</div>
    <img src="./abc.jpg" id="img">
</body>
<script>
    //当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数
    //当鼠标移出这个元素时，会触发指定的第二个函数
    $('div').hover(function(){
        //注意：此处如果用$(this)是鼠标移动上改变当前元素
        //如果用$('div')则是全部匹配到的元素一起改变
        $(this).css('color','red'); 
    },function(){
        $(this).css('color','purple');
    });

    //toggle(fn1,fn2,fn3...,fnN);(注意：jQ版本1.8.3支持或者引入插件)
    //点击切换事件，第一次点击执行fn1，第二次点击执行fn2...
    //当所有函数执行完后再点击，则再从第一个开始执行
    $('#img').toggle(function(){
        $(this).width(100);
    },function(){
        $(this).width(200);
    },function(){
        $(this).width(300);
    });
</script>

4、事件处理

one("事件1 事件2 事件n",fn)：为选中元素绑定一次性事件（多个事件用空格隔开）
bind("事件1 事件2 事件n",fn)：为选中的元素绑定一个或多个事件
unbind("事件1 事件2 事件n",fn)：为选中的元素删除一个或多个事件
jQuery3.0中已经弃用unbind()方法，用off()代替

<script>
    $('#img').one('click mouseleave',function(){
        alert(666);
    }); //绑定的每一种事件只执行一次
</script>

六、jQuery中的效果

1、隐藏和显示

①hide([speed,[fn]])：隐藏显示的元素
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数
②show([speed,[fn]])：显示隐藏的匹配元素
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数

2、自定义动画

animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"
fn:在动画完成时执行的函数，每个元素执行一次

七、jQuery中的文档处理

1、插入操作

①内部插入
append(content)向匹配的元素内部追加内容
appendTo(content)把匹配的元素追加到另一个指定的元素集合中
prepend(content)内容前置到匹配的元素内部
prependTo(content)把匹配的元素前置到另一个指定的元素集合中
②外部插入
after(content)在匹配的元素之后插入内容
before(content)在匹配的元素之前插入内容
insertAfter(content)把匹配的元素插入到另一个指定的元素集合的后面
insertBefore(content)把匹配的元素插入到另一个指定的元素集合的前面

2、删除

empty()删除匹配的元素集合中所有的子节点
remove([expr])从DOM中删除所有匹配的元素

<script>
    //删除选中的节点内容 
    $('#div').empty();
    //在DOM树中删除选中节点
    $('#div').remove();
    //在选中的节点中删除指定节点
    $('div').remove("#div");
</script>

3、克隆（复制）

<script>
    //仅克隆内容
    $('#div').clone();
    //克隆内容与事件
    $('#div').clone(true);
</script>

4、查找

replaceWith(content)将所有匹配的元素替换成指定的HTML或DOM元素

5、包裹

6、查找

eq(index)：根据元素的index索引来查找元素
filter(expr)：筛选操作$(‘div’).filter(‘.cls1’)
not(expr)：匹配除指定选择器以外的其他元素
children([expr])：获取当前元素下的所有子元素
find(expr)：获取当前元素下的所有后代元素
next([expr])：获取当前元素下紧邻的下一个元素
prev([expr])：获取当前元素上紧邻的上一个元素
parent([expr])：获取当前元素的父元素
siblings([expr])：获取当前元素的所有同级兄弟元素

八、JQ插件

<body>
    <div id="div">666</div>
    <input type="text" id="inp">
</body>
<script type="text/javascript">
    //1、为元素扩展新方法
    //示例①
    $.fn.extend({
        f1:function(){
            this.css('color','red');
        },
        f2:function(){}
    });
    $('#div').f1();
    //示例②
    $.fn.extend({
        input:function(fn){
            this[0].oninput = fn;
        }
    });
    $('#inp').input(function(){
        console.log(8);
    });
    //2、为JQ对象扩展新方法
    $.extend({
        f1:function(){alert(888);},
        f2:function(){}
    });
    $.f1();
</script>

九、jQuery中的Ajax

1、Ajax的底层封装

语法：$.ajax(obj)
对象的参数设置及含义：

<body>
    <input type="button" id="btn" value="按钮">
</body>
<script>    
    //Ajax的底层封装
    //get请求
    // $('#btn').click(function(){
    //  $.ajax({
    //      type:'get',
    //      url:'./test.php',
    //      success:function(data){
    //          alert(data);
    //      }
    //  });
    // });
    //post请求
    $('#btn').click(function(){
        $.ajax({
            type:'post',
            url:'./test.php',
            data:'id=6',
            success:function(data){
                alert(data);
            }
        });
    });
</script>

2、Ajax的高层实现

①get请求
$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数
callback:载入成功时回调函数
type:返回内容格式xml, html, script, json, text, _default

<body>
    <input type="button" id="btn" value="按钮">
</body>
<script>
    //无参数   
    // $('#btn').click(function(){
    //     $.get('./test.php',function(data){
    //         alert(data);
    //     },'json');
    // });  
    //有参数
    $('#btn').click(function(){
        //多个参数也可使用对象的形式：{a:6,b:'hsz'}
        $.get('./test.php','a=6&b=hsz',function(data){
            alert(data);
        },'text');
    }); 
</script>

②post请求
$.post(url, [data], [callback], [type])
url:发送请求地址
data:待发送 Key/value 参数
callback:发送成功时回调函数
type:返回内容格式xml, html, script, json, text, _default

<script>
    $('#btn').click(function(){
        $.get('./test.php','a=6&b=hsz',function(data){
            alert(data);
        },'text');
    }); 
</script>

十、jQuery中的跨域问题

<script>
    //当前页面：http://www.hsz.com/test.html
    $('#btn').click(function(){
        //$.ajax方法的jsonp跨域
        $.ajax({
            url:'http://www.blog.com/test.php?fn=?',
            dataType:'jsonp',
            success:function(data){
                alert(data.b);
            }
        });

        //$.get方法的jsonp跨域
        $.get('http://www.blog.com/test.php?fn=?',function(data){
            alert(data.b);
        },'jsonp');
        
        //$.getJSON方法的jsonp跨域
        $.getJSON(
            'http://www.blog.com/test.php?fn=?',
            function(data){
                alert(data.b);
            }
        );
    });
</script>

十、常用插件网址及CDN加速

1、jQ插件库：http://www.jq22.com
2、jQ旋转插件：http://www.jqueryrotate.com
3、百度ECHARTS：http://echarts.baidu.com
4、BooTCDN加速服务：https://www.bootcdn.cn