JQuery中美圆符号$

时间 2020-11-30

标签 javascript css html 前端 java jquery 数组前端框架框架学习栏目 JQuery 繁體版

原文原文链接

1. 概述

前端技术得更新换代实在太快，JQuery可能已经再也不适合着重学习，不过JQuery得思想已经融入了不少前端框架技术之中，好比这个美圆符号，老是能够在一些地方看到，做为最开始使用得JS库，就学习下JQuery中得使用。javascript

2. 详论

2.1. 加载脚本

在HTML页面中引入原生的JS脚本通常都会这样开头：css

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

使用window.onload()的缘由是由于通常都会但愿直到网页加载完毕后，再马上执行JS脚本的操做，不然会形成在执行JS脚本的时候， HTML文档没有渲染完成，DOM树是不完整，获取DOM中元素未定义的错误。html

与window.onload()相对应的，包含JQuery或者采用类似技术的框架会这样加载js脚本：前端

$(document).ready(function(){ 
    Func1();
    Func2();
    Func3();
    .....
});

$(document)表示的就是选择整个文档对象，.ready()就是DOM加载完成时的相应事件。这个写法进一步简化，就是以下的加载方案：java

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>样例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {       
            console.log(jQuery.fn.jquery);
        });
    </script>
</head>

<body>
    <p>这是一个段落。</p>
</body>

</html>

固然，window.onload与jQuery ready()两种加载方式仍是有区别的：
jquery

2.2. 选择器

能够认为JQuery的美圆符号就是一种选择器，基于已经存在的 CSS 选择器（固然不局限于），可以选取网页中的各类元素。CSS有三种经常使用的选择器：元素选择器、ID选择器和类选择器；JQuery也有对应的选择器。数组

2.2.1. 元素选择器

下面例子展现经过实现选取标签元素，实现了一个效果：每次点击按钮，就会修改P元素的颜色属性。前端框架

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>样例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {
            var active = false;
            $("button").click(function () {                
                if(active){
                    $("p").css("color","#ff0000");
                }else{              
                    $("p")[0].style.color = "#00ff00";                   
                }   
                active = !active;             
            })
        });
    </script>

    <style type="text/css">
        p {
            color:#ff0000;
        }
    </style>

</head>

<body>
    <p>这是一个段落。</p>
    <button>点我</button>
</body>

</html>

经过$选择器，能够实现获取html中的标签元素，从而进一步实现修改对应的CSS属性。框架

2.2.2. ID选择器

给上面那个例子加上另一个P标签的段落，id属性设置为test，那么能够像设置css选择器同样设置$()的参数：学习

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>样例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {
            var active = false;
            $("button").click(function () {                
                if(active){
                    $("#test").css("color","#ff0000");
                }else{                         
                    $("p#test")[0].style.color = "#00ff00";                   
                }   
                active = !active;             
            })
        });
    </script>

    <style type="text/css">
        p {
            color:#ff0000;
        }

        #test {
            color:#0000ff;
        }
    </style>

</head>

<body>
    <p>这是一个段落。</p>
    <p id="test">这是另一个段落</p>
    <button>点我</button>
</body>

</html>

显示结果与以前的例子相似，一样是P标签元素，只有id值为test的元素改变颜色的功能生效了。

2.2.3. 类选择器

类选择器仍然与css同样，经过.符号+类名做为$()的参数，选择全部有相同class的元素：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>样例</title>
    <script src="./3rdParty/jquery-3.5.1.js">
    </script>
    <script>
        $(function () {
            var active = false;
            $("button").click(function () {                
                if(active){
                    $(".test1").css("color","#ffff00");
                }else{                               
                    $("p.test1")[0].style.color = "#00ff00";     
                    $("h2.test1")[0].style.color = "#00ff00";                 
                }   
                active = !active;             
            })
        });
    </script>

    <style type="text/css">
        p {
            color:#ff0000;
        }

        #test {
            color:#0000ff;
        }

        .test1{
            color: #ffff00;
        }
    </style>

</head>

<body>
    <h2 class="test1">这是一个标题</h2>
    <p class="test1">这是一个段落。</p>
    <p id="test">这是另一个段落</p>
    <button>点我</button>
</body>

</html>

须要注意这时选取到元素可能元素标签可能不一样。

2.3. 引入方法

在JQuery中，$还有个做用是引入各类JQuery已经封装好的方法，例如：

.trim() 去除字符串两端的空格
.each() 遍历一个数组或对象。
.inArray() 返回一个值在数组中的索引位置。
.type() 判断对象的类别
.getJSON() 使用 AJAX 请求来得到 JSON 数据。
......