JQuery学习笔记01初来乍到

最新推荐文章于 2022-07-18 19:14:35 发布

人人有责5yozo

最新推荐文章于 2022-07-18 19:14:35 发布

阅读量788

点赞数

分类专栏： JQuery学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/dhcsimida/article/details/17525195

版权

JQuery学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

主要知识点：

页面标签（不是元素）加载完成就执行
绑定按钮的点击事件
id选择器
类选择器
标记选择器（也称元素选择器）
绑定输入框的点击事件
绑定输入框内容的变化事件
隐藏方法.hide()
显示方法.show()
取值方法.val()和.html()
赋值方法.val("XXXXXX")和.html("XXXXXX")

练习步骤：

（1）首先新建文件夹，名为"TestJquery"

（2）下载"jquery.min.js"放入文件夹"TestJquery"

（3）在文件夹"TestJquery"中新建"test.html"

（4）在文件夹"TestJquery"中新建"main.css"

（5）在"test.html"中写入一下代码：

<html>
<head>
<title>testJQuery</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <input type="button" id="btnOK"  value="确定" />
    <input type="button" class="btnCancle"  value="取消" />
    <input type="text"  id ="txtName" style=" width:100px;" />
    <input type="hidden" id="record_old_new_value" />
    <div>www<a href="http://www.biyesheji.com.cn" >人人毕设</a></div>
    <div id="div_1" οnclick="show_hide();">show</div>
    <div id="div_2" οnclick="hide_show();" style="display:none;">看见我了</div>
</body>
<script type="text/javascript">
    $(function () {                                               //页面标签（不是元素）加载完成就执行       
        $("#btnOK").bind("click", function () {       //绑定按钮的点击事件
            alert($("#btnOK").val());                       //id选择器
            alert($(".btnCancle").val());                  //类选择器
            alert($("div").html());                             //标记选择器（也称元素选择器）
        });
        $("#txtName").bind("click", function () {    //绑定输入框的点击事件
            $("#record_old_new_value").val($("#txtName").val());
        });
        $("#txtName").bind("change", function () {//绑定输入框内容的变化事件
            alert("值由  '" + $("#record_old_new_value").val() + "'  变成了  '" + $("#txtName").val()+"'");
        });
    });
    function show_hide() {                                 //真正触发了id="div_1"的onclick()事件才调用
         if ($("#div_1").html() == "hide") {
            $("#div_2").hide();
            $("#div_1").html("show");
        } else {
            $("#div_2").show();
            $("#div_1").html("hide");
        }    }
</script>
</html>