jQuery复习

最新推荐文章于 2022-12-15 16:10:34 发布

努力终有回报

最新推荐文章于 2022-12-15 16:10:34 发布

阅读量191

点赞数

本文链接：https://blog.csdn.net/weixin_45902969/article/details/119717451

版权

简单知识点

1.JavaScript和jQuery入口函数

   //jquery 固定写法
    $(document).ready(function (item) {
        alert("hello,jq")
    })
   //js固定写法
 window.onload = function () {
       alert("hello,lwq1")
}

2.JavaScript和jQuery入口函数的不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-jquery和js入口函数的区别.html</title>
    <script src="js/jquery-3.6.0.min.js"></script>

    <script>
        /*   // js
           window.onload = function (ev) {
               let img = document.getElementsByTagName("img")[0];
               console.log(img)
               // 通过原生到js拿到图片到dom元素到宽高
               let width = window.getComputedStyle(img).width;
               console.log('js:'+width);
           };
           // jquery
           // 通过jq不能拿dom元素到宽高
           $(document).ready(function () {
               let img2 = $("img")[0];
               console.log(img2)

           })*/

        /*
        js 如果编写了多个入口函数，后面编写那个入口函数会覆盖前面那个入口函数
          window.onload = function () {
               alert("hello,lwq1")

           }
           window.onload = function (ev) {
               alert("hello,lwq2")
           }
   */
        //jq不会覆盖前面那个入口函数，按编写顺序执行代码
        $(document).ready(function () {
            alert("hello lwq1")
        })
        $(document).ready(function () {
            alert("hello lwq2")
        })


    </script>
</head>
<body>

<img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">

</body>
</html>

3.jQuery入口函数的其他方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery入口函数的其他方法</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
    // $就是jQuery jQuery就是$ 没有什么区别
    //第一种方法
    $(document).ready(function () {
      alert("第一种方法")
    })
    //第二种方法
    jQuery(document).ready(function () {
        alert("第二种方法")
    })
    //第三种方法 （推荐）
    $(function () {
        alert("第三种方法")
    })
    //第四种方法
    jQuery(function () {
        alert("第二种方法")
    })
</script>
</body>
</html>

4.jQuery的冲突问题

在我们的编程中，我们也可以编写一个$的js，如果这样的话就会和jQuery的起冲突
解决方法很好解决
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery冲突问题</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/test.js"></script>
</head>
<body>
<script>
    //1.释放$的使用权
    jQuery.noConflict()
    jQuery(function () {
        alert("123")
    })
</script>
</body>
</html>

5.jQuery核心函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-jQuery核心函数.html</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
    // $();就代表调用jQuery的核心函数

    //1.接受一个函数
    $(function () {
        alert("hello")
        //2.接收一个字符串
        //2.1 接收一个字符串选择器
        //返回一个jQuery对象 对象中保存了找到的DOM元素
        var box1 = $(".box1")
        var box2 = $("#box2")
        console.log(box1)
        console.log(box2)
        //2.2接收一个代码片段
        //返回一个jQuery对象 对象中保存了创建的DOM元素
        var p = $("<p>我是一个段落</p>")
        console.log(p)

        // 在box1上追加了一个p元素
        box1.append(p)
        //3.接收一个DOM元素
        //会被包装成一个jQuery对象返回给我们
        let span = document.getElementsByTagName("span")[0];
        console.log(span)
        let $span = $(span);
        console.log($span)


    })
</script>
<span>我是一个span</span>
<div class="box1"></div>
<div id="box2"></div>
</body>
</html>

在这里插入图片描述

6.jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-jQuery对象</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function () {
           //得到所有的div
            /**
             * jquery对象是一个伪数组
             * 什么是伪数组
             * 有0到length-1的属性，并且有length属性
             */
            var div=$("div");
            console.log(div)

            var arr=[1,3,5]
            console.log(arr)
        })


    </script>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</body>
</html>

7.jQuery静态方法和实例方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-静态方法和实例方法</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
    //1.定义一个类
    function  AClass() {

    }
    //2.给这个类添加一个静态方法
    //直接添加给类的就是静态方法

    AClass.staticMethod=function () {
    alert("staticMethod")
    }

    //静态方法通过类名就可以调用
    AClass.staticMethod();

    //3.给这个类添加一个实例方法
    AClass.prototype.instanceMethod=function () {
     alert("instanceMethod")
     //调用实例方法，要把类实例化以后才能调用
     //创建一个实例（一个对象）   
     let aClass = new AClass();
     aClass.instanceMethod();
     
    }
</script>

</body>
</html>

努力终有回报

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery复习

简单知识点1.JavaScript和jQuery入口函数 //jquery 固定写法 $(document).ready(function (item) { alert("hello,jq") }) //js固定写法 window.onload = function () { alert("hello,lwq1")}2.JavaScript和jQuery入口函数的不同<!DOCTYPE html><html lang
复制链接

扫一扫