首页 > Web开发 > 详细

Jquery

时间:2019-02-26 22:11:35      阅读:200      评论:0      收藏:0      [点我收藏+]

国内可以访问jQuery库CDN有:

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

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

 

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>

 

Jquery

原文:https://www.cnblogs.com/TangGe520/p/10440497.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!