jQuery学习笔记

最新推荐文章于 2025-09-10 17:59:49 发布

转载最新推荐文章于 2025-09-10 17:59:49 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3861934/blog/3005989

文章标签：

#python #javascript #人工智能 #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

1、简介

jQuery 是一个JS函数库，它对JS进行了封装，使用户能够方便的操作HTML元素、处理事件、实现动画效果。

功能

jQuery库可以实现以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX 异步数据请求

使用方式

使用jQuery时，可以采用类似于通过外部方式在<head>区域引入JS的方法引入jQuery。

<head>
<script src="../static/js/jquery.js"></script>
</head>

2、语法

jQuery的基本语法是：$(selector).action()
$(selector)是jQuery选择器，代表选取的元素，action()代表元素事件，包括对元素进行的操作，以及元素发生的事件。

$("button").click(function(){ 
   $("p").hide(); 
 }

其中：$("button")为选择器，click()是$("button")元素的事件，function()为事件处理函数，表示当click()事件发生时执行的程序，hide()是对$("p")元素进行的操作。一般而言，为了防止文档在加载就绪之前运行jQuery代码，还需要将上面的jQuery代码放置到一个文档就绪事件的函数中。

$(document).ready(function(){
  // 开始写 jQuery 代码...
});

选择器

名称	示例	说明
元素选择器	$("p")	选择所有 <p>
#id 选择器	$("#test")	通过元素的 id 属性，选取指定值的元素
.class 选择器	$(".test")	通过元素的 class 属性，选取指定值的元素

操作

jQuery 拥有可操作 HTML 元素和属性的强大方法。操作元素的方法主要有：

分类	方法	说明
增添元素	after()	在被选元素之后插入新元素
	before()	在被选元素之前插入新元素
删除元素	remove()	删除备选元素
效果	hide()	隐藏备选元素
	show()	显示备选元素
	toggle()	在显示与隐藏效果之间切换备选元素

操作元素属性的方法主要有：

分类	方法	说明
对元素内容的操作	text()	设置或返回所选元素的文本内容
	html()	设置或返回所选元素的内容
	val()	设置或返回表单字段的值
	append()	在被选元素内部的结尾插入指定内容
	prepend()	在被选元素内部的开头插入指定内容
对元素属性的操作	attr()	设置/改变属性值
对样式进行操作	css()	对元素的CSS属性进行操作，也可以使用attr()方法
对尺寸进行操作	height()	对元素的高度进行操作，也可以使用attr()方法
	width()	对元素的宽度进行操作，也可以使用attr()方法