[JQuery]元素查找和定位小结

发布时间：2020-07-10 22:42:12 作者：lzz847915049
来源：网络阅读：1672
没有具体的说怎么怎么，只是把大致的方法和思路记录下。资料文档上很详细。
<html>
    <head>
            <title>jquery元素定位</title>
            <!--引入jquery-->
            <script src="jquery-1.6.4.js"></script>
    </head>
    <body>
            <p>第一行</p>
            <p>第二行</p>
            <p>第三行</p>
            <p>第四行</p>
            <form id="test_form" class="test_form_class">
                    文本框:
                    <input type="text" value="text文本框" name="username" /><br/>
                    文本域:
                    <textarea id="form_testarea">文本区</textarea><br/>
                    复选框:
                    <input id="hobby" type="checkbox" name="hobby" value="吃饭" />
                    <input id="hobby" type="checkbox" name="hobby" value="睡觉" />
                    <input type="checkbox" name="hobby" value="看电视" /> <br/>
                    单选框:
                    <input type="radio" name="fav" value="打架" />
                    <input type="radio" name="fav" value="玩游戏" /><br/>                 
            </form>
              
                      
    </body>
    <script>
        //初始化载入
        $(document).ready(function(){
                /*
                    JQuery中查找元素的方法选择器，节点关系，遍历
                */
                //选择器的使用很简单，基本和css的选择器相同，根据标签，class，id等属性,
                //也可以组合使用
                //$()
                //标签,返回值是一个对象列表，可以使用下标来取得一个值
                console.log($("input"));
                //id id属性使用#开头，虽然返回的是一个列表，但是只有第一个匹配到的id的元素
                console.log($("#hobby"));
                //class 使用.开头，也是一个列表
                console.log($(".test_form_class"));
                  
                //当我们使用选择器找到一个元素列表的时候还需要定位元素，使用遍历可行，
                //特殊位置可以使用些方法
                //参考http://www.w3schools.com/jquery/jquery_ref_selectors.asp
                //元素集中的第一个元素 :first
                console.log($("p:first")); //p之后不能有空格
                  
                //剩下的就是使用query方法做查找，例如find方法
                //Get the descendants of each element in the current set of matched elements,
                // filtered by a selector
                //当我们获取一个大些的节点，在对其进行过滤找出其中所需要的元素节点
                console.log($("form").find("input:last")); //找出form节点的最后一个input节点元素
                  
                //还有一些根据元素关系的查找方法 .parent(), .closest(),
                // .children()<此方法类似于.find()方法>
        });
    </script>
</html>
[JQuery]元素查找和定位小结

相关阅读
