JQuery学习笔记01初来乍到

来源：互联网发布：诺基亚e63下载软件编辑：程序博客网时间：2024/05/07 12:11

主要知识点：

页面标签（不是元素）加载完成就执行
绑定按钮的点击事件
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" onclick="show_hide();">show</div>    <div id="div_2" onclick="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>

0 0

JQuery学习笔记__01__初来乍到

JQuery学习笔记01初来乍到