【JQuery】熟能生巧JQuery(二)——简介

news/2024/7/11 0:36:31 标签: jquery

一、前言

      jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。

二、简介

什么是JQuery?

JQuery是一个JS函数库,可以简单标记被添加到网页中。

JQuery有什么作用?

  • HTML元素选取
  • HTML元素操作
  • CSS操作
  • HTML事件函数
  • JS特效和动画
  • HTML DOM遍历参数
  • AJAX
  • Utilities 工具

三、引入方法

引入方法有两种:
(1)从jquery.com下载JQuery库

(2)从CDN中下载JQuery,如Google中加载JQuery
      a)微软的服务器存有 JQuery
      eg:http://www.asp.net/ajaxlibrary/CDN.ashx#jQuery_Releases_on_the_CDN_0
 
      b)谷歌的服务器存有 JQuery
      eg:https://developers.google.com/speed/libraries/devguide?hl=zh-CN#jquery

想了解如何使用CDN来引入JQuery或AJAX的,点击这里

对比一下这两种方法还是第一种比较迅速,比较推荐。

四、基础语法

JQuery的主要调用是通过$来实现的:

$(Selector).action()

$:美元符号,定义JQuery
selector:查询或查找HTML元素
action():执行对元素操作

例子:

html文件:

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JQuery小例子</title>
    <!--引入JQuery-->
    <script src="js/jquery.js"></script>
    <!--引入对本html操作的js文件-->
    <script src="js/app.js"></script>
</head>

<body>
    <!--添加段落标签-->
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
    <p>44444</p>
    <p>55555</p>
</body>
</html>

app.js代码

//当html文件执行完毕后执行
$(document).ready(function(){
    <!--弹窗提示-->
    alert("加载完毕");
    <!--当鼠标点击p标签的时候触发-->
    $("p").click(function(){
        <!--被点击的p标签,隐藏-->
        $(this).hide();
    });
});

JQuery代码:

    省略...

 
最终效果:

这里写图片描述

                                                        图一 界面加载完毕

这里写图片描述

                                                        图二  点击22222后

五、小结

      前些日子学习JavaScript的时候发现自己学习的不踏实,很飘的感觉。现在回过头来重新学习了一下JQuery,发现JavaScript很简单,还是要多多的尝试,多多总结。加油~~~


http://www.niftyadmin.cn/n/1146660.html

相关文章

Oracle | 获取SQL执行计划的方法

版本说明&#xff1a; Oracle 11.2.0.4 在SQL优化的工作中&#xff0c;大部分的情况就是对SQL的执行计划进行调整&#xff0c;本编文章是我在回顾获取SQL执行计划时所整理&#xff0c;如有不足之处&#xff0c;欢迎指正。 ●SQL_TRACE ●10046事件 ●explain plan ●DBMS_…

EMC被唯冠科技诉侵权:商标纠纷延宕13年

全球最大外部磁盘存储系统商美国EMC公司在中国开展业务十余年&#xff0c;一桩品牌官司如影随形。在中国同样使用“EMC”品牌的显示器生产商唯冠科技(深圳)有限公司(下称“唯冠科技”)&#xff0c;近日正式起诉美国EMC侵犯商标权&#xff0c;索赔8000万元。《第一财经日报》昨天…

【B/S】引用Google或微软的CDN加载jQuery

一、前言 前文介绍了JQuery的基础知识&#xff0c;下面小编给大家介绍一下引用Google或微软的CDN加载jQuery。 二、内容分析 在网页中我们经常使用jQuery库&#xff0c;选择使用的jQuery加载源&#xff0c;能有效加快网站的加载速度&#xff0c;目前最佳的选择就是使用Google…

瑞星杀毒软件计划免费1年 全力反击奇虎360

第一个倡导免费的&#xff0c;注定要挑战原有商业规则&#xff0c;并将遭遇所有对手质疑。昨日&#xff0c;由奇虎360掀起的“杀毒软件免费之争”进入白热化阶段。老牌厂商瑞星宣布对新老用户全面延长免费体验期&#xff0c;称“让用户比比到底谁更好”&#xff1b;而金山和江民…

【EF系列】EntityFrameWork实体关系映射

一、前言 在我们搭建框架的时候&#xff0c;总会建立一个”实体层“,这个实体层中的“实体”是和数据库中的“表”相对应的。当写实体层的时候就要我们手动写很多结构相似的代码。非常的繁琐。为此&#xff0c;小编向大家推荐一种机构——EntityFrameWork&#xff0c;简称EF。 …

Tomcat | SEVERE: Error listenerStart

版本说明&#xff1a; 操作系统&#xff1a;CentOS 6.6 x64 JDK&#xff1a;1.7.0_55 Tomcat&#xff1a;7 问题描述&#xff1a; 迁移Tomcat工程启动后日志出现报错&#xff0c;内容如下&#xff1a; Jan 20, 2018 7:02:50 PM org.apache.catalina.core.StandardContext st…

技术创新全球区域各有擅长

根据德勤与美国创业投资协会(NVCA)的调查显示&#xff0c;创投继续将美国视为领先全球技术发展与创新的国家&#xff0c;同时也认识到全球个别区域的技术创新。这项2008年全球创业投资调查于2008年3月开展&#xff0c;分析了全球约400家创投公司的意见。调查发现&#xff0c;在…

【EF系列】DBFirst数据库优先

一、前言 在前文中我们介绍了ORM&#xff0c;EF映射。其中EF映射有三种实现方法&#xff0c;这里小编就从最简单的给大家讲起——DSFirst。 二、内容介绍 DBFirst&#xff0c;从字面理解就是“数据库优先”。要先有数据库再有实体模型&#xff0c;所以前提是已经创建好了数据库…