jQuery学习笔记（一)

windows.onload和$(document).ready():

$(document).ready()支持在DOM加载完毕后调用某个函数，不必等待页面中的图像加载。

window.onload是在DOM文档树加载完和所有文件加载完之后执行一个函数。

也就是说$(document).ready()要比window.onload先加载。

CSS选择器的在jQuery中的应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="test1.css">
</head>
<body>
    <ul id="selected-play">
        <li>Comedies
            <ul>
                <li><a href="http://www.baidu.com">As you like it</a></li>
                <li>All is All</li>
                <li>You night</li>
                <li>Ha</li>
            </ul>
        </li>
        <li>Comedies
            <ul>
                <li><a href="testabc.cba">As you like it</a></li>
                <li>All is All</li>
                <li>You night</li>
                <li>Ha</li>
            </ul>
        </li>
        <li>Comedies
            <ul>
                <li><a href="localhost">As you like it</a></li>
                <li>All is All</li>
                <li>You night
                    <ul>
                        <li>kiih</li>
                        <li>shau</li>
                    </ul>
                </li>
                <li>Ha</li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript">
        $(document).ready(function () {
            var MyList = $('#selected-play > li > ul > li:nth-child(odd)');
            //console.log(MyList);
            //console.log(location.hostname);                               //输出为localhost
            //$('#selected-play > li > ul > li:nth-child(odd)').addClass('horizontal');
            //$('a[href^="http"]').addClass('highlight');
            //var MyList = $('#selected-play > li > ul > li:contains(http)');
            //console.log($('#selected-play > li > ul > li').filter(':contains(All)')[0]);
            //$('#selected-play > li > ul > li').filter(':contains(All)')[0].addClass('highlight');      //filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
            //console.log(MyList);
            //console.log($('#selected-play > li > ul > li:contains(All)')[0].innerHTML);
            //$('#selected-play > li > ul > li:contains(All)')[0].addClass('highlight');    //这行代码运行会出错
        });
    </script>
</body>
</html>

CSS相关代码：

.horizontal{
    background: red;
}
.highlight{
    font-weight:bold;
}

jQuery学习笔记（一)

猜你喜欢