jQuery 网站

官网：http://jquery.com
标语：write less do more
拆分：js+query(查询)

what

jQuery is a fast, small, and feature-rich JavaScript library.
Jquery是一个快速的轻量的功能丰富的JS库。满足了各种浏览器的兼容问题。
功能： 元素的查找与遍历、元素的操作、CSS操作、元素事件、JS动画。

why

解决web2.0之后的交互问题。
使用感受：简单简洁、链式调用、读写一体

how

---

JQuery 使用

使用思路： 查找+操作

下载+引入

版本问题：1.x IE6+ 2.x IE9+ 3.x IE10+

入口函数

与onload()相比，入口函数不会等待图片的加载，只等待Dom文档加载完成后执行。

1
2
3
4
5
6
7
8
9
10

DOM查询

$(参数) 调用 $ 函数进行查询，参数是一个字符串，CSS选择器

选择器

JQuery 新增的选择器

过滤选择器：

:first 选择列表第一个
:last 选择列表最后一个
:even 选择列表的偶数
:odd 选择列表的奇数
:eq(1)选择列表下表标等于1的项
:gt(2)选择列表下标大于2的项
:lt(3) 选择列表下标小于3的项

表单属性选择器：

表单类型 :input :text :password
表单状态 :checked :enabled :disabled :selected

选择器方法：

children() 选择当前节点的孩子 可传参
siblings() 选择当前节点兄弟
find() 选择当前节点的后代 必传参数
next() 选择当前节点的下一个兄弟
prev() 选择当前节点的上一个兄弟
eq() 选择列表下标为x

jQuery 对象

jquery对象是Js对象的集合 ，他是一个伪数组，里边返回js对象的集合

转换：

• 转成js：取数组元素；
• 转成jquery：$(js)

联系：JQuery对象是JS对象的集合，他是一个数组，数组的每一项就是原生的JS对象。

$ 三种参数

$(选择器字符串)   查找DOM
$(函数)          入口函数
$(对象)         转换成JQuery对象
1
2
3

DOM查询部分代码示例：./src/dom查询.html

    .r{
        border: 3px solid red;
    }
    .g{
        border: 3px solid green;
    }
    .b{
        border: 3px solid blue;
    }
1
2
3
4
5
6
7
8
9

<div class="div0">123div>
    <div class="div1">
        <ul id="myul">
            <li class="li1" name="ulli1">1li>
            <li class="li2" name="numli">2li>
            <li class="li3" name="li-num">3li>
            <li class="li4">4li>
            <li class="li5">5li>
            <li class="li6">
                <ul >
                    <li class="li6">内部li>
                ul>
            li>
        ul>
        <button id="btn1">1button>
        <button id="btn2">2button>
        <button id="btn3">3button>
        <button id="btn4">4button>
    div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

        $(function(){
        // 1、基础选择器
        $('*').css({color:'red'});
        $('div').toggleClass('r');
        $('.div1').toggleClass('b')
        $('#myul').toggleClass('b')

        // 2、属性选择器
        $("li[name='ulli1']").toggleClass('b');
        $("li[name^='ul']").toggleClass('b');
        $("li[name$='li1']").toggleClass('b');
        $("li[name*='li']").toggleClass('b');
        $("li[name~='li']").toggleClass('b');
        $("li[name|='li']").toggleClass('b'); // |必须是连字符的形式
        
        // 3、关系选择器
        $('div ul').toggleClass('g')
        $('div>ul').toggleClass('r')
        $('div.div1').toggleClass('b')
        $('.div1,.div0').toggleClass('b')

        //4、jquery 新增的选择器
        4.1 过滤类型
        $('li:first').toggleClass('r');
        $('#myul>li:last').toggleClass('r');
        $('#myul>li:even').toggleClass('r');
        $('#myul>li:odd').toggleClass('r');
        $('#myul>li:eq(1)').toggleClass('r');
        $('#myul>li:gt(1)').toggleClass('r');
        $('#myul>li:lt(1)').toggleClass('r');

        // 4.2 选择器的方法
        childern 和find 都是基于父元素查找子元素
        $('#myul').children().toggleClass('r');
        $('.li1').siblings().toggleClass('r');
        $('.li1').next().toggleClass('r');
        $('.li3').prev().toggleClass('r');
        $('.li3').nextAll().toggleClass('g');
        $('.li3').prevAll().toggleClass('r');
        $('#myul').find('.li1').toggleClass('r');

        // 比较两种对象 JS 和 JQ对象
        const jsbtn = document.getElementById('btn1')
        const jqbtn = $('#btn1')
        console.log('js对象',document.getElementById('btn1'))
        console.log('jquery对象',$('#btn1'))
        console.log(jsbtn === jqbtn[0])

        // Jquery 事件可以叠加,而js事件会覆盖
        function click1(){
            console.log('c 1')
        }
        function click2(){
            console.log('c 2')
        }
        // js
        jsbtn.onclick = click1;
        jsbtn.onclick = click2;

        // jq
        jqbtn.click(click1)
        jqbtn.click(click2)
    
    
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

DOM 操作

属性的获取与操作

读写一体 不穿参数就是获取值 传参数就会设置值

val()  获取表单值
html()  获取内部html
text()  获取内部文本  写时可传字符串/返回新内容的回调函数 
width()  获取宽度
height()   获取高度
innerwidth()  获取 padding+width
outerwidth() 获取 border+padding+width
attr()   获取属性
1
2
3
4
5
6
7
8

class的操作 参数：字符串类名

addClass()  添加类 
removeClass() 删除类
toggleClass() 切换类
hasClass()  判断类是否存在
1
2
3
4

DOM节点操作

// 添加
A.append(B) 把B添加加到A的最后一个子元素
A.prepend(B) 把B添加到A第一个子元素
A.before(B) //把B添加到A之前
A.after(B)  //把B添加到A之后
// 删除
A.remove() // 删除元素A
A.empty()   // 清空A的子元素
1
2
3
4
5
6
7
8

DOM操作部分代码示例：./src/dom操作.html

    .mytext{
        width: 300px;
        height: 300px;
        padding: 50px;
        border: 10px solid red;
    }
    .red{
        color: red;
    }
    .blue{
        color: blue;
    }
1
2
3
4
5
6
7
8
9
10
11
12

    <div class="mytext" name="12">
        jquery挺简单的～
        <span>是的span>
    div>
    <button id="btn">删除button>
1
2
3
4
5

    $(function(){

        1、属性的操作与获取
        console.log($('.mytext').text())
        console.log($('.mytext').html('12341'))
        console.log($('.mytext').width(500))
        console.log($('.mytext').height())
        console.log($('.mytext').innerWidth())  // width + padding 
        console.log($('.mytext').outerWidth())  // width + padding + border
        console.log($('.mytext').innerHeight())  // height + padding 
        console.log($('.mytext').outerHeight())  // height + padding + border
        console.log($('.mytext').attr('name',9))

        2、class操作
        $('.mytext').addClass('red');
        $('.mytext').removeClass('red');
        $('.mytext').toggleClass('blue')
        console.log($('.mytext').hasClass('red'))

        3、DOM节点的操作 
        添加
        $('.mytext').append('
家啊还是个
');
        $('.mytext').prepend('
开始
');
        $('span').before('
span前边
')
        $('span').after('
span后边
')

        删除
        $('#btn').click(function(){
             $('.mytext').remove(); // 当前dom全部删除
             $('.mytext').empty(); // 清空子元素，并不删除DOM本身
        })
        
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

HTML 事件

    <button id='btn'>点击button>
    <button id='btn1'>测试button>
    <button id='btn2'>绑定button>
    <button id='btn3'>解绑button>
    <button id='btn4'>部分解绑button>
    <hr>
    <div class="out">
        <div class="in">
             123123
        div>
    div>
1
2
3
4
5
6
7
8
9
10
11

常用事件 参数 callback

点击事件：click()
双击：doubleclick()
鼠标进入：mouseenter()
鼠标离开：mouseleave()

            $('#btn').click(function(){ //点击事件
                console.log('click')
            })
            $('#btn').dblclick(function(){ // 双击事件
                console.log('dblclick')
            })
            $('#btn').mouseenter(function(){//鼠标进入
                console.log('mouseenter')
            })
            $('#btn').mouseleave(function(){  // 鼠标离开
                console.log('mouseleave')
            })
1
2
3
4
5
6
7
8
9
10
11
12

绑定/解绑 参数1 事件名 后边参数 事件

绑定：bind() on()
解绑: unbind(事件名称，解绑事件) 只传事件名称全部解绑 off()

            function click1(){
                console.log('click 1');
            }
            function click2(){
                console.log('click 2');
            }
1
2
3
4
5
6

bind()和unbind()：

           // bind/unbind
           $('#btn2').click(function(){
               $('#btn1').bind('click',click1);
               $('#btn1').bind('click',click2);
           })
           $('#btn3').click(function(){
               $('#btn1').unbind('click'); //全部解绑
           })
           $('#btn4').click(function(){
               $('#btn1').unbind('click',click1); //部分解绑
           })
1
2
3
4
5
6
7
8
9
10
11

on()和off()：

           // on/off
           $('#btn2').click(function(){
               $('#btn1').on('click',click1);
               $('#btn1').on('click',click2);
           })
           $('#btn3').click(function(){
               $('#btn1').off('click'); //全部解绑
           })
           $('#btn4').click(function(){
               $('#btn1').off('click',click1); //部分解绑
           })
1
2
3
4
5
6
7
8
9
10
11

阻止冒泡

e.stopPropagation(); // 阻止父元素事件
e.stopImmediatePropagation(); // 阻止全部事件

            // 3、阻止冒泡
            function outClick1(){
                console.log('out click 1');
            }
            function outClick2(){
                console.log('out click 2');
            }
            function inClick1(e){
                // e.stopPropagation(); // 阻止向父元素继续冒泡
                e.stopImmediatePropagation(); // 阻止向后继续冒泡
                console.log('in click 1');
            }
            function inClick2(){
                console.log('in click 2');
            }
            $('.out').on('click',outClick1)
            $('.out').on('click',outClick2)
            $('.in').on('click',inClick1)
            $('.in').on('click',inClick2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

JQ 动画

显示与隐藏 show() hide()
滑入与滑出 slideDown() slideUp()
淡入与淡出 fadeIn() fadeOut() fadeTo()

动画部分代码示例 ./src/动画.html

.div1{
        width: 500px;
        height: 500px;
        background-color: green;
    }
1
2
3
4
5

        <div class="div1">div>
        <button id="btn1">显示button>
        <button id="btn2">隐藏button>
        <button id="btn3">显示/隐藏button>
        <button id="btn4">滑入button>
        <button id="btn5">滑出button>
        <button id="btn6">滑入与滑出button>
        <button id="btn7">淡入button>
        <button id="btn8">淡出button>
        <button id="btn9">淡入与淡出button>
1
2
3
4
5
6
7
8
9
10

$(function(){
        // 参数：不传参数 没有动画
        // 一个参数  字符串：normal/fast/slow 数字类型：表示时间
        //显示与隐藏 show() hide()
        $('#btn1').click(function(){
            $('.div1').show(2000,function(){
                console.log('执行完了')
            })
        })
        $('#btn2').click(function(){
            $('.div1').hide(3000)
        })
        $('#btn3').click(function(){
            $('.div1').toggle()
        })

        // 滑入与滑出 slideDown() slideUp()
        $('#btn4').click(function(){
            $('.div1').slideDown('slow')
        })
        $('#btn5').click(function(){
            $('.div1').slideUp('fast')
        })
        $('#btn6').click(function(){
            $('.div1').slideToggle()
        })
        // 淡入与淡出 fadeIn() fadeOut() fadeTo()
        $('#btn7').click(function(){
            $('.div1').fadeIn()
        })
        $('#btn8').click(function(){
            $('.div1').fadeOut()
        })
        $('#btn9').click(function(){
            $('.div1').fadeTo(2000,0.5);
        })
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

节点遍历/过滤

子孙节点： children() find()
祖先节点： parent() parents() parentUntil()
同级节点：slibilings() next() nextAll() nextUntil() prev() prevAll() prevUntil()
过滤：first() last() eq() filter() not()

代码示例 ./src/dom遍历.html

.r{
        border: 3px solid red;
    }
1
2
3

 <div>
     <h1 class="h1">h1h1>
     <span class="span">spanspan>
     <ul>
         <li class="li1">1li>
         <li class="li2">2li>
         <li id="li" class="li3">3li>
         <li class="li4">4li>
         <li class="li5">5li>
         <li class="li6">
             <ul>
                 <li class="li1">nei1li>
                 <li>nei2li>
                 <li>nei3li>
             ul>
         li>
     ul>
     <p class="p">pp>
 div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 $(function(){
     1、遍历子孙节点 childern() find()
     $('ul').children('span').addClass('r') // 查找符合某种选择器的孩子节点 参数选填
     $('ul').find('span').addClass('r') // 查找符合某种选择器的孩子节点 参数必填

     2、遍历祖先节点 parent() parents() parentUntil()
     $('.spanli').parent().addClass('r');
     $('.spanli').parents().addClass('r');
     $('.spanli').parentsUntil('div').addClass('r'); // 给一个查找的范围 直到找到DIV停止，不包括DIv

     3、遍历同级节点 sliblings() next() nextUntil() nextAll() prev() prevUntil() prevUntil()
     $('.li1').siblings().addClass('r');
     $('.li1').next().addClass('r');
     $('.li1').nextAll().addClass('r');
     $('.li1').nextUntil('.li5').addClass('r');
     $('.li3').prev().addClass('r');
     $('.li3').prevAll().addClass('r');
     $('.li3').prevUntil('.li1').addClass('r');

     4、过滤 first() last() eq() filter() not()
     对应到js  arr[0]  arr[length-1] arr[index]  arr.filter()


     数组问题  
     Jquery对象一直都是数组 内部的处理都会考虑到数据的形式，且是对数组做遍历之后对每一项执行操作。
     const lis = $('.li1')
     const lisS = lis.siblings()//兄弟节点
     console.log(lis,lisS)
     lisS.addClass('r');
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

ajax

$.get('地址','数据',function (res) {})
$.post('地址','数据',function (res) {})
1
2

    <input id="input" />
    <button>提交button>
    <hr>
    post结果：<span class="pres">span>
    <hr>
    get结果：<span class="gres">span>
1
2
3
4
5
6

 $(function(){
     $('button').click(function(){
         $.get('http://127.0.0.1:8080',{value:$('input').val()},function(res){
             $('.gres').html(res)
         });
         $.post('http://127.0.0.1:8081',$('input').val(),function(res){
             $('.pres').html(res)
         })
     })
 })
    </script>
1
2
3
4
5
6
7
8
9
10
11