javascript中this获取当前对象问题

javascript中this获取当前对象问题,第1张

首先,this指的是对函数本身的引用。conclick事件调用的是这个事件,要获取的img的src属性,是dom image的属性,并不是函数change_pic的,所以当然不管用了,最好给函数传参,如onclick="change_pic(this)"吧img这个对象传给函数。函数中通过 参数src引用就OK了。希望对你有所帮助!

jquery提供了丰富的选择器用以帮助我们方便的 *** 作页面的dom元素。为了方便解释这个问题我们先构建一个html代码片段:

<div id="test">

  <ul id="ul1">

    <li>ul1-1</li>

    <li>ul1-2</li>

    <li>ul1-3</li>

  </ul>

  <ul id="ul2">

    <li>ul2-1</li>

    <li>ul2-2</li>

    <li>ul2-3</li>

  </ul>

</div>

下面我们逐步来分析你所说的语句,首先假定this为id为test的div元素,那么$(this)既是选中了整个id为test的div元素。$('#test')find('ul')是选取对象中所有的ul标签

:first代表选取第一个元素,类似的:last代表选择最后一个元素,如果希望灵活的选择某个元素可以用:eq(i),i代表元素的下标。

所以$('#test')find('ul:first')代表选中第一个ul

空格代表选择该对象的子元素,所以$('#test')find('ul:first li')代表选择ul1中的3个li

例如

< ul>

< li></ li>

</ ul>

var ul= document getElementTayName[0];

var li= ul getElementTayName[0];

不知道你是否要表达的这个意思,其实还有很多方法,有个dome最好了

getElementsByTagName返回的是数组,所以应该是使用;

documentgetElementById("ul")getElementsByTagName("li")[0]getElementsByTagName("a")[0];

这样就是获取第一个li里面的第一个a元素,建议使用循环。

一个简单的参考例子:

var oA=documentgetElementById('ul')getElementsByTagName('a');

//只需获取a对象;

var i;

for(i=0;i,oAlength;i++){

oA[i]index=i;

oA[i]onclick=function(){

alert(thisinnerHTML);

return false;//阻止事件冒泡;

}//简单的鼠标点击事件

}

1、打开html开发工具,新建一个html代码页面。

2、在html页面创建三个p标签,给这三个p标签设置不同的内容。

3、引入jquery库。在title标签后面引用下载好的jqueryjs文件。

4、 在jquery引用库标签后面新建一个script标签,在这个标签里面添加一个DOM加载完成后执行函数。

5、在DOM加载完成后执行函数里面添加点击p标签时获取当前元素的上一个元素对象。

6、保存html代码后使用浏览器打开,点击p标签d出框就会显示当前点击标签的上一个标签的内容。

每个Img规定一个ID;

<img src="1jpg" id="img1">

<img src="1jpg" id="img2">

<img src="1jpg" id="img3">

点击一个按钮获取src

<input type="button" value="获取src" onclick="aa()">

js中:

function aa(){

var img1 = documentgetElementById("img1")src;

//别的一样获取。这样获取的src是绝对路径

}

或者这样:

function aa(){

var img1 = documentgetElementById("img1")getAttribute("src");

//跟上面效果一样。

}

以上就是关于javascript中this获取当前对象问题全部的内容,包括:javascript中this获取当前对象问题、$(this).find('ul:first li'); jquery用法 ul:first li 求解释这句话什么意思 是获取第一个ul、JS如何获取对象中的对象等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9295015.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-26
下一篇2023-04-26

发表评论

登录后才能评论

评论列表(0条)

    保存