Marco's JavaScript 之【JQuery下】

最新推荐文章于 2022-06-15 15:29:57 发布

原创最新推荐文章于 2022-06-15 15:29:57 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuery

JavaScript 同时被 2 个专栏收录

7 篇文章

订阅专栏

JQuery

4 篇文章

订阅专栏

本文详细介绍了jQuery中节点遍历的方法，包括遍历父子节点、兄弟节点，以及使用$.each()方法遍历数组、JSON对象和jQuery对象。同时，讲解了如何使用attr()、prop()和class操作属性，以及css()方法进行样式操作。

JQuery

jQuery遍历节点

jQuery遍历节点的方式和JavaScript也很相似，但是更加便捷，在jQuery中明确的区分了父子节点和兄弟节点之间的操作

父子节点操作

遍历方法	方法介绍
$(“选择器”).parent()	返回被选元素的直接父元素，只有一个
$(“选择器”).parents()	返回被选元素的所有祖先元素，它一路向上直到文档的根元素<html>
$(“选择器”).children()	返回被选元素的所有直接子元素
$(“选择器”).find(“子选择器”)	返回属于父选择器后代的所有子选择器筛选出来的元素

兄弟节点操作

遍历方法	方法介绍
$(“选择器”). siblings()	返回被选元素的所有同辈元素，也就是说有同一个父元素，不包含该元素本身
$(“选择器”).next()	取得匹配元素后面紧邻的同辈元素（只返回一个元素）
$(“选择器”).nextAll()	返回被选元素之后的所有同辈元素
$(“选择器”).prev()	取得匹配元素前面紧邻的同辈元素（只返回一个元素）
$(“选择器”).prevAll()	返回被选元素之前的所有同辈元素

友情提示：在以上选择器中添加选择器可以筛选出符合条件的兄弟元素

除了以上的大家族关系的节点操作外，JQuery还提供了一些其他的过滤方法
first() 方法
first() 方法返回被选元素的首个元素。

$(function () {
    $("div > p").first();
});

last() 方法
返回被选元素的最后一个元素。

$(function () {
    $("div > p").last();
});

eq() 方法
返回被选元素中带有指定索引号的元素（索引从 0 开始）。

$(function () {
    $("div > p").eq(1);
});

filter() 方法
返回匹配这个标准的所有元素。

$(function () {
    $("div > p").filter(".filter");//匹配条件是class属性值为filter
});

not() 方法
返回不匹配标准的所有元素。

$(function () {
    $("div > p").not(".filter");//匹配条件是class属性值不为filter
});

$.each()方法
$.each()方法一般用于遍历数组、JSON对象和jQuery对象。

遍历数组：

var arr = ["1", "2", "3", "4"];
$.each(arr, function (index, value) {
    console.log("index: " + index);
    console.log("value: " + value);
    // 这里的this指向每次遍历中的当前value值,this == value
    console.log(value == this);
});

遍历JSON对象：

var obj = {city: "武汉", name: "marco", age: 18};
$.each(obj, function (index, value) {
    console.log("index: " + index);
    console.log("value: " + value);
    // 这里的this指向每次遍历中的当前value值,this == value
    console.log(value == this);
});

遍历jQuery对象：

$.each($("li"), function (index, element) {
    console.log("index: " + index);
    // 注意:获取到的element是一个DOM对象
    console.log("element: " + $(this).text());//获取当前对象中的文本值
    console.log("element: " + element.innerHTML);//获取当前对象中的
    console.log(element == this);
});

注意：
1.我们在用$.each遍历jQuery对象时，index为索引值，element是元素对象且为Js对象，如果我们需要调用该对象的JQuery方法，必须使用$()强制转型！
2.使用$.each遍历时若需要中止循环不能使用break，而要用return false来进行替代。

根据jQuery提供的遍历兄弟节点的函数模拟一个
五星好评案例
案例需求：
1.鼠标移动到某一个“星星”上，把“星星”及之前的设置为实心，之后设置为空心。
2.点击某一个“星星”，给该“星星”添加class标记,把别的“星星”的class标记去掉。
3.鼠标离开“星星”，把标记及标记之前的设置为实心，标记之后的设置为空心。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五星好评案例</title>
    <style>
        ul {
            list-style-type: none;
        }
        ul > li {
            color: #FD482C;
            font-size: 40px;
            float: left;
        }
    </style>
    <script src="jquery-1.11.3/jquery.js"></script>
</head>
<body>
<div>
    <ul id="fiveStar">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
</div>
<script>
    var solidStar = "★";//定义一个实心⭐
    var hollowStar = "☆";//定义一个空心⭐
    console.log($("fiveStar"));
    var stars = $("#fiveStar").children();
    for (let i = 0; i < stars.size(); i++) {
        var star = stars[i];
        $(star).click(function () {
            $(this).text(solidStar);
            $(this).prevAll().text(solidStar);
            $(this).nextAll().text(hollowStar);
        }).mouseover(function () {
            $(this).siblings().removeClass("selected")
            $(this).addClass("selected");//鼠标离开之前，给当前元素做一个标记(添加自定义class属性)
        }).mouseout(function () {
            var li = $("li.selected");//通过JQuery的关系选择器，找到做了标记的子节点
            li.text(solidStar);
            li.prevAll().text(solidStar);
            li.nextAll().text(hollowStar);
        })
    }
</script>
</body>
</html>

jQuery属性节点

attr属性操作

在JavaScript我们是使用setAttribute()和getAttribute()方法分别设置和获取属性值
而在jQuery中，我们只用通过attr()方法操作属性，可以是固有属性，也可以是自定义属性。

设置属性值
(1)设置单个属性

$("div").attr("title", "我是一个div");

(2)设置多个属性

$("img").attr({
    "src" : "img/11.jpg",
    "alt" : "我是一张风景图片"
});

获取属性值
获取alt属性值

console.log($("img").attr("src"));

删除属性
removeAttr(name)从每一个匹配的元素中删除一个属性。
删除alt属性值

$("img").removeAttr("alt");

prop表单属性操作

在jQuery中，通过prop()方法操作属性，只能操作固有属性，特别用于：checked、disabled、selected等表单属性。

注意： checked、disabled、selected等表单属性只能通过prop()方法来操作。

设置属性值
设置多选框为未选中状态

$("input:checkbox").prop("checked", false);

获取属性值
(1)获取下拉列表option的选中状态

var flag1 = $("select > option").prop("selected");

(2)获取单选框的选中状态

var flag2 = $("input:radio").prop("checked");

class属性操作

添加class属性
addClass() 为每个匹配的元素添加指定的类名，如需添加多个类，请使用空格分隔类名。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性(通过jQuery添加CSS样式效率更高)。

移除class属性
removeClass() 方法从被选元素移除一个或多个类。
如果没有规定参数，则该方法将从被选元素中删除所有类。

切换class属性
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

操作说明	示例代码
添加一个class	$(“div”).addClass(“box1”)
添加多个class	$(“div”).addClass(“box2 box3”)
移除一个class	$(“div”).removeClass(“box1”)
移除多个class	$(“div”).removeClass(“box1 box2”)
移除全部class	$(“div”).removeClass()
切换一个class	$(“div”).toggleClass(“box”)
切换多个class	$(“div”).toggleClass(“box1 box2”)

判断是否某个class属性
hasClass()可以用来判断元素中是否含有某个class。如果有，则返回true，否则返回false。

if($("div").hasClass("box")) {
    // 如果box存在，则移除这个class
    $("div").removeClass("box");
}

JQuery样式操作

在JavaScript中我们是通过元素.style.样式 来设置行内style样式,而在JQuery使用**元素.css.(样式)**的方式来进行设置或者获取，JQuery获取样式时不但可以获取行内样式，还可以获取内部样式和外部样式。

设置一个属性

$("#box").css("background-color", "gray");

设置多个属性

$("#box").css({
      "color": "blue",
      "font-size": "30px",
      "line-height":"40px"
      "text-align": "center"
});

获取文本对齐方式

console.log($("#box").css("text-align"));