JQuery超详细快速入门详解(一)

最新推荐文章于 2024-08-09 02:16:38 发布

煌sir

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量1.2k

点赞数 1

分类专栏： JQuery 文章标签： jquery java

本文链接：https://blog.csdn.net/qq_43705131/article/details/107216523

版权

JQuery 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一.JQ-简述及引入

JQuery是JavaScript的框架。

FileUtils是原生IO的框架

使用<script src=””/>引入

引入成功：谷歌F12，控制台无报错

引入失败：谷歌F12，控制台有报错（404-找不到资源）

二 .JQ:JS和JQ元素对象互转

JS元素对象，只能调用JS的属性和方法

JQ元素对象，只能调用JQ的属性和方法

JS和JQ元素对象，属性和方法不能通用。

开发中：JS和JQ元素对象经常会进行相互转换

开发中，为了使用JS方法和属性，我们也会选择将jQuery对象转回JS对象。

格式： js元素对象=jQuery元素对象[0];

开发中，我们为了方便开发，会将JS对象转为jQuery对象使用；
格式： jQuery元素对象=$(js元素对象);

代码:

<script>
        function run1(){
            //JS:获取元素，获取元素innerHTML
            var x1 = document.getElementById("xxx");
//            alert(x1.innerHTML);
            //JS--->JQ
            alert(  $(x1).html()   );

            //JQ：获取元素，获取元素内容体  html()
            var x2 = $("#xxx");
//            alert(x2.html());
            //JQ--->JS
            alert(  x2[0].innerHTML  );
        }
    </script>
</head>
<body>
    <span id="xxx">今天我的同桌是小煌同学</span>
    <input type="button" value="点我获取span元素内容体" onclick="run1()"/>
</body>

注意：此方式仅适用于元素（标签）对象转换。

三. JQ-页面加载完成时

JS：onload 页面加载完成时

<script>
    function run1(){
        alert("run1");
    }
    function run2(){
        alert("run2");
    }
    function run3(){
        alert("run3");
    }
    $(function () {
        //页面加载完成时要执行的代码
        run1();
        run2();
    });
    $(function () {
        //追加
        run3();
    });
    //其他写法：
    $(document).ready(function () {
        
    });
</script>

四.JQ-基本选择器

ID选择器 $("#id值")
元素选择器 $("标签名")
类选择器 $(".类名")

<script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            //页面加载完成时，获取对应的标签对象
            //获取id为r01的标签对象
            var x1 = $("#r01");
//            alert(x1[0].value);
            //获取标签名为input的标签对象
            var arr2 = $("input");//jq数组
            //alert(arr2.size());
            //获取class属性值为hehe的标签对象
            var arr3 = $(".hehe");//jq数组
            alert(arr3.size());
        });
    </script>
</head>
<body>
    <input type="radio" name="hobby" value="敲代码" id="r01"/>
    <input type="radio" name="hobby" value="调试bug" class="hehe"/>
    <input type="radio" name="hobby" value="谈需求" class="hehe"/>
</body>

五.JQ-动画效果

收展动画：

<script>
        //动画效果：
        //【可选】参数1：speed  动画效果的持续时间 ，毫秒
        //【可选】参数2：callback: 回调函数。   某个动作执行完毕后，回来调用的函数
        //展示
        function run1(){
            $("#d1").slideDown(1000);
        }
        //隐藏
        function run2(){
            /*$("#d1").hide(1000,function () {
                alert("隐藏成功");
            });*/
            $("#d1").slideUp(1000);
        }
        //切换显示/隐藏
        function run3(){
            $("#d1").slideToggle(1000);
        }
    </script>

</head>
<body>
    <div id="d1"></div>
    <input type="button" value="展示" onclick="run1()" />
    <input type="button" value="隐藏" onclick="run2()" />
    <input type="button" value="切换显示/隐藏" onclick="run3()" />
</body>

自定义动画：

<style>
        #d1{
            background-color:lightskyblue;
            width:300px;
            height:300px;
        }
    </style>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script>

        function run1(){
            $("#d1").animate({width:"+=700px",height:"-=150px",marginLeft:"+=50px",marginTop:"+=100px"},{duration:"500"});
        }
 
    </script>

</head>
<body>
    <input type="button" value="展示" onclick="run1()" />
    <hr/>
    <div id="d1"></div>

</body>

精彩待续,时刻关注下篇发布~~期待你再次阅读~~

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多!

~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!