【jQuery 学习笔记】初识jQuery

最新推荐文章于 2021-08-10 17:59:15 发布

原创最新推荐文章于 2021-08-10 17:59:15 发布 · 327 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

2 篇文章

订阅专栏

官方网站 <a target=_blank href="http://jquery.com/">http://jquery.com/</a>

下载页面 http://docs.jquery.com/Downloading_jQuery

基本使用

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src="jquery.js"></script>
    <script>
      
    </script>
  </body>
</html>

上述html代码简单的调用了jquery的js库没有做任何操作，主要src的路径要选择正确。

编写第一段jquery代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
 <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src=jquery.js>

    </script>
    <script>
        $(document).ready(function () {
            $("a").click(function (event) {
                alert("Thanks for visiting!");
            });
        });
    </script>
  </body>
</html>

在这段中调用了ready这个事件，这个事件是在整个页面加载完毕包括一些logo之后才进行的。在jQuery中有很多event（ http://api.jquery.com/category/events/#ready.28_fn_.29）

 $(document).ready(function(){
   $("a").click(function(event){
     alert("As you can see, the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });

preventDefault操作可以把之前的默认的行为阻止掉

关于类

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Demo</title>
     <style>
        a.test { font-weight: bold; }
    </style>
</head>
 <body>
    <a href="http://jquery.com/">jQuery</a>
    <script src=jquery.js></script>
    <script>
        $("a").addClass("test");
    </script>
  </body>
</html>

在这段代码中用js为a加入了一个test的样式，移除用