源码-JavaScript&jQuery交互式前端开发-第7章-JQuery-基本示例

最新推荐文章于 2023-09-24 14:40:54 发布

预见未来to50

最新推荐文章于 2023-09-24 14:40:54 发布

阅读量593

点赞数

分类专栏： Front End Tech 文章标签： CSS HTML HTML事件 JavaScript JQuery

本文链接：https://blog.csdn.net/hpdlzu80100/article/details/52681939

版权

Front End Tech 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

JQuery是一个在页面中引用的JavaScript文件，它允许你通过CSS样式选择器来找到一些元素。

示例效果：

JS代码：

$(':header').addClass('headline');
$('li:lt(3)').hide().fadeIn(1500);
$('li').on('click', function() {
  $(this).remove();
});

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript & jQuery - Chapter 7: Introducing jQuery - Basic Example</title>
    <link rel="stylesheet" href="css/c07.css" />
  </head>
  <body>
    <div id="page">
      <h1 id="header">List</h1>
      <h2>Buy groceries</h2>
      <ul>
        <li id="one" class="hot"><em>fresh</em> figs</li>
        <li id="two" class="hot">pine nuts</li>
        <li id="three" class="hot">honey</li>
        <li id="four">balsamic vinegar</li>
      </ul>
    </div>
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/basic-example.js"></script>
  </body>
</html>