JavaScript知识点5-jQuery函数库

最新推荐文章于 2022-12-14 22:11:19 发布

梦幻之光_dream

最新推荐文章于 2022-12-14 22:11:19 发布

阅读量202

点赞数 1

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/William_fang/article/details/112429350

版权

文章目录

1.jQuery DOM操作
2.DOM操作-样式操作
3.jQuery点击事件
4.登录案例Javascript版本
5.登录案例jQuery版本
6.登录案例jQuery版本代码优化版本
7.jQuery的hover实践
8.定时器的使用
9.自动打分案例
篇章

1.jQuery DOM操作

jQuery是JavaScript中的函数库。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery DOM操作</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function() {
    
            //1.读写节点
            //1.1 p:eq()选择器，根据下标获取元素，返回值为数组
            //html()==innnerHTML
            console.log($("p:eq(0)").html());
            //1.2text()==innnerText
            console.log($("p:eq(0)").text());
            //1.3 val()=value
            console.log($("input:button:first").val());
            $("input:button:first").val("888");
            //1.4 attr()=getAttribute()+setAttribute()
//            var img =document.getElementById("img");
//            console.log(img.getAttribute("src"));
//            img.setAttribute("src","img/images/01.jpg");
            //获取Img标签中的src属性
            console.log($("img").attr("src"));
            //修改img标签中的src属性
            $("img").attr("src","img/images/01.jpg");
            //2.增删节点
            //2.1创建节点
            var  $li1=$(" <li>杭州</li>");
            var  $li2=$(" <li>苏州</li>");
            console.log($li1);
           //2.2增加节点
            //在ul 标签的开头加$li1
            $("ul").prepend($li1);
            //在id为广州的标签上面添加$li2
            $("#gz").before($li2);
            //3.遍历节点（根据层次查找节点）
            //输出ul所有的子节点
            console.log($("ul").children());
            //输出id为gz的父亲
            console.log($("#gz").parent());
            //输出ID为gz的上一个标签
            console.log($("#gz").prev());
            //id为g所有的同级标签
            console.log($("#gz").siblings());
            //输出ul标签所有的li标签
            console.log($("ul").find("li"));
            //输出ul标签中下标大于2的li标签
            console.log($("ul").find("li:gt(2)"));
        });
    </script>
</head>
<body>
    <p>jQuery支持 <b>DOM操作</b> </p>
    <p><input type="button" value="AAA"/></p>
    <p><img src="img/images/02.jpg" /></p>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li id="gz">广州</li>
    <li>天津</li>
    <li>深圳</li>
</ul>
</body>
</html>

2.DOM操作-样式操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM操作-样式操作</title>
    <!--在其他的js之前引入jquery-->
    <script src="js/jquery-3.4.1.js"></script>
    <style>
        .big{
    
            font-size:50px;
        }
        .important{
    
            color: red;
        }
    </style>
    <script>
        //在页面加载完成后执行
        $(function(){
    
            //样式操作
            //*Class()操作class
            $(

最低0.47元/天解锁文章

梦幻之光_dream

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识点5-jQuery函数库

文章目录1.jQuery DOM操作2.DOM操作-样式操作3.jQuery点击事件4.登录案例Javascript版本5.登录案例jQuery版本6.登录案例jQuery版本代码优化版本7.jQuery的hover实践8.定时器的使用9.自动打分案例篇章1.jQuery DOM操作jQuery是JavaScript中的函数库。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"&g
复制链接

扫一扫