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 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
解析yii数据库的增删查改
2013/06/20 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
Python MD5加密实例详解
2017/08/02 Python
速记Python布尔值
2017/11/09 Python
5款非常棒的Python工具
2018/01/05 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python tkinter实现屏保程序
2019/07/30 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python绘制热力图示例
2019/09/27 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python类反射机制使用实例解析
2019/12/30 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
会计电算化学生个人的自我评价
2014/02/08 职场文书
党员干部承诺书
2014/03/25 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
预备党员介绍人意见
2015/06/01 职场文书
环保守法证明
2015/06/24 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python