<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery和dom互相调用对方成员</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//1.jQuery和dom互相调用对方成员
function f1 () {
//document.getElementsByTagName('h1')[0].style.color='red';
//$('h1').css('color','red');
/**
* 注意：jQuery和dom不能互相调用对方的方法
* jQuery对象是对dom对象进行封装
* dom对象是jQuery对象的数组部分
*/
//jQuery变为dom对象才能调用对方成员
//$('h1')[0].style.color='red';
//dom对象变为jQuery对象才能调用对方成员
/*var doc=document.getElementsByTagName('span');
$(doc).css('color','red');*/
/**
* jQuery框架对象分析：
* jQuery对象类型：jQuery对象和$对象
* $对象----函数对象
*/
}
//2.each遍历方法
function f2 () {
//数组遍历:$.each(数组,function(k-每个元素的下标,v-每个元素的值))
/*var color=['gold','yellow','orange','blue'];
$.each(color, function(k,v) {
alert(k+"--"+v);
});*/
//遍历对象
/*var cat={name:'kit',color:'black',climb:function(){alert("爬树")}};
$.each(cat, function(k,v) {
alert(k+"--"+v);
});*/
//遍历jQuery对象,k代表dom对象下标，v代表dom对象
/*$('li').each(function(k,v){
alert(k+"--"+v.val());
});*/
//随机数颜色
var clr=['red','blue','yellow','pink','purple','green','gray','orange'];
$('li').each(function(k,v){
$(this).css('background-color',clr[Math.floor(Math.random()*8)]);
});
}
</script>
</head>
<body>
<h1>标题</h1>
<div><span>图片大小</span></div>
<ul>
<li value="wh">武汉</li>
<li value="sh">上海</li>
<li value="bj">北京</li>
</ul>
<input type="button" value="触发" οnclick="f2()"/>
</body>
</html>
