jQuery 基础知识-Toy模板网

这篇具有很好参考价值的文章主要介绍了jQuery 基础知识。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.jQuery的使用

要想使用 jQuery 的话，我们必须先要官网上下载（ http://jquery.com/ ）3.7 到 4.0的开发版本就可以，下载到文件夹以后桌面都可以，然后拖动到代码编辑器根目录下即可

jQuery 基础知识

在需要使用 jQuery 的页面引入 jquery 的核心 js 文件

<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>

2. DOM 对象与 jQuery 包装集对象

DOM 对象

通过 js 方式获取的元素对象（ documnet ）

JQuery 对象

通过 jquery 方法获取的元素对象，返回的是 jquery 包装集

区别：

获取 dom 对象时会返回 “ 元素 ” 本身的标签及内容

获取 jQuery 对象时会返回一个包装集对象

<!-- 
		Dom对象
			通过js方式获取的元素对象（document）
		Jquery对象
			通过jquery方法获取的元素对象，返回的是jquery包装集
	 -->
<!-- 引入jquery的核心js文件 （如果未引入jquery，则报错：$ is not defined）-->
<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*  Dom对象 */
	var divDom = document.getElementById("mydiv");
	console.log(divDom);
	var divsDom = document.getElementsByTagName("div");
	console.log(divsDom);
	// js获取不存在的元素
	var spanDom = document.getElementsByTagName("span");
	console.log(spanDom);
	var spanDom2 = document.getElementById("myspan");
	console.log(spanDom2);

	console.log("==========");


	/* Jquery对象 */
	// 通过id选择获取元素对象  $("#id属性值")
	var divJquery = $("#mydiv");
	console.log(divJquery);
	// jquery获取不存在的元素
	var spanJquery = $("#myspan")
	console.log(spanJquery);

	console.log("========");
	/* Dom对象 转 Jquery对象 */
	// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
	var divDomToJquery = $(divDom);
	console.log(divDomToJquery);

	/* Jquery对象 转 Dom对象 */
	// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
	var divJqueryToDom = divJquery[0];
	console.log(divJqueryToDom);

</script>

3.基础选择器

基础选择器

id选择器 #id属性值 $(" #id属性值 ") 选择id为指定的元素对象（如果有多个同名的id属性，则以第一个为标准）

类选择器 .class属性值 $('' .class属性值 '') 选择clsss为指定值的元素对象

元素选择器标签名/元素名 $(" 标签名/元素名 ") 选择所有指定标签的元素对象

通用选择器 * $('' * '') 选择页面中所有的元素对象

组合选择器选择器1 ，选择器2 $('' 选择器1，选择器2 '') 选择指定选择器选中的元素对象

<body>
		<div id="mydiv1" class="blue">元素选择器</div>
		<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<span class="blue">样式选择器</span>
</body>
<script type="text/javascript">
	 	// id选择器			#id属性值	
		var mydiv = $("#mydiv1");
		console.log(mydiv);
		
		// 类选择器			.class属性值	
		var clas = $(".blue");
		console.log(clas);
		
		// 元素选择器		标签名/元素名
		var spans = $("span");
		console.log(spans);
		
		// 通用选择器		*	
		var all = $("*");
		console.log(all);
		
		// 组合选择器		选择器1,选择器2,..
		var group = $("#mydiv1,div,.blue");
		console.log(group);
		
		
	 </script>

4.层次选择器

层次选择器：

后代选择器

格式：父元素指定元素（空格隔开）

示例：$( '' 父元素指定元素 '' )

选择父元素的所有指定元素（包含第一代、第二代等）

子代选择器

格式：父元素 > 指定元素（大于号隔开）

示例：$(''' 父元素 > 指定元素 '')

选择父元素的所有第一代指定元素

相邻选择器

格式：元素 + 指定元素（加号隔开）

示例：$(''' 元素 + 指定元素 '')

选择元素的下一个指定元素（只会查找下一个元素的，如果元素不存在，则获取不到）

同辈选择器

格式：元素 ~ 指定元素（波浪号隔开）

示例：$('' 元素 ~ 指定元素 '')

选择元素下面的所有指定元素

<body>
	<div id="parent">层次择器
		<div id="child" class="testColor">父选择器
			<div class="gray">子选择器</div>
			<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
			<img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
		</div>
		<p>p元素</p>
		<div>
			选择器2<div>选择器2中的div</div>
		</div>
	</div>
</body>
<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// 后代选择器
	var hd = $("#parent div");
	console.log(hd);

	// 子代选择器
	var zd = $("#parent > div");
	console.log(zd);

	// 相邻选择器
	var xl = $("#child + div");
	console.log(xl);

	// 同辈选择器
	var imgs = $(".gray ~ img");
	console.log(imgs);

</script>

5.表单选择器

表单选择器 :input 查找所有的input元素：$(":input")；

注意：会匹配所有的input、textarea、select和button元素。

文本框选择器 :text

密码框选择器 :password

单选按钮选择器 :radio

多选按钮选择器 :checkbox

提交按钮选择器 :sunmit

图像按钮选择器 :image

重置按钮选择器 :reset

文件域选择器 :file

按钮选择器 :button

<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 表单选择器		:input
		var inputs = $(":input");
		console.log(inputs);
		// 元素选择器
		var inputs2 = $("input");
		console.log(inputs2);

6.操作元素的属性

操作元素的属性

属性的分类：

固有属性：元素本身就有的属性（id、name、calss、style）

返回值是boolean的属性：checked、selected、disabled

自定义属性：用户自己定义的属性

attr（）和 prop（）的区别

1.如果是固有属性，attr（）和 prop（）方法均可操作

2.如果是自定义属性，attr（）可操作，prop（）不可操作

3.如果是返回值是 boolean 类型的属性

如设置属性，attr（）返回具体的值，prop（）返回 true

未设置属性。attr（）返回 undefined，prop（）返回 false

1. 获取属性

attr（‘’ 属性名 ‘’）

prop（‘’ 属性名 ‘’）

2. 设置属性值

attr（‘’ 属性名 ‘’，‘’ 属性值 ‘’）

prop（‘’ 属性名 ‘’，‘’ 属性值 ‘’）

3. 移除属性

removeAttr（‘’ 属性名 ‘’）

总结：如果属性的类型是 Boolean （checked、selected、disabled），则使用prop（）方法，否则使用 attr （）方法

 <input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/>	aa
		 <input type="checkbox" name="ch" id="bb" />	bb
	</body>
	<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/* 获取属性 */
		// 固有属性
		var name = $("#aa").attr("name");
		console.log(name);
		var name2 = $("#aa").prop("name");
		console.log(name2);
		// 返回值是boolean的属性（元素设置了属性）
		var ck1 = $("#aa").attr("checked"); // checked
		var ck2 = $("#aa").prop("checked"); // true
		console.log(ck1);
		console.log(ck2);
		// 返回值是boolean的属性（元素未设置属性）
		var ck3 = $("#bb").attr("checked"); // undefined
		var ck4 = $("#bb").prop("checked"); // false
		console.log(ck3);
		console.log(ck4);
		// 自定义属性
		var abc1 = $("#aa").attr("abc"); // aabbcc
		var abc2 = $("#aa").prop("abc"); // undefined
		console.log(abc1);
		console.log(abc2);
		
		/* 设置属性 */
		// 固有属性
		$("#aa").attr("value","1");
		$("#bb").prop("value","2");
		
		// 返回值是boolean的属性
		$("#bb").attr("checked","checked");
		$("#bb").prop("checked",false);
		
		// 自定义属性
		$("#aa").attr("uname","admin");
		$("#aa").prop("uage",18);
		
		/* 移除属性 */
		$("#aa").removeAttr("checked")
		
		
	</script>

7.操作元素的样式

attr（‘’ class ‘’）获取元素的样式名

attr（‘’ calss ‘’，样式名）设置元素样式（设置元素样式。原本的样式会被删除）

addclass（‘’ 样式名 ‘’）添加样式（在原来的基础上添加样式，原本的样式会保留，如果出现相同的样式，则以样式中后定义的为准）

css（）添加具体的样式（添加行内样式）

css（‘’ 具体样式名 ‘’，‘’ 样式值 ‘’）设置单个样式

css（{ “ 具体样式 ”：‘’ 样式值 ’‘，“ 具体样式 ”：‘’ 样式值 ’‘ }）设置多个样式值

removeClass（’‘ 样式名 '’）移除样式

<h3>css()方法设置元素样式</h3>
	<div id="conBlue" class="blue larger">天蓝色</div>
	<div id="conRed">大红色</div>
	<div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// attr("class") 	获取元素的样式名
	var cla = $("#conBlue").attr("class");
	console.log(cla);

	// attr("class","样式名")	设置元素的样式
	$("#conBlue").attr("class", "green");

	// addClass("样式名")	添加样式
	$("#conBlue").addClass("larger");
	$("#conBlue").addClass("pink");

	// css()	添加具体的样式（添加行内样式）
	$("#conRed").css("font-size", "40px");
	$("#conRed").css({ "font-family": "楷体", "color": "green" });

	// removeClass("样式名")		移除样式
	$("#remove").removeClass("larger");

</script>

8.操作元素的内容

操作元素的内容

html（）获取元素的内容，包含 html 标签（非表单元素）

html（‘’ 内容 ‘’）设置元素的内容，包含 html 标签（非表单元素）

text（）获取元素的纯文本内容，不识别html标签（非表单元素）

text（‘’ 内容 ‘’）设置元素的纯文本内容，不识别html标签（非表单元素）

val（）获取元素的值（表单元素）

val（）设置元素的值（表单元素）

表单元素：

文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select

非表单元素：

div、span、h1~h6、table、tr、td、li、p等

script type="text/javascript">
	 	// html("内容")		设置元素的内容，包含html标签（非表单元素）
		$("#html").html("<h2>上海</h2>");
		$("#html2").html("上海");
		// html()			获取元素的内容，包含html标签（非表单元素）
		var html = $("#html").html();
		var html2 = $("#html2").html();
		console.log(html);
		console.log(html2);
		
		
		// text("内容")	 设置元素的纯文本内容，不识别HTML标签（非表单元素）
		//$("#text").text("北京");
		//$("#text2").text("<h2>北京</h2>");
		// text()	获取元素的纯文本内容，不识别HTML标签（非表单元素）
		var txt = $("#text").text();
		var txt2 = $("#text2").text();
		console.log(txt);
		console.log(txt2);
		
		
		// val()			获取元素的值（表单元素）
		var val = $("#op").val();
		console.log(val);
		// 	val("值")		设置元素的值（表单元素）
		$("#op").val("今天天气不错");

9.创建元素和添加元素

创建元素和添加元素：创建元素 $('' 内容 '')

添加元素：

1. 前追加子元素

指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。

$(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。

2.后追加子元素

指定元素.append（内容）在指定元素内部的最后面追加内容，内容可以是字符串、html 元素或jquery对象

$(内容).appendTo（指定元素）把内容追加到指定元素内部的最后面，内容可以是字符串、html 或 jquery对象

3.前追加同级元素

before（）指定元素的前面追加内容

3.后追加同级元素

after（）指定元素的后面追加内容

注：在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置

如果元素本身存在（已有的元素），会将原来的元素直接剪切设置到指定位置

script type="text/javascript">
	 	// 创建元素
		var p = "<p>这是一个p标签</p>";
		console.log(p);
		console.log($(p));
		
		/* 添加元素 */
		// 创建元素
		var span = "<span>小奶狗</span>";
		// 得到指定元素，并在元素的内部最前面追加内容
		$(".green").prepend(span);
		var span2 = "<span>小狼狗</span>";
		$(span2).prependTo($(".green"));
		
		var span3 = "<span>小奶狗1</span>";
		var span4 = "<span>小奶狗2</span>";
		$(".green").append(span3);
		$(span4).appendTo($(".green"));
		
		// 将已存在内容追加到指定元素中
		$(".green").append($(".red"));
		
		
		/* 同级追加 */
		var sp1 = "<span class='pink'>女神</span>";
		var sp2 = "<span class='gray'>歌手</span>";
		
		$(".blue").before(sp1);
		$(".blue").after(sp2);
		
	 </script>

10.删除元素

remove（）

删除元素及其对应的子元素，标签和内容一起删除

指定元素.remove（）

empty

清空元素内容，保留标签

指定元素.empty（）

<script type="text/javascript">
	 	// 删除元素
		$(".green").remove();
		// 清空元素
		$(".blue").empty();
		
	 </script>

11.遍历元素

each（）

$( selector ).each（function（index，element））：遍历元素

参数 function 为遍历时的回调函数

index为遍历元素的序列号，从 0 开始

element是当前元素，此时是dom元素

<body>
		<h3>遍历元素 each()</h3>
		<span class="green">jquery</span>
		<span class="green">javase</span>
		<span class="green">http协议</span>
		<span class="green">servlet</span>
	</body>
<script type="text/javascript">
	 	// 获取指定元素 并遍历
		$(".green").each(function(index,element){
			console.log(index);
			console.log(element);
			console.log(this);
			console.log($(this));
		});

12.ready加载事件

ready加载事件

预加载事件

当页面结构执行加载完毕是后执行

类似于 js 中 load 事件

ready 事件可以写多个

语法：

$(document).ready(function(){

})

简写：

$(function(){

})

	<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			$(function(){
				console.log("ready加载事件...");
			});
			$(document).ready(function(){
				// 获取元素
				console.log($("#p1"));
			});

13.绑定事件

bind绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

语法：

$(selector).bind( eventType [, eventData], handler(eventObject));

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。

[, eventData]：传递的参数，格式：{名:值,名2:值2}

handler(eventObject)：该事件触发执行的函数

绑定单个事件

bind绑定

$("元素").bind("事件类型",fucntion(){

});

直接绑定

$("元素").事件名(function(){

});

绑定多个事件

bind绑定

1. 同时为多个事件绑定同一个函数

指定元素.bind("事件类型1 事件类型1 ..",function(){

});

2. 为元素绑定多个事件，并设置对应的函数

指定元素.bind("事件类型",function(){

}).bind("事件类型",function(){

});

3. 为元素绑定多个事件，并设置对应的函数

指定元素.bind({

"事件类型":function(){

}

});

直接绑定

指定元素.事件名(function(){

}).事件名(function(){

});文章来源地址https://www.toymoban.com/news/detail-468422.html

<body>
	<h3>bind()方简单的绑定事件</h3>
	<!-- style="cursor:pointer" 设置鼠标图标 -->
	<div id="test" style="cursor:pointer">点击查看名言</div>
	<input id="btntest" type="button" value="点击就不可用了" />
	<hr>
	<button type="button" id="btn1">按钮1</button>
	<button type="button" id="btn2">按钮2</button>
	<button type="button" id="btn3">按钮3</button>
	<button type="button" id="btn4">按钮4</button>
</body>
<script src="../js/jquery-3.7.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/*
		 1.确定为哪些元素绑定事件
			获取元素
		 2.绑定什么事件（事件类型）
			第一个参数：事件的类型
		 3.相应事件触发的，执行的操作
			第二个参数：函数
	 * */
	/* 绑定单个事件 */
	$("#test").bind("click", function () {
		console.log("世上无难事，只怕有心人");
	});
	// 原生js绑定事件
	/* document.getElementById("test").onclick = function(){
		console.log("test...");
	} */
	// 直接绑定
	$("#btntest").click(function () {
		// 禁用按钮
		console.log(this);
		$(this).prop("disabled", true);
	});

	/* 绑定多个事件 */
	// 1. 同时为多个事件绑定同一个函数
	$("#btn1").bind("click mouseout", function () {
		console.log("按钮1...");
	});

	// 2. 为元素绑定多个事件，并设置对应的函数
	$("#btn2").bind("click", function () {
		console.log("按钮2被点击了...");
	}).bind("mouseout", function () {
		console.log("按钮2移开了...");
	});

	// 3. 为元素绑定多个事件，并设置对应的函数
	$("#btn3").bind({
		"click": function () {
			console.log("按钮3被点击了...");
		},
		"mouseout": function () {
			console.log("按钮3移开了...");
		}
	});

	// 直接绑定
	$("#btn4").click(function () {
		console.log("按钮4被点击了...");
	}).mouseout(function () {
		console.log("按钮4移开了...");
	});

到了这里，关于jQuery 基础知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！