jQuery——01——初始jQuery

最新推荐文章于 2023-09-22 21:27:05 发布

野生小米椒

最新推荐文章于 2023-09-22 21:27:05 发布

阅读量135

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/x1037490413/article/details/102653137

版权

jQuery 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

一：如何调用jQuery

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

src里面找jQuery的路径，../

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

二：jQuery写法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    
    <script>
    // 1：原生js的固定写法
    window.onload=function(ev){}
    // 2：原生jQuery的固定写法 
    $(document).ready(function(){
      alert('hello');
    });
    </script>
    
</head>
<body>
</body>
</html>
{}里也是jQuery的入口函数，只有在入口函数才能拿到DOM元素

区别1：

$(document).ready()是规定DOM（网页文档）加载完成后网页内容加载之前执行的，也就是说在html加载完成后，图片加载之前。

window.onlad()是在页面所有元素（包括图片、引用文件）加载完成后执行，也就是说页面的所有东西加载完之后在加载。

区别2：

$(document).ready()比window.onload()的加载速度要快

三：jQuery的几种不同写法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
    //第一种写法
    $(document).ready(function(){
        alert('hello1');
    });
    //第二种写法
    jQuery(document).ready(function(){
        alert('hello2');
    });
    //第三种写法  推荐这种
    $(function(){
        alert('hello3');
    });
    //第四种写法
    jQuery(function(){
        alert('hello4');
    });
    </script>

</head>

<body>
</body>

</html>

四：jQuery核心函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        //$();代表调用jQuery的核心函数
        //核心函数的作用 
        //  1：（入口函数）接收一个函数
        // $(function(){
        //      alert('hello');
        //  })
        $(function () {
            alert('hello');
            //  2：接收一个字符串
            //    2.1：接收一个字符串选择器
            //返回一个jQuery对象，对象中保存了找到的DOM元素
            var $box1 = $('.box1');
            var $box2 = $('#box2');
            console.log($box1);
            console.log($box2);
            //    2.2：接收一个代码片段  会根据字符串的代码片段创建dom元素
            //返回一个jQuery对象，对象中保存了创建的DOM元素
            var $p = $("<p>我是段落</p>");
            console.log($p);
            $box1.append($p); //检验是否创建了dom元素
            // 3：接收一个dom元素  把原生js函数传给jq核心函数 。会被包成一个j对象返回给我们
            var span =document.getElementsByTagName('span')[0];
            console.log(span);
            var $span=$('span');
        })
    </script>

</head>

<body>
    <div class="box1"></div>
    <div id="box2"></div>
    <span>我是span</span>
</body>

</html>

五：jQuery对象

jQuery对象是一个伪数组，伪数组有0-length-1的属性，有length属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
           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>
</body>

</html>

六：

只要给jQuery的核心函数传递一个字符串，这个字符串如果是一个代码片段的话，就会创建里面所有的元素

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery——01——初始jQuery

一：如何调用jQuery<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫

专栏目录