一、jQuery对象和DOM对象的转换
1.jQuery对象转DOM对象
var $li = $("ul>li");
//直接通过索引转换,将ul中的第一个子元素li设置背景颜色为亮蓝色
$li[0].style.backgroundColor='lightBlue';
//第二种方法,将ul中的第二个子元素li设置背景颜色为橙色
$li.get(1).style.backgroundColor='orange';
//其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象。
2.DOM对象转jQuery对象
var $jQuery=$(DOM);
var myVideo=document.querySelector('video');
//DOM对象转jQuery对象
var $myVideo=$(myVideo);
//为video元素添加css修饰
$myVideo.css({
"height":"150px","display":"inline-block","margin-top":"100px"});
运行效果:
二、实际案例
html:
<ul id='table3'>
<li class="child">Test1</li>
<li class="child">Test2</li>
<li class="child">Test3</li>
<li class="child">Test4</li>
</ul>
css:
#table3 li{
display: inline-block;
height: 40px;
width: 120px;
background-color: aqua;
text-align: center;
line-height: 40px;
}
js:
//使用jQuery设置table3的孩子的背景颜色
// var ul3=$('li');这句指令会导致所有li全部被修改背景颜色,
// 原因是jQuery具有隐式迭代
var $list3=$('.child');
console.log($list3);
//jQuery无法直接使用style,正确用法如下
$list3.css("background","orange")
//对第二个子li背景颜色进行修改
var $list32=$('.child:eq(1)');
$list32.css("background","lightBlue");
//操作奇数子li背景颜色为violet
$("#table3 li:odd").css("background","violet");
$list3.get(1).style.backgroundColor='blue';
运行效果(背景图不包括在内):