JQuery是一个快速的使用方便的功能强大的Javascript库,它能够让你用更少的代码简单地遍历html文档,处理各种事件,实现ajax等。下面介绍一些简单的使用。
- JQuery有一个有趣的连锁组成部分,比如:
$("#something").addClass("smalltext").removeClass("largetext").show();
上面一行的代码会查找一个id为something的元素,添加smalltext类给它,并删除largetext类,接着将它们隐藏。
- JQuery有一些完美的效果。比如,下面的代码会将所有h1都隐藏。
- 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,则直接用下面代码
隐藏元素
html代码还是如上节,现在我们需要隐藏Hi there 所在的元素。则代码为:
是不是很方便呢?下面我们要隐藏加粗的字,则为:
如果加粗的元素有两个,而你只想隐藏其中的一个呢?比如如下:
-
<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>
然后隐藏的方法则是:
明白了么?我们只需要将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’了,现在我们要隐藏它,则用:
这个跟用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] 匹配某个拥有特定属性且包含某值的元素
元素的操作
- 内部插入。这里我们来看二个方法,一个是后插入,另外一个是前插入。
- 隐藏元素。这个前面也讲了,不需要重复了。
会隐藏带有id ‘#something’的元素
- 显示元素。
将会显示带有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>");
的结果是
通常,Javascript代码会在它下载完成之后执行。所以如果需要查找的元素在它后面,则有可能无法找到,此时我们可以如此用:
$(document).ready(function(){
// Code here
});
上面代码将会使代码在整个文本下载完后再执行Javascript代码。
原文链接:http://www.c-sharpcorner.com/UploadFile/venkatesh.basi/1085/Default.aspx
分享到:
相关推荐
jq快速入门学习,相关基础实例!快速掌握jq
JQuery Mobile入门实例.pdf 学习资料 复习资料 教学资源
jquery API文档(1.3版本的)和jquery入门实例,也许对入门的有一些帮助,认识jquery
jquery开发ajax入门实例 jquery开发ajax入门实例 jquery开发ajax入门实例
jQuery经典入门教程
JQuery 入门实例,可以运行的,JQuery 入门实例
jQuery 新手入门速成实例集,希望对大家学习有帮助哟
jQuery 新手入门提高速成实例集 大量实用的例子 助你快递入门
NULL 博文链接:https://kaka100.iteye.com/blog/865510
本书立足于jquery入门基础技术,对jquery的产生、jquery基础、如何将 jquery应用于页面开发、如何产生页面元素特效等都进行了细致入微的讲解。这必将使每一个阅读本书的 读者少走弯路,快速上手,建立用jquery进行...
包含多个jquery 实例 简单易学 单例网页形式显示
自己整理的:jQuery中文入门指南,翻译加实例,jQuery的起点教程内含包
一个很不错的关于jQuery EasyUI入门学习的Demo。涉及界面的布局排版、数据的动态加载、窗口的自适应等方面。特别地,该实例通过对界面模块的合理划分、js脚本的动态引用以及css样式的渲染等操作完成。注:例子中,所...
由最火软件(原烈火网)为您精心整理的106个jQuery入门实例代码合集,共有三季。其中一些代码已经在文章教程发表过。例如:jQuery学习——入门篇(附实例代码) 推荐工具:jQuery在线手册。
jquery实例 初学者的珍贵教村 专业开发人事值得收藏的宝贵资料 好东西 推荐
jquery 入门实例讲解,对照着体验一下效果,就会有深刻的理解了。
jQuery好像就是为web编程而生的,其强大的选择器能给开发人员带来畅快的体验。在dom操作、事件和ajax编程方面确实很不错
本书立足于jquery入门基础技术,对jquery的产生、jquery基础、如何将 jquery应用于页面开发、如何产生页面元素特效等都进行了细致入微的讲解。这必将使每一个阅读本书的 读者少走弯路,快速上手,建立用jquery进行...
jquery简单实例代码,适合初学者入门。
jQuery 新手入门速成提高实例集,涉及的方面比较多,包括文字、图像、层等众多网页对象,特别是对想学习jQuery的朋友来说,这些实例很有帮助,代码归类有点乱,不过都可以运行,时间关系,留着大家自己整理归类吧,...