zoukankan      html  css  js  c++  java
  • 01-JQuery学习之DOM对象和JQuery对象

    DOM对象,即是我们用传统的方法(javascript)获得的对象;而通过jQuery获取的对象是jQuery包装集对象,简称jQuery对象,只有jQuery对象才能使用jQuery提供的方法。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>02-Dom对象与Juqer包装集对象</title>
    	</head>
    	<body>
    		<div id="mydiv">文本</div>
    	</body>
    	<!-- 
    		DOM对象
    			通过js方式获取的元素对象(document)
    		JQuery对象
    			通过JQuery方法获取的元素对象,返回的是JQuery包装集
    	 -->
    	<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		// DOM对象
    		var divDom = document.getElementById('mydiv');
    		console.log(divDom);
    		var divsDom = document.getElementsByTagName('div');
    		console.log(divsDom);
    		// DOM对象 js获取不存在的元素时
    		var spanDom =  document.getElementsByTagName('span');
    		console.log(spanDom);
    		var spanDom2 = document.getElementById('myspan');
    		console.log(spanDom2);
    		
    		
    		console.log('====================');
    		
    		// JQuery对象
    		var divDom2 = $('#mydiv');
    		console.log(divDom2);
    		
    		var spanJquery = $('#myspan');
    		console.log(spanJquery);
    		
    		console.log('========DOM转JQuery============');
    		// DOM对象转JQuery对象,只需要利用$()方法进行包装即可
    		var divDomToJquery = $(divDom);
    		console.log(divDomToJquery);
    		
    		console.log('========JQuery转DOM============');
    		// JQuery对象转DOM对象,获取对象中指定下标的元素
    		var divJqueryToDom = divDom2[0];
    		console.log(divJqueryToDom);
    		
    	</script>
    </html>
    这世上所有美好的东西,都需要踮起脚尖。
  • 相关阅读:
    在CSS中,让页面里的字体变清晰,变细
    前端路由优缺点
    HBuilder和HBuilderX有什么区别?
    HTML5有哪些新特性,移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?
    js中判断奇数或偶数
    遍历数组的方法
    数组的方法
    免费搜索引擎提交(登录)入口大全
    Vue.js详解
    简述JavaScript模块化编程(二)
  • 原文地址:https://www.cnblogs.com/XMYG/p/14594197.html
Copyright © 2011-2022 走看看