当前位置: 代码迷 >> Web前端 >> JQuery施用入门实例
  详细解决方案

JQuery施用入门实例

热度:236   发布时间:2012-11-04 10:42:41.0
JQuery使用入门实例

JQuery是一个快速的使用方便的功能强大的Javascript库,它能够让你用更少的代码简单地遍历html文档,处理各种事件,实现ajax等。下面介绍一些简单的使用。

  1. JQuery有一个有趣的连锁组成部分,比如:
    $("#something").addClass("smalltext").removeClass("largetext").show();

    上面一行的代码会查找一个id为something的元素,添加smalltext类给它,并删除largetext类,接着将它们隐藏。

  2. JQuery有一些完美的效果。比如,下面的代码会将所有h1都隐藏。
    $("h1").hide();
  3. JQuery有一个完美事件处理机制。将下面代这段代码放在网页头部,则每当用户点击每一个链接的时候就会弹出警告。
    $("a").click(function(){
    alert("You clicked a link!");
    });

上面简单介绍了几个JQuery的便捷用法,下面看看JQuery是如何让查找和识别元素的。JQuey区分元素的方法跟CSS的方法相同,也就是说如果你懂CSS,你会更容易理解它。

查找标签

  1. <html>
  2. <head>
  3. <title>Hi.</title>
  4. <script?src="js/jquery.js" type="text/javascript"></script>
  5. </head>
  6. <body>
  7. <h1> Hi there </h1>
  8. <h4>Welcome to my site</h4>
  9. <b> Enjoy yourself </b>
  10. </body>
  11. </html>

上面的代码中,如果你需要查找Hi there,则直接用下面代码

$("h1")

隐藏元素

html代码还是如上节,现在我们需要隐藏Hi there 所在的元素。则代码为:

$("h1").hide();

是不是很方便呢?下面我们要隐藏加粗的字,则为:

$("b").hide();

如果加粗的元素有两个,而你只想隐藏其中的一个呢?比如如下:

  1. <html>
  2. <head>
  3. <title>Hi.</title>
  4. </head>
  5. <body>
  6. <h1> Hi there </h1>
  7. <h4>Welcome to my site</h4>
  8. <b> Enjoy yourself </b>
  9. <i>I am learning jQuery!</i>
  10. <b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>
  11. </body>
  12. </html>

解决方法是给需要隐藏的元素添加一个ID,比如”Lorem”,HTML文档就变成如下:

  1. <html>
  2. <head>
  3. <title>Hi.</title>
  4. </head>
  5. <body>
  6. <h1> Hi there </h1>
  7. <h4>Welcome to my site</h4>
  8. <b> Enjoy yourself </b>
  9. <i>I am learning jQuery!</i>
  10. <b?id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>
  11. </body>
  12. </html>

然后隐藏的方法则是:

$("b#lorem").hide();

明白了么?我们只需要将id附加在#后面即可

另外还有二个方法来隐藏:使用contains函数和class类
首先我们看看怎么用class类。CSS中class类常常用于给元素添加一些特殊的效果。首先我们给需要隐藏的部分添加一个类。

  1. <html>
  2. <head>
  3. <title>Hi.</title>
  4. </head>
  5. <body>
  6. <h1> Hi there </h1>
  7. <h4>Welcome to my site</h4>
  8. <b> Enjoy yourself </b>
  9. <i>I am learning jQuery!</i>
  10. <b?class="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>
  11. </body>
  12. </html>

如下面,现在“lorem ipsum dolor”段落已经有一个类’lerem’了,现在我们要隐藏它,则用:

$("b.lorem").hide();

这个跟用id差不多,就是把#替换(.)。
如果需要隐藏的元素没有类属性页没有id属性,则我们可以用:contains来区别它们。方法如下:

$("b:contains('lorem')").hide();

识别嵌套元素的方法

对于下面的文档:

  1. <html>
  2. <head>
  3. <title>Hi again.</title>
  4. </head>
  5. <body>
  6. <h1>The page</h1>
  7. <div?class="wrapper">
  8. Click <a?href="#somewhere">here</a>.
  9. </div>
  10. <div?id="somewhere">lol</div>
  11. </body>
  12. </html>

我们需要隐藏那个链接,则我们可以如下操作:

$("div.wrapper a").hide();

上面代码会在拥有wrapper类的div中查找链接,然后隐藏它。假如div.wrapper中有二个’a',但我们只想隐藏一个呢?这个跟使用id差别差不多,我们只要将用锚链接来区别。

$("div.wrapper a[href='#something']")

上面代码中[]一般是指查找href属性中等于#something的链接。还有很多相同的用法:
[attribute] 匹配某个拥有特定属性的元素
[attribute=value] 匹配某个拥有特定属性且等于某值的元素
[attribute!=value] 匹配某个拥有特定属性且不等于某值的元素
[attribute^=value] 匹配某个拥有特定属性且以某值开始的元素
[attribute$=value] 匹配某个拥有特定属性且以某值结束的元素
[attribute*=value] 匹配某个拥有特定属性且包含某值的元素

元素的操作

  1. 内部插入。这里我们来看二个方法,一个是后插入,另外一个是前插入。
    • 后插入。即在匹配的元素后面插入一些文本,比如:
      $("div.wrapper").append("<b>Hello!</b>");

      将会在拥有类wrapper类的div的后面加入Hello!

    • 前插入。即在匹配的元素前面插入一些文本,比如:
      $("div.wrapper").preappend("<b>Hello!</b>");

      将会在拥有类wrapper类的div的前面加入Hello!

  2. 隐藏元素。这个前面也讲了,不需要重复了。
    $("#something").hide();

    会隐藏带有id ‘#something’的元素

  3. 显示元素。
    $("#something").show();

    将会显示带有id ‘#something’的元素

  4. 切换元素。切换元素的意思就是如果元素是显示的,则隐藏它。如果元素师隐藏的,则显示它。
    $("#something").toggle();
  5. 改变元素包含的内容。修改匹配元素的HTML,则用
    $("#something").html("<b>Hello!</b>");
  6. 改变元素包含的文本。我们可以用
    $("#something").text("HTML will not work here.");

    另外

    $("p").text("<i>Some<i> <b>thing</b>");

    的结果是

    <i>Some<i> <b>thing</b>

通常,Javascript代码会在它下载完成之后执行。所以如果需要查找的元素在它后面,则有可能无法找到,此时我们可以如此用:

$(document).ready(function(){
// Code here
});

上面代码将会使代码在整个文本下载完后再执行Javascript代码

原文链接:http://www.c-sharpcorner.com/UploadFile/venkatesh.basi/1085/Default.aspx

  相关解决方案