一、什么是JQuery?

jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大a功能。它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。

二、jQuery 的功能和优势

jQuery 作为JavaScript 封装的库,他的目的就是为了简化开发者使用JavaScript。主要功能有以下几点:

  • 像CSS 那样访问和操作DOM
  • 修改CSS 控制页面外观
  • 简化JavaScript 代码操作
  • 事件处理更加容易
  • 各种动画效果使用方便
  • 让Ajax 技术更加完美
  • 基于jQuery 大量插件
  • 自行扩展功能插件

jQuery 最大的优势,就是特别的方便。比如模仿CSS 获取DOM,比原生的JavaScript要方便太多。并且在多个CSS 设置上的集中处理非常舒服,而最常用的CSS 功能又封装到单独的方法,感觉非常有心。

最重要的是jQuery 的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。

三、JQuery版本选择

1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)

2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

各版本地址:https://code.jquery.com/jquery/

四、JQuery初体验

1、从https://code.jquery.com/jquery/下载1.12.4版本,导入html

2、编写第一个程序

<!DOCTYPE html>
<html>
<head>
<title> 第一个简单的jQuery 程序</title>
<style type="text/css">
div{padding:8px 0px;font-size:12px;text-align:center;border:solid 1px #888;}
</style>
<script src="jquery-1.12.4.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html(" Hello,welcome to JQuery's world!");
});
</script>
</head>
<body>
<div></div>
</body>
</html>

  

注意:

$(document).ready(function(){
// 程序段
})
// 等价于
$(function(){
// 程序段
})   //在页面框架下载完成后就执行

五、JQuery代码风格

1、$  

$符表JQuery

var div1=JQuery('#myid')  //等价于var div1=$('#myid')

2、链式书写法

$(".title").click(function() {

  $(this).addClass("curcol").next(".content").css("display", "block");

});

//获取class=title的元素,点击事件时,对当前这个标签添加curcol类,同时下一个类为content的元素添加样式,进行显示为block。

3、JQuery获取DOM对象

var tDiv=document.getElementById("Tmp"); // 获取DOM 对象:获取id为Tmp的对象
var oDiv=document.getElementById("Out"); // 获取DOM 对象:获取id为Out的对象
var cDiv=tDiv.innerHTML; // 获取DOM 对象中的内容 :Tmp对象的内容赋值给cDiv
oDiv.innerHTML=cDiv; // 设置DOM 对象中的内容:将cDiv赋值给Out对象

说明:以上四行代码的意思就是:将ID为Tmp对象的内容赋值给ID为Out对象。

使用JQuery实现:

var tDiv=$("#Tmp"); // 获取jQuery 对象
var oDiv=$("#Out"); // 获取jQuery 对象
var cDiv=tDiv.html(); // 获取jQuery 对象中的内容
oDiv.html(cDiv); // 设置jQuery 对象中的内容

4、JQuery控制DOM对象

JavaScript实现:

<script type="text/javascript">
function btn_Click(){
// 获取文本框的值
var oTxtValue=document.getElementById("Text1").value;
// 获取单选框按钮值
var oRdoValue=(Radio1.checked)?" 男":" 女";
// 获取复选框按钮值
var oChkValue=(Checkbox1.checked)?" 已婚":" 未婚";
// 显示提示文本元素
      document.getElementById("Tip").style.display="block";
// 设置文本元素的内容
document.getElementById("Tip").innerHTML=
oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue;
}
</script>

  

JQuery实现:

<script type="text/javascript">
$(function(){
$("#btnSubmit").click(function(){
// 获取文本框的值
var oTxtValue=$("#Text1").val();
// 获取单选框按钮值
var oRdoValue=$("#Radio1").is (":checked")?" 男":" 女";
// 获取复选框按钮值
var oChkValue=$("#Checkbox1").is (":checked")?" 已婚":" 未婚";
// 显示提示文本元素和内容
$("#Tip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue);
})
})
</script>

  

5、JQuery控制页面CSS

<script type="text/javascript">
//页面框架加载完成后,找到class=defcol的标签,当标签有点击事件发生时,给当前标签添加/删除class curcol。
$(function() {
 $(".defcol").click(function() {
  $(this).toggleClass("curcol");
});
});
</script>

  

参考自《JQuery权威指南(第二版)》

JQuery快速入门-简介的更多相关文章

  1. day 48 jQuery快速入门

    jQuery快速入门   jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...

  2. jQuery 快速入门教程

    内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...

  3. jQuery快速入门专题

    jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...

  4. jquery快速入门(二)

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  5. JQuery快速入门-选择器

    JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...

  6. jQuery EasyUI 入门简介

    对于前端开发者来说,在开发过程中应用“框架”这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架——jQuery EasyUI. 那什么是jQuery EasyUI呢? jQ ...

  7. JQuery 快速入门

    1.要学习Jquery @首先要在需要的页面引入 <script type="text/javascript" src="jquery.js">&l ...

  8. JQuery 快速入门一篇通

    JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...

  9. JQuery快速入门

    Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John ...

随机推荐

  1. c#中partial 作用

    申明一下:我也是在百度上找的答案,然后合起来的,这样感觉好理解一点!partial是局部类型的意思就是说有这个关键字的类.结构或接口可以写成几个部分比如: public partial class P ...

  2. Oracle EBS OM 创建订单

    DECLARE l_header_rec OE_ORDER_PUB.Header_Rec_Type; l_line_tbl OE_ORDER_PUB.Line_Tbl_Type; l_action_r ...

  3. JList动态添加元素

    JList动态添加元素   http://www.cnblogs.com/tianguook/archive/2012/01/31/2333992.html https://zhuanlan.zhih ...

  4. MySQL 的 CURD 操作

    0. 说明 CURD 操作通常是使用关系型数据库系统中的结构化查询语言(Structured Query Language,SQL)完成的 CURD 定义了用于处理数据的基本原子操作 CURD 代表创 ...

  5. It was not possible to find any compatible framework version

    It was not possible to find any compatible framework version The specified framework 'Microsoft.NETC ...

  6. 0基础的人如何入门 Python ?Python难么?

    人生苦短,我用Python,为啥这么说,因为我们自动化测试有金句:学完Python,便可上天 ~ 废话不多说,相信很多人都听过之前的Python进入小学课本.Python进入浙江省高考等新闻,有这么多 ...

  7. 团队作业——Alpha冲刺 7/12

    团队作业--Alpha冲刺 冲刺任务安排 杨光海天 今日任务:将编辑界面与标题栏合并.与同队成员,讨论部分功能合并的问题. 明日任务:编辑界面与另一队员完成的字体设置弹窗合并. 郭剑南 今日任务:使用 ...

  8. 【转】jquery cookie操作

    Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...

  9. swift类型擦除的定义-swift的类型擦除只是一个类型高低阶转换的游戏。

    所谓swift的类型擦除是指: moand转换: 通过技术手段(通常是包装器),将具体类型的类型信息擦除掉了,只将类型的(某一个侧面的)抽象信息(通常指的是类型尊从的协议.接口.或基类)暴露出来. A ...

  10. Nowcoder 提高组练习赛-R1

    https://www.nowcoder.com/acm/contest/172#question 单人报名300元,五人合报免费,于是就和学弟同学学长们组了一个三世同堂的队伍,高一的学长wzhqwq ...