JQuery基础知识

JQuery介绍

JQuery是一个JavaScript库，是对ECMScript、dom、bom、的一个浅封装，让用户更方便操作。
理解成一个大的函数，函数内部封装了很多函数来供你使用。

题外话：
老师说，现在很多大公司都不怎么用jQuery来做开发了，但是有一些公司还会用，但是老师说那个公司面试如果提问jQuery的知识，可以撤了。。。。

但是还是得学。。。

下面很多都是比较原生js和jQuery之间的不同和各自的用法

jQuery库包含以下功能

HTML选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和函数
HTML DOM遍历和修改
AJAX

挂一下jQuery的文档

在线使用:https://www.bootcdn.cn/jquery/

中文文档:https://jquery.cuishifeng.cn/

JQuery安装

jQuery安装十分简单，只需要将jQuery的库导入到html中即可，我们可以下载下来也可以使用CDN资源。
一般我们在下载或者使用cdn资源的时候，都会让我们选择jquery.js 与 jquery.min.js版本，它们的区别在于jquery.min.js是经过压缩的，体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。

有两种引入方法

第一种，本地引入
在当前目录下新建一个js文件，把官方文档的原生代码全部放进去，再导入
中文文档：https://www.bootcdn.cn/jquery/

  引入示例：<script src="./js/jquery.js"></script>

第二种在线引入
直接引入标签或链接

引入示例：src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

验证jQuery是否引入成功

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

   <!-- 本地引入 -->
   <!-- <script src="./1-jquery.3.6.0.js"></script> -->
   <script>
    //    成功打印则引入jQuery成功
       console.log($);   //function jQuery(selector, context)   
       console.log(jQuery);
       console.log($ === jQuery);  //true
   </script>

jQuery函数

通过"jQuery"和'$'来调用函数

$(选择器)
通过选择器选择到符合条件的Element元素，将其保存到jQuery对象中
$(html片段)
将html片段转换成Element元素，然后再封装成一个jQuery对象
$(Element元素)
将Element元素转换成一个jQuery对象
$(匿名函数)--->> $(function(){})
匿名函数在文档加载完毕后执行，类似于window.onload=function(){}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./1-jquery.3.6.0.js"></script>
    <script>
        // 选择到符合条件的Element元素，将其保存到jQuery对象中
        //选择器   匿名函数$
        $(function () {
            console.log($('#parent'));  //jQuery.fn.init [div#parent]
            console.log($('.child'));//jQuery.fn.init(3) [div.child, div.child, div.child, prevObject: jQuery.fn.init(1)]
            
            
            //将html代码片段转换成Element元素，封装成一个jQuery对象
             var newChild=$('<div class="new">four</div>');
             console.log(newChild); //jQuery.fn.init [div.new]


            //element   转换成一个Jquery对象
            console.log($('div'));  //共有四个div标签
            //jQuery.fn.init(4) [div#parent, div.child, div.child, div.child, prevObject: jQuery.fn.init(1)]
        })
    </script>

</head>

<body>
    <div id="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>

</html>

先去干饭先。。。。

干饭回来了，快乐继续。。。

jquery核心函数和核心对象

  <script>
        //核心函数
        console.log($,typeof $);  //function jQuery(selector, context)  function
        //核心对象
        console.log($(),$() instanceof Object);  //Object{}  true

    </script>

比较原生js和jQuery

示例：通过原生js和jQuery来获取到三个div并修改他们的背景色

注意：jQuery中css()方法的使用来改变样式

官方文档讲得挺好的
http://git.w3c0.com/jquery/13...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 引进jQuery -->
    <script src="./1-jquery.3.6.0.js"></script>
    

    <script>


        //原生js获取dom节点并修改背景色
        window.onload = function (params) {
            //获取dom节点
            var div1 = document.getElementsByTagName('div')[0];
            var div2 = document.getElementsByClassName('two')[0];
            var div3 = document.getElementById('three')
            console.log(div1,div2,div3,'jsDom');
            //修改背景颜色
            div1.style.backgroundColor = 'red'
            div2.style.backgroundColor = 'green'
            div3.style.backgroundColor = 'pink'
            div1.style.width = '300px'
            div2.style.height = '300px'
        }



        
        // jQuery
        $(function() {  //必写入口函数，当前网页加载完成后就执行JQuery代码
            // 获取dom节点
            var div1 = $('div:first-child'); 
            var div2 = $('.two');
            var div3 = $('#three');
            console.log(div1,div2,div3);

            //div2.css是jQuery改变css样式的方法
            div2.css({
                backgroundColor:'yellow',
                width:'200px',
                height:'200px'
            })
            //追加节点   如果是想要创建并插入节点
            $(`<div class="newChild">newChild</div>`).appendTo('.parent')
        })
    </script>
</head>
<body>
    <div class="parent">
        <div></div>
        <div class="two">two</div>
        <div id="three">three</div>
    </div>
        
    
</body>
</html>

比较原生js和jquery入口函数的区别

总结：在原生js中，如果编写了多个入口就函数，后面的会覆盖掉前面的，而jQuery不会，它会逐个执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./1-jquery.3.6.0.js"></script>

    <script>
        //原生js
       //    1.如果编写了多个入口就函数，后面的会覆盖掉前面的
        // window.onload = function(params) {
        //     alert('入口函数1');
        // }
        // window.onload = function(params) {
        //     alert('入口函数2')
        // }


        // jquery
        // 2.如果编写了多个入口文件，会依次执行,不会只执行最后一个
        $(document).ready(function (params) {
            alert('jquery 入口函数1')
        })
        $(document).ready(function (params) {
            alert('jquery 入口函数2')
        })
        $(document).ready(function (params) {
            alert('jquery 入口函数3')
        })

        // 3.jquery入口函数的写法
        // 一、
         $(document).ready(function(params) {
             alert('jquery入口函数的写法1')
         })
         //二、
         jQuery(document).ready(function(params) {
            alert('jquery入口函数的写法2')
             
         })
         //三、推荐选用这个
         $(function( ) {
            alert('jquery入口函数的写法3')
         })

         //四、
         jQuery(function(params) {
            alert('jquery入口函数的写法4')
         })
    </script>
</head>
<body>
    
</body>
</html>

jQuery对象

jQuery对象是类数组对象，jQuery方法都是对类数组对象中元素的批量操作.

注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./1-jquery.3.6.0.js"></script>

    <script>
        // jQuery对象是类数组对象，jQuery方法都是对类数组对象中元素的批量操作.

        // 注意：jQuery对象可以调用jQuery.prototype中声明的方法，普通的Element元素则不能调用。
        // 在使用jquery的时候，拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例
        $(function (params) {
            var res = $('.child').text('go');
            console.log(res)
            // go
            // go
            // go
        })
    </script>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>

jQuery选择器

jQuery选择器与CSS选择器几乎完全一致，这里就不再赘述。

W3C文档介绍https://www.w3school.com.cn/j...

1.基本选择器

2.层次选择器

3.伪类选择器

4.伪元素选择器

5.属性选择器

注意：jQuery中所有选择器都以美元符号开头：$()

元素选择器

在页面中选取所有<div>元素 ----->> $("div")

示例：用户点击按钮后所有<div>隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

     <script src="./1-jquery.3.6.0.js"></script>

     <script>

       // jQuery中所有选择器都以美元符号开头：$()

        //  页面加载完毕执行操作
        $(function() {
            // 绑定点击事件
            $('button').on('click',function(params) {
                // 用户点击按钮后所有<div>隐藏
                   $('div').hide()
            })
         
        })
     </script>
</head>
<body>
        <button>点点我</button>
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    
</body>
</html>

类选择器

 var child1=$('.child1')
            var button=$('button');
            button.click(function(){
                child1.hide()
 })

<button>点我点我</button>
    <div class="child1">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>

id选择器

$('#child2')
  var child2=$('#child2')
            var button=$('button');
            button.click(function(){
            child2.hide()
  })
    <button>点我点我</button>
    <div class="child1">1</div>
    <div id="child2">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>

事件绑定

jQuery的事件绑定与Element元素不同，不可以使用onxxx属性，也不能使用addEventListener，而是使用on()，可以理解为on是对于Element元素事件绑定的封装。

就记得jQuery使用on()方法绑定事件，比如点击事件等等

绑定事件的方法有：

on(event,[selector],[data],fn) ---->> 可执行多次
off(event,[selector],fn) --->> 解除事件绑定
one(event,[selector],fn)---->> 只能执行一次
trigger(event,[data]) ---->> 模拟事件的发生，可以决定跟着哪个节点绑定的事件走
快捷绑定 click

on(event,[selector],[data],fn) ---->> 可执行多次

 <style>
        .child {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
    </style>

  <script>
        $(function () {
            
           // on 多次事件绑定
            $('.child').on('click', function (event) {
                // this--dom节点
                console.log(this)
         })
        })
    </script>


<body>
    <div class="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>

* off(event,[selector],fn) --->> 解除事件绑定

 <style>
        .child {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
    </style>

  <script>
        $(function () {
             // 具名函数
            function handler() {
                console.log(this);
            }
            //事件绑定
            $('.child').on('click',handler);
             //事件解除绑定
             $('.child').off('click',handler)
          
        })
    </script>


<body>
    <div class="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>

one(event,[selector],fn)---->> 只能执行一次

 <style>
        .child {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
    </style>

  <script>
        $(function () {
              //one ---->> 一次事件绑定
              $('.child').one('click', function (event) {
               // this--dom节点
              console.log(this)
              })
          
        })
    </script>


<body>
    <div class="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>

*trigger(event,[data]) ---->> 模拟事件的发生，可以决定跟着哪个节点绑定的事件走

 <style>
        .child {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin-left: 20px;
        }
    </style>

  <script>
        $(function () {
               //trigger 先有一个点击事件  trigger模拟点击事件
               $('.child').on('click', function (event) {
                // this--dom节点
                console.log(this)
            // })
           // trigger 模拟事件触发
         // 触发第一个child的点击事件，载入时，直接触发了第一个孩子节点的事件
            $('.child:first-child').trigger('click')
          
        })
    </script>


<body>
    <div class="parent">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>

*快捷绑定

$('.child').click(function(){
       console.log(this)
})

事件类型

click()
click()方法是当按钮点击事件被触发时会调用一个函数
dbclick()
当双击元素时，会触发dbclick事件

 <style>
        
        .child {
            border: 1px solid red;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>

 <script>
        $(function () {
            // dblclick() 当双击元素时，触发事件
            $('.child').dblclick(function () {
                console.log(this)
            })
 
        })
    </script>

<body>

    <div class="parent">
        <input type="text">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>
</body>

mouseenter()

当鼠标指针穿过元素时，会发生mouseenter事件

$('.child').mouseenter(function(){
       console.log(this)
})

mouseleave()
当鼠标指针离开元素时，会发生mouseleave事件

$('.child').mouseleave(function(){
                console.log(this)
})

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件

$('.child').mousedown(function(){
                console.log(this)
})

mouseup()

当元素上松开鼠标按钮时，会发生mouseup事件

$('.child').mouseup(function(){
                console.log(this)
})

hover()

hover()方法用于模拟光标悬停事件

当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）

$('.child').hover(function(){
                console.log(this)
})

blur()
当元素失去焦点时，发生blur事件
(失去焦点就是本来鼠标选中输入框的，后面移出来点到其他位置区了，就会失去焦点，do you understand?)

$('input').blur(function(){
       console.log(this)
})

上面都是鼠标事件

下面则是键盘事件

keydown()

键盘事件：按键按下事件

$('.child').keydown(function(){
                console.log(this)
 })

keyup()

键盘事件：按键抬起事件

 $('.child').keyup(function(){
                console.log(this)
 })

事件代理

类似于DOM中的事件委托

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./1-jquery.3.6.0.js"></script>

    <style>
        .child {
            border: 1px solid red;
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>

    <script>
        //事件代理
        $(function () {
            //由button按钮来控制三个孩子节点的触发事件
            $('body').on('click', 'button', function (event) {
                console.log(event)
            })
        })

    </script>
</head>

<body>

    <div class="parent">

        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div>

    <button>委托本按钮来办</button>

</body>

</html>

jQuery Dom操作

jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。

插入方法：append、appendTo、prepend、prependTo、after、before、 insertBefore、insertAfter

包裹方法：wrap、unwrap、wrapAll、wrapInner

替换方法：replaceWith、replaceAll

移除方法：empty、remove、detach

克隆方法：clone

append 将内容插入到元素内同尾部
appendTo 将添加的元素插入到目标元素中

作用是一样的，写法不一样

$(function(){
     $('.child:first-child').append('<b>hihihi</b>')
     $(`<div class="newChild">newChild</div>`).appendTo('.parent')
   })


    <div class="parent">parent</div>

empty() 无参数清空目标元素子节点

  $('.parent').empty()   //把parent的子节点全都清空，但是不会清除newChild

remove()

 $('.parent').remove()   //全都清空，一个不剩,包括新增节点newChild

* clone()
默认浅克隆，只克隆节点不克隆事件；传递参数为true的时候深克隆，和dom事件一样克隆节点的时候,也会克隆事件

克隆后的节点具备同样事件和样式

  //    clone();默认浅克隆，只克隆节点不克隆事件；传递参数为true的时候深克隆，
            //和dom事件一样克隆节点的时候,也会克隆事件

            //浅克隆  只克隆节点 不克隆事件
            function myFun() {
                console.log('dom克隆');
            }
       
            $('.child:last-child').on('click', myFun)
    //  克隆最后一个孩子节点
            $('.child:last-child').clone(true).appendTo('.parent');

属性操作

1.属性：attr、removeAttr

2.css：addClass、removeClass、toggleClass

3.内容：html、text、val

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./1-jquery.3.6.0.js"></script>

    <style>
        .child {
            border: 1px solid red;
            width: 200px;
            height: 200px;
            float: left;
            /* background-color: rgb(123, 192, 13); */
        }
          /* 给active设置属性 */
        .active{
            background-color: rgb(33, 207, 17);
        }
    </style>

    <script>
        // jQuery入口函数
        $(function () {
            console.log($('.parent')); //jQuery.fn.init [div.parent, prevObject: jQuery.fn.init(1)]

 //可在浏览器开发者工具的Element中查看

            //attr 获取属性 一个参数代表获取属性值 两个参数代表修改当前属性值为第二个参数
            console.log($('.parent').attr('class')) //parent的类标签被去掉了

            //替换了title中的内容  one是要替换的值
            console.log($('.parent').attr('title', 'one'));


            // removeAttr  去除标签属性
            console.log( $('.parent').removeAttr('title'));//parent的title属性没得了


            //removeClass 移除类名child   并且移除样式
             $('.child').removeClass('child');//就是给child设置的样式也一起去除了


            // addClass 新增类名 
            // $('.child').addClass('active')  


            // toggleClass 切换类名 原dom有类名删除，没有类名就添加
            $('.child').toggleClass('active')

            // 使用this通过点击事件也可以切换
            $('.child').on('click', function () {
               //变换的时候 用active样式来替换
                $(this).toggleClass('active')
            })


              // 获取内容
            console.log($('.parent').html());
            console.log($('.parent').text());
            console.log($('input[type=text]').val());


        })


    </script>
</head>

<body>
    <!-- <div class="parent" title="lalalal">
        <div class="child">one</div>
        <div class="child">two</div>
        <div class="child">three</div>
    </div> -->
         输入框：<input type="text">
    <div class="parent" title="lalalal">
        <div class="child active">one</div>
        <div class="child active">two</div>
        <div class="child active">three</div>
    </div>
</body>

</html>

静态方法

静态方法属于定义在jQuery函数上的方法，通过jQuery或者$直接调用的方法
数组及对象操作：each、map、toArray

5.1数组及对象操作

1.each 遍历数组或者对象第一个参数要遍历的数组或对象第二个参数处理函数


         var obj={
            name:"zhangsan",
            age:12
        }
              //遍历数组  
        $.each(obj,function(index,item){
            console.log(index,item)
              //   0 3
              //   1 4
              //   2 1
              //   3 4
              //   4 3
        })

2.toArray 将类数组对象转换为数组

                //toArray   将类数组对象转换为数组
            console.log($('.child').toArray());  
                //[div.child, div.child, div.child]

3.map() 将一个数组中的元素转换到另一个数组中

           //map()   返回新数组
            var arr = [1, 2, 3, 4, 5];
            var result = $.map(arr, function (index, item) {
                return index + 4;
            })
            console.log(result);  //[5, 6, 7, 8, 9]

JQuery基础知识

jQuery函数

jQuery选择器

事件绑定

事件类型

事件代理

jQuery Dom操作

属性操作

静态方法

5.1数组及对象操作

云绮棠兮

引用和评论

vue-print-nb打印只能打印一页？（已解决）

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了