第八周学习周记——学习jQuery

最新推荐文章于 2022-06-05 16:05:25 发布

ATM机型号0429

最新推荐文章于 2022-06-05 16:05:25 发布

阅读量560

点赞数

分类专栏：学习文章标签： jquery css html

本文链接：https://blog.csdn.net/jix_Hu/article/details/116175926

版权

学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本周学习了jQuery，了解其作为JavaScript库的轻量级特性。重点学习了jQuery的选择器（元素、ID、类），事件处理以及常见效果（隐藏/显示、动画、内容操作和CSS类管理）。通过实例展示了如何使用jQuery实现元素的隐藏、动画效果以及添加和删除元素。

摘要由CSDN通过智能技术生成

前言

在上一周学习了JavaScript HTML DOM后，这一周将学习jQuery。

一、jQuery简介

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的“写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML元素选取；
HTML元素操作；
CSS操作；
HTML事件函数；
JavaScript特效和动画；
HTML DOM遍历和修改；
AJAX；
Utilities。

二、jQuery语法、选择器和事件

1. jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行某些操作。

基础语法：$(selector).action()
美元符号定义jQuery；
选择符（selector）"查询"和"查找"HTML元素；
jQuery的action()执行对元素的操作。

实例：

$(this).hide() - 隐藏当前元素；
$(“p”).hide() - 隐藏所有p元素；
$(“p.test”).hide() - 隐藏所有class=“test"的p元素；
$(”#test").hide() - 隐藏id="test"的元素。

2. jQuery选择器

jQuery选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML元素。它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器。
jQuery中所有选择器都以美元符号开头：$()。

1. 元素选择器

jQuery元素选择器基于元素名选取元素。
在页面中选取所有p元素：$(“p”)

代码：（用户点击按钮后，所有p元素都隐藏）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>

运行结果：
元素选择器
点击后

2. #id选择器

jQuery #id选择器通过HTML元素的id属性选取指定的元素。
页面中元素的id应该是唯一的，所以您要在页面中选取唯一的元素需要通过#id选择器。
通过id选取元素语法如下：$("#test")

代码：（当用户点击按钮后，有id="test"属性的元素将被隐藏）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

运行结果：
#id选择器
点击后

3. .class选择器

jQuery类选择器可以通过指定的class查找元素。
语法如下：$(".test")

代码：（用户点击按钮后所有带有class="test"属性的元素都隐藏）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

运行结果：
.class选择器
点击后
更多实例：

语法	描述
$("*")	选取所有元素
$(this)	选取当前HTML元素
$(“p.intro”)	选取 lass为intro的p元素
$(“p:first”)	选取第一个p元素
$(“ul li:first”)	选取第一个ul元素的第一个li元素
$(“ul li:first-child”)	选取每个ul元素的第一个li元素

3. jQuery事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。

页面中指定一个点击事件：
$(“p”).click();
下一步是定义什么时间触发事件，可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

三、jQuery常用效果

1. 隐藏和显示

代码：

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>

运行结果：
隐藏和显示

2. 动画

代码：

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>

运行结果：

动画后

3. 获取内容和属性

代码：

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

运行结果：
获取内容和属性
显示文本
显示HTML

4. 获取并设置CSS类

代码：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>

</body>

运行结果：
获取并设置CSS类
添加class后

5. 添加和删除元素

代码：（添加元素）

<script>
$(document).ready(function(){
	$("#btn1").click(function(){
		$("p").prepend("<b>在开头追加文本</b>。 ");
	});
	$("#btn2").click(function(){
		$("ol").prepend("<li>在开头添加列表项</li>");
	});
});
</script>
</head>
<body>
	
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
	
</body>

运行结果：
添加元素
添加文本
添加列表项

代码：（删除元素）

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除div元素</button>

</body>