码迷,mamicode.com
首页 > Web开发 > 详细

jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换

时间:2018-11-30 21:18:25      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:脚本   简化   doc   jquery库   加载完成   asc   清除   语言   文档资源   

JavaScript与jquery的区别

  1. JavaScript是一门编程语言,用来编写客户端浏览器脚本。
  2. jQuery是javascript的一个库,包含多个可重用的函数,用来辅助简化javascript开发
  3. jQuery能做的javascript都能做到,而JavaScript能做的事情,jQuery不一定能做到

jQuery文件的引入

<body>
    <div class="box"></div>
    <!--引包(引入jquery库)-->
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
    //调用时使用jQuery与$是一样的
    //第一个参数是选择器(类选择器)
    console.log(jQuery(‘box‘));
    console.log($(‘box‘));
</script>

jQuery的入口函数

<body>
<!--Jquery框架封装的时候模仿得失伪数组对象,有索引和length,以及n个方法-->
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
    //window.onload() 1 覆盖现象。2 等待图片资源加载完成之后才调用脚本代码,用户体验极差

    //入口函数
    //返回的是jquery
    //jquery对象与js对象之间的转换
    console.log($(document)[0]);

    //等待文档资源加载完成之后调用此方法:
    $(document).ready(function () {
        alert(1)
    });

    //jquery简便写法入口函数,两种入口函数没有覆盖现象
    $(function () {
        alert(2)
    });

    $(window).ready(function () {
        alert(3)
        //表示图片资源加载完成之后
    })
</script>
</body>

jQuery对象与js对象的互相转换

为什么两种对象要进行互相转换,解释在注释里!

<body>
    <div id="box"></div>
    <div id="box2"></div>

    <script type="text/javascript" src="jQuery3.3.1.js"></script>
    <script>
    $(function () {
        //转换为jqery对象 js对象更加希望转换成jquery对象操作简便的dom
        //转换为js对象的原因:因为js是包含jquery,jquery只是封装了DOM,事件,ajax,动画。
            //假如说jquery对象要使用的方法不在封装里面,只能转换成js对象

        //js对象与jquery对象一定要分清除,对应对象只能调用对应的方法,不能混淆

        //获取jquery对象
        console.log($(‘#box2‘));

        //获取js对象
        var box = document.getElementById(‘box2‘);
        console.log(box);

        //jquery对象转换成js对象
        console.log($(‘#box2‘)[0]);

        //js对象转换为jquery,直接将js对象传到$()中
        console.log($(box));
    })
    </script>
</body>

jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换

标签:脚本   简化   doc   jquery库   加载完成   asc   清除   语言   文档资源   

原文地址:https://www.cnblogs.com/wualin/p/10046471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!