Jquery

国内可以访问jQuery库CDN有：

官方的 https://code.jquery.com/
微软的 https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview
cdnjs的 https://cdnjs.cloudflare.com

使用方法，将scr的路径由相对路径换成下载的URL

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>

text() 方法，获取元素文本，也可以设置元素的文本值。相当于JavaScript中的textContent。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素文本</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <p>Hello World</p>
        <script>
            alert($('p').text());
            $('p').text("利永贞技术网");
        </script>
    </body>
</html>

val() 方法，获取和修改有value属性的元素，有value属性的元素有input、botton、select等。相当于JavaScript中的value。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素文本</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <input type="text" name="hello" value="Hello world" id="hello">
        <script>
           alert($("[name='hello']").val());
            $('input:text').val("利永贞技术网");
        </script>
    </body>
</html>

attr() 方法，可以获取修改元素属性。

获取属性，使用：attr("属性名") 相当于JavaScript中的getAttribute()。

设置属性，使用：attr("属性名","属性值") 相当于JavaScript中的setAttribute()。

删除属性，使用：removeAttr("属性名") 相当于JavaScript中的removeAttribute()。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素文本</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <input type="text" name="hello" value="Hello world" id="hello">
        <script>
           alert($("[name='hello']").val());
            $('input:text').val("利永贞技术网");
        </script>
    </body>
</html>

获取CSS使用方法css("CSS属性名称")，示例css("color")

设置CSS使用方法css("CSS属性名称","属性值")，示例css("color","blue")

如果要设置多个CSS属性，使用{}花括号括起属性名称和值，示例css({'color': 'red', 'font-size': '28px'})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取修改CSS</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
    </head>
    <body>      
        <p id="one" style="color:red">Hello world</p>
        <p id="two">Hello world</p>
        <script>
            alert($('#one').css("color"));
            $("#one").css("color", "blue");
            $("#two").css({'color': 'red',
                'font-size': '28px'});
        </script>
    </body>
</html>

通过获取父节点，还可以获取父节点的父节点。

有3个常用方法：

方法	说明
parent()	选取父节点
parents()	选取所有父节点
parentsUntil("div")	选取所有父节点，但不包含后面指定的节点及指定节点的父级……。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>父节点</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
        <style>
            .box{
                border: 1px solid blueviolet;
                padding: 1px;
                margin-bottom: 12px;
            }
        </style>
    </head>
    <body>
        <div>
            <ul id="ul">
                <li id="a">油条</li>
                <li id="b">包子</li>
                <li id="c">米饺</li>
                <li id="d"><a>鱼粉</a></li>
            </ul>
        </div>
        <script>
            $('a').parentsUntil("div").attr("class", "box");
        </script>
    </body>
</html>