jQuery对象和DOM对象的转换及实际案例

一、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';

运行效果（背景图不包括在内）：