jQuery

jQuery

1_jQuery的选择器

不管怎么获取,获取到的都是一个伪数组

1-1_通过标签名称

console.log($('div'));

1-2_通过id属性值

console.log($('#div1'));

1-3_通过class属性值

console.log($('.div1'));

1-4_通过标签属性和属性值

$('[属性="属性值"]')

console.log($('[name="div1"]'));

1-5_通过标签结构 ul中的所有子级li

console.log($('ul>li'));

1-6_通过伪类选择器

ul中子级第一个li

console.log($('ul>li:first'));

ul中子级最后一个li

console.log($('ul>li:last'));

ul中子级li,索引下标是奇数的标签

console.log($('ul>li:odd'));

ul中子级li,索引下标是偶数的标签

console.log($('ul>li:even'));

ul中子级li,索引下标是2的标签

console.log($('ul>li:eq(2)'));

1-7_总结

jQuery获取的标签对象,不要直接使用JavaScript的语法形式来操作

JavaScript的标签对象,也不要直接使用jQuery的语法形式来操作

​ 这是两种完全不同的语法形式,获取到的标签对象,也完全不同

​ 但是可以相互转化

jQuery标签对象[索引下标] --- 转化为指定的标签对象,就可以使用对应的JavaScript语法形式

​ 通过JavaScript语法,获取到一个标签对象

​ const oDiv = document.querySelector('div');

​ 转化为jQuery标签伪数组

​ console.log( $(oDiv) );

$(JavaScript标签对象) --- 转化为jQuery标签对象,可以使用jQuery语法形式

​ jQuery语法获取的所有ul中子级li标签,其中索引是0的指定标签

​ console.log($('ul>li')[0]);

2_jQuery的筛选器

筛选器的执行结果,也都是一个伪数组

2-1_li标签伪数组中,第一个标签对象,也是伪数组

console.log( $('ul>li').first() );

2-2_li标签伪数组中,最后一个标签对象,也是伪数组

console.log( $('ul>li').last() );

2-3_li标签伪数组中,按照索引下标获取

console.log( $('ul>li').eq(2) );

2-4_当前标签的上一个兄弟标签

console.log( $('ul>li').eq(2).prev() );

2-5_当前标签的下一个兄弟标签

console.log( $('ul>li').eq(2).next() );

2-6_当前标签之前的所有兄弟标签

console.log( $('ul>li').eq(2).prevAll() );

2-7_当前标签之后的所有兄弟标签

console.log( $('ul>li').eq(2).nextAll() );

2-8_当前标签的所有兄弟标签,不管前后

console.log( $('ul>li').eq(2).siblings() );

2-9_当前标签的直接父级标签

console.log( $('ul>li').eq(2).parent() );

2-10_当前标签的所有父级标签

console.log( $('ul>li').eq(2).parents() );

2-11_根据条件来查找jQuery,标签伪数组中符合的标签

console.log( $('ul').find('[name="li5"]') );

3_jQuery的属性操作

布尔属性用 prop

其他属性都用 attr

删除属性, prop定义的用prop删,其他都用 attr删

3-1_获取标签属性的属性值

方法1: $(标签对象).prop('属性');

并不能获取到所有属性的属性值

有些属性是拿不到的,会是undefined

console.log( $('div').prop('name') );//undefined

console.log( $('button').prop('disabled') );//true

方法2: $(标签对象).attr('属性');

console.log( $('div').attr('name') );//能获取到属性值

但: console.log( $('button').attr('disabled') );//disabled

3-2_新增属性

3-2-1_prop() 新增自定义属性,结果不会显示在标签上,但是确定可以添加上

$('div').prop('index1' , 1);

使用 prop 可以获取到这个属性

获取的结果是数值类型

console.log( $('div').prop('index1') );

3-2-2_新增的自定义属性,可以显示在标签上,也可以通过attr()来获取到

获取的结果是字符串类型

$('div').attr('index2' , 1);

console.log( $('div').attr('index2') );

3-2-3_新增标签本身具有的属性有的支持,有的不支持持

$('div').attr('name' , 'divdiv');//自定义属性值不改变

$('div').attr('id' , 'divdiv1');//id、class属性属性值可以替换改变

3-3_删除属性

prop只能删除,通过prop定义的新增自定义属性

$('div').removeProp('name' , 'divdiv');//不能删除

$('div').removeProp('id' , 'divdiv1');//能删除

attr能删除所有的属性

$('div').removeAttr('name' , 'divdiv');//能删除

$('div').removeAttr('id' , 'divdiv1');//能删除

3-4_jQuery的class操作

3-4-1_新增div1属性值

$('div').addClass('div1');

3-4-2_删除class属性的属性值

$('div').removeClass('div2');

3-4-3_切换如果有,就删除,如果没有就新增

$('div').toggleClass('div2');

3-4-4_判断是否有这个class属性值

console.log( $('div').hasClass('div2') );

3-4-5_新增多个,删除多个

$('div').addClass('div1 div2 div3');

4_jQuery的隐式迭代

4-1_对ul中的所有li进行操作，获取其中的属性

获取 ul中li的name属性的属性值

获取只会获取第一个标签的内容

console.log($('ul>li').attr('name'));

4-2_设定其中的class属性值

设定属性属性值等,会给伪数组中所有的标签都设定上指定的样式,属性等

$('ul>li').addClass('li1').attr('index' , 1);

5_jQuery之内容的操作

5-1_获取或者设定标签内容$().html()

没有参数是获取标签内容

有参数是设定标签内容

支持标签,可以获取标签,也可以设定标签

设定内容,是全覆盖,之前的内容都会被覆盖

等同于 innerHTML()

console.log($('div').html());

设定 支持设定标签

$('div').html('<p></p>');

5-2_获取或者设定标签内容$().text()

没有参数是获取标签内容

有参数是设定标签内容

不支持标签,只能获取标签的文本内容

设定内容,是全覆盖,之前的内容都会被覆盖

等同于 innerText()

5-3_获取标签的value()属性值$().val()

等同于 JavaScript中的 标签对象.value

$('input').val()

6_jQuery之css样式操作

6-1_CSS的样式属性的属性值获取

与JavaScript的区别:

​ JavaScript中,通过 标签.style.属性 = 属性值 来设定行内样式

​ 标签.style.属性 只能获取行内样式

​ window.getComputedStyle(标签).属性 获取执行样式

jQuery中, 通过 $().css() 来设定和获取样式

​ 获取的是执行样式

​ 带减号的样式 font-size 就写成 font-size 或者 fontSize 都行,但是要注意大小写

行内样式可以获取

console.log( $('div').css('color') );

非行内样式

console.log( $('div').css('border') );

6-2_设定样式,有两种形式

形式1, $().css(属性,属性值)

$('div').css('background' , color);

形式2,参数是一个对象,通过对象来设定样式

$('div').css({
    background : color,
    width : '200px' , 
    height : '200px' , 
});

7_jQuery的事件绑定和删除

jQuery的事件绑定分为两种语法形式

7-1_jquery事件绑定语法形式1：

$(标签对象).事件类型(function(){})

7-2_jquery事件绑定语法形式2:

$(标签对象).on( 事件类型 , 事件处理函数 )

 $('div').on( 'click' , function(){
     console.log(123);
 } )

同一个标签,可以通过链式编程,绑定更多的事件类型

通过链式编程,一个标签绑定多个事件

$(标签).on(类型,函数).on(类型,函数).on(类型,函数)....

$('div').on( 'click' , function(){
    console.log(123);
} ).on('mouseover' , function(){
    console.log('移入')
}).on('mouseout' , function(){
    console.log('移出')
})

7-3_jquery事件删除

// 有自定义函数和绑定的函数名称
$('div').on('click' , function(){
    console.log('0')
}).on('click' , fun1).on('click' , fun2).on('click' , fun3)
// 删除只能删除函数名称
// 通过函数名称,找到其中存储的函数地址,删除函数地址
$('div').off('click' , fun3);
function fun1(){
    console.log(1);
}
function fun2(){
    console.log(2);
}
function fun3(){
    console.log(3);
}
//点击div之后结果是0 1 2

7-4_事件绑定的其他语法形式

7-4-1_on语法的第二个参数,是 { } 一个对象,会存储在 e.data 中

在函数中,可以通过 e.data 来读取参数数据

$('[name="w"]').on('click' , { name:'张三' , age:18 , w:123} , function(e){
    console.log(e);
    console.log(e.data.w);//123
})

7-4-2_点击事件只会触发一次

$('div').one('click' , function(){
    console.log(123);
})

7-4-3_$().trigger() 不用触发,直接会执行的事件

$('div').trigger('click',function(){});

7-4-4_$(window).ready 只要标签加载完毕就判定,页面加载完毕

window.onload = function(){
    console.log('我是onload输出的,我是表示页面加载完毕');
}

$(window).ready(function(){
    console.log('我是ready输出的,我也表示页面加载完毕');
})

7-5_jQuery的事件委托

语法: $().on(事件类型,'选择器',{参数},事件处理函数(e){})

​ 通过给父级标签,添加点击事件,通过判断点击的标签内容,来执行不同的事件处理函数

$('div').on('click' , 'h1' , function(){
    console.log('我点击的是h1标签');
}).on('click' , '#s' , function(){
    console.log('我点击的是span标签');
}).on('click' , '.p' , function(){
    console.log('我点击的是p标签');
}).on('click' , '[name="s"]' , function(){
    console.log('我点击的是name属性为s的标签');
}).on('click' , 'ul>li:nth-child(3)' , function(){
    console.log('我点击的是ul中的第三个li标签');
})

js中的事件委托

//获取标签对象
const oDiv = document.querySelector('div');
//事件监听 点击事件
oDiv.addEventListener('click' , function(e){
    // 可以判断标签名称,必须是大写
    if(e.target.tagName === 'H1'){
        console.log('我点击的是h1标签');
    }
    // 判断name属性
    if(e.target.getAttribute('name') == 's'){
        console.log('我点击的是span标签');
    }
    // 判断class等属性
    if(e.target.className == 'p'){
        console.log('我点击的是p标签');
    }
})

7-6_鼠标的移入移出事件

经过子级会触发父级

 $('div').mouseover(function(){
     console.log('我进来了');
 }).mouseout(function(){
     console.log('我出去了')
 })

$().hover

经过子级不会触发父级 类似, mouseenter 和 mouseleave

 $('div').hover( function(){console.log('进进')} , function(){console.log('出出')} )

8_jQuery之节点操作

8-1_创建节点

创建了一个div标签节点

const oDiv1 = $('<div>我是div标签1</div>');

创建标签的同时,可以定义标签的属性和属性值

const oDiv2 = $('<div class="div1" name="div">我是div标签2</div>');

8-2_写入节点

为了方便链式编程,jQuery中提供了多种写入节点的方法

(1), {'子级标签'}) 在最后添加--父子关系

$('父级标签').append( $('<a href="https://www.baidu.com">百度</a>') );

(2), (父级标签) ) 在最后添加--父子关系

$('<span>我是span</span>').appendTo( $('父级标签') );

(3), {'子级标签'}) 在起始添加--父子关系

$('父级标签').prepend(${'子级标签'});

(4) (父级标签) ) 在起始添加--父子关系

${'子级标签'}.prependTo( $('父级标签') );

(5) 已有标签.after(新增标签) 在之后添加 --- 兄弟关系

$('已有标签').after(${'新增标签'});

(6) 新增标签.insertAfter(已有的标签) 在之后添加 --- 兄弟关系

${'新增标签'}.insertAfter( $('已有标签') );

(7) 已有标签.before(新增标签) 在之前添加 --- 兄弟关系

$('已有标签').before(${'新增标签'});

(8) 新增标签.insertBefore(已有的标签) 在之前添加 --- 兄弟关系

${'新增标签'}.insertBefore( $('已有标签') );

8-3_删除节点

empty()

将 标签对象,定义为一个空标签

所谓的空标签,就是没有任何的内容

<div>我是div</div>
$('div').empty();
//结果: <div></div>

remove()

将 标签对象本身,从页面中移除

移除,也是就是这个标签本身都不存在了

<div>我是div</div>
$('div').remove();
//结果: 空

删除子节点,或者清空子节点

通过强大的选择器,选择到子节点就可以了

$('div>span').remove();// 删除div中的span标签

8-4_替换节点

1, $(已有标签).replaceWith(替换成的标签)

​ 使用 替换成的标签 来替换 已有的标签

​ 替换所有

2, 替换成的标签.replaceAll( $(已有标签) )

​ 使用 替换成的标签 来替换 已有的标签

​ 替换所有

<div>
    <span>我是span</span>
    <span>我是span</span>
    <span>我是span</span>
</div>
<script>
// 创建一个节点
	const oA = $('<a href="https://www.baidu.com">百度</a>');
    // 使用这个超链接节点,替换 span标签
	$('div>span').replaceWith(oA);
    //replaceWith 和 replaceAll 只是标签顺序写法不同
    oA.replaceAll( $('div>span') );

8-5_克隆节点

$().clone() 克隆赋值标签节点

​ 参数1: 布尔值 默认值是false,表示不克隆标签上绑定的事件

​ 设定为true,是克隆事件,克隆标签本身和子级标签的事件都克隆

​ 参数2: 布尔值

​ 只有当参数1为true时,才起作用

​ 设定是否要克隆子级标签的事件,false是不克隆

​ 默认值是 true , 因此,当前标签,子级标签,事件都克隆,写一个true就可以了

没有克隆事件

$('div').clone().appendTo( $('nav') ) ;

克隆事件 , 写一个true,父级子级,事件都克隆

$('div').clone(true).appendTo( $('nav') ) ;

克隆事件 , 第一个true,是克隆标签本身事件

​ 第二个false,是不克隆子级标签事件

$('div').clone(true,false).appendTo( $('nav') ) ;

9_jQuery动画

9-1_jQuery动画之标准动画

1, $(标签).show() 显示

​ // 语法 : $(标签).show(时间,运动曲线,运动结束时执行的函数)

​ // 运动到指定的位置,也就是css样式,定义的标签位置

​ // 离那里进,就从那里开始运动

​ // 离 左上角近 就从左上角开始运动

<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
    // 给显示按钮,添加事件
    $('[name="show"]').click(function(){
        $('div').show( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    })
</script>

2, $(标签).hide() 隐藏

​ // 语法 : $(标签).hide(时间,运动曲线,运动结束时执行的函数)

​ // 从原始的位置,开始隐藏

​ // 离那里进,就隐藏到那里

<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
    // 给隐藏按钮,添加事件
    $('[name="hide"]').click(function(){
        $('div').hide( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    })
</script>

3, $(标签).toggle() 切换

​ // 语法 : $(标签).toggle(时间,运动曲线,运动结束时执行的函数)

​ // 隐藏就改为显示,显示就改为隐藏

<button name="show">显示</button>
<button name="hide">隐藏</button>
<button name="toggle">切换</button>
<div></div>
<script src="./jquery.min.js"></script>
<script>
    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').toggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })
</script>

9-2_jQuery动画之折叠动画

1, $(标签).slideDown() 显示

​ // 语法 : $(标签).slideDown(时间,运动曲线,运动结束时执行的函数)

​ // 从 css 设定的位置上 , 下拉显示标签

<button name="down">折叠显示</button>
<button name="up">折叠隐藏</button>
<button name="toggle">折叠切换</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 给显示按钮,添加事件
    $('[name="down"]').click(function(){
        $('div').slideDown( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    })
</script>

2, $(标签).slideUp() 隐藏

​ // 语法 : $(标签).slideUp(时间,运动曲线,运动结束时执行的函数)

​ // 从 css 设定的位置上 , 上卷隐藏标签

<button name="down">折叠显示</button>
<button name="up">折叠隐藏</button>
<button name="toggle">折叠切换</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 给隐藏按钮,添加事件
    $('[name="up"]').click(function(){
        $('div').slideUp( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    })
</script>

3, $(标签).slideToggle() 切换

​ // 语法 : $(标签).slideToggle(时间,运动曲线,运动结束时执行的函数)

​ // 隐藏就改为显示,显示就改为隐藏

<button name="down">折叠显示</button>
<button name="up">折叠隐藏</button>
<button name="toggle">折叠切换</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').slideToggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })
</script>

树状菜单

<style>
        *{
            margin: 0;
            padding:0;
        }

        ul,ol,li{
            list-style: none;
        }

        ul{
            width: 300px;
            border: 3px solid #000;
            margin: 30px auto;
            padding: 0 0 0 20px;
        }

        ul > li{
            cursor: pointer;
        }

        ul > li > ol{
            padding: 0 0 0 20px;
            display: none;
        } 

        ul > li::before{
            content: "+";
        }

        ul > li.active:before{
            content: "-";
        }
    </style>
</head>
<body>
    <ul>
        <li>
            一级菜单
            <ol>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ol>
        </li>
        <li>
            一级菜单
            <ol>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ol>
        </li>
    </ul>
    
    <script src="./jquery.min.js"></script>
    <script>
        $('ul>li').click(function(){
            $(this).toggleClass('active')
            .children('ol').slideToggle().parent().siblings()
            .removeClass('active').children('ol').slideUp();
            
            //$(this)   当前的,点击的 li标签
            //.toggleClass('active')   切换class属性值 , 如果没有,就添加 active,显示为 - 减号如										果有,就删除 active , 显示为 + 加号
            //.children('ol')     找当前 li 中的子级标签 ol  children()  /  find()
            //.slideToggle()      下拉显示和上卷隐藏的切换完成了,当前li的操作,要做其他li的操作
            //.parent()    当前操作是 ol,找到ol的父级,li,也就是当前点击的li    
            //.siblings()  找到当前点击li的兄弟标签
            //.removeClass('active')    删除 class中的active,让 -减号 变 +加号
            //.children('ol')   找到子级ol
            //.slideUp();       上卷隐藏
        })
    </script>

9-3_jQuery动画之渐隐渐现动画

1, $(标签).fadeIn() 显示

​ // 语法 : $(标签).fadeIn(时间,运动曲线,运动结束时执行的函数)

​ // 从 css 设定的位置上 , 下拉显示标签

<button name="in">逐渐显示</button>
<button name="out">逐渐隐藏</button>
<button name="toggle">渐隐渐现</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 给显示按钮,添加事件
    $('[name="in"]').click(function(){
        $('div').fadeIn( 2000 , 'linear' , function(){
            console.log('div完全显示了');
        } )
    })
</script>

2, $(标签).fadeOut() 隐藏

​ // 语法 : $(标签).fadeOut(时间,运动曲线,运动结束时执行的函数)

​ // 从 css 设定的位置上 , 上卷隐藏标签

<button name="in">逐渐显示</button>
<button name="out">逐渐隐藏</button>
<button name="toggle">渐隐渐现</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 给隐藏按钮,添加事件
    $('[name="out"]').click(function(){
        $('div').fadeOut( 2000 , 'linear' , function(){
            console.log('div完全隐藏了');
        } )
    })
</script>

3, $(标签).fadeToggle() 切换

​ // 语法 : $(标签).fadeToggle(时间,运动曲线,运动结束时执行的函数)

​ // 隐藏就改为显示,显示就改为隐藏

<button name="in">逐渐显示</button>
<button name="out">逐渐隐藏</button>
<button name="toggle">渐隐渐现</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 给切换按钮,添加事件
    $('[name="toggle"]').click(function(){
        $('div').fadeToggle( 2000 , 'linear' , function(){
            console.log('div完全切换了');
        } )
    })
</script>

9-4_jQuery动画之自定义动画

jQuery的自定义动画

​ // $(标签).animate()

​ // 可以通过 自定义动画 实现, css样式的改变

​ // 特别注意: 有一些css样式,是不能改变的

​ // 例如颜色

​ // 语法形式:

​ // $(标签).animate( {属性:属性值,属性:属性值....} )

​ // 参数1: 要改变的 css的属性和属性值 可以没有单位px

​ // 参数2: 定义的执行时间

​ // 参数3: 定义的运动曲线

​ // 参数4: 运动结束,执行的函数

<button name="wh">改变宽度高度</button>
<div>中国</div>

<script src="./jquery.min.js"></script>
<script>
$('[name="wh"]').click(function(){
    let randomW = parseInt(Math.random()*(500+1-100)+100 );
    let randomH = parseInt(Math.random()*(500+1-100)+100 );
    console.log(randomW,randomH);
    $('div').animate({
        width : `${randomW}px`,   
        height: `${randomH}px`,
    } , 2000 , 'linear' , function(){
        console.log('运动结束了')
    })
})
</script>

9-5_jQuery动画之结束动画

.stop()

​ // 都不是操作当前这个运动的

​ // 是定义执行当前运动之前,如果还有其他正在执行的运动,应该怎么办

​ // 就从当前标签运动的位置,开始,立即执行下一次运动

.finish()

​ // 都不是操作当前这个运动的

​ // 是定义执行当前运动之前,如果还有其他正在执行的运动,应该怎么办

​ // 从之前运动的终点目标位置,开始,立即执行下一次运动

<style>
    div{
        width: 100px;
        height: 100px;
        background: pink;
        position: absolute;
        top:50px;
        left: 0;
    }
</style>

<button name="go">go</button>
<button name="back">back</button>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    // 点击触发,新的运动,会马上停止当前运动,并且在当前运动的终止位置,开始执行新的运动
    $('[name="go"]').click(function(){
        // go上添加,终止的是 back的运动
        $('div').stop().animate( {left:'500px' , top:'500px'} , 2000)
    })

    $('[name="back"]').click(function(){
        // 给back添加 .stop()
        // 作用是 在 执行当前 back的运动之前,如果还有其他正在执行的运动
        // 要立即停止,从当前停止的位置,直接执行back的运动
        // $('div').stop().animate( {left:'0px' , top:'50px'} , 2000);

        // back添加的,实际上是终止的的go的运动
        $('div').finish().animate( {left:'0px' , top:'50px'} , 2000);
    })
</script>

手风琴效果

<style> 
    *{
        margin: 0;
        padding: 0;
    }
    ul,ol,li{
        list-style: none;
    }

    ul{
        width: 720px;
        height: 280px;
        border: 3px solid #000;
        margin: 30px auto;
        display: flex;
        overflow: hidden;
    }

    ul>li{
        width: 180px;
    }

    ul>li>img{
        height: 100%;
        display: block;
    }
</style>
<ul>
    <li><img src="./images/01.jpg" alt=""></li>
    <li><img src="./images/02.jpg" alt=""></li>
    <li><img src="./images/03.jpg" alt=""></li>
    <li><img src="./images/04.jpg" alt=""></li>
</ul>
<script src="./jquery.min.js"></script>
<script>
    $('ul>li').mouseover(function(){
        // 让当前li的宽度变为520
        // 让兄弟li的宽度变为60
        $(this).stop().animate({width:520} , 1000).siblings().stop().animate({width:60} , 1000);
    })
    $('ul').mouseout(function(){
        // 让所有li的宽度,变为默认的 180
        $('ul>li').stop().animate( {width : 180} , 1000 );
    })
</script>

10_获取标签元素的尺寸

3个方法,4种使用方式

10-1_获取标签的内容

width() 和 height()

正常情况下 是 width 和 height

如果有 内减属性 就是 width / height - padding - border

<style>
    *{
        margin: 0;
        padding: 0;
    }

    div{
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 20px solid #000;
        margin: 30px;
        background: pink;

        /* 内减模式 */
        box-sizing: border-box;
    }
</style>
<div></div>

<script src="./jquery.min.js"></script>
<script>
    console.log( $('div').width() ,  $('div').height() );
</script>

10-2_获取标签的内容 + padding

innerWidth() 和 innerHeight()

正常情况下 是 width / height + padding

如果有 内减属性 就是 width / height - border

console.log( $('div').innerWidth() , $('div').innerHeight() );

10-3_获取标签的内容 + padding + border

outerWidth() 和 outerHeight()

正常情况下 是 width / height + padding + border

有 内减属性 就是 width / height

console.log( $('div').outerWidth() , $('div').outerHeight() );

10-4_获取标签的内容 + padding + border + margin

outWidth(true) 和 outHeight(true)

有 内减属性 就是 width / height + margin

正常情况下 是 width / height + padding + border + margin

console.log( $('div').outerWidth(true) , $('div').outerHeight(true) );

11_获取标签元素的占位

offset()

可以获取

​ // 获取到 页面左上角 的间距

可以设定

​ // 设定参数是一个对象

​ // 设定的是 当前标签 与 页面左上角 的间距

​ // 与 标签 之前,写什么定位,写不写定位,写不写margin,写多少

​ // 都没有任何关系, offset() 写多少,跟 页面左上角 就间距多少

获取: console.log($('p').offset());

以定位形式来设定 与 页面左上角的间距

$('p').offset({left:0 , top:0});

position()

获取 当前标签 与 父级标签的 位置关系 --- 只获取定位的数值

​ // 执行结果是一个对象

​ // 只能获取,不能设定,不能传参

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

12_获取浏览器上卷高度

不用考虑浏览器的兼容性,jQuery会来处理

scrollTop()上卷的高度

scrollLeft() 平移的宽度

<style>
    *{
        margin: 0;
        padding:0;
    }
    body{
        height: 5000px;
    }

    div{
        width: 100%;
        height: 100px;
        background: pink;
        position: fixed;
        top:0;
        left:0;
        display: none;
    }

    p{
        width: 100px;
        height: 100px;
        background: blue;
        position: fixed;
        top:500px;
        right:100px;
        font-size: 40px;
        color: red;
        display: none;
    }
</style>

<div></div>
<p>返回</p>

<script src="./jquery.min.js"></script>

<script>
    // 获取浏览器上卷高度
    
    // jquery中,滚动条的监听事件
    $(window).scroll(function(){
        // 判断 浏览器的上卷高度
        if($(window).scrollTop() > 500){
            // 大于 500 , 让 div,下拉显示
            $('div').slideDown();
            $('p').slideDown();
        }else{
            // 小于等于 500 , 当div,上卷隐藏
            $('div').slideUp();
            $('p').slideUp();
        }
    })
    
    // 点击返回顶部
     $('p').click(function(){
         // 如果是设定,可以是 $(window) 或者 $('html')
         // 不过 这个是 瞬间完成 的
         // $(window).scrollTop(0);

         // 通过自定义动画,使用动画效果完成
         // 只能是 $('html') 来执行
         $('html').animate( { scrollTop: 0 } , 2000 );
     })

</script>

13_jquery的阻止冒泡、默认行为

阻止冒泡事件

e.stopPropagation();

$('标签对象').click(function(e){
    // 阻止冒泡事件
    e.stopPropagation();
})

阻止默认行为

e.preventDefault();

$('form').submit(function(e){
    // 如果是发送ajax请求,即时写了return阻止了函数的执行
    // 但是form表单有默认的提交事件,也会执行提交
    // 必须先阻止默认事件的执行
    e.preventDefault();
    // 如果账号密码正确,会发送ajax请求

    let nameVal = $('input').val();
    if( nameVal !== '张三' ){
        // 如果账号不是张三,就执行return,总之发送请求
        return;
    }
})

14_jquery封装Ajax请求

不用考虑 兼容,跨域等问题, jQuery全都给我们解决了

只需要在设定请求时,设定不同的参数,就可以完成不同的请求

get请求方式

$.get({

​ url : 地址(必填)

​ data : 携带的参数 对象形式

​ dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析

​ success : function(){} 请求成功时执行的函数

​ })

post请求方式

$.post({

​ url : 地址(必填)

​ data : 携带的参数 对象形式

​ dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析

​ success : function(){} 请求成功时执行的函数

​ })

综合方式

$.ajax({

​ 常用:

​ url : 地址;

​ type / method : 请求方式 默认值是get方式

​ data : { } 传参参数,必须是对象形式

​ dataType : json, 设定为json,会自动解析反应提中的json串

​ success : function(){} 请求成功执行的函数

​ 不常用:

​ async : 设定是否异步,默认值是true,异步执行ajax请求

​ error : function(){} 请求错误时执行的函数,请求成功时不会执行

​ timeout : 设定时间,单位 毫秒

​ 如果请求时间超过设定的时间,认为是请求失败

​ 必须是异步执行

​ cache : 设定是否缓存请求结果 ,默认值是 true,缓存请求结果

​ 必须是get方式,这个设定才起作用 ,post方式不会缓存,设定也没有效果

​ context : 指定 执行函数中 this的指向

​ })

jsonp跨域方式

<script>
    /*
      https://api-gw.damai.cn//search.html
      ?cat=1&
      destCity=%E5%85%A8%E5%9B%BD&
      _ksTS=1588160805375_101&
      callback=jsonp102&
      _=1234567890111
    */

    $.ajax({
        url: 'https://api-gw.damai.cn//search.html',
        dataType: 'jsonp', // 必须是 jsonp
        data: {
            cat: 2,
            destCity: '全国',
            _ksTS: 1588160805375_101
        },
        success: function (res) {
            console.log(res)
            // res 就是人家网站上的数据
        }
	})
</script>

xhr代理跨域方式

<script>
    $.ajax({
    	  //location = /dm {proxy_pass dm网址;}
          url: '/dm', // 你的代理标识符, 就是你的 nginx-conf 文件里面的 /xx
          type: 'GET', // 请求方式
          data: { // 你要携带的参数
            keyword: '',
            cty: '', // 城市, 默认为空, 表示全国, 你是哪个城市就写哪个城市
            ctl: '', // 分类
            sctl: '', // 子分类
            tsg: 0,
            st: '',
            et: '',
            order: 1, // 排序
            pageSize: 25, // 一页显示多少条数据
            currPage: 2, // 当前是第几页
            tn: ''
          },
          dataType: 'json',//期望的数据类型,如果为json,会将后端返回的json串,自动解析
          success: function (res) {
            console.log(res)
            // res 就是人家的数据
          }
    })
</script>
#### 15_jQuery的深浅拷贝

> 浅拷贝
>
> ​		拷贝复制引用数据类型的存储地址
>
> ​		执行浅拷贝,执行的变量之前,相互有关联
>
>  		一个操作修改存储的数据内容,另一个也会影响
>
> 深拷贝
>
> ​		拷贝复制引用数据类型的具体数值
>
> ​		执行浅拷贝,执行的变量之前,相互没有关联
>
> ​		一个操作修改存储的数据内容,另一个不会影响

> `$.extend() `深浅拷贝方法
>
> $.extend(参数1 , 参数2 , 参数3 , 参数4 ,参数5 ..);

```javascript
const obj = {
    id : 1,
    userName : 'zhangsan',
    userPwd : '123456',
    phone : '12345678901',
    data : {
        sex : '男',
        age : 18,
    }, 
};

const newObj = {};

// 默认值是false,或者不写
// 默认执行的是浅拷贝
// 如果存储的是基本数据类型,拷贝之后,两个变量之间的操作,相互不会影响
// 如果存储的是引用数据类型,拷贝之后,两个变量之间的操作,相互会影响
$.extend(newObj , obj);

// 如果设定参数1为 true
// 执行的是深拷贝
// 如果存储的是引用数据类型,拷贝之后,两个变量之间的操作,相互不会影响
$.extend(true , newObj , obj);

16_jQuery的多库并存

jQuery 设定 通过 $ 或者 jQuery 来代用设定的函数方法

如果与其他js文件设定的方法相互冲突,jQuery会交出控制权

语法方式1:

​ $.noConflict() jQuery.noConflict()

​ 都是 交出 $ 标识符 的控制权

​ 保留 jQuery 表示符 的控制权

语法方式2:

​ $.noConflict(true) jQuery.noConflict(true)

​ 都是 交出 $ 和 jQuery 标识符 的控制权

语法形式3:

​ 声明 变量 = $.noConflict(true) 声明 变量 = jQuery.noConflict(true)

​ 定义变量 为 jQuery 新的 标识符

​ 可以通过新的标识符,来获取 jQuery 的函数方法

17_jQuery的全局函数

jQuery的 ajax 全局钩子函数

1, $(window).ajaxStart()

​ 在 ajax 开始之前 触发

​ 如果一个作用域下,有多个人ajax,只会在第一个 ajax 请求之前触发

​ 有多个ajax,也只触发一次

2, $(window).ajaxSend()

​ 在 ajax 发送之前,会触发

​ 有几次send,就会触发几次

3, $(window).ajaxSuccess()

​ 在 ajax 请求成功时会触发

​ 有几次请求成功,就触发几次

4,$(window).ajaxError()

​ 在 ajax 请求失败时会触发

​ 有几次请求失败,就触发几次

5,$(window).ajaxComplete()

​ 在 ajax 请求完成时会触发

​ 有几次请求完成,就触发几次

6,$(window).ajaxStop()

​ 在 ajax 所有的请求完成时会触发

​ 多次请求结束,只有最后一次会触发

18_jQuery的插件机制

jquery的方法大致分为两大类:

​ ==>1 全局的$上的方法,比如:

​ ==>$.ajax

​ ==>$.each

​ ==>2 jquery的实例对象上的方法,比如:

​ ==>$('li').addClass()

​ ==>$('li').append()

​ ==>$('li').empty()

​ ==>3 jquery插件扩展在全局的$或者是jquery的实例对象上的方法,这个方法可以实现某个功能

​ ==>扩展方法1 :一次只能扩展一个

​ ==>扩展在.要扩展的属性/方法名 = 属性值/方法体

​ ==>扩展在jquery的实例对象上:.fn.要扩展的属性/方法名 = 属性值/方法体

​ ==>扩展方法2: 一次可以扩展多个

​ ==>扩展在.extend({要扩展的方法名1:方法体1,要扩展的方法名2:方法体2})

​ ==>扩展在jquery的实例对象上:$.fn.extend({要扩展的方法名1:方法体1,要扩展的方法名2:方法体2})

<div></div>
//扩展方法1
$.sum = function(a,b){
    console.log(a+b)
}

$.sum(1,2);


$.prototype.ccc = function(){
    console.log('ccc')
}

$('body').ccc();
$('div').ccc()


//扩展方法2
$.extend({
    fn1:function(){console.log('fn1');console.log(this==$)},
    fn2:function(){console.log('fn2');console.log(this==$)}
})
$.fn1()
$.fn2()

$.fn.extend({
    cc1:function(){
        console.log('cc1')
        console.log(this)
    },
    cc2:function(){
        console.log('cc2')
        console.log(this)
    }
})
//cc1方法中的this就是$('div')这个实例对象本身
$('div').cc1()