javascript怎么获得特定的祖先元素

JavaScript027

javascript怎么获得特定的祖先元素,第1张

JavaScript code?

[code=javascript]function delet_s(obj){

alert(0)

var am=$(obj).parent().parent().find($("input[name^='s_acc']")).val()

alert(am)

$(obj).parent().parent().remove()

}

[/code]

XML/HTML code?

<table id="detailTable" width="90%" border="0" cellspacing="0" cellpadding="0" class="addform-base">

<tr id="copy_tr">

<td width="30%"><input type="text" name="claimVoucherDetail.account" id="c_account" /><span class="notice">*</span></td>

<td width="30%"><input type="text" name="claimVoucherDetail.desc" id="desc" /><span class="notice">*</span></td>

<td width="10%"><img src="<%=request.getContextPath() %>/images/add.gif" width="16" height="16" id="AddRow" onclick="copy_as()"/></td>

<td>

<img src="<%=request.getContextPath() %>/images/delete.gif" width="16" height="16" onclick="delet_Vou(this)" />

</td>

</tr>

</table>

1.原型是 function对象的一个属性,是构造函数构造出对象的公有祖先,而原型本身也是一个对象。

2.从原型的概念出发,我们可以用构造函数构造出的对象提取原型上的属性。

3.因为原型也是一个对象,所以原型本身对自己的属性有增删改查的权利。

4.对象如何知道自己的原型是谁,可以通过对象中的_ proto_ 属性查看,_ proto_ 属性存的就是对象的原型,他是作为对象与原型之间的连接。

5.构造函数构造的对象如何查看是谁构造出自己的,可以通过constructor属性

首先从原型的定义开始解释:

原型是function对象的一个属性,这句话如何理解?

1.function函数其实就是一个对象,当你构造出一个函数时,这个函数对象就有了自己隐式的属性,prototype就是其中的一个属性。

那么先构造出一个函数,在控制台查看,函数对象是否有prototype,并且prototype是否也是一个对象。

我们在控制台中给father的prototype属性添加name属性并赋值,看看是否有效?

给prototype添加属性后,并可以输出name的值。那么也是可以给prototype添加方法的。

给prototype添加say方法实现输出自己的name,执行say(),的确输出了'haha'

2.我们如何理解,prototype是构造函数构造出对象的公有祖先?

首先当构造出函数时prototype就成为了这个函数的属性,并且prototype也可以添加属性和方法,而构造函数构造出的对象能继承构造函数中的方法,且这个对象自身也能添加属性和方法?

那么问题来了?

当我查看对象的name属性时,对象并没有这个属性,那他就会自动去构造出自己的函数中去找是否有这个属性,那当构造函数也没这个属性时,他就会去自己的原型上查找是否有这个属性,如果原型上存在name属性,对象就会获取到这个属性并输出。

而这个获取到原型属性的过程,其实就是一种继承的方式。

举例:

1.prototype是function对象的一个属性;

2.prototype是构造函数构造出对象的公有祖先;

3.prototype也是一个对象。

从总结的第三点可以知道,prototype可以拥有自己的属性和方法,并有权进行增删改查,那么接下来展示prototype如何进行增删改查。

对Mom的prototype属性进行操作。

增:

给出你想要添加的属性,并赋值。

删:

delete

所以prototype对象的增删改查和普通对象的用法相同。

这里还需注意,prototype上的属性只能由自身操作,对象从prototype上获取到的属性进行操作后,并不会影响到prototype。

接下来解释对象的_ proto_ 属性(前后分别是两个_)

_ proto_ 属性里存的是对象的prototype

举例:

接下来解释constructor属性:

对象可以通过该属性查看构造出自己的函数

总结:

prototype是function对象的一个属性,是构造函数构造出的对象的公有祖先,他本身也是一个对象,所以他可以有自己的属性和方法,并对其进行增删改查的操作,对象没有权利修改prototype上的属性和方法。对象可以通过自己的_ proto_ 查看他的prototype,通过constructor查看构造出自己的函数。

今天我们就来简单谈谈JavaScript的Event事件对象中 target 和 currentTarget 两者之间的区别吧~

我们知道,想要获取某事件所绑定的元素,通常我们可以直接使用 this 对象即可。比如:

稍微给它们加点样式:

页面效果如下:

其中绿色盒子 id 为 box ,而红色盒子 id 为 container ,绿盒子是红盒子的子元素。现在,我给它们分别添加点击事件,目的是获取它们的 id 属性。

可以看到,只要我们给哪个元素绑定点击事件,那么事件执行时通过 this 所获取到的元素就是绑定点击事件的那个元素。

但是,并不是任何时候我们都可以通过 this 来获取当前绑定事件元素,比如当我们使用箭头函数或使用Vue.js框架时, this 就“失效”了。

有关箭头函数为什么会导致 this 指向问题,请戳→ ES6之箭头函数 。

这里的 this 指向的是当前Vue组件实例,所以 this.id 自然获取的是 data 中的 id 而不是 container 了。

那么,对于这个问题我们该如何解决呢?如何才能正确获取到当前绑定事件元素呢?

这时我们就需要用到事件对象中的 target 和 currentTarget 属性了。

我们看到,通过 target 和 currentTarget 都成功获取到了点击事件所绑定的DOM元素,那么 target 和 currentTarget 之间又有什么区别呢?

其实,只要我们将事件处理程序直接绑定到目标元素,那么目标元素事件执行时, target 和 currentTarget 均指向的是该目标元素。然而,如果事件处理程序并未绑定在目标元素,而是在其祖先元素上时,那么 target 则指向的是该目标元素,而 currentTarget 指向的是当前绑定事件的祖先元素。

可能看起来比较难理解,我们还是用最开始那个例子吧。

此时,只要 foo() 执行,那么 e.currentTarget.id 的值必然是 container ,因为 currentTarget 永远指向的是 事件所绑定的元素 (这里点击事件直接绑定在container元素上)。

但是 target 则不同,它指向的是 事件实际执行所在的元素 ,所以本例中 e.target.id 的值取决于鼠标直接所点击的元素。

① 鼠标直接点击container元素,也就是红色部分

这时 target 和 currentTarget 均指向的是container元素,因为事件执行的目标和事件绑定的目标是相同的,都是container元素。

② 鼠标直接点击box元素,也就是绿色部分

这时 target 指向的是box元素,而 currentTarget 指向的是container元素,因为事件执行的直接目标是box元素。