jQuery入门基础

最新推荐文章于 2022-05-02 06:27:21 发布

Woo_home

最新推荐文章于 2022-05-02 06:27:21 发布

阅读量178

点赞数

分类专栏： # Ajax and JQuery 文章标签： jQuery JavaScript

本文链接：https://blog.csdn.net/Woo_home/article/details/91345425

版权

Ajax and JQuery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

jQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

jQuery的特点

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

jQuery下载

官网下载地址 https://jquery.com/download/ ，选择对应的版本下载即可

jQuery的基本语法

表单选择器：

：input 找出所有的输入项，不单单找出input textarea select
：text 找出 type 类型为 text
：password

基本过滤器

：even
：odd
：gt
：lt
：eq
：first
：last

表单对象属性

：selected
：checked

$( function )：文档加载完成事件
css（）：修改css样式
prop（）：修改属性 / 获取属性
html（）：修改innerHTML
.
append：给自己添加节点
appendTo：添加到别的地方
prepend：在最前面添加子节点
after：在后面添加一个节点
empty：清空多有子节点

jQuery的写法

一般的写法

<script type="text/javascript" src="导入jQuery的路径">
		/*文档加载完成的时间*/
		$(document).ready(function () { //这里的function是一个匿名函数
			alert("Hello World！");
		});
</script>

最简单的写法

<script>
		$(function () {
			alert("Hello World");
		})
</script>

JS与jQuery修改div中的文本内容

<!DOCTYPE html>
<html>
<head>
	<title>jquery</title>
	<script src="js/jquery-3.4.1.js"></script>
</head>
<body>

	
	<input type="button" value="普通JS修改div内容" onclick="changeJS()">
	<input type="button" value="jQuery修改div内容" id="btn2">
	<div id="div1">
		这里的内容一会儿要被JS代码修改
	</div>

	<script type="text/javascript">

		/*普通的JS方式修改div中的文本内容*/
		function changeJS() {
			var div = document.getElementById('div1');
			div.innerHTML = "JS成功被修改了"
		}

		/*jQuery方式修改div中的文本内容*/
		$(function() {
			//给按钮绑定事件
			$("#btn2").click(function() {
				//找到div
				$("#div1").html("jQuery成功修改了div的内容");
			});
		});
	</script>
</body>
</html>

在这里插入图片描述
JS与jQuery对象转换

<input type="button" value="jQuery修改div内容" id="btn2">
	<div id="div1">
		这里的内容一会儿要被JS代码修改
	</div>
<script type="text/javascript">
		$(function () {
			//给按钮绑定事件
			$("#btn2").click(function () {
				//找到div1
				$("#div1").html("jQuery方式成功修改了内容");
				//将jQuery对象转为JS对象来调用
				var $div = $("#div1");
				var jsDiv = $div.get(0);
				var jsDiv = $div[0];
				jsDiv.innerHTML = "jQuery成功转成JS！";
			});
		});
</script>

在这里插入图片描述

Woo_home

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门基础

jQuery是什么？ jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动...
复制链接

扫一扫

专栏目录