首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQuery施用入门实例

2012-11-04 
JQuery使用入门实例JQuery是一个快速的使用方便的功能强大的Javascript库,它能够让你用更少的代码简单地遍

JQuery使用入门实例

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

    JQuery有一个有趣的连锁组成部分,比如:
  1. <html> <head> <title>Hi again.</title> </head> <body> <h1>The page</h1> <div?class="wrapper"> Click <a?href="#somewhere">here</a>. </div> <div?id="somewhere">lol</div> </body> </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] 匹配某个拥有特定属性且包含某值的元素

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

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

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

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

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

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

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

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

    切换元素。切换元素的意思就是如果元素是显示的,则隐藏它。如果元素师隐藏的,则显示它。$("#something").toggle();改变元素包含的内容。修改匹配元素的HTML,则用$("#something").html("<b>Hello!</b>");改变元素包含的文本。我们可以用$("#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

热点排行