jQuery对象和DOM对象转化-CSDN博客

本文链接：https://blog.csdn.net/YZL40514131/article/details/122659336

在这里插入图片描述

这里写目录标题

代码展示
- 注意:
jQuery的迭代遍历方式

使用原生JS方式获得的页面结点对象我们可以简称为DOM对象,
使用jQuery核心函数获得的对象我们可以简称为jQuery对象,
DOM对象和jQuery对象之间的方法和属性是不通用

DOM对象如何调用jQuery函数 ? DOM对象转换为jQuery $(DOM)
jQuery对象如何调用DOM对象的属性和方法? jQuery转换为DOM对象 get(0) [0]

代码展示

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
                <script type="text/javascript" src="js/jquery.min.js" ></script>
                <script>
                	$(function(){
                		//1 原生JS获取页面元素  原生DOM对象
                		var el=window.document.getElementById("d1")
                		console.log(el.innerText)
                		
                		//2 jQuery方式获取页面元素 jQuery对象
                		var el1=$("#d1")
                		console.log(el1.text())
                		
                		//DOM对象和jQuery对象之间的方法和属性是不通用
                		
                		//DOM对象如何调用jQuery函数 ? DOM对象转换为jQuery $(DOM)
                		console.log($(el).text())
                		
                		//jQuery对象如何调用DOM对象的属性和方法?  jQuery转换为DOM对象  get(0)  [0]
                		console.log(el1[0].innerText)
                		console.log(el1.get(0).innerText)
                		
                	})

                        
                </script>
                
        </head>
        <body>
                <div id="d1">测试文字</div>
        </body>
</html

注意:

使用原生JSDOM对象转换成jQuery对象方式是$(dom对象)
jQuery对象转换成DOM对象的方式是jQuery对象[0]、.get(0)

jQuery的迭代遍历方式

jQuery给我们封装了一个快捷遍历元素的方法
each每拿出一个元素都会执行一次内部的function
i 当前元素的索引
e 当前元素 DOM对象

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title></title>
         <script type="text/javascript" src="js/jquery.min.js" ></script>
         <script>
             $(function(){
             	var el=$("li")
             	console.log(el)
             	
             	for(var i=0;i<el.length;i++){
             		console.log(el[i].innerText)
             		
             	}
         	  /*遍历所有元素的方法*/
              /*
               each每拿出一个元素 都会执行一次内部的function
               i 当前元素的索引
               e 当前元素 DOM对象
               *
               * */
              el.each(function (i,e){
                  console.info(i+'>>>'+$(e).text())
              })
              $.each(el,function (i,e){
                  console.info(i+'>>>'+$(e).text())
              })
             })
         </script>
    </head>
    <body>
         <ul>
             <li>AI</li>
             <li>Python</li>
             <li>大数据</li>
             <li>JAVA</li>
             <li>前端</li>
         </ul>
    </body>
</html>