总结了一些关于JQuery的知识

来源：互联网发布：淘宝导航在线生成器编辑：程序博客网时间：2024/05/16 16:06

JQuery目前的使用方法很多，而且很受程序员们的欢迎，使用JQuery能够使页面编程更加简单，而且能够实现很多意想不到的功能，下面是本人在初学JQuery时总结的一下随堂笔记，有需要的朋友可以稍微看看。

JQuery是一个JavaScript库，使用JQuery能够简化JavaScript的编程，并且对于熟JavaScript编程的开发者来说，JQuery很容易学习。

JQuery是一个“写得更少，做的更多”的轻量级的JavaScript库。JQuery能够非常简单灵巧的选择相应的HTML元素并实现隐藏，移动以及操作其内容等任务。

JQuery库包涵一下特性：HTML元素选取；

HTML元素操作；

CSS操作；

HTML事件函数；

JavaScript特效和动画；

HTML DOM遍历和修改；

AJAX；

Utilities；

向页面中添加JQuery库，JQuery位于一个JavaScript文件中，其中包涵了所有的JQuery函数，

目前JQuery的更新版本大概是JQuery1.7.2，可以到http://www.jquery.com官方网站下载。

下载JQuery时有两个版本，一种是精简版JQuery，另一种是未压缩的JQuery，里面有大量实例

可供初学者阅读及调试。

可以通过HTML语言的标签将JQuery添加到页面中，具体方法如下：

<head>

<script type="text/javascript" src="jquery1.7.2.js"></script>

</head>

第一个JQuery实例：当点击button按钮时，<p>开始的一段文字就会消失

<html>

<head>

<script type="text/javascript" src="jquery1.7.2.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<p>点击按钮后，这段文字就会消失</p>

<input type="button"/>点击

</body>

</html>

JQuery语法很简单，如果开发者具有java或者javascript等相关编程语言的基础知识，学习
JQuery非常轻松，并且很快能够熟练掌握JQuery的核心知识。JQuery对我们来讲并不是一种新

的编程语言，它是将JavaScript封装成一个库，让开发者更简便的去调用JavaScript中的相关

方法，这样大大降低了开发周期，对很多页面上的功能具有很大的改善。

例如JQuery来隐藏HTML元素：

JQuery隐藏当前HTML元素：$(this).hide();

JQuery隐藏id="test"元素：$("#test").hide();

JQuery隐藏所有<p>标签的元素：$("p").hide();

JQuery隐藏class="test"元素：$(".test").hide();

JQuery的语法是由HTML元素的选取进行编制的，可以对某些指定的元素进行某些操作。

基础语法是：$(selector).action()

1.$ 美元符号用来定义JQuery。(但是在JavaScript中例如Prototype同样使用了

$,所以不要见到了$就认为是使用了JQuery，JQuery 使用名为 noConflict()
的方法来解决该问题。var jq = jQuery.noConflict();)

2.selector表示“查询”和“查找”的HTML元素。

3.JQuery的action（）动作，执行对元素的操作。

在JQuery中，为了防止文件在未全部加载的情况下就开始执行JQuery代码，通常我们使用一下代码进行预防这种情况的发生：

$(document).ready(function(){});

JQuery选择器：对于JQuery选择器来说，是需要在实际经验中积累出来的，也是根据自身的需
要进行选择器的选取，主要常用的集中选择器是：元素选择器，属性选择器，CSS选择器。

JQuery事件：JQuery事件是JQuery的核心所在，JQuery就是为了事件而特别设计出来的，
对JQuery中的事件函数的使用就是标志着JQuery使用的好坏程度。

和JavaScript的使用方法一样，JQuery也可以写在页面中的任何位置，但是，从很多知名程序
员和书籍等相关材料上看，推荐把JQuery代码写到<head>部分中，这样有利于打开页面就能够

先加载JQuery的事件代码，不会因为网速加载的问题导致某一部分的页面瘫痪不能使用JQuery。

为了保证JQuery代码的可用性以及可维护性，推荐遵循以下原则：

1. 把所有 jQuery 代码置于事件处理函数中

2. 把所有事件处理函数置于文档就绪事件处理器中

3. 把 jQuery 代码置于单独的 .js 文件中

4. 如果存在名称冲突，则重命名 jQuery 库

下面是一些JQuery的事件：

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

在这里简单介绍一下回调函数，也就是常说的CallBack函数，当你执行完一段指定程序后，希
望能够继续执行下一个方法来调用其他方法，就可以使用到回调函数。

下面有个例子大家可以看一下：

$(document).ready(function(){

$("#butt").click(function(){

$("#p").slideToggle("slow",function(){

alert("这就是CallBack函数，执行完slideToggle执行完出现");

});

});

});

JQuery的HTML操作：这个就只写出一点具体的方法，应用和上面的例子都是一样的，大家可以
自己进行编码尝试，自己写出来的代码才能够记忆深刻。

$(selector).html(content) 改变被选元素的（内部）HTML
$(selector).append(content) 向被选元素的（内部）HTML 追加内容
$(selector).prepend(content) 向被选元素的（内部）HTML “预置”（Prepend）内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML

JQuery操作CSS：JQuery拥有三种CSS操作的重要函数：

$(selector).css(name,value) 为匹配元素设置样式属性的值
$(selector).css({properties}) 为匹配元素设置多个样式属性
$(selector).css(name) 获得第一个匹配元素的样式属性值
$(selector).height(value) 设置匹配元素的高度
$(selector).width(value) 设置匹配元素的宽度

JQuery AJAX操作：JQuery提供了很强大的AJAX函数库，我们可以使用JQuery来实现一些类似
AJAX的功能。

$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

(url) 被加载的数据的 URL（地址）

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时，所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

以上的东西还不是很全面，也不敢保证全部都正确，如果有错误还请批评指正，大家共同学习共同进步，本人也是初学者，也并不是太了解，希望上面的东西能够对刚刚接触JQuery的朋友有所帮助吧。