你不得不知道的jQuery基础（4）

最新推荐文章于 2022-11-04 15:14:11 发布

TomLazy

最新推荐文章于 2022-11-04 15:14:11 发布

阅读量119

点赞数

分类专栏：日常学习文章标签： Jquery

本文链接：https://blog.csdn.net/qq_41071754/article/details/108583242

版权

日常学习专栏收录该内容

82 篇文章 8 订阅

订阅专栏

1、Javascript的组成

2、JQuery添加元素

一、创建dom元素有三种方式（p元素）

二、如何将创建出的元素写入到其他dom元素中？

3、append、prepend、before、after

4、remove、empty

5、addClass、removeClass

6、height、width、innerHeight、innerWidth

7、CSS

综合实例1：

8、parent、parents、parentsUntil

9、children、find

综合实例2：

1、Javascript的组成

JavaScript的实现包括以下3个部分：

ECMAScript(核心)	描述了JS的语法和基本对象。
文档对象模型（DOM）	处理网页内容的方法和接口
浏览器对象模型（BOM）	与浏览器交互的方法和接口

ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。

DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 是为了操作文档出现的 API，document 是其的一个对象；

BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

2、JQuery添加元素

一、创建dom元素有三种方式（p元素）

使用变量
使用元素JavaScript
使用jQuery

二、如何将创建出的元素写入到其他dom元素中？

js
- document.getElementId().innerHtml = "xxx..";
Jquery
- $(selector).html("xxx.."); // 不能追加，只能覆盖

3、append、prepend、before、after

append：将准备的元素添加到选中元素的末尾
prepend：将准备的元素添加到选中元素的开头
before：将准备的元素添加到选中元素的前面
after：将准备的元素添加到选中元素的后面

[总结]：append和prepend方法是将准备元素添加到目标元素的内部，before和after方法是将准备元素添加到目标元素的外部

4、remove、empty

remove方法是将元素及子元素一并删除
empty方法只是将所选元素的子元素删除，不删除选中元素

5、addClass、removeClass

addClass：给dom元素设置预定义的css样式
- $(this).addClass("css1");
removeClass：去除选中元素的css样式
- $(this).removeClass("css1");

6、height、width、innerHeight、innerWidth

height和width直接获取目标元素的高度和宽度
innerHeight和innerWidth获取padding + 高度/宽度值
outerHeight和outerWidth获取margin + border + 高度/宽度值

[注意]：border、margin、padding对称取值

7、CSS

$("#p03").css("color","red");

综合实例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #p01{
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
        #p02{
            width: 200px;
            height: 100px;
            border: 1px solid black;
        }
        #div01{
            width: 250px;
            height: 180px;
            margin-top: 5px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 10px;
            border: 1px solid black;
        }
        #ul01{
            background-color: cornflowerblue;
            border: 1px solid black;
            width: 200px;
            height: 130px;
        }
        #ul01 li{
            border: 1px solid hotpink;
            list-style-type: none;
        }
        .css1{
            color: red;
            font-size: 16px;

        }

    </style>
</head>
<body>
    <b>1、append、prepend、before、after:</b><br/><br/>
    <button id="btn01">开头添加元素</button>  <!-- 对input无效 -->
    <button id="btn02">结尾添加元素</button>
    <button id="btn03">前面添加元素</button>
    <button id="btn04">后面添加元素</button>
    <p id="p01">hello jquery…</p>
    <hr/>

    <b>2、remove、empty:</b>
    <ul id="ul01">
        <li id="li01">1.西游记</li>
        <li id="li02">2.三国演义</li>
        <li id="li03">3.水浒传</li>
        <li id="li04">4.红楼梦</li>
    </ul>
    <button id="btn05">remove</button>
    <button id="btn06">empty</button>
    <hr/>
    <b>3、addClass、removeClass:</b>
    <p id = "p02" class="css1">hello jquery!</p>
    <button id="btn07">addClass</button>
    <button id="btn08">removeClass</button>
    <hr/>

    <b>4、height、width、innerHeight、innerWidth:</b>
    <div id="div01"></div>
    <button id="btn09">获取尺寸</button>
    <hr/>
    <b>5、CSS</b>
    <p>可以使用jQuery中的css方法为目标元素设置样式</p>
    <button id ="btn10">设置文本样式</button>

    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script>
        $("#btn01").click(function (){
            $("#p01").prepend("...");
        });
        $("#btn02").click(function () {
            $("#p01").append("...");
        });
        $("#btn03").click(function () {
            $("#p01").before("...");
        });
        $("#btn04").click(function () {
            $("#p01").after("...");
        });

        $("#btn05").click(function () {
            $("#ul01").remove();
        });
        $("#btn06").click(function () {
            $("#ul01").empty()
        });

        $("#btn07").click(function () {
            $("#p02").addClass("css1");
        });
        $("#btn08").click(function () {
            $("#p02").removeClass("css1");
        });

        $("#btn09").click(function () {
            var height = $("#div01").height();
            $("#div01").text("height："+ height);
            var width = $("#div01").width();
            $("#div01").append("<br/>" + "width："+ width);
            var innerHeight = $("#div01").innerHeight();
            $("#div01").append("<br/>" +"innerHeight："+ innerHeight);
            var innerWidth = $("#div01").innerWidth();
            $("#div01").append("<br/>" +"innerWidth："+innerWidth);
            var outerHeight = $("#div01").outerHeight();
            $("#div01").append("<br/>" +"outerHeight："+ outerHeight);
            var outerWidth = $("#div01").outerWidth();
            $("#div01").append("<br/>" +"outerWidth："+ outerWidth);


        });

        $("#btn10").click(function () {
            $("#div01").css("border-color","red");
        });
    </script>
</body>
</html>

实例1运行结果图：

8、parent、parents、parentsUntil

parent()：获得当前匹配元素的直接祖先元素
parents()：获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。
- 选择器筛选出现的是只包含该元素
parentsUntil() ：获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素。
- 选择器筛选出现的是不包含该元素

9、children、find

children()：返回元素的直接子元素的集合，是一个 HTMLCollection 对象。
find():返回被选元素的后代元素。

综合实例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div01,#div02{
            width: 300px;
            height: 200px;
            border: 1px solid black;
            margin-top: 20px;
        }
        #ul01,#ul02{
            width: 200px;
            height: 120px;
            border: 1px solid black;
            margin-left: 20px;
        }
        #ul01 li{
            width: 100px;
            height: 40px;
            border: 1px solid black;
            list-style-type: none;
            margin: 10px 0px 10px 10px;
        }
        #ul02 li{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            list-style-type: none;
            margin-top: 10px;
        }
        #ul02 li p{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            margin-left: 10px;
        }

        #ul01 li p{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>div</p>
    <div id="div01" >
        <p>ul</p>
        <ul id="ul01">
            <li id="li01">
                <p id="span1">hello java</p>
            </li>
            <li id="li02">
                <p>hello jquery</p>
            </li>
        </ul>
    </div>
    <button id="btn01">parent</button>
    <button id="btn02">parents</button>
    <button id="btn03">parentsUntil</button>
    <hr/>

    <div id="div02">
        <ul id="ul02">
            <li id="li03">
                <p id="p01"></p>
            </li>
        </ul>
    </div>
    <button id="btn04">children</button>
    <button id="btn05">find</button>


    <script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
    <script>
        $("#btn01").click(function () {
            $("#span1").parent().css("border-color","red");
        });
        $("#btn02").click(function () {
            $("#span1").parents("ul").css("border-color","red");
        });
        $("#btn03").click(function () {
            $("#span1").parentsUntil("div").css("border-color","red");
        });

        $("#btn04").click(function () {
            $("#div02").children().css("border-color","red");
        });
        $("#btn05").click(function () {
            $("#div02").find("#p01").css("border-color","red");
        });
    </script>
</body>
</html>

实例2运行结果图：

TomLazy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
你不得不知道的jQuery基础（4）

1、Javascript的组成JavaScript的实现包括以下3个部分： ECMAScript(核心) 描述了JS的语法和基本对象。文档对象模型（DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口 ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScriptECMAScript是一种由Ecma国际（前身为欧
复制链接

扫一扫