jQuery介绍
官方网站: https://jquery.com
jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程，例如 JS 原生代码几十行 实现的功
能， jQuery 可能一两行就可以实现，因此得到前端程序猿广泛应用。（现在处在比较边缘的状态）
发展至今，主要有三个大版本 :
1.x: 常用版本 2.x， 3.x: 除非特殊要求，一般用的少
基本使用
cdn导入方式
<head>
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head><body><script type="text/javascript">// jquery代码</script>
</body> 基础语法是 :$(selector).action()
- $:代表jQuery本身
- (selector):选择器，查找HTML元素
- action():对元素的操作
js先要去获取dom元素，再去click，之后给其匿名函数。jquery就简单了，直接将$符号填进来，直接再去点click完事。
代码示例：按钮实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><button type="button" id="btn1">点我1</button><button type="button" id="btn2">点我2</button>
<script type="text/javascript">// js实现var x = document.getElementById("btn1")x.onclick = function () {alert('亲，有什么可以帮助你的?')}// jquery实现$("#btn2").click(function () {alert('亲，有什么可以帮助你的?')
})
</script>
</body>
</html>
选择器
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<h2>在HTML中如何使用jquery</h2>
<button class="btn">点击</button>
<button id="btn">点击1</button>
<script type="text/javascript">// 标签选择器$("h2").click(function() {alert("你好，标签")
})//类选择器$(".btn").click(function() {alert("你好，类")})//id选择器$("#btn").click(function() {alert("你好，id")
})
</script>
</body>
</html>
操作HTML
隐藏和显示元素:
- hide() :隐藏某个元素
- show() :显示某个元素
- toggle() :hide()和show()方法之间切换
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head><body><p>xxxxxxxxxxxx</p><button id="hide">隐藏</button><button id="show">显示</button><button id="toggle">切换</button><script type="text/javascript">$("#hide").click(function(){$("p").hide()})$("#show").click(function(){$("p").show()})$("#toggle").click(function(){$("p").toggle()})</script></body></html> 获取与设置内容 :
- text() 设置或返回所选元素的文本内容 text标签是不会获取到html元素的
- html() 设置或返回所选元素的HTML内容
- val() 设置或返回表单字段的值
下面其实就是先去获取text的内容，然后将内容放到这个demo选择器里面去。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><p id="txt">这是一个<b>段落</b>。</p>
<button type="button" id="btn1">显示文本</button>
<button type="button" id="btn2">显示HTML</button>
<p id="demo"></p><script type="text/javascript">$("#btn1").click(function () {x = $("#txt").text();console.log(x)$("#demo").text(x).css("color","red") //不会解析b标签})$("#btn2").click(function () {x = $("#txt").html(); //获取console.log(x) $("#demo").html(x).css("color","red") //会解析b标签，.html()设置})
</script></body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><h1>欢迎访问运维管理系统</h1>用户名:<input type="text" id="uname" name="username"><br>密码:<input type="text" id="pwd" name="password"><br><button type="button" id="btn">显示输入内容</button><p id="demo"></p><script type="text/javascript">$("#btn").click(function () {x = $("#uname").val();y = $("#pwd").val();$("#demo").text(x + '，' + y).css("color","red")
})
</script></body>
</html> 设置 CSS 样式 :
css() 设置或返回样式属性 ( 键值 )
addClass() 向被选元素添加一个或多个类样式
removeClass() 从被选元素中删除一个或多个类样式
toggleClass() 对被选元素进行添加 / 删除类样式的切换操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文档的标题</title>
<!-- <link href="main.css" type="text/css" rel="stylesheet"/> -->
<script type="text/javascript"
src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body><div id="demo"><p>这是一个段落</p></div><button id="btn">添加样式</button><script type="text/javascript">$("#btn").click(function () {$("#demo p").css("color", "red")// $("#demo p").css({"color":"red","font-size": "30px"})// $("#demo").addClass("cls")// $("#demo").removeClass("cls")})</script></body>
</html>
