Jquery each 怎么 *** 作动态添加的DOM元素

Jquery each 怎么 *** 作动态添加的DOM元素,第1张

没理解你的提问,你的重点是each还是 *** 作动态添加的DOM?

关于 *** 作动态添加的DOM,需要用delegate或on来进行事件绑定,动态添加的DOM元素也同样绑定了该事件,原理就是事件代理,即事件冒泡。

<div class="container">

    <ul class="list-wrap">

        <li class="item">1</li>

        <li class="item">2</li>

        <li class="item">3</li>   

    </ul>     

</div> $('.container').delegate('.item','click',function(){

    handler()//执行函数

})

3. 如果必须用each来 *** 作,可以使用自定义事件,当添加新DOM之后,trigger('event_name')即可。在绑定自定义事件时的handler执行函数逻辑中使用each即可。只有dom插入页面后,才能获取到该元素

一、选取DOM元素

jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。

var $ = document.querySelectorAll.bind(document)

这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。

二、DOM *** 作

DOM本身就具有很丰富的 *** 作方法,可以取代jQuery提供的 *** 作方法。

尾部追加DOM元素。

// jQuery写法

$(parent).append($(child))

// DOM写法

parent.appendChild(child)

头部插入DOM元素。

// jQuery写法

$(parent).prepend($(child))

// DOM写法

parent.insertBefore(child, parent.childNodes[0])

删除DOM元素。

// jQuery写法

$(child).remove()

// DOM写法

child.parentNode.removeChild(child)

<script type="text/javascript">

$(function(){

a = a()

alert(a.html())

})

function a(){

//return $('<div>123</div>').appendTo('body').html()//返回刚刚添加的div的innerHTML,就是123

return $('<div>123</div>').appendTo('body')//返回刚刚添加的div对象

}

</script>

jquery这样将div添加到body之后,本身就是那个div的对象了,后面可以衔接你对该div的其他 *** 作,例如addClass之类的,或者直接返回


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

原文地址: http://outofmemory.cn/bake/11704481.html

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

发表评论

登录后才能评论

评论列表(0条)

保存