jQuery基础之一 -- 简单介绍

最新推荐文章于 2024-08-27 01:45:00 发布

zzq58157383

最新推荐文章于 2024-08-27 01:45:00 发布

阅读量997

点赞数

分类专栏： jQuery 文章标签： jquery function html prototype safari

本文链接：https://blog.csdn.net/zzq58157383/article/details/7645227

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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(); 
// 开始使用jQuery
jQuery("div p").hide();
// 使用其他库的 $() 
$("content").style.display = 'none';