JQuery学习笔录 简单的JQuery
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>
<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>
相关推荐
-
JQuery学习笔录 简单的JQuery
JQuery简介 普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript的封装库,比如Prototype.Dojo.ExtJS.JQuery等,这些库对JavaScript进行了封装,简化了开发.这些库是对JavaScript的封装,也就是咱们调用JQuery的一句函数,JQuery内部这句函数帮我们调用JavaScript中的代码几十句,因为JQuery就是JavaScript语法写的一些函数类,内部仍然
-
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样"write less ,do more".Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力. 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载. 这次通信用的是jquery的jQuery.post(url,[data], [callback],[type
-
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定. 先来看看代码,本人看着源代码定制了自己想要的效果: 复制代码 代码如下: <%@ page language="java"contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DO
-
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
在Web中用到多选项卡功能的网站有很多,比如163和126邮箱,用过的人知道.本人在那么多的类似插件中,目前碰到这个比较好,花了点时间调试出来了,请看效果图: 这款插件叫jqueryMagicTabs,上图实现了基本功能,如添加选项卡,选择指定的选项卡.当添加的选项卡超过一定长度时会出现左右滑动的按钮,同时支持鼠标滑动选项卡. 这段代码如下所示: 复制代码 代码如下: <%@ page language="java"contentType="text/html; cha
-
简单实现jquery焦点图
本文实例为大家分享了jquery焦点图的实现代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点图</title> <style type="text/css"> img{position: relative;} ul{list-style:
-
jquery实现最简单的滑动菜单效果代码
本文实例讲述了jquery实现最简单的滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/
-
简单的jQuery入门指引
引言 jQuery可以说是web开发领域应用最为广泛的轻量级javascript库,不仅专业的web开发者使用它,很多刚入门的web开发者或者web爱好者也通过使用jQuery轻松地融入到了javascript的开发. 而如果你还希望在这方面做得更好,就应学习和了解最佳实践.最佳实践(Best Practice)是随某一技术领域的发展而逐渐建立起来的关于最新技术和开发方法的信息,在web开发领域也非常有用. 本文内容参考了杰出前端工程师 Addy Osmani 的 jQuery Performa
-
JQuery 学习技巧总结
一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootools.Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度.jQuery是继prototype之后的又一个优秀的Javascript框架.它是由 John Resig 于 2006 年初创建
-
利用jQuery实现一个简单的表格上下翻页效果
前言 本文主要介绍的是利用jQuery实现一个简单的表格上下翻页效果,注:实现原理与轮播图相似.下面话不多说,来看看详细的 实现方法吧. html: <div class="popup day02-popup04"> <div class="group-caption"> <span>日期</span><span>参与团购场次</span><span class="result&
-
jQuery学习笔记之Ajax用法实例详解
本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.