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;
}