JQuery基础

最新推荐文章于 2025-12-22 19:57:02 发布

原创最新推荐文章于 2025-12-22 19:57:02 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

前端专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了JQuery的基本概念和用法，包括JQuery对象与JS对象的区别和转换，事件绑定，选择器的多样性和DOM操作。重点讲解了如何通过JQuery简化HTML元素的操作，如内容和属性的修改，以及元素的添加和删除。此外，还提到了JQuery的CRUD操作，如append、prepend等方法。学习这些方法有助于减少JavaScript代码的复杂性。

前言

Javaweb应用广泛，原生js代码繁琐。为了简化JavaScript代码，JQuery不负期望应运而生

一、JQuery是什么？

JQuery是一个JavaScript框架，用于简化JavaScript代码书写；它可以封装JavaScript代码，优化HTML文档操作、事件处理和Ajax交互。本质上就是一个js文件。

二、JQuery对象和JS对象的区别于转换

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.2.1.min.js"></script>
	</head>
	<body>
		<div id="div1">div1...</div>
		<div id="div2">div2...</div>
<script>
				//1.使用js方式获取名称为div的所有html元素对象
				var divs=document.getElementsByTagName("div");
				alert(divs);	//[object HTMLCollection]
				//对divs中所有div让其标签体内容变为“aaa”
				i.for (var i = 0; i < divs.length; i++) {
					divs[i].innerHTML="aaa";
				}	//相对于麻烦
				//2.使用JQuery方式获取名称为div的所有html元素对象
				var $divs = $("div");
				alert($divs);	//[Object  object]
				//对$divs中所有div让其标签体内容变为“aaa”
				$divs.html("bbb");	//更加方便
</script>
		
	</body>
</html>

1.JQuery—>JavaScript: jq对象[索引] 或者 jq对象.get(索引)
2.JavaScript—>JQuery: $(JavaScript对象)

1.事件绑定和入口函数

例如绑定单击事件时：js使用的是.οnclick=function(){xxxxxxx};
但是使用jq对象：$(jq对象).click(function(){xxxxxxxxx});
关于入口函数，是因为当js代码中需要用到标签元素的时候，如果把js代码写到要使用的标签元素之前，可有能获取不到标签内容，从而使得代码出错，入口函数的作用就是等待页面加载完成之后再执行入口函数里面的代码。从而达到可以获取所有标签元素的作用。
写法：
$(function(){xxxxxxx});

2.JQuery选择器

1.基本选择器
1.1 标签选择器(元素选择器)：
语法：$(“html标签名”)：获取所有匹配标签名称的元素

1.2 id选择器
语法：$("#id的属性值")：获取与指定id值相匹配的元素

1.3 类选择器
语法：$(".class的属性值")：获取与指定的class属性值匹配的元素

1.4 并集选择器
语法：$(“选择器1,选择器2…”)：获取多个选择器选中的所有元素

2.层级选择器
2.1 后代选择器
语法：$(“A B”)：选择A元素内部所有B元素

2.2 子选择器
语法：$(“A > B”)：选择A元素内部的所有B子元素

3.属性选择器
3.1 属性名称选择器
语法：$(“A[属性名]”)：包含指定属性的选择器

3.2 属性选择器
语法：$(“A[属性名=‘值’]”)：包含指定属性值等于指定值的选择器

3.3 复合属性选择器
语法：$(“A[属性值=‘值’][][][]…”)：包含多个属性条件的选择器

4.过滤选择器
4.1 首元素选择器
语法：:first 获得选择器中第一个元素

4.2 尾元素选择器
语法：:last 获得选择器中最后一个元素

4.3 非元素选择器
语法：:not(selector) 不包含指定元素的内容

4.4 偶数选择器
语法：:even 偶数，从0开始计数

4.5 奇数选择器
语法：:odd 奇数，从0开始计数

4.6 等于索引选择器
语法： :eq(index) 指定索引元素

4.7 大于索引选择器
语法： :gt(index) 大于指定索引元素

4.8 小于索引选择器
语法： :lt(index) 小于指定索引元素

4.9 标题选择器
语法： :header 获得标题（h1~h6）元素，固定写法

5.表单过滤选择器
5.1 可用元素选择器
语法： :enabled 获得可用元素

5.2 不可用元素选择器
语法： :disabled 获得不可用元素

5.3 选中选择器
语法： :checked 获得单选/复选框选中的元素

5.4 选中选择器
语法： :selected 获得下拉框选中的元素

3.JQuery的DOM操作

内容操作
1. html()：获取/设置元素的标签体内容
2. text()：获取/设置元素的标签体的纯本文内容
3. val()：获取/设置元素的value属性值
属性操作
一.通用属性操作
1. attr()：获取/设置元素的属性
2. removeAttr()：删除属性
3. prop()：获取/设置元素的属性
4. removeProp()d：删除属性
  attr和prop的区别：
  1. 如果操作的是元素的固有属性，建议使用prop
  2. 如果操作的是元素的自定义属性，建议使用attr
二.对class属性操作
1. addClass()：添加class属性值
2. removeClass()：删除class属性值
3. toggleClass()：切换class属性
  toggleClass(“one”);
  如果元素对象上存在class=“one”,则将属性one删除；如果不存在class=“one”，则添加。
4. css()：添加样式