zoukankan      html  css  js  c++  java
  • jQuery的文件引入、入口函数以及js对象和jquery对象之间的互相转换

    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>
    
  • 相关阅读:
    ios中strong和weak的解释理解
    leetcode: Remove Duplicates from Sorted Array II [基本功]
    leetcode : Sort Colors
    leetcode : Search a 2D Matrix
    leetcode : Set Matrix Zeroes [技巧 follow up 逐步优化]
    leetcode : edit distance[hard][经典动态规划]
    leetcode : Climbing Stairs
    leetcode : Add Bianry 基本功 字符转整数
    leetcode : Plus One 基本功
    leetcode : Minimum Path Sum
  • 原文地址:https://www.cnblogs.com/wualin/p/10046471.html
Copyright © 2011-2022 走看看