JQuery快速入门-简介

时间 2019-12-08

原文原文链接

1、什么是JQuery？

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

2、jQuery 的功能和优点

jQuery 做为JavaScript 封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有如下几点：css

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

jQuery 最大的优点，就是特别的方便。好比模仿CSS 获取DOM，比原生的JavaScript要方便太多。而且在多个CSS 设置上的集中处理很是舒服，而最经常使用的CSS 功能又封装到单独的方法，感受很是有心。html

最重要的是jQuery 的代码兼容性很是好，你不须要老是头疼着考虑不一样浏览器的兼容问题。java

3、JQuery版本选择

1.x：兼容ie678,使用最为普遍的，官方只作BUG维护，功能再也不新增。所以通常项目来讲，使用1.x版本就能够了，最终版本：1.12.4 (2016年5月20日)jquery

2.x：不兼容ie678，不多有人使用，官方只作BUG维护，功能再也不新增。若是不考虑兼容低版本的浏览器可使用2.x，最终版本：2.2.4 (2016年5月20日)浏览器

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，通常不会使用3.x版本的，不少老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。框架

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

4、JQuery初体验

一、从https://code.jquery.com/jquery/下载1.12.4版本，导入html动画

二、编写第一个程序this

<!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(){
// 程序段
}) //在页面框架下载完成后就执行

5、JQuery代码风格

一、$

$符表JQuery

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

二、链式书写法

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

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

});

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

三、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 对象中的内容

四、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>

五、JQuery控制页面CSS

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

参考自《JQuery权威指南（第二版）》

1. zookeeper快速入门——简介
2. ARCore快速入门--简介
3. 快速入门:BUMO 简介
4. jQuery快速入门
5. 快速入门Jquery
6. jQuery简单的快速入门
7. jQuery Mobile 快速入门
8. JQuery快速入门-Ajax
9. JQuery(一)：快速入门
10. jQuery框架快速入门
更多相关文章...
• jQuery Mobile 简介 - jQuery Mobile 教程
• SQL 快速参考 - SQL 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• YAML 入门教程