jquery高手求解,jquery怎样获取脚本生成的节点

jquery高手求解,jquery怎样获取脚本生成的节点,第1张

你可以看下js事件委托

你这个事件声明的时候,节点还没有生成,

$(document)on('click', 'button', function () {

 $("big")append("<div class="small"><button class="button"></button></div>")

});

这样就可以了。

Jquery获取子元素方法有2种,分别是children()方法和find()方法。下面我们分别来使用这两种方法,看看它们有何差异。

children()方法:获取该元素下的直接子集元素

find()方法:获取该元素下的所有子集元素

分别以以下HTML代码为例:<ul><li>list1<ul><li>list1-1</li><li>list1-2</li></ul></li><li>list2<ul><li>list2-1</li><li>list2-2</li></ul></li><li>list3<ul><li>list3-1</li><li>list3-2</li></ul></li></ul>

children()方法获取ul下面直接子集元素li:$("ul")children("li")

需要注意的是,如果li元素下还有li元素,children方法将不会被获取。我们可以用length来测试获取的个数“$("ul")children("li")length”,最后输出结果为3

find()方法获取ul下所有元素li:$("ul")find("li")

需要注意的是,find方法会无限循环查找ul标签节点下的li,一直找到没有为止,用length来测试获取个数“$("ul")find("li")length”,最后输出结果为9

children和find的区别:children只会查找直接子集,而find会跨越层级查找,一直找到没有为止。

jquery获取父元素方法比较多,比如parent(),parents(),closest(),find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点。

$('#cur')parent()parent();或$('#cur')parent()parent('pp');或$('#cur')parent('pp');

jquery 兄弟节点的获取

<ul>

<li>

<h3 class="title">类目一</h3>

<ul>

<li>第一项</li>

<li>第二项</li>

</ul>

</li>

<li>

<h3 class="title">类目二</h3>

<ul>

<li>第一项</li>

<li>第二项</li>

</ul>

</li></ul>

比如要点击类目一所在的 h3,对其兄弟节点的 ul 添加一个叫做 "show" 的 class,代码如下:

$("title")click(function () { $(this)parent()find('ul')addClass('show'); });

就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul,还有一种方法是使用 siblings() 函数,代码如下:

("title")click(function() { $(this)siblings('ul')addClass('show'); })

子节点怎么获得 

$("#tbody1:first-child")

:first-child

匹配第一个子元素

':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

jQuery 提供了 parent() 方法用以获取当前匹配元素集合中每个元素的父元素,例如:

$("span")parent(); // 获取所有span标签元素的父节点对象集合

$("selected")parent(); // 获取所有class位selected的元素的父节点对象集合

$(spanselected)parent(); // 获取class为selected的span标签元素的父节点对象集合

另外,注意与parents() 方法的区别——parents() 方法获取当前匹配元素集合中每个元素的祖先元素(祖先元素不仅包括父节点,还包括祖父、曾祖父等等)。

var jCheckbox = jQuery('checkbox');//你的checkbox

var jTr=jCheckboxparent()parent();//即可

不知道你想获取什么jQuery很强大或者使用

var jTr=jCheckboxparents('tr');//所有父元素中选择tr

var jTr=jCheckboxclosest('tr');//只要最近的

给你写个简单的 demo

<div class="boxbox clearfix">

    <span class="selected" id="boxboxa">a</span>

    <span id="boxboxb">b</span>

</div>

<div class="boxbox-con">

    <div class="onediv" id="onediv">一个div</div>

    <div class="otherdiv" id="otherdiv">另一个div</div>

</div><style type="text/css">

    clearfix:before,clearfix:after {display: table; content: ''; height: 0; width: 0; clear: both;}

    boxbox span {width: 200px; float: left; display: inline-block; height: 35px; line-height: 35px; text-align: center; font-size: 24px}

    boxbox spanselected {background-color: #f1f1f1;}

    boxbox-con {height: 300px;}

    boxbox-con onediv {background-color: red; height: 100%;}

    boxbox-con otherdiv {background-color: cyan; display: none; height: 100%}

</style><script type="text/javascript" src="jqueryjs"></script>

<script type="text/javascript">

    $('#boxboxa')on('click',function(){

        $(this)addClass('selected')siblings()removeClass('selected');

        $('#onediv')show();

        $('#otherdiv')hide();

    });

    $('#boxboxb')on('click',function(){

        $(this)addClass('selected')siblings()removeClass('selected');

        $('#onediv')hide();

        $('#otherdiv')show();

    });

</script>

以上就是关于jquery高手求解,jquery怎样获取脚本生成的节点全部的内容,包括:jquery高手求解,jquery怎样获取脚本生成的节点、jquery如何获取没有子节点的元素、用jquery怎么取父节点的兄弟节点等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: http://outofmemory.cn/web/9569524.html

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

发表评论

登录后才能评论

评论列表(0条)

保存