jQuery方法

    xiaoxiao2025-04-10  36

    jQuery方法

    隐式迭代 隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。 如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。 下面是博主自己写的案例供大家参考: 案例效果 源代码:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.1.min.js"></script> <style> ul{ margin: 0; padding: 0; list-style: none; font-size: 60px; color: red; } li{ float: left; cursor: pointer; } </style> </head> <body> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> <script> $(function () { $("ul li").on("mouseenter", function () { $(this).text("★").prevAll("li").text("★").end().nextAll().text("☆"); }); $("ul li").on("mouseleave", function () { if ($("li.current").length === 0) { $(li).text("☆"); } else { $(this).text("★").prevAll("li").text("★").end().nextAll().text("☆"); } }); $("ul li").on("click", function () { $(this).attr("class","current").siblings().removeAttr("class"); }); }) </script> </body> </html>

    each方法 有了隐式迭代,为什么还要使用each函数遍历? 大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。 如果要对每个元素做不同的处理,这时候就用到了each方法

    作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数

    //参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素(DOM对象) $(selector).each(function(index,element){}); Element是一个 js对象,需要转换成jquery对象

    案例展示 源代码:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.11.1.min.js"></script> <style> li{ width:200px; height: 200px; background-color: skyblue; margin: 20px; list-style: none; text-align: center; line-height: 200px; font-size: 20px; float: left; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <script> $(function () { $("li").each(function (index,element) { $(element).css("opacity",$(element).text()*0.1); }) }) </script> </body> </html>
    最新回复(0)