jQuery入门教程

最新推荐文章于 2024-05-16 22:17:54 发布

Love_My_Baby

最新推荐文章于 2024-05-16 22:17:54 发布

阅读量464

点赞数

本文链接：https://blog.csdn.net/Love_My_Baby/article/details/89344261

版权

1.安装jQuery
i.从jquery.com中下载jQuery库
ii.从CDN中下载下载jQuery（此种方法只能在连网情况下才能使用）
jQuery库也是一个JavaScript文件
2.如何在HTML中引入jQuery库

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

3.jQuery的语法规则
最为主要的三种选择器：1.标签选择器 2.ID选择器 3.class选择器
01.使用jQuery库时，要先将文档就绪。即：第一种方法$(function(){//在此处开始写jQuery代码});第二种方法：$(document).ready(function(){//在此处开始写jQuery代码});
在此处，个人推荐使用第一种方法
02.如果提示为$ is not definded,这种情况下请及时检查是否引入jQuery库
03. $符号冲突
在使用$符号时，先定义一个变量var jq = $.noConflict();,引入noConflict()方法，这样就可以解决$符号冲突的问题了。
如何解决$符号冲突？

解决方案如下：

<script type="text/javascript">
			var jq = $.noConflict();
			jq(function(){
				jq("button").click(function(){
					jq("p").text("jquery仍然在工作");
				});
			})
	</script>
	<button type="button">请点击</button>
	<p>这是一个段落</p>

jQuery事件：
**在这里主要记鼠标事件：**click，dblclick，mouseenter，mouseleave
键盘事件：keypress，keydown，keyup，hover
表单事件：submit，change，focus，blur
文档或窗口事件：load，resize，scroll，unload
jQuery事件语法方法：

$("选择器").事件方法（“function（）{}”）；

在掌握这些后
请参考菜鸟教程将jQuery遍历，jQuery HTML，jQuery效果等一系列与之相关的代码练习即可
在此简单介绍一下
1.jQuery遍历
由子元素向父元素遍历极为重要的三个方法：
parent(),parents(),parentsUntil()
由父元素向子元素遍历极为重要的两个方法：
children(),find()
同胞元素之间相互遍历极为重要的七个方法：
siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
jquery过滤
五个过滤方法：
first(),last(),eq(),not(),filter()
not()与filter()方法相反
2.jQuery效果
jquery隐藏的方法：hide();
jquery显示的方法：show();
jquery中切换隐藏与显示的方法：toggle();
jquery向下滑的方法：slideDown();
jquery向上滑的方法：slideUp();
jquery中自主创建动画的方法：animate();
jquery中切换向上或向下滑的方法：slidetoggle();
jquery中停止动画的方法：stop();
jquery链的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					$("#p1").css("color","red");
				});
			});
		</script>
	</head>
	<body>
		<p id="#p1">这是一个段落</p>
		<button type="button">点我</button>
	</body>
</html>

3.jQuery中添加元素
append()：在子元素末尾添加子元素的同胞元素
prepend(): 在子元素开头添加子元素的同胞元素
after()和before(): 在父元素的开头或末尾添加父元素的同胞元素
4.jQuery中删除元素
remove(): 删除被选元素及其子元素
empty(): 删除被选元素的子元素

Love_My_Baby

关注

0
点赞
踩
0

收藏

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

1.安装jQueryi.从jquery.com中下载jQuery库ii.从CDN中下载下载jQuery（此种方法只能在连网情况下才能使用）jQuery库也是一个JavaScript文件2.如何在HTML中引入jQuery库<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script&...
复制链接

扫一扫