南大软院大神养成计划——第十六天

叁歲伎倆 2022-08-18 00:43 151阅读 0赞

今天是南大软院大神养成计划实施的第十六天，今天继续学习jQuery基础。

**一.过滤性选择器**

该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。

**:first过滤选择器**  
在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？  
在下面的示例代码中你可能注意到我们会使用  
 $(“li:first”)//也可以用last需找最后一个元素  
注意：书写时以“：”号开头。

如： $("li:last").css("background-color", "red");

**:eq(index)过滤选择器**  
如果想从一组标签元素数组中，灵活选择任意的一个标签元素，我们可以使用  
:eq(index)  
其中参数index表示索引号（即：一个整数），它从0开始，如果index的值为3，表示选择的是第4个元素。

例如：$("li:eq(2)").css("background-color", "\#60F");

**:contains(text)过滤选择器**  
与上一节介绍的:eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

如:$("li:contains('jQuery')").css("background", "green");

**:has(selector)过滤选择器**  
除了在上一小节介绍的使用包含的字符串内容过滤元素之外，还可以使用包含的元素名称来过滤，:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素，其中selector参数就是包含的元素名称，是被包含元素。  
例如：获取指定包含某个元素名的全部<li>元素，并改变它们显示文字的颜色， $("li:has('label')").css("background-color", "blue");

**:hidden过滤选择器**  
:hidden过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素。  
例如，调用:hidden选择器获取不可见的<p>元素，并将该元素的内容显示在<div>元素中

**:visible过滤选择器**  
与上一节的:hidden过滤选择器相反，:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。  
例如，使用:visible选择器获取可见的<p>元素，并将该元素的内容显示在<div>元素中

**\[attribute=value\]属性选择器**  
属性作为DOM元素的一个重要特征，也可以用于选择器中，从本节开始将介绍通过元素属性获取元素的选择器，\[attribute=value\]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中\[\]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。  
例如，使用\[attribute=value\]属性选择器，获取指定属性名和对应值的全部<li>元素，并设置它们显示的文字颜色

如：$("li\[title='蔬菜'\]").css("background-color", "green");

**\[attribute!=value\]属性选择器**  
与上一节介绍的\[attribute=value\]属性选择器正好相反，\[attribute!=value\]属性选择器的功能是获取不包含属性名，或者与属性名和属性值不相同的全部元素，其中\[\]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。  
例如，使用\[attribute!=value\]属性选择器，获取指定不包含属性名，或与属性名和对应值不同的全部<li>元素，并设置它们显示的文字颜色

**\[attribute\*=value\]属性选择器**  
介绍一个功能更为强大的属性选择器\[attribute\*=value\]，它可以获取属性值中包含指定内容的全部元素，其中\[\]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。  
例如，使用\[attribute\*=value\]属性选择器，获取属性值中包含某一指定内容的全部<li>元素，并设置它们显示的文字颜色

**:first-child子元素过滤选择器**  
通过上面章节的学习，我们知道使用:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。  
如下图，如果想把页面中每个ul中的第一个li获取到，并改变其颜色

**:last-child子元素过滤选择器**  
与:first-child子元素过滤选择器功能相反，:last-child子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理.

二.表单选择器

**:input表单选择器**  
如何获取表单全部元素？:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。

如：$("\#frmTest :input").addClass("bg\_blue");

**:text表单文本选择器**  
:text表单文本选择器可以获取表单中全部单行的文本输入框元素，单行的文本输入框就像一个不换行的字条工具，使用非常广泛。

如：$("\#frmTest :text").addClass("bg\_blue");

**:password表单密码选择器**  
如果想要获取密码输入文本框，可以使用:password选择器，它的功能是获取表单中全部的密码输入文本框元素。

如： $("\#frmTest :password").addClass("bg\_red");

**:radio单选按钮选择器**  
表单中的单选按钮常用于多项数据中仅选择其一，而使用:radio选择器可轻松获取表单中的全部单选按钮元素。

如： $("\#frmTest :radio").attr("disabled","true");

**:checkbox复选框选择器**  
表单中的复选框常用于多项数据的选择，使用:checkbox选择器可以快速定位并获取表单中的复选框元素。

如：$("\#frmTest :checkbox").attr("disabled","true");

**:submit提交按钮选择器**  
通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。

如： $("\#frmTest input:submit").addClass("bg\_red");

**:image图像域选择器**  
当一个<input>元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。例如，在表单中添加两种类型的图像元素，使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式

如： $("\#frmTest :image").addClass("bg\_red");

**:button表单按钮选择器**  
表单中包含许多类型的按钮，而使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

如： $("\#frmTest :button").addClass("bg\_blue");

**:checked选中状态选择器**  
有一些元素存在选中状态，如复选框、单选按钮元素，选中时“checked”属性值为“checked”，调用:checked可以获取处于选中状态的全部元素。

如：$("\#frmTest :checked").attr("disabled", true);

大家可以和单选按钮，复选框做对比

**:selected选中状态选择器**  
与:checked选择器相比，:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

如：var $txtOpt = $("\#frmTest :selected").text();

上面就是表单选择器，主要格式就是$("表单id :选择器")或者在选择器前添加元素$(“表单id input:选择器”),这里需要注意的是选择器与元素之间没有空格，而表单与选择器之间是要有空格的，虽然表单选择器很多，但是非常好理解，很容易就可以记住和运用.

讲到这选择器部分就讲完了，这里给大家提供jQuery选择器的参考手册:http://www.w3school.com.cn/jquery/jquery\_ref\_selectors.asp

还有详细讲解选择器的网址：http://www.w3school.com.cn/jquery/jquery\_selectors.asp

三.Jquery 操作DOM元素

**使用attr()方法控制元素的属性**  
attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。

如： $("\#a1").attr("href", "www.imooc.com");  
            var $url = $("\#a1").attr("href");  
            $("\#tip").html($url);

**操作元素的内容**  
使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。

对于上面两种的方法的区别：html()方法可以获取元素的HTML内容，因此，原文中的格式代码也被一起获取，而text()方法只是获取元素中的文本内容，并不包含HTML格式代码。

如：var $content = "<b>唉，我又变胖了！</b>";  
            $("\#html").html($content);  
            $("\#text").text($content);

结果：![Image 1][]

这就是htm（）和text（）的区别

**操作元素的样式**  
通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。

如：$("\#content").css(\{"background-color":"red","color":"\#fff"\});

**移除属性和样式**  
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，前者方法中参数表示移除属性名，后者方法中参数则表示移除的样式名

如：$("\#content").removeClass("blue white");

**使用append()方法向元素内追加内容**  
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。

**使用appendTo()方法向被选元素内插入内容**  
appendTo()方法也可以向指定的元素内插入内容，它的使用格式是：  
$(content).appendTo(selector)  
参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部。

如： var $html = "<span class='red'>小青蛙</span>"  
            $($html).appendTo("div");

**使用before()和after()在元素前后插入内容**  
使用before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容，调用格式分别为：  
$(selector).before(content)和$(selector).after(content)  
其中参数content表示插入的内容，该内容可以是元素或HTML字符串。

**使用clone()方法复制元素**  
调用clone()方法可以生成一个被选元素的副本，即复制了一个被选元素，包含它的节点、文本和属性，它的调用格式为：  
$(selector).clone()  
其中参数selector可以是一个元素或HTML内容。

如：  $("body").append($(".red").clone());

**替换内容**  
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容，但它们调用时，内容和被替换元素所在的位置不同，分别为如下所示：  
$(selector).replaceWith(content)和$(content).replaceAll(selector)  
参数selector为被替换的元素，content为替换的内容。

如：  var $html = "<span class='red' title='hi'>我是土豪</span>";

$($html).replaceAll(".green");

**使用wrap()和wrapInner()方法包裹元素和内容**  
wrap()和wrapInner()方法都可以进行元素的包裹，但前者用于包裹元素本身，后者则用于包裹元素中的内容，它们的调用格式分别为：  
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)  
参数selector为被包裹的元素，wrapper参数为包裹元素的格式。

例如，调用`wrap()`方法，将<span>用<div>元素包裹起来，如下图所示：

[![52bcdea700016dbf03980120.jpg][]][52bcdea700016dbf03980120.jpg]

在浏览器中显示的效果：

[![52bcdf080001301504830245.jpg][]][52bcdf080001301504830245.jpg]

从图中可以看出，红色区域的<span>元素被蓝色边框的<div>元素通过`wrap()`方法包裹起来。

**使用each()方法遍历元素**  
使用each()方法可以遍历指定的元素集合，在遍历时，通过回调函数返回遍历元素的序列号，它的调用格式为：  
$(selector).each(function(index))  
参数function为遍历时的回调函数，index为遍历元素的序列号，它从0开始。

**使用remove()和empty()方法删除元素**

remove()方法删除所选元素本身和子元素，该方法可以通过添加过滤参数指定需要删除的某些元素，而empty()方法则只删除所选元素的子元素。

这就是今天所学的内容，期待明天的学习

[Image 1]: 
[52bcdea700016dbf03980120.jpg]: /images/20220731/66dbdaa71552494b879edaceda126f62.png
[52bcdf080001301504830245.jpg]: /images/20220731/623df9ab4ad1445c836e53e1dea80ad0.png