jQuery-基本了解

Posted 2020-07-10

*****什么是jQuery：

jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们来调用，提高了我们的开发效率。

*****为什么要使用jquery:

1、原生js提供操作dom的方法太少。且兼容性不好。

2、jquery功能的强大。

• a.轻量级
• b.出色的浏览器兼容
• c.出色的dom操作
• d.链式操作方式
• e.隐式迭代集合（可以对选择对象的集合自动的迭代不需要用for in循环）如$("div:lt(2)").css("border-color","red")/*对前两个div增加css*/
• f.行为层与结构的分离 （如想对dom添加事件，在javascript中添加要声明一次函数，在dom中还要使用一次，jquery只需在jquery部分声明某个元素的某种事件就可以了：$("#myButton").click(function(){代码部分})）
• g.支持扩展
• h.完善的学习资源
• i.开源

怎么使用jquery：

一．引包

在使用jQuery之前，先把jQuery文件引到页面中来。如果在使用jQuery之前，没有引用jQuery文件，或src路径写错，都会报错。

二．入口函数

写法一：

 $(document).ready(function(){
        $("#btn").click(function(){
            alert("事件已绑定");
        })
    })

 

写法二：

$(function(){
        $("#btn").click(function(){
            alert("事件已绑定");
        })
    })

两者效果一模一样，所以开发中怎么写入口函数？你懂。。。。

此处在说说jquery中的"$",实际上表示一个函数，是jQuery框架暴露在全局中的一个对象。

除了$之外，还提供了另外一个函数：jQuery，也就是说出现$符的地方，就能用jquery替换，为了简写所以才写做$。

到这里，想到原生js的入口函数window.onload = function() {};，那么两者入口函数有什么区别呢？

区别一：书写个数不同

Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。

jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。

区别二：执行时机不同

Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。

jQuery的入口函数，是在文档加载完成后，就执行。这里的文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

3．功能实现代码（事件处理）

 

  这一部分得说说jQuery对象（使用jquery操作dom返回值）和DOM对象（使用js操作dom的返回结果）的相互转换问题。

var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象

 

var $btn = $(“#btnShow”); // $btn就是一个jQuery对象

 

 var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1

jQuery对象转换成DOM对象：

方法一：

 

var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 （推荐使用此方式）

 

方法二：

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

简言之：jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。

 这部分先说到这，下一篇来说说JQuery的主要功能模块。