jquery获取子元素的一些方法

简介: jquery获取子元素的一些方法

jquery获取子元素的一些方法

1.通过id,class等选择器

2.通过父元素进行find查找

3.通过父元素的children进行查找

注意:find和children的区别,代码已给出详细解释,想要真正理解,还是得靠代码.光看不练那都是纸上谈兵

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery获取子元素的一些方法</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            $(function() {
                /* 1. 常用的 通过id,class选择器*/
                /* 
                 * 2. 使用遍历的方法,通过find,find会跨越层级查找,一直找到
                 * 没有为止,但是children只会查找直接子元素
                 * */
                $("button").on("click", function() {
                    var str = $(".div1").find("p").eq(0).html(); /*这里取到的是 <p>我是间接的p元素</p>*/
                    $(".s1").html(str);
                    /*
                     * 通过children,下标从0开始,是取直接子元素,间接元素并不会遍历,
                     * 也就是div1中的第一个p元素是间接子元素,并不会遍历到
                     * */
                    var str2 = $(".div1").children("p").eq(0).html(); /*这里取到的是 <p>上海<p/>*/
                    $(".s2").html(str2);
                })
            })
        </script>
    </head>
    <body>
        <div class="div1">
            <div>
                <p>我是间接的p元素</p>
            </div>
            <p>1.上海</p>
            <p>2.广州</p>
            <p>3.北京</p>
            <p>4.深圳</p>
            <p>5.中山</p>
            <hr />
            <span class="s1"></span><br/>
            <span class="s2"></span><br/>
            <span class="s3"></span><br/>
            <button>确定</button>
        </div>
    </body>
</html>
目录
相关文章
|
3月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
7月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
8月前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法
41 0
|
前端开发
jQuery-后代
children()方法:返回被选元素的所有直接子元素,
74 0
|
JavaScript
Jquery 获取第一个子元素
John  Karl  Brandon 获取第一个元素:  $("ul li:first-child")         John    Karl    Brandon   获取第一个元素:  $("#getfirst").
975 0
|
JavaScript 前端开发
使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
231 0
使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式。
|
JavaScript
JQuery常用选择器
JQuery常用选择器
130 0
|
JavaScript
jQuery常用选择器
本文目录 1. 选择器 2. 选择器用法示例
138 0
|
JavaScript 前端开发
从零玩转jQuery-属性相关
属性和属性节点 什么是属性? 属性就是对象身上的变量 只要对象身上都可以添加属性(无论是自定义对象,还是DOM对象) // 1.
1053 0
|
Web App开发 前端开发 JavaScript
从零玩转jQuery-选择器
基础选择器 视频参考第十章-CSS选择器 选择器 名称 描述 返回 示例 #id id选择器 根据给定的id匹配一个元素 单个元素 $("#box");选取id为box元素 .
988 0