jQuery笔记【1】

最新推荐文章于 2024-09-27 15:11:44 发布

码代码的水母

最新推荐文章于 2024-09-27 15:11:44 发布

阅读量103

点赞数

分类专栏：前端文章标签： css

原文链接：http://www.atguigu.com/opensource.shtml

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

活点地图

jQuery简介

在这里插入图片描述

jQuery对象

jQuery对象就是通过 jQuery($()) 包装DOM对象后产生的对象
jQuery是jQuery独有的。
如果一个对象是jQuery对象，就可以使用jQuery里的方法：

$("#persontab").html();

jQuery对象无法使用DOM对象的任何方法，
同样DOM对象也不能使用 jQuery里的任何方法。
约定：如果要获取的是 jQuery对象，要在变量前加 $
var $variable = jQuery对象
var variable = DOM对象

jQuery对象与DOM对象的相互转换

jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法，如果 jQuery没有封装想要的方法，不得不使用DOM对象的时候，有如下两种处理方法：
1）jQuery对象是一个数组对象，可以通过[index]的方法得到对应的DOM对象

var $cr = ${"#cr"};
var cr = $cr[0];

2）使用jQuery中的get(index)方法得到相应的DOM对象

var $cr = ${"#cr"};
var cr = $cr.get(0);

DOM对象转成jQuery对象

对于DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象。
转换后可以使用jQuery中的方法。

var cr = document.getElementById("cr");
var $cr = ${cr};

jQuery选择器

选择器是 jQuery的根基，在jQuery中，对事件处理，便利DOM和Ajax操作都依赖于选择器

jQuery选择器的优点：

写法简洁

${"#id"}  // douument.getElementById("id");
${"tagName"}  // douument.getElementByName("tagName");

完善的事件处理机制

//若在网页中没有id为”id”的元素，浏览器会报错
//document.getElementById("id").style.color="red";

//需要先判断 docunent.getElementById("id”)是否存在if(document.getElementById("id"))docunent.getElementById("id").style.color="red";

//使用jQuery获取网页中的元素即使不存在页面不会报错
$("#id").css("color","red");

基本选择器

基本选择器是 jQuery中最常用的选择器，也是最简单的选择器，通过元素id,class和标签名来查找DOM元素（id必须唯一，class允许重复）
在这里插入图片描述

层次选择器

如果想通过DOM元素之间的层次关系获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素，需要使用层次选择器。
在这里插入图片描述
注意：

$（“prev ~ div”）选择器只能选择#prev元素后面的同辈元素；
jQuery中siblings()只要是同辈节点就可以，与前后位置无关。

过滤选择器

通过特定的过滤规则来筛选所需的DOM元素，该类选择器都以：开头。
按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

基本过滤选择器
内容过滤选择器
可见性过滤选择器

可见性过滤选择器：
hidden不仅包含样式属性 display 为 none 的元素，也包含文本隐藏域（）和visible：hidden之类的元素
属性过滤选择器
通过元素的属性获取相应的元素
表单选择器
子元素过滤选择器
表单对象属性过滤选择器

jQuery中的DOM操作

DOM：Document Object Model 文档对象模型
一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件

DOM操作的分类：

DOM Core：任何一种支持DOM的程序设计语言都可以使用它，也可以用来处理任何一种是标记语言编写的文档（例如XML）。
HTML DOM：使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。
CSS-DOM：针对于CSS操作，JavaScript中CSS－DOM主要用于获取和设置style对象的各种属性。

查找节点

查找属性节点：通过 jQuery选择器完成
操作属性节点：查找到所需要的元素之后，调用jQuery对象的attr()方法获取它的属性值
操作文本节点：通过text(）方法

创建节点

使用jQuery工厂函数 $() :$ (html);根据传入的html标记字符串创建一个DOM对象，并将该DOM对象包装成jQuery对象返回。

注意：

动态创建的新元素节点不会被自动添加到文档中，需要其他方法将其插入到文档中
创建单个元素时，注意闭合标签和使用标准格式（可以使用[ $() 或 $("
") ]）
创建文本节点就是在创建节点元素时直接把文本内容写出来；
创建属性节点也是在创建元素节点时一起创建

插入节点

动态创建html元素并没有实际用处，还需要将新创建的节点插入到文档中，成为文档中某个节点的子节点
在这里插入图片描述

以下方法不仅可以将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动
在这里插入图片描述

删除节点

remove() ：从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选，该节点所包含的所有后代节点将被同时删除。该方法返回值为一个指向已被删除的节点的引用。
empty()：清空节点，清空元素中的所有后代节点（不包含属性节点）

复制节点

clone()：克隆匹配的DOM元素，返回值为克隆后的副本，此时复制的新节点不具有任何行为
clone(true)：复制元素的同时也复制元素中的事件

替换节点

replaceWith()：将所有匹配的元素都替换为指定的HTML或DOM元素
replaceAll()：颠倒了的replaceWith()方法

注意：若是替换之前，元素上有绑定事件，替换后原先绑定好的事件会和原先的元素一起消失

包裹节点

warp()：指定节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，不会破坏原文档的语义。所有元素进行单独包裹。
warpAll()：所有匹配的元素用一个元素来包裹。
wraplnner()：将每一个匹配的元素的子内容（包括文本节点）用其他结构化标记包裹起来。

属性操作

attr()：获取属性和设置属性
该方法传递一个参数时，获取某元素的指定属性
该方法传递两个参数时，为某元素设置指定属性的值
jQuery 中很多方法都是一个函数实现获取和设置值。如 attr(),html(),text(),height(),width(),css() 等。
removeAll()：删除指定元素的指定属性

设置和获取HTML，文本和值

读取和设置某个元素中的HTML内容
html(). 可以用于XHTML，不能用于XML文档
读取和设置某个元素中的文本内容
text(). 可以用于XHTML和XML文档
读取和设置某个元素中的值
val() 类似于JavaScript中的value属性。
对于文本框、下拉列表框、单选框该方法可返回元素的值，多选框只能返回第一个值。
如果为多选框下拉列表，返回一个包含所有选择值的数组。