一、什么是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. 最近用到的 sql 统计操作

    统计操作 1.分组统计group by select id,name,count(*) as '总数'  from test1 group by id,name     --group by   分组 ...

  2. SELECT查询结果集INSERT到数据表

    简介 将查询语句查询的结果集作为数据插入到数据表中. 一.通过INSERT SELECT语句形式向表中添加数据 例如,创建一张新表AddressList来存储班级学生的通讯录信息,然后这些信息恰好存在 ...

  3. MySQL 支持utf8mb4

    utf8mb4 utf8mb3 utf8 Refer to The utf8mb4 Character Set The utf8 Character Set (Alias for utf8mb3) M ...

  4. 通过ajax GET方式查询数据,Django序列化objects

    点击“查找2”按钮,通过ajax GET方式进行查询数据,这样页面不需要整体刷新,之后清空tbody数据,将查询结果重新附加到tbody 前端html: <div class="box ...

  5. 【linux命令】lscpu、etc/cpuinfo详解

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 i2000:~ # lscpu Architecture:          x86_ ...

  6. python基础学习8----文件基本操作

    一.文件的打开,open函数 f = open(file_name,mode)#创建文件对象 打开模式有很多种 1. 'r': 以只读方式打开文件.文件的指针将会放在文件的开头.这是默认模式. 2. ...

  7. Spring Cloud 子项目介绍

    Spring Cloud由以下子项目组成. Spring Cloud Config 配置中心——利用git来集中管理程序的配置. 项目地址:https://spring.io/projects/spr ...

  8. Android5.0中Material Design的新特性

    最近项目中需要用到Material Design,整理了下面几个常用的控件,以便记忆. 一.Snackbar 1.作用:与Toast类似,但是可以点击监听: 2.使用: (1)Snackbar调用静态 ...

  9. tp5多数据库配置

    1.在项目文件下建立extra文件夹,复制dadabase.php改名为database_foo.php,并将从数据库配置信息配置好,如下图: 2.调用 1)调用从数据库$data = Db::con ...

  10. swift的多态

    协议多态: 函数式编程多态:高阶函数的多态性: 泛型多态:泛型的基于约束编程: 共同点:相同的接口,不同的行为: