首页 > Web开发 > 详细

jQuery的引入和使用

时间:2019-09-16 11:22:40      阅读:82      评论:0      收藏:0      [点我收藏+]

前端代码优化:无效循环越少越好,DOM节点操作越少越好,HTTP请求越少越好

jq是一个js库。(不是框架)

JQ优点

1. 方便的DOM操作系统,降低了DOM代码操作量,提高了DOM操作代码的可维护性。

2. 优化了对DOM节点的操作(开发中对DOM操作越少越好,程序员无法完全写出特别优秀的代码,可以借助JQ)。

引入方法

1. CDN

https://www.bootcdn.cn/jquery/

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

 

2. 下载并放入项目文件,并用js引入(取决于自己的路径)

    <script src="jq/jquery.js"></script>

jq有Production version(压缩后,代码无可读性,用于项目)和Development version(用于开发和学习)

代码基于jq的话,jq的引入要在自己的js代码之前

使用方法

    $();
  //查找 操作元素(DOM节点)

是一个函数,也是一个对象。

举个栗子

    <button class="btn">button</button>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
  //获取button,注册点击事件,点击button时,控制台打印‘this is a btn’
    $(‘.btn‘).click(function(){
        console.log(‘this is a btn‘);
    });
    </script>

 

再举个错误的栗子:

var btn = document.querySelector(‘.btn‘);
    btn.click(function(){
        console.log(‘this is a btn‘);
    });

?? 不可以

jq所有的DOM操作方式只能由jq获得到的节点对象使用,js原生节点对象不能调用jq提供的DOM操作方式。

jq获取的是一个对象,可以用下标获取原生对象。

$(); 的返回值是个jq封装的对象,也是一个集合。里面包含了满足选择器规则的所有元素列表,是个集合。如果要用$()函数拿到js原生节点对象,使用[0](中括号下标)的方式获取。

举个栗子。。

 var el = $(‘.btn‘);
    //jq对象
    console.log(el);
    console.log(el[0]);
    //js对象

浏览器输出:

技术分享图片

 完结撒花 ?

jQuery的引入和使用

原文:https://www.cnblogs.com/sandraryan/p/11525642.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!