html-jquery_jQuery HTML

最新推荐文章于 2024-08-18 23:25:39 发布

cumubi7453

最新推荐文章于 2024-08-18 23:25:39 发布

阅读量137

点赞数

文章标签： java python css html js ViewUI

原文链接：https://www.includehelp.com/code-snippets/jquery-html.aspx

版权

html-jquery

If you're not familiar with JQuery selectors, have a quick read through here: JQuery selectors.

如果您不熟悉JQuery选择器，请在此处快速阅读： JQuery选择器。

We'll learn how to query the DOM using selectors using JQuery selectors by building this simple and awesome mini Pokedex so let's get started. I'll be using the same boilerplate with a CDN to JQuery and MaterializeCSS. Let's create a template to get started,

我们将通过构建这个简单而强大的微型Pokedex，学习如何使用选择器和使用JQuery选择器查询DOM，让我们开始吧。我将使用带有CDN的相同样板来JQuery和MaterializeCSS。让我们创建一个模板开始

index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <title>Pokedex</title>
    <style>
        body {
            background: whitesmoke;
        }
        
        .card-image img {
            height: 200px;
            width: 200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="center">My Pokedex</h1>
        <div class="row">
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png">
                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://giantbomb1.cbsistatic.com/uploads/scale_small/13/135472/1891761-004charmander.png">
                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://d2skuhm0vrry40.cloudfront.net/2019/articles/2019-10-31-15-44/pokemon_sword_shield_starters_grookey.jpg/EG11/resize/300x-1/quality/75/format/jpg">
                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://pokemonletsgo.pokemon.com/assets/img/common/char-eevee.png">
                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQIuCM0zB4HkGx85Z8D6EdRVrlGxAUWT1dbwZcZFNzonHle__6Uhg&s">
                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcvGrOH5M64dkU9a-XC-P5rDkPLABag47e88zGybJtFbWPjsUh&s">
                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://pokemonletsgo.pokemon.com/assets/img/common/char-pikachu.png">

                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
            <div class="col l3">
                <div class="card">
                    <div class="card-image">
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiOrI-gcZubLIku3Ogxl6SLC2_ZmDgNjrPpk095qBxuxKX8lxmvA&s">

                    </div>
                    <div class="card-content">
                        <p>Add content</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>

</html>

Output

输出量

So now we have something which looks like this. Pretty cool right?

所以现在我们有了这样的东西。很酷吧？

Our exercise would be to read the HTML content, change it and add some html content.

我们的练习是读取HTML内容，对其进行更改并添加一些html内容。

First let's see how we read some HTML content through JQuery? Make sure you have created an index.js file in the root directory and linked it to the index.html. Before that, let's add some Pokemon names manually.

首先让我们看看我们如何通过JQuery读取一些HTML内容？确保已在根目录中创建了index.js文件，并将其链接到index.html。在此之前，让我们手动添加一些神奇宝贝名称。

<p class="center name">Squirtle</p>
<p class="center name">Charmander</p>

Output

输出量

My Pokedex

我的口袋妖怪

Squirtle

松鼠

Charmander

查曼德

Great. Let's see how we can get this content in JQuery,

大。让我们看看如何在JQuery中获得此内容，

Index.js:

Index.js：

const names=$('.name');
console.log(names);

We have a reference to all the elements with the class name inside our names variable.

我们在名称变量中引用了所有具有类名称的元素。

Output

输出量

	.fn.init(2) [p.center.name, p.center.name, prevObject: k.fn.init(1)]
	0: p.center.name
	1: p.center.name
	length: 2
	prevObject: k.fn.init [document]
	__proto__: Object(0)

As always we get back a JQuery object and inside this we have on the 0th and 1st indices the names of our first two pokemons that we added. Let's see them,

像往常一样，我们返回一个JQuery对象，在该对象内部，我们在第0个和第1个索引中添加了我们添加的前两个宠物小精灵的名称。我们来看一下

    console.log(names[0],names[1]);

Output

输出量

    <p class="center name">Squirtle</p>
    <p class="center name">Charmander</p>

Now we get these elements back. To get the name of our pokemons, we'll actually have to target the text content inside these elements. In JQuery we do this by,

现在我们将这些元素取回来。为了获得我们的神奇宝贝的名字，我们实际上必须针对这些元素内的文本内容。在JQuery中，我们这样做是

    names.text();

Output

输出量

    SquirtleCharmander

The text() method returns us the text content of that element. Okay, I just realized I need to change the title of our site a bit, so let's do this now,

text()方法向我们返回该元素的文本内容。好的，我刚刚意识到我需要稍微更改一下网站的标题，所以现在就开始做吧，

    const title=$('h1');
    console.log(title.text('My Awesome Pokedex'));

Output

输出量

My Awesome Pokedex

We can specify what the text content has to be for that targeted element by passing it as a string inside the text() method. It will completely overwrite the current text content with the one we just added. We can also see the HTML inside an element using the html() method,

我们可以通过将其作为字符串传递到text()方法内，来指定该目标元素的文本内容。它将用我们刚刚添加的内容完全覆盖当前的文本内容。我们还可以使用html()方法查看元素内的HTML ，

    title.html();

Output

输出量

    "My Awesome Pokedex"

We can also use this method to add some HTML to that element. Let's use these two methods to set names of some pokemons. Before we do that, let's give a unique id to each pokemon and also write some HTML for some of the cards,

我们还可以使用此方法向该元素添加一些HTML。让我们使用这两种方法来设置某些神奇宝贝的名称。在此之前，让我们为每个宠物小精灵指定一个唯一的ID，并为某些卡片编写一些HTML，

<p class="center name">Squirtle</p>
...
 <div class="card-content" id="1">

Now let's add some names using the text() method. I think the 7th pokemon on the pokedex is Pikachu so let's name this little guy. Make sure you have given it a class of center and name.

现在，使用text()方法添加一些名称。我认为pokedex上的第七只神奇宝贝是皮卡丘，所以让我们命名这个小家伙。确保已为其指定了中心和名称类别。

     <p class="center name">Add content</p>

index.js:

index.js：

    $('#7 p').text('Pikachu');

Output

输出量

“Pikachu”
The pikachu card has the pikachu name on it

Let's add some html to our jigglypuff now.

现在让我们向jigglypuff添加一些html。

index.js:

index.js：

    $('#5').html('<p class="center name">Jigglypuff</p>');

Output

输出量

My Pokedex

我的口袋妖怪

Jigglypuff

吉格帕奇

Our JigglyPuff has a name now! Great. But wait, was it really Jigglypuff? No, it’s Wigglytuff! We can correct this using the text() method.

我们的JigglyPuff现在有了名字！大。但是，等等，真的是吉格帕芙吗？不，这是Wigglytuff！我们可以使用text()方法更正此问题。

index.js:

index.js：

    $('#5 p').text('Wigglytuff');

Now we get the Wigglytuff, just as it should be! However, what if you wanted to update every element on the page and set it’s inner text. Assigning a unique id, getting a reference to all those elements would be tedious. We can avoid this by using the vanilla JS property which is also available in JQuery,

现在我们得到了Wigglytuff，它应该是应该的！但是，如果您想更新页面上的每个元素并设置其内部文本该怎么办。分配唯一的ID，获得对所有这些元素的引用将很繁琐。我们可以使用Vanilla JS属性来避免这种情况，该属性在JQuery中也可用，

    names[3].textContent="Eevee";

Output

输出量

My Pokedex

我的口袋妖怪

Eevee

伊芙

This way you can easily update the name or even the HTML for all the cards. As an exercise, try naming all these Pokemon using the first method as well as the second method. Complete this mini pokedex so we can write some more JQuery in the next article and learn something more while we complete this app.

这样，您可以轻松更新所有卡的名称甚至HTML。作为练习，请尝试使用第一种方法以及第二种方法来命名所有这些Pokemon。完成此微型pokedex，以便我们在下一篇文章中可以编写更多的JQuery并在完成此应用程序时学到更多。

翻译自: https://www.includehelp.com/code-snippets/jquery-html.aspx

html-jquery

cumubi7453

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-jquery_jQuery HTML

html-jqueryIf you're not familiar with JQuery selectors, have a quick read through here: JQuery selectors. 如果您不熟悉JQuery选择器，请在此处快速阅读： JQuery选择器。 We'll learn how to query the DOM using selectors usin...
复制链接

扫一扫