jQuery基础概要

最新推荐文章于 2021-09-06 18:44:48 发布

viewerlin

最新推荐文章于 2021-09-06 18:44:48 发布

阅读量141

点赞数

分类专栏： jQuery 文章标签： jQuery JavaScript Web

本文链接：https://blog.csdn.net/viewerlin/article/details/79987346

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery学习笔记，附有自己的注释

<!doctype html>
<html>
<head>
    <title>Learning jQuery</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="jquery.min.js"></script>  <!--本地调用jQuery 一般下载下来使用-->
    <!--网址调用jQuery
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->

    <style>
        #circle {
            width:200px;
            height:200px;
            background-color:green;
            border-radius:100px; /*圆角化*/
        }
        .square {
            width:200px;
            height:200px;
            background-color:red;
            margin-top:10px;
    </style>
</head>

<body>
    <!--
    <script>
        if (typeof jQuery != "undefined") {  /*判断jQuery是否已经存在*/
            alert("jQuery is installed!");
        }
        else {
            alert("jQuery is not installed!")
        }
    </script>
    -->

    <!--
    <p>This is some text!</p>
    <iframe src="http://www.baidu.com"></iframe>
    <script>
        /*$表示接下来的是jQuery代码, ("#circle")操作对象 selector指针*/
        $("div").click(function(){  /*点击时执行一个函数*/ /*jQuery处理多个对象时更简易 既可以处理id也可以处理class还可以处理div*/   
            alert("Div Clicked!");
        }); 


        $("#circle").click(function(){
            $("p").html("Hello world!")); /*改变段落文字信息*/
        })


        $("#circle").hover(function(){  /*鼠标移动到目标时执行一个函数*/
            alert($("iframe").attr("src"));  /*attribute属性*/
        })
    </script>
    -->

    <!--图形隐藏、出现-->
    <!--
    <div id="circle"></div>
    <div class="square"></div>
    <div class="square"></div>

    <script>
        $("#circle").click(function(){
            /*$(this).css("width","400px"); /*修改点击目标的宽度*/
            /*$(this).css("display","none");  /*点击目标立即隐藏*/
            /*$(this).hide(); /*点击目标立即隐藏的简便写法*/
            /*$(this).fadeOut();/*点击目标慢慢隐藏*/
            $(".square").fadeOut(); /*点击圆圈 方形隐藏*/
        })
    </script>
    -->

    <!--段落隐藏、出现-->
    <p>Hello World!</p>
    <button id="fader">Fade Out</button>
    <button id="faderIn">Fade In</button>
    <script>

        $("#fader").click(function(){
            $("p").fadeOut(3000,function(){  /*3000表示3s 3s内渐渐隐藏 数值越小速度越快*/
                alert("fadeOut campletely.") /*隐藏结束后执行一个函数*/
            }); 
        })
        $("#faderIn").click(function(){
            $("p").fadeIn("fast"); /*"fast"快速，"slow"慢速*/
        })
    </script>

    <!--元素动画化-->
    <div id="circle"></div>
    <script>
        $("#circle").click(function(){  /*点击圆形执行一个函数*/
            $(this).animate({
            width:"300px",  /*属性里面是，不是;*/
            height:"300px",
            borderRadius:"150px",  /*不能写成border-radius*/
            marginLeft:"100px",
            marginTop:"100px"
            },800);  /*让圆形动画化 属性改变 改变时长*/
        })
    </script>

    <!--AJAX 让网页运行速度更快-->
    <!--
    <h1>Asynchronous Javascript And XML</h1> Asynchronous 异步的
    <script>
        /*
        $.get("test.html",function(data){  /*用get命令得到"test.html"文件，将"test.html"里面的内容作为data参数来执行函数操作
            alert(data);   /*会输出一个以"test.html"文件内容的提示
        });                /*使用get 如果用户断网的情况下就无法得到文件 什么都不会出现也不会有提示  
        */
        $.ajax ({
            url:"test.html"
        }).done(function(data){ /*使用ajax是网页真的找到文件以后才会执行操作处理 给予更强的操控能力*/
            /*$("h1").html(data); /*将h1的内容改成"test.html"的内容*/
            $("h1").append(data); /*将"test.html"的内容添加到h1里面*/
        })
    </script>
    -->

    <!--Regular Expression 正则表达式-->
    <script>
        /*var regex=/great/;  严格检查大小写*/
        /*var regex=/great/i; /great/i则不会检查大小写*/
        var regex=/e/g; /*查找e，g=global 表示查找全部的内容*/
        var string="Reges is Great!";
        var result=string.match(regex); /*在string里查找regex这个变量，也就是查找内容great*/
        alert(result);  /*如果找不到会显示null*/
    </script>

</body>
</html>

viewerlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础概要

jQuery学习笔记，附有自己的注释&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;Learning jQuery&lt;/title&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="Content-type&
复制链接

扫一扫