JQuery 入门

最新推荐文章于 2026-06-23 14:33:29 发布

原创最新推荐文章于 2026-06-23 14:33:29 发布 · 593 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #callback #html #function #xmlhttprequest

本文介绍了JQuery的基础使用方法，包括选择器的运用、事件绑定、元素操作及AJAX支持等关键特性。通过具体实例展示了如何利用JQuery简化网页交互。

最近看了Jquery in action 现在把自己的心得写一下。

Jquery就是JS的一个脚本库，使用步骤可以分为响应事件->选择页面DOM->进行操作，下面一一介绍。

1.jquery选择器。

1.1选择器选择方法

通过选择器方法可以获得页面元素进而对元素进行操作

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

1.2 管理集合

使用下列方法可以获得页面的元素集合

$("p.intro").get('arg')

2.jquery事件

事件类似于js中事件的概念

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

实例：

<html> <head> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>

下面是 jQuery 中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

3. 元素操作

使用jquery可以操作dom元素改变css 操纵html。

3.1 css操作

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

3.2 html操作

使用如下函数可以改变html内容

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

4 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 文件