jQuery的引入和使用

向右看齐 2023-06-05 08:10 7阅读 0赞

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan]

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

jq是一个js库。（不是框架）

## JQ优点 ##

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

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

## 引入方法 ##

1. CDN

[https://www.bootcdn.cn/jquery/][https_www.bootcdn.cn_jquery]

2. 下载并放入项目文件，并用js引入（取决于自己的路径）

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对象

浏览器输出：

![1645790-20190916095612480-1533562485.png][]

jQuery(document).ready(function(){
        })
        // jQuery对象可以简写成$
        $(document).ready(function(){
    
        })
        // 还可以简写成
        $(function(){});

完结撒花 ❀

转载于:https://www.cnblogs.com/sandraryan/p/11525642.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/
[https_www.bootcdn.cn_jquery]: https://www.bootcdn.cn/jquery/
[1645790-20190916095612480-1533562485.png]: /images/20230601/5bfb3e43bdec4dea803df9d2662c598d.png