前端开发(1)-JavaScript和jQuery选择器-获取页面元素

夜空中最亮的代码

已于 2023-03-22 13:58:25 修改

阅读量270

点赞数

分类专栏：前端开发文章标签： javascript css html jquery bootstrap

于 2020-05-20 14:21:34 首次发布

本文链接：https://blog.csdn.net/u011753191/article/details/106234233

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在学习前端开发，之前的内容后面补上

JavaScript和jQuery获取元素的方式与css的方式比较类似，下面一一列出。

	例子	说明
*	$("*")	获取所有元素
#id	$("idname")	获取id="idname"的元素
.class	$(".classname")	获取class="classname"的元素
element	$("p")	获取<p>元素

既然能获取到页面元素，那么就可以通过页面元素来完成一些功能，下面列出一个小demo，通过点击按钮来改变页面上的文字，如下如，点击了Click me以后，前两行的文字会发生变化。

文件目录结构如图所示

除了项目自己生成的文件之外，用到的只有Demo1.html和js目录下的Demo1.js

Demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <!-- href="css/bootstrap.min.css" -->
    <link rel="stylesheet" type="text/css" href=""> <!-- href="css/index.css" -->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <!-- src="https://code.jquery.com/jquery-3.5.1.min.js" -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- src="js/bootstrap.min.js" -->
    <script type="text/javascript" src="js/Demo1.js"></script>
    <title>Title</title>
</head>
<body>

<div class="intro">jQuery introduction</div>
<h2 id="title">This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

</body>
</html>

Demo1.js

$(document).ready(function () {
    $("p").click(function () {
        $(this).hide();
    });

    $("button").click(function () {
        // console.log('Hello jQuery')
        // $('h2').hide();
        var x = $('#title').text();
        if('This is a heading' == $('#title').text())
        {
            $('#title').text('Hello jQuery')
        }
        else
        {
            $('#title').text('This is a heading')
        }
        if('jQuery introduction' == $('.intro').text())
        {
            $('.intro').text('Hello jQuery introduction')
        }
        else
        {
            $('.intro').text('jQuery introduction')
        }

    });


});

结果：

夜空中最亮的代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发(1)-JavaScript和jQuery选择器-获取页面元素

最近在学习前端开发，之前的内容后面补上JavaScript和jQuery获取元素的方式与css的方式比较类似，下面一一列出。例子说明 * $("*") 获取所有元素 #id $("idname") 获取id="idname"的元素 .class $(".classname") 获取class="classname"的元素 element $("p") 获取<p>元素既然能获取到页面元素，那么就可..
复制链接

扫一扫