目录

jQyery简介

获取jQuery

 jQuery基本语法

1.使用jQuery弹出提示框

2.$(document).ready()与window.onload的区别

jQuery选择器

 jQuery层次选择器

jQyery简介

• jQuery由美国人John Resig于2006年创建。
• jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。
• 它的设计思想是write less,do more。

获取jQuery

1.进入jQuery官网：http://jquery.com

 2.下载压缩后的jQuery3.6.1(英文选择：Download the compressed,production jQuery 3.6.1)

 3.复制全部内容，全选(Ctrl+a)，复制(Ctrl+c)

 4.创建一个js文件，将复制的jQuery全部内容黏贴在js文件内

 jQuery基本语法

        使用jQuery要引用jQuery

1.使用jQuery弹出提示框

语法：

简写方式

2.$(document).ready()与window.onload的区别

$(document).ready():

1. 网页中所有DOM文档结构绘制完毕后即立刻执行，可能与DOM元素关联的内容并没有加载完毕
2. 同一个页面能同时编写多个
3. 简化方法：$(document(){//执行代码});

window.onload:

1. 必须等待网页中所有的内容加载完毕后才能执行
2. 同意网页中不能同时编写多个window.onload
3. 无简化方法

jQuery选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

1.标签选择器

描述：根据给定的标签名匹配元素标签

示例：

$("p")选取所有p元素标签

$("p").css("color","#f00");选取所有p元素标签设置文本颜色为红色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

2.类选择器

描述：根据给定的class匹配元素标签

示例：

$(".green")选取所有class为green的元素标签

$(".green").css("background-color","#0f0") 选取所有class为green的元素标签，设置背景色为红色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

3.ID选择器

描述：根据给定的id匹配元素标签

示例：

$("#red")选取id为red的元素，id具有唯一性，相同的id只能选取第一个

$("#red").css("color","#00f")选取id为red的元素，设置文本颜色为蓝色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

4.并集选择器

描述：将每一个选择器匹配的元素合并后一起返回

示例：

$("p,h5")选取所有p、h5元素标签

$("p,h5").css("background-color","#ccc")选取所有p、h5元素标签，设置背景颜色灰色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

5.全局选择器

描述：匹配所有元素标签

示例：

$("*")选取所有元素

$("*").css("color","orange")选取所有元素，设置文本字体颜色为橙色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

 jQuery层次选择器

层次选择器通过DOM元素标签之间的层次关系类元素元素标签。

层次选择器有后代选择器、子选择器、相邻元素选择器、同辈元素选择器。

1.后代选择器

描述：选取当前元素下的所有元素

示例：

$("ul li")选取ul元素标签下的所有li元素标签

$("ul li").css("background-color","#f00");选取ul元素标签下的所有li元素标签，设置背景色红色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

2.子选择器

描述：选择当前元素标签下的子元素

示例：

$("ul>h2")选取ul元素标签下的所有h2元素标签

$("ul>h2").css("background-color","#0f0");选取ul元素标签下的所有h2元素标签，设置背景色绿色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。

3.相邻元素选择器

描述：选取与当前元素标签同级的下一个元素标签

示例：

$("h2+li")选取h2元素标签之后的同级元素标签li

$("h2+li").css("background-color","#00f");选取h2元素标签之后的同级元素标签li,设置背景色蓝色

4.同辈元素选择器

描述：选取当前元素标签下的所有同级元素标签

示例：

$("h1~li")选取h1元素标签之后的所有同级li元素标签

$("h1~li").css("background-color","yellow");选取h1元素标签之后的所有同级li元素标签，设置背景色黄色

相思
王维
红豆生南国，
春来发几枝。
愿君多采撷，
此物最相思。