一:DOM对象的查找
DOM的查找到的对象,除byID的之外,返回的都是一个数组,并不是DOM对象无法调用DOM对象的方法。
通过id查找:
因为id在一个HTML文件中唯一,因此查找到的只会是一个元素对象以数组形式(对象,)返回。直接就把对象赋值给变量了。
var dEle = document.getElementById('d1') <div id="d1" class="left">…</div> dEle.style.color = 'red'
通过其他选择器查找:
以标签选择器为例
var dEle = document.getElementsByTagName('div') HTMLCollection(5) [div#d1.left,div.item, div.item, div.right, d1: div#d1.left] //查找到了5个对象,以数组形式返回,赋值给了变量dEle dEle.style.color = 'red' VM279:1 Uncaught TypeError: Cannot set property 'color' of undefined at <anonymous>:1:5 //程序报错,dEle并不是一个DOM对象,是一个数组,无法调用DOM的对象方法。
二:JQuery对象查找
以任何方式查找到的都是jQuery对象,但是有很大的可能,是多个元素的集合体。
以id选择器查找
var $d1Ele = $('#d1') $d1Ele.css('color','yellow')
以类选择器查找
$('.item').length; 9 $('.item').css('color','red');
三:jQuery操作标签样式
踩坑点:左侧菜单实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>左侧菜单示例</title> <style> body { width: 100%; margin: 0; height: 1000px; } .hide { display: none; } .left { width: 20%; height: 100%; background-color: #222222; } .item { color: black; margin-bottom: 15px; } .title { margin-top: 15px; margin-bottom: 15px; background-color: red; } .items { background-color: blueviolet; } </style> </head> <body> <div id = 'd1' class="left"> <div class="menu"> <div clas="title">菜单一</div> <div class="items"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> <div class="title">菜单二</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> <div class="title">菜单三</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> </div> <div class="right"></div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $('.title').click(function () { $('.items').addClass('hide'); $(this).next().removeClass('hide') }); </script>
$('.title').click(function () { $('.items').addClass('hide'); $(this).next().removeClass('hide') });
化蛇添足,在操作jQuery对象修改CSS样式时,随手给类加了点变成('.hide'),直接GG,愚蠢的错误。
教训:要严格区分开对象的查找和CSS样式修改的差异化。
持续踩坑中。。。。。。。。。