JQuery学习笔录 简单的JQuery


Posted in Javascript onApril 09, 2012

JQuery简介 

普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库,比如Prototype、Dojo、ExtJS、JQuery等,这些库对JavaScript进行了封装,简化了开发。这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQuery内部这句函数帮我们调用JavaScript中的代码几十句,因为JQuery就是JavaScript语法写的一些函数类,内部仍然是调用JavaScript实现的,所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术,Jquery本身就是一堆JavaScript函数。

 为什么选择JQuery?

尺寸小、使用简单方便(Write Less, Do More,吃得少干得多,而且目前许多大公司都在支持JQuery,例如微软,微软把JQuery继承在了vs2010中。

 JQuery能做什么?

JQuery能做的普通的Dom能做,普通Dom能做的JQuery也能做。

简单的JQuery

<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
alert("JQuery"); 
}) 
</script>

相当于Onload事件,但是Onload只能注册一次事件,而JQuery能注册多个事件

JQuery对象

jQuery对象不能使用DOM对象的方法,DOM对象也不能使用jQuery对象的方法,但是可以互相转换


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script> 
<script type="text/javascript"> 
window.onload = function () { 
var btn = document.getElementById("btn"); 
$(btn).val("OK"); 
} 
</script> 
</head> 
<body> 
<input id="btn" type="button" value="按钮" /> 
</body> 
</html>

 JQuery对象转DOM对象


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2-vsdoc-cn.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
// var dom = $("#btn").get(0); 
//或者 
var dom = $("#btn")[0]; 
dom.value = "OK"; 
}) 
</script> 
</head> 
<body> 
<input type="button" value="按钮" id="btn" /> 
</body> 
</html>

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.6.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
var $cr = $("#cr"); 
var vr = $cr[0]; 
$cr.click(function () { 
if (cr.checked) { 
alert("感谢你的支持你可以继续操作!"); 
} 
}) 
}) 
</script> 
</head> 
<body> 
<input type="checkbox" id="cr"/><label for="cr">我已经阅读了协议</label> 
</body> 
</html>

$.()相当于静态方法

 处理数组的函数

 $.map() 将一个数组中的元素转换到另一个数组中。


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var arr = [3, 5, 7];//定义数组 
arr = $.map(arr, function (value) {//第一个参数为原数组,第二个参数是处理函数 
return value + 1;//处理方式 
}); 
alert(arr);// 
}); 
</script> 
</head> 
<body> 
</body> 
</html>

$.each(array,fn)对数组arry每个元素调用fn函数进行处理,没有返回值


?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
var arr = { "第一名": "张三", "第二名": "李四", "第三名": "王五" };//定义一个字典数组 
$.each(arr, function (key, value) {//遍历数组,key代表键,value代表值 
alert(key + " " + value);// 
}) 
}) 
</script> 
</head> 
<body> 
</body> 
</html>
Javascript 相关文章推荐
ExtJS 2.0实用简明教程之应用ExtJS
Apr 29 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 #Javascript
深入分析js中的constructor和prototype
Apr 07 #Javascript
浅谈javascript中的作用域
Apr 07 #Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 #Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 #Javascript
JavaScript 高级篇之函数 (四)
Apr 07 #Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
CI操作cookie的方法分析(基于helper类库)
2016/03/28 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
javascript比较文档位置
2008/04/08 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
Python封装原理与实现方法详解
2018/08/28 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python开启debug模式的方法
2019/06/27 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
MySQL数据库必备之条件查询语句
2021/10/15 MySQL