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 相关文章推荐
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
微信小程序实现星级评价
Nov 20 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
广泛收集的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
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python imread、newaxis用法详解
2019/11/04 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Python 在函数上添加包装器
2020/07/28 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
煤矿机修工岗位职责
2014/02/07 职场文书
国际商务专业求职信
2014/07/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
助学金感谢信
2015/01/20 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
建党伟业电影观后感
2015/06/01 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript