Jquery

Dom文档加载步骤

1. 解析HTML结构
2. 加载外部脚本和样式表文件
3. 解析并执行代码
4. DOM树构建完成
5. 加载图片等外部文件
6. 页面加载完毕

入口函数和window.onload()对比

window.onload与$(document).ready()

1 执行时间不同
    window.onload必须等到页面内包含图片的所有元素加载完毕后才能执行。
    $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕
2 编写个数不同
    window.onload不能同时编写多个， 如果有多个window.onload方法， 只会执行一个
    $(document).ready()可以同时编写多个并且都可以得到执行
3 简化写法不同
    window.onload没有简化写法
    $(document).ready(function(){}) 可以简写成$(function(){});

jquery和js的转换

$(function(){
    // 获取jquery对象
    console.log($("#box2"));
    // 获取js对象
    var oDiv2 = document.getElementById('box2');
    console.log (oDiv2);
    // jquery ==> js对象
    console.log($('#box2')[0]);
    console.log($('#box2').get[0]);
    
    // js对象 ==> jquery对象 $(js对象)
    console.log($(oDiv2));
    // 如果是js对象更加希望转换成jquery才操作简便的dom
    // 因为js是包含jquery, jquery只是封装DOM事件ajax动画, 就要将jquery对象转换成js对象
    // 总结： 如果是jquery对象一定要调用jquery的属性和方法, 如果是js对象一定要调用js的属性和方法,注意不要将这两个对象混淆, 在jquery大部分都是api length和索引是他的属性
});
    

jquery的基础选择器

// 使用jquery的时候 要有入口函数 回调函数
$(document).ready(function () {
    // 1 id选择器
    console.log($('#brother'));
    $('#brother').css('color','red');
    // 2 标签选择器
    $('a').css('color','yellow');
    $('a').css({'color':'red','font-size':'24px'});  // 设置多个值

    // 3 类选择器
    $('.li3').css('background','green');

    // 4 *通配符选择器
    console.log($('*'));
})

层级选择器

// 1. 后代选择器 div p
    $('#box p').css('color','red');

// 2. 子代选择器
$('#box2>p').css('color','yellow');

// 3. 毗邻选择器 匹配所有紧接着选中元素的兄弟
$('#father+p').css('font-size','30px');

// 4. 兄弟选择器~
$('#father~p').css('background','blueviolet');

// 5. 获取第一个元素
$('li:first').css('font-size','50px');

// 6. 获取最后一个元素
$('li:last').css('font-size','50px');

基本过滤选择器

// 1. 获取索引为奇数的
$('li:odd').css('color','red');
// 2. 获取索引为偶数的
$('li:even').css('color','yellow');
// 选中索引值为1的元素
$("li:eq(1)").css('font-size','100px');
// 大于索引值1
$("li:gt(1)").css('font-size','100px');
// 小于索引值1
$("li:lt(1)").css('font-size','13px');

属性选择器

// 标签名[属性名]查找所有含有id属性的该标签名的元素
  $("li[id]").css('color','red');
// [attr=value] 匹配给定的属性是某个特定值的元素
  $("li[class=what]").css('font-size','30px');
// [attr!=value] 匹配所有不含有指定的属性或者不等于特定值的元素
  $("li[class!=what]").css('color','darkgreen');
// 匹配给定的属性是以某些值开始的元素
  $("input[name^=username]").css('background','red');
// 匹配给定的属性是以某些值结尾的元素
  $("input[name$=123]").css('background','blue');
// 匹配给定的属性包含某些值的元素
  $("btn[class*=123]").css('background','blue');

筛选选择器

// 获取第n个元素 数值从0开始
 $('span').eq(2).css('color','red');
// 获取第一个元素
 $('p').first().css('color','yellow');
// 选取一个元素的父级元素
 $('li').parent().css('width','300px');
// .siblings()选择所有的熊德元素
 $('div').siblings('li').css('color','red');
// find()查找所有的后代元素
 $('div').find('p').css('color','orange')

jquery的显示效果

// hide() 和show() 方法
     var isShow = true;
            $('#btn').click(function () {
                if(isShow){
                    $('#box').show('slow',function () {
                        alert(123); // 回调函数
                         $('#box').text('盒子出来了');
                        isShow = false
                    })
                }else {
                    $('#box').hide(2000,function () {
                         $('#box').text('');
                         isShow = true
                    });

                }

            })
// toggle 开关 如果元素显示则隐藏，反之亦然
      $('#btn').click(function () {
                $('#box').stop().toggle(3000)
            })
// slideDown 通过高度变化(向下增大) 来到动态显示所有匹配的元素，在显示完成后触发一个回调函数
// SlideUP   通过高度变化(向上减小) 来动态隐藏所有匹配的元素, 在隐藏完成后可选地触发一个回调函数。
      $(function () {

            $('#btn').hover(function () {
                $('#box').slideDown(2000);
            },function () {
                 $('#box').slideUp(2000);
            })
        })

// fadeIn    通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选的触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化  
// faddeOut  通过不透明度的变化来实现所有匹配元素的淡出效果
       $(function () {
        $('#box').mouseover(function () {
            $('#box').fadeOut(2000);
        });

        $('#btn').mouseout(function () {
            // $('#box').fadeOut(2000);
            $('#box').fadeToggle(2000,0.3)
        })
    })

animimate  用于创建自定义动画函数
    语法：animate(params,[speed],[fn]
    参数：
        params：一组包含作为动画属性和终值的样式属性和及其值的集合
        speed：三种预定速度之一的字符串（"slow","normal",or"fast")或表示动画时长的毫秒数值(如：1000）
        fn:在动画完成时执行的函数，每个元素执行一次0

实例：
    $(function(){
        // animate({队列的属性}, 时间, fn)
        var json = {
            "500",
            height:500,
            left:300,
            top:300
        }
        $('div').animate(json, 2000);
        
    })

stop  停止所有在指定元素上正在运行的动画
    语法：stop([clearQueue],[jumpToEnd])
    参数：    
        clearQueue: 如果设置成true，清空队列，可以立即结束动画
        gotoEnd: 让当前正在执行的动画立即完成，并且重设show和hide的原始样式

delay  用来做延迟的操作
    语法: delay(1000)  一秒之后做后面的操作

 jquery的属性操作

jquery对象有它自己的属性和方法， 属性找找模块分为四个部分：html属性操作, dom属性操作, 类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。 如attr() removeAttr()
DOM属性操作: 对DOM元素的属性进行读取， 设置和移除操作。 如prop() removeProp()
类样式操作: 是指对DOM属性className进行添加 移除操作。 比如addClass() removeClass() toggleClass()
值操作：是对DOM属性value进行读取和设置操作 如html() text() val()

attr 设置属性值或者返回被选元素的属性值
    // 获取值：attr()设置一个属性值的时候 只是获取值
    var id = $('div').attr('id')
    console.log(id)
    var cla = $('div').attr('class')
    console.log(cla)
    
    //设置值
    // 1 设置一个值 设置div的class为box

removeAttr 从每一匹配的元素中删除一个属性
     $('#box').removeAttr('name');

prop 获取在匹配的元素集中的一个元素的属性值,它是对当前匹配到的dom对象设置属性。
    console.log($('li').prop('class'));// 获取的是第一个元素的className
    // 设置值
    $('li').first().prop('name','app');
    console.log( $('li').first());
    
removProp用来删除由.prop方法设置的属性集
         // 删除值
        $('li').first().removeProp('name');
        console.log( $('li').prop('name')); // undefined
        
addClass 添加多个类名
    $('span').addClass('span2 span3');
    
removeClass 移除全部类名或指定类名
    $('span').removeClass('span2');
    
toggleClass 如果存在就删除一个类如果不存在就删除一个类
    $('span').click(function(){
        $(this).toggleClass('active')
    })
    
text() 只获取文本的内容 等于js的innerText
    console.log($('#box').text().trim());
    
html() 获取文本和标签的内容 等于js的innerHTML
    console.log($('.box').html().trim());
    
val() 或取input中的值 相当于js的value
    console.log($('input').val())

jQuery的文档操作

  1 插入操作

1 父元素.append(子元素)追加某元素 父元素中添加新的元素

    var oli = document.createElement('li')
    oli.innterHTML = '呵呵'
    
    // jquery中dom操作
    $('ul').append('<li>1233</li>')
    $('ul').append(oli)        // 插入js对象
    // 如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置消失。简言之, 就是一个移动操作
    $('ul'.append($('#app'))
    
2 子元素.appendTo(父元素)追加到某元素 子元素添加到父元素
    $('<a href="#">路飞2</a>').appendTo($('ul'));
    // jquery链式编程
    $("<p>harry</p>").appendTo('.box').click(function(event){
        $(this).css({
            100,
            height:100,
            backgroundColor:'red'
        }).text('jerry');
    });
    
3 prepend前置添加, 添加到父元素的第一个位置
    $('ul').prepend($('<li>插到第一</li>'))

4 prependTo 后置添加，第一个元素添加到父元素中
    $('<li>插到第0</li>').prependTo($('ul'))

5 父元素.after(子元素)在匹配的元素之后插入内容与子元素.insertAfter(父元素)
    $('ul').after('<h4>我是一个h3标题</h4>')
    $('<h5>我是一个h2标题</h5>').insertAfter('ul')

6 父元素.before(子元素)在匹配的元素之前插入内容与子元素.inserBefor(父元素)
    $('ul').before('<h3>我是一个h3标题</h3>')
    $('<h2>我是一个h2标题</h2>').insertBefore('ul')

2 复制操作

clone()克隆匹配的DOM元素并且选中这些克隆的副本
    
    $('button').click(function(){
        // 1 .clone():克隆匹配的DOM元素并且选中这些克隆的副本
        // 2 .clone(true): 元素以及其所有的时间处理并且选中这些克隆副本(简言之，副本具有与真身一样的事件处理能力)
        $(this).clone(trun).insertAfter(this);
    })

3 替换操作

$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string, js对象,jquer对象
// 将所有的H5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
// 将所有H5标题标签替换成id为app的dom原故事
$('h5').replaceWith($('#app'));
// 将所有h2标签替换成p标签
$('<br/><hr/><button>按钮</button>').replaceAll('h4');

4 删除操作

删除节点后，事件也会删除(简而言之， 删除整个标签)
$(selector).remove()；
删除节点后事件会保留
$(selector).detach()；
清空选中元素中的所有后代节点
$(selector).empty();

5 操作input中的value值

jquery change
    $('input[type=radio]').change(function(){
        // 获取值
        console.log($(this).val());
        // 获取选中的值
        console.log($('input[type=radio]:checked').val())
        
    })
    // 加载页面时 获取选中的索引
    console.log($('select').get(0).selectedIndex);
    $("select").change(function(){
        // 获取选中项的值
        console.log($('select option:selected').text());
        // 获取选中项的值 方法二
        console.log($('select').find('option:selected').text());
        // 获取选择项的索引 $('select').get(0); 将jquery对象转化为js对象
        console.log($('select').get(0).selectedIndex)；
        console.log($('select option:selected').index());
    })

jQuery的位置信息

// 1 获取匹配元素的相对父元素的偏移 position

console.log($('p').position().left);
console.log($('p').position().top);

var offsetTop = $('p').position().top + 50;

$('#btn').click(function () {
    $('p').animate({top:offsetTop},1000)
});

// 获取匹配元素 相对滚动条卷起的位置信息 scrollTop scrollLeft

$(document).scroll(function () {
    console.log($(document).scrollLeft());
    console.log($(document).scrollTop());
});

// 获取匹配元素在当前视口的相对偏移 相对于浏览器与父相子绝没有任何关系
// 它的属性是只读的
console.log($('#box').offset());
console.log($('p').offset().top);
console.log($('p').offset().left);
console.log($('#btn').offset().left);
console.log($('#btn').offset().top);

// 获取元素的宽高
console.log("宽"+$('#box').width());
console.log("高"+$('#box').height());

// 设置宽高
$('#box').width(400);

// innerWidth /outerWidth

// 获取 width + 2*padding 不包括边框   获取匹配元素的内部宽度
console.log($('#box').innerWidth());  // 420

// 获取 width + 2*padding 包括两个边框 获取匹配元素的外部宽度
console.log($("#box").outerWidth());

jquery的筛选方式

1   eq         获取第N个元素                                                 eq(index)         $("p").eq(1)
2   first      获取第一个元素                                                first()           $('li').first()
3   last       获取最后一个元素                                              last()            $('li').last()
4   hasClass   检查当元素是否包含某个特定类如果有返回True                        hasClass(类名)    $('li').hassClass('lil')
5   children   取得一个包含匹配的元素集合中每一个元素的所有子元素集合              children()        $("div").children()
6   parent     取得一个包含匹配元素的唯一父元素的元素集合                        paraent()         $("p").paraent()
7   prev       取得一个包含匹配元素集合中每一个元素紧邻的前一个同辈元素集合         prev()            $("p").prev()
8   preAll       查找当前元素之前所有的同辈远古三                              preAll()          $("div:last").prevALL().addClass("before")
9   siblings   筛选给定的同胞同类元素(不考虑给定元素本身)                       siblings(元素）    $('#leftBox li').eq(0).siblings('li').addClass('active')

jquery的事件

事件的概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。
想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念

什么是事件流

事件流描述的是从页面中接收事件的顺序

1 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

• (1) 事件捕获阶段；
• (2) 处于目标阶段；
• (3) 事件冒泡阶段

2 冒泡事件处理

$(function(){
    // 给按钮绑定事件
    // 在所有的事件回调函数中都会有默认的事件对象
    $('.father button').click(function(event){
        // 原生js的事件对象
        console.log(event);
        // 阻止事件冒泡
        event.stopPropagation();
    })
    
    $('.father').click(function(event){
        alert('父亲被点击了')
        // 既阻止了事件冒泡又阻止了默认事件
        return false;
    })
})

3 事件对象

$(function(){
    $('button').click(function(e){
        // currentTaget 当前事件的目标对象
        console.log(e.currentTarget);
        // target获取的是事件的触发对象, js对象
        console.log(e.target);
        console.log(e.target.innerText);
        // 在使用事件的是时候，99%都需要阻止冒泡
        e.stopPropagation();
    });
    
    $('body').click(function(e){
        console.log(e.target);
    })
    
    // 原生oninput事件 监听实时输入的值
    $('input')[0].onintpu = function(e){
        console.log(e.target.value);
        $('.content').text(e.target.value);
    }
})

4 jquery的单双击事件

解决单双击的冲突问题
    // 定义setTimout执行方法
    var time = null；
    $('div').click(function(){
        // 取消上次延时未执行的方法
        clearTimeout(time);
        // 执行延时
        time = setTimeout(function(){
            // do function在此处写单击事件要执行的代码
        }, 300);
    });
    
    $('div').dbclick(function() {
        // 取消上次延时未执行的方法
        clearTimeout(time);
        // 双击事件的执行代码
    });

5 Jquery鼠标移入移出事件

$(function(){
    // 鼠标穿过被选元素和被选元素的子元素会触发此事件
    $('.father').mouseover(function(event){
        console.log('移入了')
    })
    
    $('.father').mouseout(function(event){
        console.log('移出了了')
    })
    
    // 鼠标只穿过被选元素会触发此事件
    $('.father').mouseenter(function(event){
        console.log("进入了");
    });
    
    $('.father').mouseleave(function(event){
        console.log("离开了")
    })
})

6 事件委托

根据事件冒泡的原理,通过给父级元素绑定事件实现子元素的事件触发

<body>
    <ul>
        <li>Alex</li>
        <li>SAM</li>
        <li>Jerry</li>
    </ul>
</body>
<script type="text/javascript">
    $(function(){
        // 如果是未来追加的元素建议使用事件委托来绑定事件
        // 参数: 事件名称  要绑定事件的子元素  执行函数 
        $('ul').on('click', "li", function(e){
            alert($(this).text())
        })
    })
</script>

jquery的ajax

1 什么是ajax

AJAX = 异步的javascript和XML
简而言之,在不重载真个网页的情况下AJAX通过后台加载数据,并在网页上进行显示
通过jQuery AJAX方法能够使用HTTP GET和 HTTP Post从远程服务器上请求文本, HTML, XML或JSON。同时能够把这些外部数据直接载入网页被选元素中

2 jquery的$.ajax()方法(重要)

jquery的$.ajax()f方法是做ajax技术经常使用的一个方法

参数如下：

url： 要求String类型的参数，(默认为当前页面地址)发送请求的地址
type: 要求String类型的参数, 请求方式(post或get)默认为get。注意其他http请求方法 例如put和delete也可以使用
timeout: 要求为Number类型的参数, 设置请求超时时间(毫秒), 次设置覆盖$.ajaxSetup()方法的全局设置
anync: 要求为Boolean类型的参数, 默认设置为true, 所有请求均为异步请求。 如果需要发送同步请求, 请将此选项设置为false。注意, 同步请求将锁住浏览器, 用户其他操作必须等待请求完成才执行
cash：要求Boolean类型的参数, 默认设置为true(当dataType为script时, 默认为false)，设置false将不会从浏览器中家长请求信息
data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。
　　html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
　　script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
　　json：返回JSON数据。
　   jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
　　text：返回纯文本字符串。
beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 }
complete：要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }
success：要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
        (1)由服务器返回，并根据dataType参数进行处理后的数据。
　　 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 
error: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }
contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。
dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }
global： 要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。
jsonp： 要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
username： 要求为String类型的参数，用于响应HTTP访问认证请求的用户名。
password： 要求为String类型的参数，用于响应HTTP访问认证请求的密码。
processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

3 jquery的AJAX操作

参考之前写的文章：

https://www.cnblogs.com/harryblog/p/9368101.html