JQuery 无废话系列教程(二) jquery实战篇上

2020-05-23 06:10:13易采站长站整理


     看完下面的代码我们就明白了$()的用法.


     index.html代码结构如下:


<html>
<head>
 <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>JQuery测试</title>


    <style type=”text/css”>


        .p1 {
            background: #ff0000;
        }


        .p2 {
            background: #00ff00;
        }


        .p3{


            background: #0000ff;


        }


        .myPCss{


            font-size:36px;


        }        
    </style>
    <script language=”javascript” src=”jquery-1.3.2.js”>
    </script>
    <script language = “JavaScript” type=”text/javascript”>
        //<![CDATA[
        $(document).ready(function(){
            $(“p”).addClass(“p1”);
            $(“p”).removeClass(“p1”);


            $(“#myP”).addClass(“p2”);


            $(“.myPCss”).addClass(“p3”); 


           


            $(“#myDiv  p”).addClass(“p3”);


            $(“#myDiv>p”).addClass(“p3”);


            $(“div+p”).addClass(“p3”);


            $(“div~p”).addClass(“p3”);


            var aP = document.getElementById(“myP”);


            $(aP).addClass(“p2”);