jq基础笔记

小小樟鱼

墨衍会员 · AI 创作全网分发码龄10年

关注

原创最新推荐文章于 2026-03-27 03:48:37 发布 454 阅读 AI 写同款· GEO 优化 ›

JQ框架笔记 JQ基础笔记阅读详情

同学心目中的jQuery：

简单易用，功能强大，对移动端来说，体积稍大。

1.1 回顾前面学到的js我们遇到的一些痛点

1. window.onload 事件有个事件覆盖的问题，我们只能写一个(如果页面有两个window.onload，那么第一个会被第二个覆盖)

2. 代码容错性差（比如把onclick写成onclik也不会报错）

3. 浏览器兼容性问题（用innerText在火狐上不兼容）

4. 书写很繁琐，代码量多（$(“#div1”)和document.getElement（“div1”））

5. 代码很乱，各个页面到处都是

6. 动画效果，我们很难实现（animate(),slide(),show(30)等等）

1.2 jQuery解决问题

解决了我们上面遇到所有问题

1.3 jQuery的基本使用

min：它是压缩过的版本

区别：我们开发过程中，会用未压缩的版本，或者压缩的。

项目上线的时候，我们要用压缩过的版本。

版本问题：

1. 1.xxx 版本 jQuery-1.11.1.js

2. 2.xxx 版本不再支持IE6、7、8

3. 3.xxx版本

1.3.1 引包

1.要把我们的jQuery源文件拿到我们的项目里面来

2.在我们的页面中引用jQuery文件

问题：

如果遇到这种问题，那肯定是没有引用我们的jQuery源文件。

用jQuery之前，先引入jQuery，然后，再去写我们的jQuery代码。

1.3.2 入口函数

$(document).ready(function(){});

$(function(){});

1.3.3 事件处理程序

1. 事件源

Js方式：document.getElementById(“id”)

jQuery方式：$(“#id”)

2. 事件

Js方式 :document.getElementById(“id”).onclick

jQuery方式: $(“#id”).click

区别：jQuery的事件不带on

3. 事件处理程序

Js 书写方式:

document.getElementById(“id”).onclick = function(){

// 语句

}

jQuery 书写方式:

$(“#id”).click(function(){

// 语句

});

1.4 jQuery详细介绍

1.4.1 $问题

a) Js命名归法：下划线、字母、$、数字

b) 但是不能以数字作为开头

var $ = “我是$符号”;

jQUery的两个变量：$ 和 jQuery

jQuery占用了我们两个变量：$ 和 jQuery

1.4.2 js入口函数跟jQuery入口函数的区别：

1. Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完了之后，才回去执行

2. jQuery的入口函数是在 html所有标签都加载之后，就回去执行。

1.5 Js创建对象（3种）

三种方式：

1. var obj = {}; 推荐使用

2. var obj1 = new Object();

3. var obj2 = Object.create();

1跟2的区别：

推荐使用第一个方式

面试题：第二种方式存在效率问题，因为要new对象，会涉及到原型查找的问题。

1.6 jQuery基本选择器

1.6.1 回顾CSS选择器

CSS选择器回顾
符号	说明	用法
#id	Id选择器	#id{ color:red; }
.class	类选择器	.class{ //}
Element	标签选择器	P { //}
*	通配符选择器	配合其他选择器来使用
,	并集选择器	div,p{}
空格	后代选择器	div span{} 选择div下面所有后代的span
>	子代选择器（亲的儿子）	div > span{}
+	紧邻选择器（只取一个，没有过滤功能）如下图	div+p 选择div紧挨着的下一个p元素

1.6.2 jQuery基本选择器

基本选择器
符号	说明	用法
$(“#demo”)	选择id为demo的第一个元素	$(“#demo”).css(“background”,”red”)
$(“.liItem”)	选择所有类名（样式名）为liItem的元素	$(“.liItem”). css(“background”,”red”);
$(“div”)	选择所有标签名字为div的元素	$(“div”). css(“background”,”red”);
*$(“”)**	选择所有元素少用或配合其他选择器来使用	$(“*”). css(“background”,”red”)
$(“.liItem,div”)	选择多个指定的元素，这个地方是选择出了 .liItem元素和div元素	$(“.liItem,div”). css(“background”,”red”)

规律：$(selector).css(“background”,”red”);

1.7 jQuery是什么

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率。

1.7.1 Javascipt跟jQuery的区别：

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。

jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发

jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

1.8 jQuery其他选择器

1.8.1 层级选择器


符号	说明	用法
空格	后代选择器选择所有的后代元素	$(“div span”). css(“background”,”red”);
>	子代选择器选择所有的子代元素(亲子代)	$(“div > span”). css(“background”,”red”)
+	紧邻选择器选择紧挨着的下一个元素（紧挨着的第一个，只取一个）	$(“div + p”). css(“background”,”red”)
~	兄弟选择器选择后面的所有的兄弟元素（不包括前面和自己）	$(“div ~ p”). css(“background”,”red”)

层级选择器选择了选择符后面那个元素，比如，div > p，是选择>后面的p元素。

1.8.2 过滤选择器

基本过滤选择器
符号	说明	用法
:eq(index)	index是从0开始的一个数字，选择序号为index的元素。选择第一个匹配的元素。	$(“li:eq(1)”). css(“background”,”red”)
:gt(index)	Index 是从0开始的一个数字，选择序号大于index的元素	$(“li:gt(2)”). css(“background”,”red”)
:lt(index)	Index是从0开始的一个数字，选择小于index 的元素	$(“li:lt(2)”). css(“background”,”red”)
:odd	选择所有序号为奇数行的元素下标为1 3 5 7	$(“li:odd”). css(“background”,”red”)
:even	选择所有序号为偶数的元素下标为0 2 4 6	$(“li:even”). css(“background”,”red”)
:first	选择匹配第一个元素	$(“li:first”). css(“background”,”red”)
:last	选择匹配的最后一个元素	$(“li:last”). css(“background”,”red”)

属性选择器
符号	说明	用法
$(“a[href]”)	选择所有包含href属性的元素	$(“a[href]”). css(“background”,”red”)
$(“a[href=’itcast’]”)	选择href属性值为itcast的所有a标签	$(“a[href=’itcast’]”). css(“background”,”red”)
$(“a[href!=’baidu’]”)	选择所有href属性不等baidu的所有元素，包括没有href的元素	$(“a[href!=’baidu’]”). css(“background”,”red”)
$(“a[href^=’web’]”)	选择所有以web开头的元素	$(“a[href^=’web’]”). css(“background”,”red”)
$(“a[href$=’cn’]”)	选择所有以cn结尾的元素	$(“a[href$=’cn’]”). css(“background”,”red”)
*$(“a[href=’i’]”) $(“a[href=’img’]”) img必须是连在一起* 如果是images是不可以的	选择所有包含i这个字符的元素，可以是中英文	$(“a[href*=’i’]”). css(“background”,”red”)
$(“a[href][title=’我’]”)	选择所有符合指定属性规则的元素，都符合才会被选中。	$(“a[href][title=’我’]”). css(“background”,”red”)