JQuery快速入门-简介
一、什么是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快速入门-简介的更多相关文章
- day 48 jQuery快速入门
jQuery快速入门 jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- jQuery快速入门专题
jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...
- jquery快速入门(二)
jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...
- JQuery快速入门-选择器
JQuery选择器 JQuery 选择器继承了CSS 与Path 语言的部分语法,允许通过标签名.属性名或内容对DOM 元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery 选择器对页 ...
- jQuery EasyUI 入门简介
对于前端开发者来说,在开发过程中应用“框架”这一工具,可以极大的缩短开发时间,提高开发效率.今天我们就开介绍一款常用的框架——jQuery EasyUI. 那什么是jQuery EasyUI呢? jQ ...
- JQuery 快速入门
1.要学习Jquery @首先要在需要的页面引入 <script type="text/javascript" src="jquery.js">&l ...
- JQuery 快速入门一篇通
JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...
- JQuery快速入门
Write less, do more, I like jQuery. jQuery是最常用的js库,整体来说非常轻量并易于扩展,对于移动应用可以使用其更轻量的孪生兄弟Zepto代替.其是由John ...
随机推荐
- c#中partial 作用
申明一下:我也是在百度上找的答案,然后合起来的,这样感觉好理解一点!partial是局部类型的意思就是说有这个关键字的类.结构或接口可以写成几个部分比如: public partial class P ...
- 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 ...
- JList动态添加元素
JList动态添加元素 http://www.cnblogs.com/tianguook/archive/2012/01/31/2333992.html https://zhuanlan.zhih ...
- MySQL 的 CURD 操作
0. 说明 CURD 操作通常是使用关系型数据库系统中的结构化查询语言(Structured Query Language,SQL)完成的 CURD 定义了用于处理数据的基本原子操作 CURD 代表创 ...
- 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 ...
- 0基础的人如何入门 Python ?Python难么?
人生苦短,我用Python,为啥这么说,因为我们自动化测试有金句:学完Python,便可上天 ~ 废话不多说,相信很多人都听过之前的Python进入小学课本.Python进入浙江省高考等新闻,有这么多 ...
- 团队作业——Alpha冲刺 7/12
团队作业--Alpha冲刺 冲刺任务安排 杨光海天 今日任务:将编辑界面与标题栏合并.与同队成员,讨论部分功能合并的问题. 明日任务:编辑界面与另一队员完成的字体设置弹窗合并. 郭剑南 今日任务:使用 ...
- 【转】jquery cookie操作
Cookie是网站设计者放置在客户端的小文本文件.Cookie能为用户提供很多的使得,例如购物网站存储用户曾经浏览过的产品列表,或者门户网站记住用户喜欢选择浏览哪类新闻. 在用户允许的情况下,还可以存 ...
- swift类型擦除的定义-swift的类型擦除只是一个类型高低阶转换的游戏。
所谓swift的类型擦除是指: moand转换: 通过技术手段(通常是包装器),将具体类型的类型信息擦除掉了,只将类型的(某一个侧面的)抽象信息(通常指的是类型尊从的协议.接口.或基类)暴露出来. A ...
- Nowcoder 提高组练习赛-R1
https://www.nowcoder.com/acm/contest/172#question 单人报名300元,五人合报免费,于是就和学弟同学学长们组了一个三世同堂的队伍,高一的学长wzhqwq ...