jQuery基础之一 -- 简单介绍
来源:互联网 发布:大胸内衣知乎 编辑:程序博客网 时间:2024/06/16 13:22
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 Jquery应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。它有助于简化 JavaScript以及Ajax 编程。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
官方站点:http://jquery.com/
中文站点:http://jquery.org.cn/
jQuery 1.7 API 中文版 下载【CHM 离线版】http://julying.com/lab/jQuery-api/download/jquery-api-1.7.1_20120209.chm.zip
jQuery 1.7 API 英文版 下载【CHM 离线版】http://julying.com/lab/jQuery-api/download/jquery-api-1.7.1-en_20120209.chm.zip
jQuery 1.7 API 中文版【在线版】http://julying.com/lab/jQuery-api-1.7/
jQuery 1.7 API 英文版【在线版】http://julying.com/lab/jQuery-api-1.7/en/
jquery的优点:
1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath(1.3以后就废除了)。
4、jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离,便于代码和维护和修改。
7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。
jQuery的使用
用jquery的前提,首先要引用一个有jquery的文件 <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
第一个jquery页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery</title><script type="text/javascript" src="js/jquery-1.6.4.js"></script><script type="text/javascript">$(document).ready(function(){alert("Hello World!");});</script></head><body></body></html>
$(document).ready(function(){....});与window.onload区别:
$(document).ready(function(){....});网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
当然还会更精简:
$().ready(function(){...});$(function(){...});$(document).ready();可以出现多个,每个都会调用,而window.onload只能出现一个,如果有多个话,只会调用最后一个
window.onload = function(){...};必须等待网页中所有的内容加载完毕后(包括图片)才能执行
等价于
$(window).load(function(){...});
jQuery对象的方法与DOM对象的方法是不能混合使用的,只有jquery对象才能使用jquery定义的方法,调用方法时要注意操作的是dom对象还是jquery对象。例如$("#id").innerHTML或者document.getElementById("id").html()都是错误的。但两都是可以相互转换的
jQuery对象转换成DOM对象:var $cr = $("#cr");var cr = $cr[0]; // cr = $cr.get(0);DOM对象转换成jQuery对象:var cr = document.getElementById("cr");var $cr = $(cr);
$("div").eq(2).html(); //调用jquery对象的方法$("div").get(2).innerHTML; //调用dom的方法属性检测某个元素在网页上是否存在:
if($("#id").length > 0){...} 或者 if($("#id")[0]){ //if($("#id").get(0))...}
同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:$("#msg").html(); //返回id为msg的元素节点的html内容。$("#msg").html("<b>new content</b>"); //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content$("#msg").text(); //返回id为msg的元素节点的文本内容。$("#msg").text("<b>new content</b>"); //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b>$("#msg").height(); //返回id为msg的元素的高度$("#msg").height("300"); //将id为msg的元素的高度设为300$("#msg").width(); //返回id为msg的元素的宽度 $("#msg").width("300"); //将id为msg的元素的宽度设为300$("input").val("); //返回表单输入框的value值$("input").val("test"); //将表单输入框的value值设为test$("#msg").click(); //触发id为msg的元素的单击事件$("#msg").click(fn); //为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法
解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$("#msg")改为jQuery("#msg")。如:
jQuery.noConflict(); // 开始使用jQueryjQuery("div p").hide();// 使用其他库的 $() $("content").style.display = 'none';
- jQuery基础之一 -- 简单介绍
- jQuery基础之一
- jQuery的简单介绍、jQuery基础选择器、jQuery的简单过滤器的介绍
- SQLite入门之一简单介绍
- jQuery 基础 详细介绍
- jQuery基础介绍
- jQuery基础介绍
- JQuery基础入门介绍
- Jquery入门 简单介绍
- jquery的简单介绍
- jQuery简单介绍
- Jquery简单介绍
- JQuery 的简单介绍
- Jquery的简单介绍
- html基础简单介绍
- python简单基础介绍
- Unicode字符/字符串 之一 基础介绍
- HBase之一【HBase基础】HBase技术介绍
- Sqlserver常见字符串/日期处理函数
- cocos2d 坐标系使用与屏幕坐标
- [Android UI] ListPreference 动态改变Summary
- Java程序员从笨鸟到菜鸟之(七十一)细谈struts2(十三)struts2实现文件上传和下载详解
- 01-web服务器、应用服务器、JSP&SERVLET容器
- jQuery基础之一 -- 简单介绍
- javascript 对象基础--读书笔记
- TQuery的cannot modify a read-only dataset解决方法
- 富文本编辑器:KindEditor+Struts2 笔记
- CSS3 Transitions, Transforms和Animation使用简介与应用展示
- html5 svg
- Zookeeper和zkpython 客户端测试
- Tools
- 在 本地计算机 无法启动 MSSQLSERVER 服务。错误 3: 系统找不到指定的路径。