jQuery 入门笔记1

川长思鸟来 2023-06-04 05:58 7阅读 0赞

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。

1：jQuery使用

src中的路径可以是自己下载的，也可以用Google或者ie的CDN分发的版本

使用谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

2：使用范例及注意事项：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script type="text/javascript">
    function del(){
        $("#bd").remove();
    }
    function appendText()
    {
    var txt1="<p id='bd'>Textbd.</p>";               // 以 HTML 创建新元素
    var txt2=$("<p id='del' οnclick='del()'></p>").text("Textdel.");   // 以 jQuery 创建新元素//""之间用'
    var txt3=document.createElement("p");  // 以 DOM 创建新元素
    txt3.innerHTML="Text.";
    $(".pp").before(txt1,txt2,txt3);         // 追加新元素
    }
    $(document).ready(function(){
        $("#app").click(function(){
            $("h1,h2").addClass("blue");
            $("#i").addClass("important blue");//多个类之间用空格
        });
        $("#i").click(function(){
            $("h1").toggleClass("blue");
        });
        $("#f").click(function(){
            $("#f").css({
         "color":"purple","fontSize":"35px"});//一个属性用逗号.css("background-color","yellow");
            alert($("#f").css("color"));
        });
        $("#emp").click(function(){
            $("#emp").empty();
        });
        $("#btn1").click(function(){
            $(".p").prepend("<b>Hello boy </b>.");
        });
        $("#btn2").click(function(){
            $("ol").append("<li>append</li>");
        });
        $("#x").click(function(){
            alert($("#test").val());
            $("#w3s").attr({
            "href" : "http://www.jb51.net/jquery",//查看网页代码没有变，但实际上已经改变，很神奇的一个地方，应该是卸载浏览器内存里面，没有刷新页面 "title" : "W3School jQuery Tutorial"
          });
        });
        $("#d").click(function(){
            var div=$("#t");
            div.animate({height:'300px',opacity:'0.4'},"slow")
            .animate({width:'300px',opacity:'0.8'},"slow")
            .animate({height:'100px',opacity:'0.4'},"slow")
            .animate({width:'100px',opacity:'0.8'},"slow")
            .animate({left:'+=100px'},"slow")
            .animate({fontSize:'3em'},"slow");
            alert($("#t").html("<b>Hello world!</b>"));
            // $("#t").animate({
         
            //     left:'250',
            //     opacity:'0.5',
            //     height:'150px',
            //     width:'toggle',
            // });
            
        });
        // $("button").click(function(){
         
        //     $("p").fadeTo(2000,0.8);
        //     $("#div1").fadeTo();
        //     $("#div2").fadeTo("slow",0.5);
        //     $("#div3").fadeTo(3000,0.1);
        // });
        $(".flip").click(function(){
            $(".panel").slideToggle("slow");
        });
        $("#stop").click(function(){
            $("#t").stop();
        });
    });
    </script>
    <style type="text/css"> 
    div.panel,p.flip
    {
         
    margin:0px;
    padding:5px;
    text-align:center;
    background:#e5eecc;
    border:solid 1px #c3c3c3;
    }
    div.panel
    {
         
    height:120px;
    }
    .important
    {
         
    font-weight:bold;
    font-size:xx-large;
    }
    .blue
    {
         
    color:blue;
    }
    </style>
    </head>
    
    <body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <h2 id="f">返回颜色的css</h2>
    <div id="i">这是非常重要的文本！</div>
    <br>
    <button id="app">向元素添加类</button>
    <div id="emp" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
    This is some text in the div.
    <p>This is a paragraph in the div.</p>
    <p>This is another paragraph in the div.</p>
    </div>
    <p class="pp" onclick="appendText()">This is a paragraph.</p>
    <p class="p">This is another paragraph.</p>
    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ol>
    <button id="btn1">追加文本</button>
    <button id="btn2">追加列表项</button>
    <p><a href="file:///C:/Users/Administrator/Desktop/%E6%96%B0%E5%BB%BA%E6%96%87%E6%9C%AC%E6%96%87%E6%A1%A3.HTML" id="w3s">jb51.net</a></p>
    <p>姓名：<input type="text" id="test" value="米老鼠"></p>
    <button id="x">显示值</button>
    <button id="stop">停止滑动</button>
    <button id="d">开始动画</button>
    <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div style="background:#98bf21;height:100px;width:100px;position:relative;" id="t">python
    </div>
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button>Click me</button>
    <div class="panel">
    <p>W3School - 领先的 Web 技术教程站点</p>
    <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
    </div>
    <div class="panel">
    <p>W3School - 领先的 Web 技术教程站点</p>
    <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
    </div>
    <p class="flip">请点击这里</p>
    </body>
    
    </html>

转载于:https://www.cnblogs.com/qwj-sysu/p/3838099.html