7--JqueryでのDOM操作(ノードの検索)

要素ノード(ラベル)の検索:Jqueryのセレクターを使用して完了します。
属性ノードの検索:要素ノードを検索した後、Jqueryオブジェクトのattr()メソッドを使用して、要素ノードの各属性を取得できます。
例1:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>查找属性节点</title>
    <!--导入Jquery框架-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <p title="选择你新欢的水果">你新欢的水果是?</p>
    <ul>
        <li title="苹果">苹果</li>
        <li title="橘子">橘子</li>
        <li title="香蕉">香蕉</li>
        <li title="菠萝">菠萝</li>
    </ul>
    <script>
        $(function(){
    
    
            /*获取p元素*/
            var $_p=$("p");
            /*获取p标签的title属性的值*/
            var $_title=$_p.attr("title");
            alert($_title);
        });

        $(function(){
    
    
            /*获取第二个li元素*/
            var $_lis=$("li:eq(1)");
            var $_jztitle=$_lis.attr("title");
            alert($_jztitle);
        });
    </script>
</body>
</html>

テキストノードを見つける:text()メソッドを使用する
例2:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>查找文本节点</title>
    <!--导入Jquery框架-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    <p title="选择你新欢的水果">你新欢的水果是?</p>
    <ul>
        <li title="苹果">苹果</li>
        <li title="橘子">橘子</li>
        <li title="香蕉">香蕉</li>
        <li title="菠萝">菠萝</li>
    </ul>
    <script>
        $(function(){
    
    
            /*获取p元素*/
            var $_p= $("p");
            /*获取p元素中的文本*/
            var p_text=$_p.text();
            alert(p_text);
        });
    </script>
</body>
</html>

親指を立てたままにしてくださいここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/qwy715229258163/article/details/113865982