【web开发】4.JavaScript与jQuery
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 一、JavaScript与jQuery
- 二、JavaScript常用的基本功能
-
- 1.插入位置
- 2.注释
- 3.变量
- 4.数组
- 5.滚动字符
- 三、jQuery常用的基本功能
-
- 1.引入jQuery
- 2.寻找标签
- 3.val、text、append的使用举例
- 4.表格删除案例
- 5.绑定事件案例
- 6.菜单切换案例
一、JavaScript与jQuery
JavaScript（简称JS）是一种广泛应用的编程语言，主要用于网页开发。它是一种多才多艺、动态性强的语言，允许开发人员为网页应用添加交互性、操作文档对象模型（DOM）并创建丰富的用户体验
jQuery是一个流行的JavaScript库，简化了客户端Web开发。它提供了各种功能和工具，用于与HTML文档交互、处理事件、发起AJAX请求和创建动画。
二、JavaScript常用的基本功能
1.插入位置
在head体中
<script type="text/javascript">
//编写位置1
script>
在body体中
<script type="text/javascript">
function myFunc() {
//编写位置2
// alert("你好呀")
confirm("是否要继续")
}
script>
2.注释
总快捷键：ctrl+/
在不同的文件类型中，注释也各有不同。
/* CSS */
//JS
/* JS */
3.变量
<script type="text/javascript">
var name1 ="aa";
console.log(name);
// 声明
var name2="中国联通";
var name3=str("中国联通");
var v1 =name.length;
var v2 =name[0]; //无-1，-2说法 ==name.charAt(3)
var v3 =name.trim() //去空白得到新的字符串
var v4 =name.substring(1,2)//切片 前取后不取
script>
4.数组
<script type="text/javascript">
var v1 =[1,2,3,4];
var v2 =Array([1,2,3,4]);
<!-- 操作-->
v1[1] =[]
v1.pash =("最重要") //尾部追加
v1.unshift("最重要") //前面添加
v1.splice(1,0,"中国")// v1.splice(索引，0，元素)把“中国”放在第一个索引的位置
v1.pop() //尾部删除
v1.shift() //头部删除
v1.splice(2,1) //splice(索引位置，1) 索引为2的元素删除
//循环
for (var idx in v1){
//idx =0/1/2/3/ data =v1[idx]
}
for (var i =0;i <v1.length;i++){
}
//存在break,countinue
script>
5.滚动字符
<body>
<span id="txt">欢迎来CSDN学习span>
<script type="text/javascript">
function show()
{
<!--1.去HTML中找到某个标签并获取他的内容 DOM-->
var tag=document.getElementById("txt");
var dataString=tag.innerText;
<!-- 2.动态起来 把文本中的第一个字符放字符串的最后面-->
var firstChar =dataString[0];
var otherString =dataString.substring(1,dataString.length);
var newText =otherString + firstChar;
<!--3.在HTML中更新内容-->
tag.innerText =newText;
}
<!-- 定时器，每一秒执行一次show函数-->
setInterval(show,1000);
script>
body>
三、jQuery常用的基本功能
1.引入jQuery
法一：官网提供了CDN 的支持，直接使用官网 提供的链接即可。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
法二：去官网下载jQuery的js文件和Bootstrap的压缩包。
在根目录下创建static目录，并在static目录下分别创建js\css\plugins\img目录。
将jQuery的js文件放到js目录下，将压缩包里面的文件放到plugins目录下。如下图：
<script src="static/js/jquery-3.7.0.min.js">script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js">script>
注意：BootStrap 依赖JavaScript的类库， （jquery须在bootstrap的前方）
2.寻找标签
直接寻找标签
Id选择(id=”txt”) ： $(“#txt”)
样式选择（class=”c1”）： $(“.c1”)
标签选择器(h1,div) ： $（“h1”）
层级选择器 ： $(“.c1 .c2 a”)
多选择器 ： $(“#txt，#c1,li”)
属性选择器 ： $(“input[name=“n1”]”)
间接寻找标签
兄弟关系中
找到上一个 ： $(“#txt”).prev()
找到下一个 ： $(“#txt”).next()
找到下下一个 ： $(“#txt”).next().next()
所有兄弟 ： $(“#txt”).siblings()
父子关系中
$(“#txt”).parent()
$(“#txt”).children()
$(“#txt”).children(“.p10”) //儿子中找寻class=p10
3.val、text、append的使用举例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()"/>
<ul id="view">
ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
<script>
function getInfo(){
//1.获取
var username = $("#txtUser").val();
var email = $("#txtEmail").val();
var dataString =username +"-" +email;
// 2.创建且写入
var newli = $("" ).text(dataString);
//3.把创建的li标签添加到ul里面
$("#view").append(newli);
}
script>
body>
html>
4.表格删除案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1">
<thead>
<tr>
<th>IDth>
<th>姓名th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>aatd>
<td>
<input type="button" value="删除" class="delete"/>
td>
tr>
<tr>
<td>2td>
<td>bbtd>
<td>
<input type="button" value="删除" class="delete"/>
td>
tr>
<tr>
<td>3td>
<td>cctd>
<td>
<input type="button" value="删除" class="delete"/>
td>
tr>
tbody>
table>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<script>
$(function () {
//找到所有class=delete 的标签 绑定事件
$(".delete").click(function () {
($(this)).parent().parent().remove();
});
})
script>
body>
html>
5.绑定事件案例
以remove为例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<ul>
<li>百度li>
<li>谷歌li>
<li>搜狐li>
<li>必应li>
ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<script>
$(function(){
$("li").click(function () {
var text = $(this).text();
var text = $(this).remove();//鼠标点击后去除
})
}) //当页面框架加载完成，自动执行
script>
body>
html>
6.菜单切换案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.menus{
width:200px;
height:800px;
border:1px solid red;
}
.menus .header{
background:gold;
padding:10px 5px;
border:1px solid gray;
cursor: pointer;
}
.menus .content a{
display: block;
padding:5px 5px ;
border:1px solid gray;
}
.hide{
display: none;
}
style>
head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">南div>
<div class="content hide">
<a >湖南a>
<a >云南a>
<a >河南a>
<a >西南a>
div>
div>
<div class="item">
<div class="header" onclick="clickMe(this);">北div>
<div class="content hide">
<a >湖北a>
<a >云北a>
<a >河北a>
<a >西北a>
div>
div>
div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
<script>
function clickMe(self) {
//展示自己下面的功能
$(self).next().removeClass("hide");
//找父亲，父亲的所有兄弟，再去每个兄弟的子孙中寻找class=content 添加hide样式
$(self).parent().siblings().find(".content").addClass("hide");
if(hasHide){
$(self).next().removeClass("hide");
}else{
$(self).next().addClass("hide");
}
}
script>
body>
html>