js和juqery定位元素的区别

最新推荐文章于 2024-04-29 23:01:06 发布
最新推荐文章于 2024-04-29 23:01:06 发布
阅读量564 收藏
点赞数
文章标签： document.getElementB document.getElements
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hnczlzj/article/details/53649960
版权

1、js定位

<body>
	这是支付首页
	<div id="abc">
		<a href="weiXin" name="wx" id="bcd">微信支付</a>
		<a href="apliy" name="wx" id="ghk">支付宝支付</a>
		<input name="myInput" type="text" size="20" /><br />
		<input name="myInput" type="text" size="20" /><br />
		<input name="myInput" type="text" size="20" /><br />
</div></body>








document.getElementById("bcd")————————定位到微信支付的a标签id=“bcd”


    document.getElementByName("wx")[]————————定位到name=wx的标签，即两个a标签都被选中 




    document.getElementsByTagName("input")[3];————定位到第几个






2、jquery


$("#abc").style()


$("#abc .bcd").addClass()    $("#abc .bcd").removeClass()























                

        

        

    




    

      

        

            

              
                
                  hnczlzj
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
Selenium2+python自动化65-js定位几种方法总结【转载】

				
			

			

				

					anbaduay633369的博客
				

				

					11-10
					
					942
					
				

			

		

		

			
				
前言
本篇总结了几种js常用的定位元素方法，并用js点击按钮，对input输入框输入文本

一、以下总结了5种js定位的方法
除了id是定位到的是单个element元素对象，其它的都是elements返回的是list对象
1.通过id获取
document.getElementById(“id”)
2.通过name获取
document.getElementsByNa...

			
		

	



                

              
                



	

		

			

				
					
JavaScript元素定位

				
			

			

				

					qq_45616828的博客
				

				

					10-12
					
					4972
					
				

			

		

		

			
				
P7+P8

			
		

	



                


  
              

                


	

		

			

				
					
填表教程-JS基础篇-定位元素-点击元素

					
最新发布

				
			

			

				

					qq_17815273的博客
				

				

					04-29
					
					1028
					
				

			

		

		

			
				
JS元素定位，JS点击元素

			
		

	





	

		

			

				
					
【面向JS--元素定位】

				
			

			

				

					hfhan的博客
				

				

					11-15
					
					1844
					
				

			

		

		

			
				
1、offset系列方法



offset示意图



2、scroll系列方法



scroll示意图



3、client系列

clientX和clientY     获取鼠标在可视区域的位置     
clientX = width + padding
clientY = height + padding
clientLeft     边框的宽度，若有滚动条的话，包括滚动条


cl

			
		

	



		

			
		



	

		

			

				
					
每天一个JavaScript实例-操作元素定位元素

				
			

			

				

					wxyoo1 的技术人生
				

				

					10-27
					
					912
					
				

			

		

		

			
				
每天一个JavaScript实例-操作元素定位元素

	div#a{
		width:500px;
	}
	div{
		border:1px solid #000;
		padding:10px;
	}
	#cursor{
		position:absolute;
		background-color:#ff0;
		width:20px;
		height:20px;
		left:50px;

			
		

	





	

		

			

				
					
js中通过父级进行查找定位元素

				
			

			

				

					10-25
				

			

		

		

			
				
主要介绍了js中如何通过父级进行查找定位元素,需要的朋友可以参考下

			
		

	





	

		

			

				
					
jQuery实现ToolTip元素定位显示功能示例

				
			

			

				

					10-21
				

			

		

		

			
				
本文将详细讲解如何使用jQuery实现Tooltip元素的定位显示功能。  首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。在我们的示例中，我们将利用jQuery提供的API来创建一...

			
		

	





	

		

			

				
					
JavaScript与JQUERY获取元素的宽、高和位置

				
			

			

				

					10-20
				

			

		

		

			
				
在JavaScript和jQuery中，获取元素的宽、高和位置是常见的需求，这有助于进行精确的布局和交互设计。以下是一些关键的知识点：  1. **JavaScript获取元素尺寸和位置**  - `getBoundingClientRect()`: 这是JavaScript...

			
		

	





	

		

			

				
					
js和Jquery参考手册.zip

				
			

			

				

					12-06
				

			

		

		

			
				
在使用jQuery时，熟悉选择器如ID选择器（#id）、类选择器（.class）和属性选择器（[attr=value]）可以帮助你快速定位DOM元素。了解链式操作、事件绑定（.on()）和事件代理（事件冒泡和委托）可以优化你的代码。...

			
		

	





	

		

			

				
					
jquery元素相对定位插件特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
在jQuery中，元素定位主要涉及到几个关键的概念和方法：  1. **CSS定位**：在HTML/CSS中，定位可以通过`position`属性来实现，如`static`（默认值）、`relative`、`absolute`和`fixed`。其中，`relative`是相对于...

			
		

	





	

		

			

				
					
一个简单的含js和jQuery的网页

				
			

			

				

					07-02
				

			

		

		

			
				
标题 "一个简单的含js和jQuery的网页" 暗示我们正在探讨一个基本的Web页面，其中包含了JavaScript和jQuery这两个重要的前端技术。JavaScript是Web开发中的基础脚本语言，用于实现网页的动态交互，而jQuery则是一个...

			
		

	





	

		

			

				
					
javascript元素定位问题

				
			

			

				

					weixin_46639294的博客
				

				

					07-01
					
					854
					
				

			

		

		

			
				
static

默认值。始终处于文档流给予的位置(无法使用left、right、top、bottom等设置元素的位置)



relative

相对定位
通常设置块级元素div的位置position：relative 使div内部的元素以此定位
坐标系是原来自己的位置
可以设置left、top、right、bottom等值移到相对于原来位置的地方（不会破坏正常的文档流）



absolute

绝对定位
通常设置div内部各种元素的位置position：absolute
坐标系是父级元素（拥有定位的..

			
		

	





	

		

			

				
					
JS实现元素指向某位置

				
			

			

				

					AirRoujer的博客
				

				

					12-10
					
					638
					
				

			

		

		

			
				
function createTurret(){//创建指向元素
    var turret =document.createElement("div");
    var a=document.getElementById("main");
    turret.className="Turret";
    turret.style.backgroundImage='url(箭头.png)';
    turret.style.position="relative";
    turret.styl.

			
		

	





	

		

			

				
					
JavaScrip基础知识 & JS元素定位

				
			

			

				

					m0_53628535的博客
				

				

					07-26
					
					749
					
				

			

		

		

			
				
如我们在web自动化测试过程中，我们总会进行元素定位，而元素定位，最终都会转化为 JavaScrip 代码，那么何为JavaScrip代码呢？怎么用 JavaScrip 进行元素定位呢，下面来简单介绍一下。

一、前端界面展示层介绍

   前端，主要分为以下三层：


1）HTML， 结构层，显示页面结构内容；
2）CSS， 样式层，渲染页面；
3）JavaStrip， 行为层，页面动态

二、JavaScrip基础知识

    如何运行JavaScrip代码呢，如果只是想简单操作的话，...

			
		

	





	

		

			

				
					
javaScript元素位置

				
			

			

				

					小飞虫
				

				

					07-12
					
					415
					
				

			

		

		

			
				
如何取到页面中任意某个Html元素与body元素之间的偏移距离？
offsetWidth offsetHeight 取得对象的宽度和高度.


offsetTop和offsetLeft 这两个属性,IE 、Opera和Firefox对它俩的解释存在差异：
IE5.0+ 、Opera8.0+：　offsetTop和offsetLeft 都是相对父级元素
Firefox1.06： offs

			
		

	





	

		

			

				
					
元素定位与元素操作

				
			

			

				

					向小雅的博客
				

				

					10-01
					
					456
					
				

			

		

		

			
				
八种定位方法
与name有关的三种：name 、className、tagName
与link相关的两种：linkText、partialLinkText
与id相关的一种：id
全能选手：xpath、cssSelector
优先使用顺序
id、xpath、css


id简单方便，定位速度最快


xpath，HTML标签的属性不规范的情况下，无法唯一定位，可以使用xpath进行相对位置的定位


css速度比xpath要快。



...

			
		

	





	

		

			

				
					
【记录】Javascript获取Dom元素位置

				
			

			

				

					weixin_34395205的博客
				

				

					05-06
					
					471
					
				

			

		

		

			
				
有时候项目中会用到用js获取元素位置来定位元素，其实也很简单
DOM的定义如下图
 
获取元素的位置属性可以通过


HTMLElement.offsetLeft
HTMLElement.offsetTop


但是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计...

			
		

	





	

		

			

				
					
jqery学习笔记

				
			

			

				

					03-28
				

			

		

		

			
				
jquery学习笔记B.children([...])   获得所有的子元素。CDEF
A.find(D)  从指定的区域查询指定元素。D
D.next() 下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev () 上一个兄弟。D  （previous）
E.prevAll()  前面的所有兄弟。CD
E.siblings() 所有兄弟。CDF
E.parent()  父元素。B

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值