我【jQuery00】什么是jQuery,为什么要学jQuery,配置jQuery环境,解决冲突,大致使用流程

2025-10-24 10:11:20

OK,首先来了解下什么是jQuery,我们可以简单的理解为jQuery是一个JavaScript函数库是一个轻量级的“写得少,做得多”的JavaScript库。

特色有以下这些方面:

·使用多浏览器开源选择器引擎 Sizzle(jQuery 项目的派生产品)进行 DOM 元素选择

·基于 CSS 选择器的 DOM 操作,使用元素的名称和属性(如 id 和 class)作为选择 DOM 中节点的条件

·事件

·特效和动画

·Ajax

·Deferred 和 Promise 对象来控制异步处理

·JSON 解析

·通过插件扩展

·工具函数,如特征检测

·现代浏览器中本地的兼容性方法,但对于旧版浏览器需要后备(fallback)方法,比如 inArray()和 each()

·多浏览器(不要与跨浏览器混淆)支持

虽然jQuery正在逐渐退出历史的舞台,但是作为一个前端初学者,花个几天时间来学习了解一下他的思想还是很有必要的。

那么,我们开始!

首先是配置jQuery环境,进入jQuery的官方网站jQuery来下载最新的jQuery文件到本地,然后再引入到项目中即可。引入代码示例:

下面给出jQuery第一个页面的应用示例:

第一个jQuery小程序

jQuery对象

jQuery对象就是通过包装DOM对象后产生的对象,可以使用jQuery里的方法。比如:

$("$syl").html(); // 获取id为syl的元素内的html代码,html()是jQuery中的方法

这段代码等同于:

document.getElementById("syl").innerHTML;

** 额外要注意的是 **

jQuery对象不等同于DOM对象,但是他们之间可以相互转换

*** jQuery对象转换为DOM对象 ***

var $cr = $("#cr");

var cr = $cr[0];

或者:

var $cr = $("#cr");

var cr = $cr.get(0); // DOM 对象

*** DOM对象转换为jQuery对象 ***

var cr = document.getElementById("cr");

var $cr = $(cr); // jQuery对象

解决冲突

并不是只有jQuery框架使用$符号,如果跟其他框架重复了怎么办呢,jQuery团队考虑到了这个问题,并实现了noConflict()方法。

例如:

Day03消除冲突

这是一个段落

总结

ok 又到了总结阶段,写一点个人的小想法,这是我第一次接触jQuery,目前看起来还比较简单,前端的知识都是比较多且杂的,得慢慢学。今天了解了jQuery的一些历史,知道了怎么去在文件中引用它,也实践了几个小东西,知道了jQuery对象和DOM对象的区别,也学会了怎么解决jQuery和其他库的冲突。

总而言之,首先等待DOM元素加载完毕,也就是$(document).ready(); 这个ready里边的参数呢是一个函数function(){},而你又可以在这个函数里去通过jQuery的选择器去对页面中的某些元素做相应的操作,学习中发现click()这个函数应用频率很高,具体使用就是jq选择器.click(),然后里边的参数就是一个函数,这个函数会在这个元素被点击的时候触发,嗯,就这样吧。