基本示例

来源：互联网发布：小林一茶我知这世界编辑：程序博客网时间：2024/05/14 18:02
示例一：
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="JS/jquery-1.3.2.js" type="text/javascript"></script>    <script type="text/javascript">        function jq() {            alert($(document).find("div>p").html());        }        function hide() {            $(form1.elements).hide();        }        function eq() {            alert($("p").eq(1).html());        }        function getEx() {            alert($("p").get(1).innerHTML);        }        function index() {            alert($("a").index(document.getElementById("test1")));        }        //eq返回jquery对象 get返回dom对象        function after() {            $("#index").after("<b>Hello</b>");        }        //after在匹配元素后插入一段html        function append() {            $("#append").append("<b>append</b>");        }        //append在指定元素后且末尾插入html        function appendTo() {            $("#appendTo").appendTo($("#index"));        }        //把所有匹配的元素追加到另一个、指定的元素元素集合中        function clone() {            $("#test").clone().appendTo($("#index"));        }        function empty() {            $("#div1").empty();        }        //删除匹配的元素集合中所有的子节点    </script></head><body>    <form id="form1" runat="server">    <p>        one</p>    <div>        <p>            two</p>    </div>    <p>        three</p>    <a href="#" id="test" onclick="jq()">Jquery</a> <a href="#" id="test1" onclick="hide()">        隐藏form</a> <a href="#" id="eq" onclick="eq()">eq用法</a> <a href="#" id="get" onclick="getEx()">            get用法</a> <a href="#" id="index" onclick="index()">index用法</a> <a href="#" id="after"                onclick="after()">after用法</a> <a href="#" id="append" onclick="append()">append用法</a>    <a href="#" id="appendTo" onclick="appendTo()">appendTo用法</a> <a href="#" id="clone"        onclick="clone()">clone用法</a>    <br />    <div id="div1">        <span>span</span>        <p>            after</p>    </div>    <a href="#" id="empty" onclick="empty()">empty用法</a>    <div>        <p>            one</p>        <span><u>two</u></span></div>    </form></body></html>