JQuery_终结篇重点详解(四)

最新推荐文章于 2024-07-12 15:51:39 发布

煌sir

最新推荐文章于 2024-07-12 15:51:39 发布

阅读量138

点赞数 1

分类专栏： JQuery 文章标签： jquery java js

本文链接：https://blog.csdn.net/qq_43705131/article/details/107302364

版权

JQuery 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

小伙伴们,欢饮来到煌sir小世界, 这一篇让我们继上篇详解噢~~~

可直接点下方链接跳转:

JQuery超详细快速入门详解(一) -<----点击学习

JQuery_超详细重点详解(二) <----点击学习

JQuery_超详细重点详解(三) <----点击学习

话不多说,立刻开始今天的旅程吧~~~

一.JQ操作value属性

JS: JS对象.value;

JS对象.value=””;

JQ: JQ对象.prop(“value”);

JQ对象.prop(“value”,””);

快捷方式：

属性名

属性说明

JQ对象.val();

获取元素的value属性

等同于：元素对象.value

JQ对象.prop("value");

JQ对象.val(值);

设置元素的value属性

等同于：元素对象.value=值

JQ对象.prop("value","value值");

代码:

<script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        function run1(){
            alert($("#uname").val());
        }
        function run2(){
            $("#uname").val("再见");
        }
    </script>
</head>
<body>
    <input type="text" id="uname" value="你好" /><br />
    <input type="button" value="点击获取输入框的value值" onclick="run1()" />
    <input type="button" value="点击设置输入框的value值" onclick="run2()" />
</body>

二. JQ操作元素内容体

JS：

JS对象.innerHTML;

JS对象.innerHTML=””;

JS对象.innerHTML+=””;

1. 操作内容体

1、获取/设置元素内容体HTML代码

属性名

属性说明

JQ对象.html()

获得内容体html代码，如果有标签代码，一并获得。

等同于：元素对象.innerHTML

JQ对象.html("HTML代码")

设置html代码，如果有标签，将进行解析。

等同于：元素对象.innerHTML= "HTML代码"

2、获取/设置元素内容体纯文本

属性名

属性说明

JQ对象.text()

获得文本，如果有标签，忽略。

JQ对象.text("纯文本")

设置文本，如果含有HTML标签，不进行解析。原样输出。

<script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        function run1(){
            alert( $("#d1").html() );
        }
        function run2(){
            $("#d1").html("<font color='blue'>你好</font>");
        }
        function run3(){
            alert( $("#d1").text() );
        }
        function run4(){
            $("#d1").text("<font color='blue'>你好</font>");
        }
    </script>
</head>
<body>
    <div id="d1">
        <font color="red">你好</font>
    </div>
    <hr />
    <input type="button" value="点我获取内容体代码" onclick="run1()"/>
    <input type="button" value="点我设置内容体代码为蓝色字体" onclick="run2()"/>
    <hr />
    <input type="button" value="点我获取内容体纯文本" onclick="run3()"/>
    <input type="button" value="点我设置内容体纯文本" onclick="run4()"/>
</body>

小结：

html() ：相当于innerHTML，获取所有内容，设置的内容会被浏览器解析

text() ：仅获取纯文本，设置的内容不会被浏览器解析

2.追加内容体

以下两句效果相同，写法不同

A.append(B) , 向A的末尾追加B
B.appendTo(A) ，将B追加到A的末尾

相当于：A.innerHTML+=B;

---------------------------------------------------------------------------------------

以下两句效果相同，写法不同

A.prepend(B) , 向A的头部追加B
B.prependTo(A) ，将B追加到A的头部

相当于：A.innerHTML=B+ A.innerHTML;

代码:

<script src="../js/jquery-1.11.3.min.js"></script>
    <script>
        //等同于： innerHTML+=
        function run1(){
            //方式一：
            /*
            //1、获取ul标签
            var ul = $("#rank");
            //2、追加内容体
            ul.append("<li>JavaEE</li>");
            */
            //方式二：
            //1、获取ul标签
            var ul = $("#rank");
            //2、追加内容体
            $("<li>JavaEE</li>").appendTo(ul);
        }
        function run2(){
            //方式一：
            /*
            //1、获取ul标签
            var ul = $("#rank");
            //2、追加内容体
            ul.prepend("<li>JavaEE</li>");
            */
            //方式二：
            //1、获取ul标签
            var ul = $("#rank");
            //2、追加内容体
            $("<li>JavaEE</li>").prependTo(ul);
        }
    </script>
</head>
<body>
    <ul id="rank">
        <li>Php</li>
        <li>Android</li>
        <li>Ios</li>
    </ul>
    <hr />
    <input type="button" value="列表尾部追加JavaEE兜底" onclick="run1()" />
    <input type="button" value="列表头部追加JavaEE打头" onclick="run2()" />
</body>

小结：

append

appendTo

prepend

prependTo

操作的是JQ元素对象，追加操作是把原有JQ元素进行移动。

三. 知识点：JQ父、兄关系

JQ获取需要的元素对象。选择器

为了简化通过选择器获取元素方式。

函数名	描述
children()	所有的子元素
prev()	获得上面的兄弟
nextAll()	获得下面的所有兄弟
parent()	获得父元素
siblings()	所有兄弟（不包括自己）
find()	查询指定内容例如：find("span"); 查询当前标签下所有的span

代码:

<script src="../js/jquery-1.11.3.min.js"></script> 
<script>
    $(function(){
        //1、获取 id="b" 元素 下所有的子元素
        var arr = $("#b").children();
        arr.each(function(){
            alert(this.innerHTML);
        });
        //2、获取 id="b" 元素 上面的兄弟
        var x2 = $("#b").prev();
        //3、获取 id="b" 元素 下面的兄弟
        var x3 = $("#b").nextAll();
        //4、获取 id="b" 元素 的父元素
        //JS:parentNode
        var main = $("#b").parent();
        //5、获取 id="b" 元素 的所有兄弟
        var arr5 = $("#b").siblings();
        //6、查找并获取 id="main" 元素 下所有的font元素  #main font
        var arr6 = $("#main").find("font");
    });
</script>

</head>
<body>
    <div id="main">
        <div>
            <font>a-111111111111</font>
            <font>a-222222222222</font>
            <font>a-333333333333</font>
        </div>
        <div id="b">
            <font>b-111111111111</font>
            <font>b-222222222222</font>
            <font>b-333333333333</font>
        </div>
        <div>
            <font>c-111111111111</font>
            <font>c-222222222222</font>
            <font>c-333333333333</font>
        </div>
    </div>

</body>

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多!

~感谢志同道合的你阅读, 你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~

煌sir

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery_终结篇重点详解(四)

小伙伴们,欢饮来到煌sir小世界, 这一篇让我们继上篇详解噢~~~可直接点下方链接跳转:JQuery超详细快速入门详解(一) -<----点击学习JQuery_超详细重点详解(二) <----点击学习JQuery_超详细重点详解(三) <----点击学习话不多说,立刻开始今天的旅程吧~~~一.JQ操作value属性JS: JS对象.value; JS对象.value=””;JQ: JQ对象.prop(“value”); ...
复制链接

扫一扫