JQuery使用入门实例

最新推荐文章于 2021-06-02 13:08:52 发布

yedehua

最新推荐文章于 2021-06-02 13:08:52 发布

阅读量118

点赞数

分类专栏： jquery 文章标签： jQuery JavaScript CSS HTML Ajax ViewUI

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/yedehua/article/details/83678695

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

JQuery有一个有趣的连锁组成部分，比如：

$ ( " #something " ) . addClass ( " smalltext " ) . removeClass ( " largetext " ) . show () ;

上面一行的代码会查找一个id为something的元素，添加smalltext类给它，并删除largetext类，接着将它们隐藏。
JQuery有一些完美的效果。比如,下面的代码会将所有h1都隐藏。

$ ( " h1 " ) . hide () ;
JQuery有一个完美事件处理机制。将下面代这段代码放在网页头部，则每当用户点击每一个链接的时候就会弹出警告。

$ ( " a " ) . click ( function (){
alert ( " You clicked a link! " ) ;
}) ;

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

查找标签

<html>
<head>
<title>Hi.</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<h1> Hi there </h1>
<h4>Welcome to my site</h4>
<b> Enjoy yourself </b>
</body>
</html>

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

$ ( " h1 " )

隐藏元素

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

$ ( " h1 " ) . hide () ;

是不是很方便呢？下面我们要隐藏加粗的字，则为：

$ ( " b " ) . hide () ;

如果加粗的元素有两个，而你只想隐藏其中的一个呢？比如如下：

<html>
<head>
<title>Hi.</title>
</head>
<body>
<h1> Hi there </h1>
<h4>Welcome to my site</h4>
<b> Enjoy yourself </b>
<i>I am learning jQuery!</i>
<b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>
</body>
</html>

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

<html>
<head>
<title>Hi.</title>
</head>
<body>
<h1> Hi there </h1>
<h4>Welcome to my site</h4>
<b> Enjoy yourself </b>
<i>I am learning jQuery!</i>
<b id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>
</body>
</html>

然后隐藏的方法则是：

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

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

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

<html>
<head>
<title>Hi.</title>
</head>
<body>
<h1> Hi there </h1>
<h4>Welcome to my site</h4>
<b> Enjoy yourself </b>
<i>I am learning jQuery!</i>
<b class="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas metus nisi, euismod vel, mattis eu.</b>
</body>
</html>

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

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

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

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

识别嵌套元素的方法

对于下面的文档：

<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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery使用入门实例

JQuery是一个快速的使用方便的功能强大的Javascript库，它能够让你用更少的代码简单地遍历html文档，处理各种事件，实现ajax等。下面介绍一些简单的使用。JQuery有一个有趣的连锁组成部分，比如：$("#something").addClass("smalltext").removeClass("largetext").show();上面一行的代码会查找一...
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。