有人可以解释一下这个Jquery吗

Question

$(document).ready(function () {
    if ((screen.width >= 1024) && (screen.height >= 768)) {
        alert('Screen size: 1024x768 or larger');
        $("link[rel=stylesheet]:not(:first)").attr({
            href: "style2.css"
        });
    } else {
        alert('Screen size: less than 1024x768, 800x600 maybe?');
        $("link[rel=stylesheet]:not(:first)").attr({
            href: "style1.css"
        });
    }
});

我不明白这部分：

$("link[rel=stylesheet]:not(:first)").attr

Answer 1

它选择所有

link

标签，这些标签具有名为

rel

的属性，其值为

stylesheet

，并且不是第一个标签。例如，如果您有：

<link rel="icon" />
<link rel="stylesheet" href="style2.css" />
<link rel="stylesheet" href="style3.css" />
<link rel="stylesheet" href="style4.css" />

选择器将选择最后两个

link

标签。为什么？因为它排除了第一个，因为

rel

属性的值不是

stylesheet

，而是

icon

；并且排除第二个，因为它是所有具有属性link的

rel="stylesheet"

中的

第一个

，并且

not(:first)

过滤掉了这个。

Answer 2

$("link[rel=stylesheet]:not(:first)").attr({href : "style1.css"});

将其分解成几个部分。在这种情况下，选择器将匹配任何具有等于

<link>

属性的

rel

元素，但它是它找到的 (

stylesheet

) 元素。当发现时。 Jquery 附加了一个

:not

属性，该属性等于浏览器窗口大小的样式表...

breathe

link[rel=stylesheet]

Answer 3

rel="stylesheet"

的标签 和 :not(:first) 将过滤掉第一个

这些是 CSS 选择器。在这个特定的示例中，所有相关值为“stylesheet”的链接标签都被选择，但遇到的第一个将被省略。

Answer 4

W3Schools 参考：

http://www.w3schools.com/cssref/css_selectors.asp

Nettuts 文章：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/