jQuery学习记录（一）

最新推荐文章于 2025-02-25 09:51:17 发布

KinnyQX

最新推荐文章于 2025-02-25 09:51:17 发布

阅读量174

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jQuery JQ 教程学习记录

本文链接：https://blog.youkuaiyun.com/qq_40934128/article/details/89408181

前端专栏收录该内容

1 篇文章

订阅专栏

本文对比了原生JavaScript与jQuery库的特性，包括入口函数、迭代处理、文件结构及对象转换等内容，适合初学者理解两者区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery学习记录（一）

学习记录

学习记录

以前在优快云都是查资料，这次为了记录一下自己的学习第一次尝试写博客。以下内容均是在B站学习时整理的一些笔记，基本上都是视频中老师总结的，有错误的地方欢迎善意指出。

原生JS与jQuery

jQuery实际上是JS的一个库，jQuery1.x版本兼容IE678，使用jQuery时需要下载好后引用js文件,引入一个js文件会执行该文件中的代码

<script src="jquery-3.4.0.js"></script>

下面为原生JS与jQuery的区别：

js入口函数不能添加多个，若有多个，则后面的会覆盖前面的，而jQuery的入口函数可以写多个；

//原生JS入口函数
 window.onload=function(){
            console.log("原生JS入口函数");
        }
 //JQ入口函数
        $(document).ready(function(){
            console.log("JQ入口函数");
        });
//第二种方法
        $(function(){
            console.log("JQ入口函数2");
        });

3.jQuery含隐式迭代；

//假设有多个div，点击按钮时对所有div设置边框
$('#btn1').click(function(){
            $('div').css('border','1px solid blue');
        });

JS中，前面的代码错了，后面的也无法运行，jQuery中则不影响后面的代码。

jQuery文件结构

是一个自执行函数，是给window对象添加一个jQuery和$属性

(function(){
…
window.jQuery=window.$=jQuery;
…
}());

关于$

报错:$ is not defined,说明没有引入jQuery文件，
$是一个函数，等价于jQuery，传参不同则效果不同，参数：
1、匿名函数，如入口函数
2、字符串，如选择器、创建一个标签

$('#div1');
$('<div>xxx</div>');

3、参数为dom对象，会把dom对象转化为jQuery对象。

dom对象和jQuery对象

dom对象

//原生js选择器获取到的对象,伪数组
 document.getElementById("btn1");
 document.getElementsByTagName("button");
 var btn=document.getElementById("btn1");
//只能调用dom方法和属性，不能调用jQuery方法属性
 btn.style.backgroundColor='blue';

jQuery对象

 //jQuery对象：用jQuery选择器获取的对象,是一个伪数组，有长度和各元素对应下标
 //只能调用dom方法和属性，不能调用jQuery方法属性
 var $div=$('#div1');
 $div.css('backgroundColor','green');

dom对象和jQuery对象之间的转换

1、dom转jQuery

var dom=document.getElementById("div1");
var jQ=$(dom);

2、jQuery转dom，
方法一：因为jQuery对象是伪数组，所以可以通过下标取出想要的对象，只有一个对象则取下标为0的

var $divs=$('div');
var div0=$divs[0];//若有n个div则可以取出n个

方法二：get()

var $divs=$('div');
var div0=$divs.get(0);

方法三：下标

$('div')[0].style.backgroundColor='green';

文本

1、jQ获取文本：jQ对象.text()；
2、jQ设置文本：jQ对象.text(‘要设置的文本’);

最后附上我看的视频教程的链接：https://www.bilibili.com/video/av40716170