jQuery的口号是:The Write Less,Do More
获取jQuery:http://jquery.com/ 在左侧选择development版本,下载下来的是一个JS文件。
第一个jQuery程序:在src中引用刚下载的js文件,$(document)表示DOM中的document。
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
//ready方法的作用是当页面中的dom加载完毕后执行参数中的函数
$(document).ready(function(){
alert("hello world");
});
</script>
</body>
</html>
下面这个例子,页面加载完成后,会依次弹出两个窗口
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("hello");
});
$(document).ready(function(){
alert("world");
});
</script>
</body>
</html>
以下是使用传统的DOM方式,为每个URL加一个事件,弹出“hello”窗口
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
window.onload=function(){
var myLinks = document.getElementsByTagName("a");
for(var i =0;i<myLinks.length;i++){
myLinks[i].onclick=function(){
alert("hello");
}
}
}
</script>
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
</body>
</html>
以下是使用jQuery的方式,可见简化了循环。jQuery默认取出的是数组
<html>
<body>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("hello");
});
});
</script>
<a href="#">test1</a>
<a href="#">test2</a>
<a href="#">test3</a>
<a href="#">test4</a>
</body>
</html>
DOM对象与jQuery对象互相转换:
DOM对象转换成jQuery
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var pElement = document.getElementsByTagName("p")[0];
//将DOM对象转换成jQuery对象
var pElementjQuery = $(pElement);
alert("DOM对象结果是:"+pElement.innerHTML);
alert("jQuery对象结果是:"+pElementjQuery.html());
});
</script>
</head>
<body>
<p id="clickMe">点击我</p>
</body>
</html>
jQuery对象转换成DOM,需注意的是,jQuery中获取的对象都是数组类型的,所以不需要遍历。
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//jQuery对象转换成DOM对象有两种方式:
//第一种方式
var t = cm[0];
alert(t.innerHTML);
//第二种方式
var s = cm.get(0);
alert(s.innerHTML);
});
</script>
</head>
<body>
<p id="clickMe">点击我</p>
</body>
</html>
分享到:
相关推荐
jQuery Modal Dialog弹出对话框插件,可用它实现各种的网页提示效果,比如错误提示框、警告框、操作提示框等,暖色调界面,使用方法简单,参考本例所展示的各种提示框生成办法,就可上手。
第5章 jQuery快速上手 第6章 使用选择器获得要操作的元素 第7章 操作得到的元素 第8章 使用jQuery进行DOM操作 第9章 jQuery中的事件处理 第10章 jQuery中的动画与效果 第11章 jQuery与AJAX 第12章 回头重看jQuery...
《Web开发典藏大系:jQuery网页开发实例精解》是一本介绍jquery网页开发基础应用的书籍,是一本简单 易懂,把复杂问题简单化的书。本书立足于jquery入门...读者少走弯路,快速上手,建立用jquery进行开发网页的信心。
cms-kit 包“库 jQuery UI” 这个包包含 jQuery 和 jQuery ... 如果你想使用jQuery UI,去上手, 用于演示, 的API文档,或讨论和提问。 如果您想报告错误/问题,请访问 。 要与团队成员和社区讨论开发,请访问或 。
从零开始学JQuery
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:[removed][removed] 库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN...1 定位元素 JS document.getElementById(“abc”
《Web开发典藏大系:jQuery网页开发实例精解》是一本介绍jquery网页开发基础应用的书籍,是一本简单 易懂,把复杂问题简单化的书。本书立足于jquery入门...读者少走弯路,快速上手,建立用jquery进行开发网页的信心。
通过简单的案例来学习,分析代码为什么这么写,其实是上手编程的最佳选择,本案例就是一些简单易懂的案例,为你打造坚实的jQuery基础,涉及jQuery的各个方面,很值得学习和收藏! 本例包含: 1.认识jQuery 2....
jquery.validate 快速上手
快速上手Jquery树形菜单 jquery树形菜单例子 树形菜单 jquery jquery插件
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
开发周期短,上手快,入门低,但是进阶难一般常用的jquery特效 jquery焦点图 jquery选项卡 jquery滚动条 jquery下拉广告,jquery图片延时加载等,jquery代码,放大镜特效,jquery广告代码,jquery导航,jquery在线客服...
jQuery-JSONP ... jQuery-JSONP 发布了一个名为 $.jsonp() 的类似 $.ajax() 的函数:相似性确保程序员可以轻松上手。 例如,从 2.3.0 版本开始,$.jsonp() 在与 jQuery 1.5+ 结合使用时会返回一个 prom
这是一个用来在WEB网页端设计流程图的UI组件,基于Jquery开发。...良好的用户体验使得操作界面很容易上手,技术开发人员和用户都可使用。 转自:素材火jQuery教程演示:http://www.sucaihuo.com/js/77.html
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类 库相比,它剑走偏锋,从web开发的实用角度出发,抛除了其它 Lib中一些中看 ...上手 jQuery的源码,并在开发中得心应用。
java使用jquery登录例子 简单,容易上手 java使用jquery登录例子 简单,容易上手
1:选择器执行速度胜出JQUERY, 以十万个DIV节点测试,分别用minggeJS与JQUERY选择器取出指定节点测试: JQUERY结果 : IE7以上:花时1800毫秒 IE7 花时 8135毫秒 IE6 花时超过30-40秒之间,浏览器随机卡死。 ...
本章会向你介绍常用的JavaScript库和它们的设计目标,以及为什么大多数Web开发人员选择使用jQuery。你也将学到jQuery的基本工作原理,包括它如何在项目中应用,以及它的内核(强大的选择器引擎)如何工作。 1.1 为...