-

xiyueta().find() 属性方法

获取当前匹配元素集合中每个元素的后代
快速上手

xiyueta().find()属性方法,有一种调用方式:
1、xiyueta("div").find("span"); //获取当前匹配元素集合中每个元素的后代

总结:xiyueta().find()用法与jQuery中jQuery().find()用法保持一致
see https://api.jquery.com/find
尝试一下>>

  • 代码
  • 效果
<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script>var html = "<div> <ul> <li>xiyueta库</li> <li>xiyueta.com</li> </ul> </div>";
$.load(html);
$.log($("div").find("li").length);
// $.log($("div").parse(html).find("li").length); //解析html后获得元素长度  简单快速方法
</script>
2


例子1:
以所有段落开头并搜索后代span元素,与 $( "p span" )相同。(引用jQuery例子)
查看效果>>

  • 代码
<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script>
var html = [
    '<p><span>Hello</span>, how are you?</p>',
    "<p>Me? I'm <span>good</span>.</p>"
].join("\n");
 

$.load(html)
document.write($.html()) 

$( "p" ).find( "span" ).css( "color", "red" );  

$.log($.html())
document.write($.html())

</script>


例子2:
使用所有span标记的xiyueta集合进行选择。只有p标记内的跨度更改为红色,而其他跨度保留为蓝色。(引用jQuery例子)
查看效果>>

  • 代码
<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script>

var html = [
    ' <style>',
    '  p {',
    '    font-size: 20px;',
    '    width: 200px;',
    '    color: blue;',
    '    font-weight: bold;',
    '    margin: 0 10px;',
    '  }',
    '  .hilite {',
    '    background: yellow;',
    '  }',
    '  </style>',
    '<p>',
    '  When the day is short',
    '  find that which matters to you',
    '  or stop believing',
    '</p>'
].join("\n");

xiyueta.load(html);


var newText = $("p").text().split(" ").join("</span> <span>");
newText = "<span>" + newText + "</span>";

$("p").html(newText);

xiyueta.load(xiyueta.html()); //重新解析html

$("p").find("span").odd().addClass("hilite");

$.log(xiyueta.html())
document.write(xiyueta.html())

</script>


详细说明

详细演示jquery().find()的.find()属性方法与xiyueta().find()的.find()属性方法的效果。
通过给.find()传不同类型的值来测试.find()属性在jquery里和xiyueta里的效果是否一样。
传值类型有字符,数字,数组,对象,函数等。
查看效果>>

  • 代码
 
<script src="https://www.xiyueta.com/js/xiyueta.min.js"></script>
<script src="https://www.xiyueta.com/js/jquery.js"></script>

    <ul>
        <li>xiyueta.com</li> 
    </ul>
    <script type="text/javascript">  
    var c ="";
    var id=0;//编号
    var fun=function(n){
        if(n==undefined)n=1;
        return n;
    }    
    var funtrue=function(){
        return true;
    }    
    var funfalse=function(){
        return false;
    }
    var funstr=function(){
        return "str";
    }
    var funnumb=function(){
        return 123;
    }
    var funarray=function(){
        return [1,2,"a",false,true];
    }
    var funobj=function(){
        return {"a":"11","bb":"22","ccc":"333"};
    }

    xiyueta.load("<ul><li>xiyueta.com</li></ul>")

    jQueryAndxiyuetaDebug('jQuery("ul").find().length');
    jQueryAndxiyuetaDebug('jQuery("ul").find("").length');
    jQueryAndxiyuetaDebug('jQuery("ul").find("li").length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(1).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(123).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(313801120).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(null).length'); 
    jQueryAndxiyuetaDebug('jQuery("ul").find(undefined).length'); 
    jQueryAndxiyuetaDebug('jQuery("ul").find(fun()).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find("a").length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(false).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(true).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(1.1).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find([1,2,3,4,5,6]).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find({"a":1,"b":2,"c":3}).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(NaN).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(Infinity ).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(function(){}).length');


    jQueryAndxiyuetaDebug('jQuery("ul").find(funtrue()).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(funfalse()).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(funstr()).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(funnumb()).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(funarray()).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find(funobj()).length');


    jQueryAndxiyuetaDebug('jQuery("ul").find([]).length');
    jQueryAndxiyuetaDebug('jQuery("ul").find({}).length');
    // jQueryAndxiyuetaDebug(' $("ul").find( 100n ).length';//在asp版不行
 

    function jQueryAndxiyuetaDebug(js) {
        var jsXiyueta=js.replace(/jQuery/g,"xiyueta")
        var s1=jsEv(js)
        var s2=jsEv(jsXiyueta)
        id++
        xiyueta.log(id,js,s1,jsXiyueta,s2,(s1==s2))
        console.log(id,js,s1,jsXiyueta,s2,(s1==s2))
    }
    function jsEv(js) {
        var s = eval(js);
        var deyu = "";
        if (typeof s == 'string') {
            s = s.replace(/\n/g, '\\n');
            deyu = "'" + s + "'";
        } else if (typeof s == "object") {
            deyu = "'" + s + "'";
        }else{
            deyu=s+""
        }
        if(deyu=="")deyu="''"; 
        return deyu; 
    }

</script>