zoukankan      html  css  js  c++  java
  • (17)什么是jQuery(jq的流程和基本操作)

    jQuery就是对原生js二次封装的工具类(在jq叫构造函数)

    jQuery就是一堆方法的集合,jq对象就可以直接调用这些方法来完成指定的需求

    使用jq的流程:

    1、在HTML页面倒入jq.js文件

    2、获取唯一jq对象

    3、通过该对象完成具体的事

    jq的使用

    jq的官网:https://jquery.com/

    下载安装:点击这个下载   

    (production是生产者版本是看不到源码的,已经打包好的) 

    (development是开发者版本可以看到源码,)

    如何下载jq

    1、新建一个文件夹 Directory(自己名命名)

    2、新建一个javaScript文件,使用开发者版本,点击开发者版本后复制源码,黏贴入这个jq.js文件内  /  使用生产者版本,点开生产者版本后复制源码,黏贴入jq.min.js文件内(命名的时候min表示压缩版本,就是生产者版本) 

    PS:压缩版本只有两行,第一行是基本信息,第二行是所有的压缩代码,不能手动去修改,必须通过指定的工具去处理

    PS:查看源码,为什么源码中都是window.jQuery, 因为window就是顶级对象(和python中类中的object一样),是代表浏览器打开的整个窗口,也是浏览器自身,所有人都属于window所以window可以省略

    PS: $ 就代表jQuery,为什么能代表jQuery,因为本质上$在底层源码中就是window.$,

    PS:唯一的jQuery对象我们就是 $ 来表示

    jq的基本操作

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>jq初识</title>
    </head>
    <body>
    <div class="box">box</div>
    <div class="box">box1</div>
    </body>
    <!--1、页面中导入jq-->
    <script src="js/jq.js"></script>
    <script>
    //在jQuery中通过选择器获取标签的值
    console.log($('.box')); //这里获取到的是jQuery对象

    //获取到的值保存下来,放入一个变量
    var $box = $('.box');
    console.log('这里是保存好的jq对象',$box);
    //PS:有时候可以看到var $box = $('.box),创建变量名的前面加$就表示这个变量属兔jQ变量,通常都喜欢在变量名前加$
    var box = document.querySelector('.box'); //这个属于js对象,使用js方法

    //js与jq对象相互转换
    //jq转成js,通过数组的索引来转换,js转成jq,将js对象用$包裹起来
    console.log(box,$(box),$(box)[0]); //第一个是js对象,第二个是jq对象,第三个通过索引取值后jq对象变成了js对象

    //$box 存放着页面两个box的jq对象,如何获取第一个box对应的jq对象
    console.log('这里查看',$box.eq(0)); //通过eq(index)索引的方式获得的还是jq对象

    //通过对象完成具体的业务逻辑,比如点击事件,而且区分标签
    // .box代表页面中所有的类名为box的标签,这些标签全部拥有点击弹窗
    $box.click(function () {
    alert($(this).index()) //this代表的是自己的js对象 => $(this) 当前被点击的对象
    })

    </script>
    </html>

       

  • 相关阅读:
    解决QStandardPaths: XDG_RUNTIME_DIR not set, defaulting to '/tmp/runtime-root'问题
    error while loading shared libraries:libQt5SerialPort.so问题解决
    洛谷P4343 [SHOI2015]自动刷题机
    十一届山东省大学生程序设计竞赛 部分题解
    洛谷P4185 [USACO18JAN]MooTube G 题解
    洛谷P4588 [TJOI2018]数学计算
    洛谷P2085《最小函数值》
    多项式小记
    CF932F 【Escape Through Leaf】
    'ipconfig' 不是内部或外部命令,也不是可运行的程序 或批处理文件。持续思考ing
  • 原文地址:https://www.cnblogs.com/shizhengquan/p/10431839.html
Copyright © 2011-2022 走看看