jQuery中的DOM操作

最新推荐文章于 2024-06-19 14:45:15 发布
最新推荐文章于 2024-06-19 14:45:15 发布
阅读量92 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jingLongJun/p/4491044.html
版权
1，实例代码： 
 
   
 
    
 
      <body> 
    
 
    
 
      <p title="选择你最喜欢的水果"> 
    
 
    
 
      你最喜欢的水果是？ 
    
 
    
 
      </p> 
    
 
    
 
      <ul> 
    
 
    
 
      <li title="苹果"> 
    
 
    
 
      苹果 
    
 
    
 
      </li> 
    
 
    
 
      <li title="橘子"> 
    
 
    
 
      橘子 
    
 
    
 
      </li> 
    
 
    
 
      <li title=""> 
    
 
    
 
      菠萝 
    
 
    
 
      </li> 
    
 
    
 
      </ul> 
    
 
    
 
      </body> 
    
 
   
 
  
 
  

    2，查找节点 
  
 
 
 
 

   -1，查找元素节点 
 
 
 
 
  
 
   
 
   
 
    
 
     $(function() { 
    
 
    
 
       
    
 
    
 
      var $li = $("ul li:eq(1)");//ul下的第二个li 
    
 
    
 
      console.log($li); 
    
 
    
 
      console.log($li.text()); 
    
 
    
 
     }); 
    
 
   
 
  
 
  

    -2，查找属性节点 
  
 
 
 
 
 
  
 
   
 
   
 
    
 
     $(function() { 
    
 
    
 
       
    
 
    
 
      var $para = $("p");//get p element 
    
 
    
 
      var pText = $para.attr("title"); 
    
 
    
 
      console.log(pText); 
    
 
    
 
     }); 
    
 
   
 
  
 
  

    3，创建节点 
  
 
 
 
 

   -1，创建元素节点 
 
 
 
 
  
 
   
 
   
 
    
 
     $(function() { 
    
 
    
 
       
    
 
    
 
      var $li1 = $("<li>测试插入1</li>");//创建元素 
    
 
    
 
      var $li2 = $("<li>测试插入2</li>"); 
    
 
    
 
       
    
 
    
 
      $("ul").append($li1);//添加元素 
    
 
    
 
      $("ul").append($li2); 
    
 
    
 
     }); 
    
 
   
 
  
 
  

    4，删除节点 
  
 
 
 
 
 
  
 
   
 
   
 
    
 
     $(function() { 
    
 
    
 
       
    
 
    
 
      $("ul li:eq(1)").remove(); 
    
 
    
 
     }); 
    
 
   
 
  
 
  
 
   
 
    
 
    
 
     
 
      $(function() { 
     
 
     
 
        
     
 
     
 
       var $li = $("ul li:eq(1)").remove();//删除节点，返回被删除的节点元素 
     
 
     
 
       console.log($li); 
     
 
     
 
       $li.appendTo("ul");//删除的节点添加至元素中  
     
 
     
 
        
     
 
     
 
      }); 
     
 
    
 
   
 
   
 
  
 
 
 

 

转载于:https://www.cnblogs.com/jingLongJun/p/4491044.html

                

        

        




    




    

      

        

            

              
                
                  bangzun0726
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jQuery 中DOM 操作详解

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了jQuery 中DOM 操作详解,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
jquery的dom操作

				
			

			

				

					thewebcode
				

				

					06-13
					
					84
					
				

			

		

		

			
				
Query中的DOM操作 
DOM 是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接口,这种接口 可以提供一种访问页面中所有的节点的机制,DOM提供了Netscape的JavaScript和Microsoft的Jscript之间的冲突的解决方 案.
通常DOM操作分成三个部分,...

			
		

	



                


  
              

                


	

		

			

				
					
学习JQuery中的DOM操作和事件操作

				
			

			

				

					Preeminent
				

				

					01-07
					
					989
					
				

			

		

		

			
				
学习JQuery中的DOM操作和事件操作一些问题JQuery是一个javascript类库，那类库是什么，库和框架的区别有是什么呢？
库的英语为Library，是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。
框架

			
		

	





	

		

			

				
					
jQuery学习--jQuery DOM 操作

				
			

			

				

					wml
				

				

					12-28
					
					533
					
				

			

		

		

			
				
jQuery DOM 操作

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：


text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

例：


$("#btn1").click(function

			
		

	



		

			
		



	

		

			

				
					
jquery获取ul中li的值

					
热门推荐

				
			

			

				

					yy211zhu的博客
				

				

					05-09
					
					3万+
					
				

			

		

		

			
				
通过点击li标签，把值赋给一个文本框
以下是HTML
   
        您所选取的值为：
        
        
            选项1
            选项2
            选项3
            选项4
            选项5
        
        
    

JS代码

       $(document).

			
		

	





	

		

			

				
					
jQuery DOM操作

				
			

			

				

					qq_36194388的博客
				

				

					07-29
					
					1358
					
				

			

		

		

			
				
jQuery中DOM基本操作

jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。

【查】查找结点

查找节点非常容易，使用选择器就能轻松完成各种查找工作。

就是利用我们前面学习的选择器来查找节点的。


例：查找元素节点p返回p内的文本内容。
$("p").text();
例：查找元素节点p的属性返回属性名称对应的属性值
$("p").attr("title"); //.

			
		

	





	

		

			

				
					
jQuery中DOM基础操作

				
			

			

				

					一名在校学习前端的小白
				

				

					09-13
					
					903
					
				

			

		

		

			
				
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。下面我们来看一下 W3C 上的 dom 树。

			
		

	





	

		

			

				
					
Jquery操作DOM对象

				
			

			

				

					zhoutong2323的博客
				

				

					02-28
					
					419
					
				

			

		

		

			
				
HTML代码操作 演示案例 


总结

			
		

	





	

		

			

				
					
jquery之DOM操作（一）

				
			

			

				

					The_upside_of_down的博客
				

				

					10-11
					
					1700
					
				

			

		

		

			
				
一般来说，DOM操作分为：DOM core（核心）、HTML-DOM和CSS-DOM。

1、DOM Core

DOM Core并不专属于javascript，任何一种支持dom操作的程序都可以使用它。

利用DOM Core来获取表单对象的方法：

document.getElementsByTagName("form");

2、HTML-DOM

它主要是提供一些更简明的符号来描述各种ht...

			
		

	





	

		

			

				
					
jQuery中DOM操作实例分析

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了jQuery中DOM操作方法,实例分析了dom对象的创建、属性的修改、样式的修改、动态绑定事件等技巧,需要的朋友可以参考下

			
		

	





	

		

			

				
					
jQuery中DOM操作原则实例分析

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了jQuery中DOM操作原则,结合实例形式分析了jQuery针对dom元素操作的四种常见原则,需要的朋友可以参考下

			
		

	





	

		

			

				
					
jquery之Dom操作

				
			

			

				

					m0_72694993的博客
				

				

					11-04
					
					991
					
				

			

		

		

			
				
().toggleClass("类名");语法格式：$().each(function(index,element){});jQuery对象.attr("属性名", "属性值");$("div").empty()清空div下的内容和元素。$("div").remove()删除所有div元素。$().css("属性名", "属性值");$().removeClass("类名");$().addClass("类名");$().css("属性名");$().html("内容");$().text("内容");

			
		

	





	

		

			

				
					
工具链--nuxt框架 简介（一）

				
			

			

				

					qq_35876316的博客
				

				

					06-16
					
					335
					
				

			

		

		

			
				
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。

			
		

	





	

		

			

				
					
HTML入门教程：深度解析HTML，开启你的前端技术之旅

				
			

			

				

					zhangwenok的博客
				

				

					06-14
					
					1450
					
				

			

		

		

			
				
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。

			
		

	





	

		

			

				
					
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕

				
			

			

				

					lx_nhs的博客
				

				

					06-12
					
					563
					
				

			

		

		

			
				
去除前：去除后：


3、可能会出现的报错

（1）视频路径跨域问题：解决：vue开启代理

			
		

	





	

		

			

				
					
使用nvm管理nodejs版本，设置淘宝NPM镜像源

					
最新发布

				
			

			

				

					d312697510的博客
				

				

					06-19
					
					86
					
				

			

		

		

			
				
使用nvm管理nodejs版本，设置淘宝NPM镜像源，修改新的镜像源地址

			
		

	





	

		

			

				
					
jquery案列dom操作

				
			

			

				

					03-13
				

			

		

		

			
				
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务。下面是一个使用jQuery进行DOM操作的示例：  HTML代码： ```html   <p>Hello, jQuery!  ```  JavaScript代码： ```javascript // 通过...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值