系列文章目录
Web前端 学习知识点总结（一）HTML基本标签.
Web前端 学习知识点总结（二）之Form和Css选择器.
Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结（四）之display 和 float.
Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白.
Web前端 学习知识点总结（六）定位position.
Web前端 学习知识点总结（七）Css3动画animation.
Web前端 学习知识点总结（八）JavaScript的常用基础.
Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础.
Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器.
Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作.
Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式.
Web前端 学习知识点总结（十三）学生管理系统案例.
文章目录
- 系列文章目录
- 前言
- 一、jQuery介绍
- 二、jQuery基础
- 2.1语法格式
- 2.2获取文本
- 2.3获取样式
- 2.4获取属性
- 2.4 密码可见案例
- 2.5 事件
- 2.5 选择器
- 2.5 选择器案例 隔行变色
前言
在学习了JS的基础以后，多练习简单的案例可以帮助我们更好的理解JS语言的使用方式，以及相应功能的实现。有了JS的基础，下面就可以进行jQuery的学习，JQ是一个轻量库，jQuery已经有了许多强大的本身的函数功能，可以帮助我们解决一些基本的，简单的问题，与JS相结合可以发挥更大的作用。
一、jQuery介绍
- 1.JavaScript的一个封装库。
- 2.更方便的使用html" title=js>js、解决兼容性问题。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画等等。
- 3.jQuery 点击下载
一般选择前两个一个是解压缩版本，一个是不解压缩的版本。
对于JQ -。。。.html" title=js>js和JQ -。。。min…html" title=js>js的区别
前者，是供学习开发使用的。后者是生产版本，运用了一些压缩的技术，用于发布使用的。
二、jQuery基础
2.1语法格式
jq的引用一般在我们使用的script的开头
上面是jq的引用通过src引入版本号，剩下的我们自己的函数写在引用的函数下面。
在script中引用的格式为：
$(选择器).函数
2.2获取文本
用对比的方式来理解， JQ和JS的区别。
代码如下（示例）：
当()内部没有数值的时候，用于获取内部全部数据，包括标签。
$("#选择器").html()
$("#选择器").text() 只获取文本
当有值的时候，则进行替换设置。
$("#选择器").html(“Monday”)
html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="mondey"><span>星期一</span></p>
<p>星期二</p>
<p>星期三</p>
<p>星期四</p>
<input type="text" name="username" id="username" value="zhangsan" />
</body>
</html>
<script src="html" title=js>js/jquery-1.12.4.html" title=js>js">html" title=javascript>javascript"></script>
<script>html" title=javascript>javascript">
// html" title=js>js
//获取
var mon = document.getElementById("mondey")
console.log(mon.innerHTML)
console.log(mon.innerText)
console.log(document.getElementById("username").value)
// jQuery
//无参数是获取,有参数是设置
//获取数据
console.log($("#mondey").html())
console.log($("#mondey").text())
console.log($("#username").val())
// 设置
console.log($("#mondey").html("Monday"))
console.log($("#username").val("lisi"))
</script>
2.3获取样式
获取样式
console.log($(“选择器”).html" title=css>css(“color”));
替换样式有三种方式，见下列代码。
代码如下（示例）：
html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="mondey"><span>星期一</span></p>
<p>星期二</p>
<p>星期三</p>
<p>星期四</p>
<input type="text" name="username" id="username" value="zhangsan" />
</body>
</html>
<script src="html" title=js>js/jquery-1.12.4.html" title=js>js">html" title=javascript>javascript"></script>
<script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
// 设置
//方式一
// $("#mondey").html" title=css>css("color","red")
//方式二
// $("#mondey").html" title=css>css("color","red").html" title=css>css("font-size","30px")
//方式三
//多个样式
$("#mondey").html" title=css>css(
{
"color":"red",
"font-size":"32px"
}
);
//获取样式
console.log($("#mondey").html" title=css>css("color"));
</script>
2.4获取属性
prop 和 attr
prop的用于check等选项的赋值操作,而attr 的使用的常规的赋值操作。
$(“选择器”).attr(“type”)
$(“选择器”).attr(“type”,“password”);
2.4 密码可见案例
html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="password" name="pwd" id="pwd" value="" />
<input type="button" name="" id="btn" value="可见" onclick="change()" />
</body>
</html>
<script src="html" title=js>js/jquery-1.12.4.html" title=js>js">html" title=javascript>javascript"></script>
<script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
function change(){
if($("#pwd").attr("type")=="password"){
$("#pwd").attr("type","text");
$("#btn").attr("value","不可见");
}else{
$("#pwd").attr("type","password");
$("#btn").attr("value","可见");
}
}
</script>
2.5 事件
$(“选择器”).click(function(){
alert(888);
})
html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="all" id="btn" value="按钮" />
</body>
</html>
<script src="html" title=js>js/jquery-1.12.4.html" title=js>js">html" title=javascript>javascript"></script>
<script src="html" title=js>js/jquery-3.5.1.html" title=js>js">html" title=javascript>javascript"></script>
<script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
// function doClick(){
// alert("111")
// }
// 等于οnclick=doclick()
//方法一
// document.getElementById("btn").οnclick=doClick
// 方法二
//document.getElementById("btn").οnclick=function(){
// alert("111")
// }
//jQuery
//$("#btn").click(doClick)
$("#btn").click(function(){
alert(888);
})
</script>
2.5 选择器
JQ的选择器很重要，是CSS的基础。
CSS基本选择器和高级选择器
在此基础上，补充一些过滤选择器
①:last 选中最后一个
②:first 选中第一个
③:eq(index) equal 判断是否与index相等
④:It(index) little than 判断是否比index小
⑤:gt(index) great than 判断是否比index大
⑥:even() 选中奇数
⑦:odd() 选中偶数
⑧(了解):header 全部选h标签
⑨：focus JQ特有的过滤选择器。
可见性选择器
⑩:hidden可以显示display=none的值
2.5 选择器案例 隔行变色
使用jquery的过滤选择器实现。
html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/html" title=css>css">html" title=css>css">
td{
color: white;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr>
<td><a href="#">丹幕妮通勤波点印花毛衣</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="#">预售太平洋女装连衣裙</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="#">丹幕妮通勤红色小外套</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="#">曼巴森新款套头</a></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<script src="html" title=js>js/jquery-1.12.4.html" title=js>js">html" title=javascript>javascript"></script>
<script src="html" title=js>js/jquery-3.5.1.html" title=js>js" type="text/html" title=javascript>javascript" charset="utf-8">html" title=javascript>javascript"></script>
<script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
$("*").html" title=css>css("color","gray")
$("tr").html" title=css>css("height","50px");
$("td").html" title=css>css({
"width":"240px",
"text-align":"center",
});
$("tr:first-child td").html" title=css>css("color","white");
$("tr:odd").html" title=css>css("background-color","#EFF7D1");
$("tr:even").html" title=css>css("background-color","#F7E195");
$("tr:nth-of-type(1)").html" title=css>css("background","#0000FF")
</script>
效果图
