关于HTML-DOM和DOM-CORE的获取图片src问题

   今天写一个关于鼠标点击切换图片显示的小功能上碰壁了！！ 检查好几遍代码都没找到原因，最后使用控制台发现了原因所在，
   下面给大家说一下，希望可以帮大家解决一些问题

//获取class名为 focusImg的元素，切记，获取一个className后面的[0]不能少
var focusImg = document.getElementsByClassName('focusImg')[0];在这里插入代码片
//使用HTML-DOM获取focusImg的图片src
var imgSrc = 'img/1.jpg';
var changePic = 'img/2.jpg';
//把imgSrc赋值给fousImg
focusImg.src = imgSrc;
//猜猜他们两个是否相等
console.log(focusImg.src == imgSrc);

很显然结果是false，为什么会这样呢？ 我们检查一下focusImg.src的值是多少

console.log(focusImg.src)

显示的结果是这一大串，所以造成了我们程序当中出现了百思不得其解的错误。
让我们看看用DOM-core中的getAttribute()获取的src吧

var source = focusImg.getAttribute('src');
console.log(source);

这样获取的就是正确的src地址了，这时候再使用console.log(focusImg.src == imgSrc)得到的结果就是true，大家可以试一下。

这也是在实践中发现错误，提高自己。下面给大家贴上用原生js和jQuery写的鼠标覆盖切换图片吧！

//原生js方法
window.onload = function (){
				var focusImg = document.getElementsByClassName('focusImg')[0];
				focusImg.onmouseover = function(){
					var imgSrc = 'img/1.jpg';
					var source = focusImg.getAttribute('src');
					console.log(source);
					var changeSrc = 'img/2.jpg';
					
					if(source == imgSrc){
						focusImg.setAttribute('src', changeSrc);
					}else{
						focusImg.setAttribute('src', imgSrc);
					}
				}
			}
//使用jquery方法
			$(function(){
				
				$('.focusImg').mouseover(function(){
					
					var imgSrc = 'img/2.jpg';
					var changeSrc = 'img/1.jpg';
					var Img = $(this).attr('src');
					
					if(Img == changeSrc){
						$(this).attr('src', imgSrc)
						.next().hide();
					}else{
						$(this).attr('src', changeSrc)
						.next().show()
						.removeClass('changeColor');
						
					}
					
				});
			});
			

希望对大家有帮助吧，谢谢观看！