8.6第一次jQuery

最新推荐文章于 2024-06-17 09:28:21 发布

KKsuri

最新推荐文章于 2024-06-17 09:28:21 发布

阅读量142

点赞数

分类专栏：学习日记

本文链接：https://blog.csdn.net/KKsuri/article/details/81463023

版权

学习日记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

jQuwey

使用生物时候要引入一个jQUery的库
链式编程

$(selector).action();

在头部使用jQuery的时候要使用初始化函数

$(function(){});

jq的使用方法与css类似
id选择器：$("#id");
类选择器: $(".xxx=class")

知识总结

显示：show()
隐藏：hide()
切换显示：toggle()

增加元素

append()//子元素
prepend()//子元素
after()//父元素
before()//父元素

删除元素

1.置空：empty()
2.删除：remove()

今日代码

代码1

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #tinputValue {
            font-size: 28px;
            color: red;
        }
    </style>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var getValue = function() {
            alert($("#tinput").val());
            $("#tinput").val("abc");
        }

        $(function(){
            $("#img1").attr("src", "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3641343844,2633840803&fm=27&gp=0.jpg");
            $("#hid1").text("My first jQuery App");
            $("#ds").html("<a href='http://www.baidu.com'>www.baidu.com</a>");

            $("#tinput").keyup(function() {
                var rs = $("#tinput").val(); // 原始字符串
                var rss = ""; // 处理完的结果字符串
                for (var i = 1; i <= rs.length; i++) {
                    var r = rs.charAt(i-1);
                    if (i % 4 == 0) {
                        rss += r + "-";
                    } else {
                        rss += r;
                    }
                }

                if (rss.lastIndexOf("-") == rss.length - 1) {
                    rss = rss.substring(0, rss.length - 1);
                }

                $("#tinputValue").html(rss);
                // console.log($("#tinput").val());
            });
        })
    </script>
</head>
<body>
    <img id="img1" width="200px" height="200px" alt="xxx" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1319029591,1885910850&fm=200&gp=0.jpg">
    <h1 id="hid1">我的第一个jQuery应用</h1>
    <div id="ds">
        <span>DIV-SPAN</span>
    </div>
    <input type="text" value="" id="tinput" name="">
    <button onclick="getValue();">获取值</button>
    <div>
        <span id="tinputValue"></span>
    </div>
</body>
</html>

代码2

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var i = 1;
        var addLi = function(type) {
            if (type == 1) {
                $("#ull").prepend("<li>第"+(i++)+"章&nbsp;<button onclick='removeLi(this)'> X </button></li>");
            }
            if (type == 2) {
                $("#ull").append("<li>第"+(i++)+"章&nbsp;<button onclick='removeLi(this)'> X </button></li>");
            }

        }

        var removeLi = function(obj) {
            $(obj).parent().remove();
        }

        var emptyUl = function() {
            $("#ull").empty();
        }

        $(function(){

        });
    </script>

</head>
<body>
    <button onclick="addLi(1);">追加一行(开头)</button>&nbsp;<button onclick="addLi(2);">追加一行(结尾)</button>
    &nbsp;<button onclick="emptyUl();">清空</button>
    <ul id="ull">
    </ul>
</body>
</html>

代码3

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <style type="text/css">
        #dv {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: grey;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var showFlag = true;
            $(".ahide").click(function(){
                $("#dv").toggle(1000, function(){
                    alert("结束");
                });
            });
        })
    </script>
</head>
<body>
    <a href="#" class="ahide">隐藏</a>
    <div id="dv"></div>
</body>
</html>

学习心得

最近不知道为什么总觉得学习的时间不够用，总是不能按时完成老师的任务，就连指法的练习也脱节了，这种学习状态非常不好，也非常危险

课上老师讲的知识都能理解所以之后的课后也要跟得上不能学了后面的忘了前面的，前一天学的，第二天早上就忘的干干净净。

现在每个代码打的遍数要提高虽然不能达到老师的20遍，最起码也要第二天早上还能记得。

（现在23：54写完这个就睡觉，我不信明天上课还打瞌睡）

学习改进方法

提高学习质量要做到事半功倍。

上课杜绝打瞌睡

KKsuri

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8.6第一次jQuery

jQuwey使用生物时候要引入一个jQUery的库$(selector).action();在头部使用jQuery的时候要使用初始化函数$(function(){});jq的使用方法与css类似 id选择器：$(&quot;#id&quot;); 类选择器:$(&quot;.xxx=class&quot;)知识总结显示：show() 隐藏：hide() 切换显示：toggle()今...
复制链接

扫一扫

专栏目录