菜单 搜索
首页 前端知识 pythonWeb～叁～JavaScript DOM BOM jQuery

pythonWeb～叁～JavaScript DOM BOM jQuery

2025-03-03 13:03:53 前端知识 前端哥 291 461 我要收藏

前言

JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。
DOM和BOM，相当于编程语言内置的模块。例如：Python中的re、random、time、json模块等。
jQuery，相当于是编程语言的第三方模块。例如：requests、openpyxl

前端三大组件：

  • HTML，裸体。
  • CSS，好看的衣服。
  • JavaScript，动态。

1.JavaScript

JavaScript是一门编程语言。
JavaScript的意义是：让程序实现一些动态的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
    <div class="menus">
        <div class="header" onclick="myFunc()">大标题</div>
        <div class="item">内容</div>
    </div>
 
    <script type="text/javascript">
        function myFunc() {
            //alert("你好呀");
            confirm("是否要继续？")
        }
    </script>
</body>
</html>
复制

1.1 代码位置

在这里插入图片描述

JS代码的存在形式：

  • 当前HTML中。

    		<script type="text/javascript">
    			// 编写JavaScript代码
    		</script>
    复制

  • 在其他js文件中，导入使用。
    在这里插入图片描述

1.2 注释

  • HTML的注释

    		<!-- 注释内容 -->
    复制

  • CSS的注释，style代码块

    		/* 注释内容 */
    复制

  • JavaScript的注释，script代码块

    		// 注释内容
    		 
    		/* 注释内容 */
    复制

1.3 变量

  • Python，编程语言。
 name = "高倩"
 print(name)
复制
  • JavaScript，编程语言。
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      <script type="text/javascript">
          var name = "高倩";
          
          console.log(name);
      </script>
  </body>
  </html>
复制

1.4 字符串类型

// 声明
var name = "高倩";
var name = String("高倩");
复制
// 常见功能
var name = "中国联通";
 
var v1 = name.length; 
var v2 = name[0];   // name.charAt(3)
var v3 = name.trim();
var v4 = name.substring(0,2); // 前取后不取
复制

案例：跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<span id="txt">欢迎中国联通领导高倩莅临指导</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;
    }
 
    // JavaScript中的定时器，如：每1s执行一次show函数。
    setInterval(show, 1000);
</script>
</body>
</html>
复制

1.5 数组

// 定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);
复制
// 操作
 
var v1 = [11,22,33,44];
 
v1[1]
v1[0] = "高倩";
 
v1.push("联通");        // 尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");     // 尾部追加 ["联通", 11,22,33,44]
v1.splice(索引位置,0,元素);
v1.splice(1,0,"中国");  // 尾部追加 [11,"中国",22,33,44]
 
v1.pop()     //尾部删除
v1.shift()   //头部删除
v1.splice(索引位置,1)
v1.splice(2,1);  // 索引为2的元素删除 [11,22,44];
复制
var v1 = [11,22,33,44];
for(var idx in v1){
    // idx=0/1/2/3/    data=v1[idx]
}
复制
var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){
    // i=0/1/2/3   data=v1[idx]
}
复制

注意：break和continue

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="city">
        <!-- <li>北京</li> -->
    </ul>
 
    <script type="text/javascript">
 
        // 发送网络请求，获取数据
        var cityList = ["北京","上海","深圳"];
        for(var idx in cityList){
            var text = cityList[idx];
 
            // 创建 <li></li>
            var tag = document.createElement("li");
            // 在li标签中写入内容
            tag.innerText = text;
 
            // 添加到id=city那个标签的里面。DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>
复制

1.6 对象（字典）

info = {
    "name":"高倩",
    "age":18
}
 
// 或者可以不加双引号
info = {
    name:"高倩",
    age:18
}
复制
info.age
info.name = "郭智"
 
info["age"]
info["name"] = "郭智"
 
delete info["age"]
复制
info = {
    name:"高倩",
    age:18
}
 // 循环
for(var key in info){
    // key=name/age      
    // data=info[key]
}
复制

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">
 
    </tbody>
</table>
 
<script type="text/javascript">
    var info = {id: 1, name: "郭智", age: 19};
 
    var tr = document.createElement("tr");
    for (var key in info) {
        var text = info[key];
        var td = document.createElement('td');
        td.innerText = text;
        tr.appendChild(td);
    }
    var bodyTag = document.getElementById("body");
    bodyTag.appendChild(tr);
 
</script>
</body>
</html>
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">
 
    </tbody>
</table>
 
<script type="text/javascript">
 
    // 网络请求获取，写入到页面上。
    var dataList = [
        {id: 1, name: "郭智1", age: 19},
        {id: 2, name: "郭智2", age: 19},
        {id: 3, name: "郭智3", age: 19},
        {id: 4, name: "郭智4", age: 19},
        {id: 5, name: "郭智5", age: 19},
    ];
    for (var idx in dataList) {
        var info = dataList[idx];
 
        var tr = document.createElement("tr");
        for (var key in info) {
            var text = info[key];
            var td = document.createElement('td');
            td.innerText = text;
            tr.appendChild(td);
        }
 
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr);
    }
 
</script>
</body>
</html>
复制

1.7 条件语句

if ( 条件 )  {
    
}else{
    
}
 
if (1==1){
    
}else{
    
}
复制
if ( 条件 ){
    
}else if ( 条件 ){
    
}else if ( 条件 ){
    
}else{
    
}
复制

1.8 函数

def func():
    函数的内容...
    
func()
复制
function func(){
    ...
}
    
func()
复制

2.DOM

DOM，就是一个模块，模块可以对HTML页面中的标签进行操作。

// 根据ID获取标签
var tag = document.getElementById("xx");
 
// 获取标签中的文本
tag.innerText
 
// 修改标签中的文本
tag.innerText = "哈哈哈哈哈";
复制
// 创建标签 <div>哈哈哈哈哈</div>
var tag = document.createElement("div");
 
// 标签写内容
tag.innerText = "哈哈哈哈哈";
复制
<ul id="city">
	<li>北京</li>
</ul>
 
<script type="text/javascript">
	var tag = document.getElementById("city");
    
    // <li>北京</li>
	var newTag = document.createElement("li");
    newTag.innerText = "北京";
    
    tag.appendChild(newTag);
</script>
复制

2.1 事件的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
 
</ul>
 
<script type="text/javascript">
    function addCityInfo() {
 
        var newTag = document.createElement("li");
        newTag.innerText = "联通";
 
        var parentTag = document.getElementById("city");
        parentTag.appendChild(newTag);
    }
 
</script>
</body>
</html>
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
 
</ul>
 
<script type="text/javascript">
    function addCityInfo() {
        // 1.找到输入标签
        var txtTag = document.getElementById("txtUser");
 
        // 2.获取input框中用户输入的内容
        var newString = txtTag.value;
 
        // 判断用户输入是否为空，只有不为空才能继续。
        if (newString.length > 0) {
            // 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容
            var newTag = document.createElement("li");
            newTag.innerText = newString;
 
            // 4.标签添加到ul中
            var parentTag = document.getElementById("city");
            parentTag.appendChild(newTag);
 
            // 3.将input框内容清空
            txtTag.value = "";
        }else{
            alert("输入不能为空");
        }
 
    }
 
</script>
</body>
</html>
复制

注意：DOM中还有很多操作。

DOM可以实现很多功能，但是比较繁琐。
页面上的效果：jQuery来实现 / vue.js / react.js
复制

3.知识点的回顾

  • 编码相关

    		文件存储时，使用某种编码，打开时就需要使用相同的编码，否则就会乱码。
    		字符底层存储时本质上都是0101010101010101。
    		字符和二进制的对应关系（编码）：
    			- ascii编码，256中对应关系。
    			- gb2312，gbk，中文和亚洲的一些国家【中文是2个字节】
    			- unicode，ucs2/ucs4，包括现在发现的所有文明。
    			- utf-8编码，【中文是用几个字节？3字节】
    			
    		Python默认解释器编码(utf-8)
    			python.exe  代码文件
    			
    			如果你将代码文件保存成了gbk编码，将Python模式解释器编码修改成gbk
    		 
    复制
    		data = "中"
    		res = data.encode('utf-8')
    		print(res)  # b'\xe4\xb8\xad'
    		 
    		 
    		data = "国"
    		res = data.encode('gbk')
    		print(res)  # b'\xb9\xfa'
    复制

  • 计算机中的单位

    		位/字节/KB/M/G/T...
    		 
    		办流量/硬盘/内存
    复制

  • 字符串格式化（三种）

    		v1 = "我是{}，今年{}岁".format("啊啊啊",77)   # 推荐
    		 
    		v2 = "我是%s，今年%d岁" %("哦哦哦",77, ) 
    		 
    		name = "大大大"
    		age = 19
    		v3 = f"我是{name}，今年{age}岁"
    复制

  • 数据类型

    		常见数据类型：int、bool、str、list、tuple、dict、set、float、None
    			- 哪些转化弄成布尔值为False：空、None、0
    			- 可变和不可变划分，可变的有哪些：list、set、dict
    			- 可哈希和不可哈希，不可哈希的有哪些：list、set、dict
    			- 字典的键/集合的元素，必须是可哈希的类型（list、set、dict不能做字典的键和集合元素）
    			
    		主要数据类型：
    			- str
    				- 独有功能：upper/lower/startswith/split/strip/join
    				  注意：str不可变，不会对原字符串进行修改，新的内容。
    				- 公共功能：len/索引/切片/for循环/判断是否包含
    			- list
    				- 独有功能：append、insert、remove、pop...
    				  注意：list可变，功能很多都是对原数据操作。
    			    - 公共功能：len/索引/切片/for循环/判断是否包含
    			- dict
    				- 独有功能：get/keys/items/values
    				- 公共功能：len/索引for循环/判断是否包含（判断键效率很高）
    复制

  • 运算符

    		基本运算符：加减乘除、...
    		 
    		 
    		一般：
    			1>2 and 3<10
    		特殊的逻辑运算(整体结果取决于谁？)
    			v1 = 99 and 88    # 88
    			v2 = [] or 10	  # 10
    			v3 = "联通" or []  # "联通"
    复制

  • 推导式（简化生成数据）

    		data = []
    		for i in range(10):
    		    data.append(i)
    		    
    		v1 = [ i for i in range(10) ]
    		v2 = [ i for i in range(10) if i<5 ]   # [0,1,2,3,4]
    复制

  • 函数编程

    		函数的基础知识
    			- 定义
    			- 参数，概念：位置传参/关键字传参/参数默认值/动态参数*args,**kwargs
    			- 返回值
    				- 函数中一旦遇到return就立即返回，后续代码不再执行。
    				- 函数么有返回值默认返回None
    		函数的进阶：
    			- Python中是为函数为作用域。
    			- 全局变量和局部变量，规范：全局变量（大写）、局部变量（小写）。
    			- 在局部变量中可以使用global关键字，global的作用？引用全局的那个变量（不是在局部新建）。
    			
    		内置函数（python内部提供的函数）：
    			- bin/hex/odc/max/min/divmod/sorted/open文件操作
    			
    			
    		文件操作：
    			- 基本操作：打开、操作、关闭，为了防止忘记关闭文件，可以怎么做？with
    			- 打开文件时有模式：
    				- r/rb，读        【文件不存在，报错】       【文件夹不存在，报错】
    				- w/wb，写（清空） 【文件不存在，自动新建】    【文件夹不存在，报错】
    				- a/ab，追加      【文件不存在，自动新建】    【文件夹不存在，报错】
    			  注意：os.makedirs/os.path.exsits、是否存在，不存在新建目录。
    复制

  • 模块

    		模块的分类：
    			- 自定义模块：
    				- os.path，导入模块时python内部都回去那个目录找。
    				- 自己写py文件时，不要与python内置模块同名。
    				- import/from xx import xx
    			- 内置模块：time/datetime/json/re/random/os..
    			- 第三方模块：requests、openpyxl、python-docx、flask、bs4
    			
    		查看当前目录下所有的文件：os.listdir / os.walk
    		关于时间模块：时间戳 / datetime格式 / 字符串 ，三种时间格式可以互相转化。
    		关于JSON模块：
    			- JSON本质是字符串，有一些自己格式的要求，例如：无元组/无单引号。
    			- json.dumps序列化时，只能序列化Python常用数据类型：
    		            +-------------------+---------------+
    		            | Python            | JSON          |
    		            +===================+===============+
    		            | dict              | object        |
    		            +-------------------+---------------+
    		            | list, tuple       | array         |
    		            +-------------------+---------------+
    		            | str               | string        |
    		            +-------------------+---------------+
    		            | int, float        | number        |
    		            +-------------------+---------------+
    		            | True              | true          |
    		            +-------------------+---------------+
    		            | False             | false         |
    		            +-------------------+---------------+
    		            | None              | null          |
    		            +-------------------+---------------+
    		关于re正则模块：
    			- 正则：\d  \w 
    			- 贪婪匹配和非贪婪匹配（默认），想让他不贪婪个数后面 ? 。
    			- re.search/re.match/re.findall
    		 
    		第三方模块，都有哪些方式可以让我们安装第三方模块。
    			- pip管理工具
    			- 源码
    			- wheel包
    复制

  • 面向对象

    		目标：不是为了用面向对编程（推荐使用函数编程，面向对象要看的懂）。
    		 
    		面向对象三大特性：封装、继承、多态。
    复制

  • 前端开发

    		- 前端知识点分为三部分：
    			- HTML，标签具有模式特点。
    			- CSS，修改标签的特点。
    			- JavaScript，动态。
    			
    		- HTML标签
    			- div/span/a/img/input/form/table/ul...
    			- 块级和行内标签，例如：div span 默认谁是块级标签？div
    			  注意：css样式，发现行内标签设置高端、宽度、内边距、外边距都是无效。
    			- form表单 + input/select/textarea 数据框
    				- action，提交地址
    				- method，提交方式
    				- form标签中有一个submit
    				- 内部标签都需要设置name属性
    				
    		- CSS样式
    			- 局部一定会用到的样式：div + float（脱离文档流，clear:both; clearfix）
    			- 高度和宽度
    			- 边距
    				- 内边距，padding
    				- 外边距，margin
    			- 字体大小/颜色
    			- 边框
    			- 背景颜色
    			- hover，鼠标放上去就会触发的CSS样式。
    复制

4. jQuery

jQuery是一个JavaScript第三方模块（第三方类库）。

  • 基于jQuery，自己开发一个功能。
  • 现成的工具 依赖jQuery，例如：BootStrap动态效果。

4.1 快速上手

  • 下载jQuery

    		https://jquery.com/
    复制

  • 应用jQuery

  		• <!DOCTYPE html>
    		<html lang="en">
    		<head>
    		    <meta charset="UTF-8">
    		    <title>Title</title>
    		</head>
    		<body>
    		 
    		<h1 id="txt">中国联通</h1>
    		 
    		 
    		<script src="static/jquery-3.6.0.min.js"></script>
    		<script type="text/javascript">
    		    // 利用jQuery中的功能实现某些效果
    		    
    		    $("#txt").text("广西移动");
    		 
    		</script>
    		 
    		</body>
    		</html>
    复制

4.2 寻找标签（直接寻找）

  • ID选择器

    		<h1 id="txt">中国联通</h1>
    		<h1>中国联通</h1>
    		<h1>中国联通</h1>
    复制
    		$("#txt")
    复制

  • 样式选择器

    		<h1 class="c1">中国联通1</h1>
    		<h1 class="c1">中国联通2</h1>
    		<h1 class="c2">中国联通3</h1>
    复制
    		$(".c1")
    复制

  • 标签选择器

    		<h1 class="c1">中国联通1</h1>
    		<div class="c1">中国联通2</h1>
    		<h1 class="c2">中国联通3</h1>
    复制
    		$("h1")
    复制

  • 层级选择器

    		<h1 class="c1">中国联通1</h1>
    		<h1 class="c1">
    			<div class="c2">
    		        <span></span>
    		        <a></a>
    		    </div>
    		</h1>
    		<h1 class="c2">中国联通3</h1>
    复制
    		$(".c1 .c2 a")
    复制

  • 多选择器

    		<h1 class="c1">中国联通1</h1>
    		<h1 class="c1">
    			<div class="c3">
    		        <span></span>
    		        <a></a>
    		    </div>
    		</h1>
    		<h1 class="c2">中国联通3</h1>
    		<ul>
    		    <li>xx</li>
    		    <li>xx</li>
    		</ul>
    复制
    		$("#c3,#c2,li")
    复制

  • 属性选择器

    		<input type='text' name="n1" />
    		<input type='text' name="n1" />
    		<input type='text' name="n2" />
    复制
    		$("input[name='n1']")
    		 
    复制

4.3 间接寻找

  • 找到兄弟

    		<div>
    		    <div>北京</div>
    		    <div id='c1'>上海</div>
    		    <div>深圳</div>
    		    <div>广州</div>
    		</div>
    复制
    		$("#c1").prev()        // 上一个
    		$("#c1")
    		$("#c1").next()        // 下一个
    		$("#c1").next().next() // 下一个、下一个
    		 
    		$("#c1").siblings()    // 所有的系统
    复制

  • 找父子

    		<div>
    		    <div>
    		        <div>北京</div>
    		        <div id='c1'>
    		        	<div>青浦区</div>
    		        	<div class="p10">宝山区</div>
    		        	<div>浦东新区</div>
    		        </div>
    		        <div>深圳</div>
    		        <div>广州</div>
    		    </div>
    		    <div>
    		        <div>陕西</div>
    		        <div>山西</div>
    		        <div>河北</div>
    		        <div>河南</div>
    		    </div>
    		</div>
    复制
    		$("#c1").parent()            // 父亲
    		$("#c1").parent().parent()   // 父亲、父亲
    		 
    		$("#c1").children()                // 所有的儿子
    		$("#c1").children(".p10")          // 所有的儿子中寻找class=p10
    		 
    		$("#c1").find(".p10")              // 去所有子孙中寻找class=p10
    		$("#c1").find("div")              // 去所有子孙中寻找class=p10
    复制

案例：菜单的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
        }
        .menus .content a{
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
 
        .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="static/jquery-3.6.0.min.js"></script>
    <script>
        function clickMe(self) {
            // $(self)  -> 表示当前点击的那个标签。
            // $(self).next() 下一个标签
            // $(self).next().removeClass("hide");   删除样式
            $(self).next().removeClass("hide");
        }
    </script>
</body>
</html>
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
 
            cursor: pointer;
        }
        .menus .content a{
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
 
        .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="static/jquery-3.6.0.min.js"></script>
    <script>
        function clickMe(self) {
            var hasHide = $(self).next().hasClass("hide");
            if(hasHide){
                $(self).next().removeClass("hide");
            }else{
                $(self).next().addClass("hide");
            }
        }
    </script>
</body>
</html>
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus {
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
 
        .menus .header {
            background-color: gold;
            padding: 10px 5px;
            border-bottom: 1px dotted #dddddd;
 
            cursor: pointer;
        }
 
        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted #dddddd;
        }
 
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="item">
        <div class="header" onclick="clickMe(this);">上海</div>
        <div class="content">
            <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 class="item">
        <div class="header" onclick="clickMe(this);">上海2</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>青浦区</a>
            <a>浦东新区</a>
            <a>普陀区</a>
        </div>
    </div>
 
    <div class="item">
        <div class="header" onclick="clickMe(this);">北京2</div>
        <div class="content hide">
            <a>海淀区</a>
            <a>朝阳区</a>
            <a>大兴区</a>
            <a>昌平区</a>
        </div>
    </div>
</div>
 
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    function clickMe(self) {
        // 让自己下面的功能展示出来
        $(self).next().removeClass("hide");
 
        // 找父亲，父亲的所有兄弟，再去每个兄弟的子孙中寻找 class=content，添加hide样式
        $(self).parent().siblings().find(".content").addClass("hide");
    }
</script>
</body>
</html>
复制

4.4 操作样式

  • addClass 添加样式
  • removeClass 移除样式
  • hasClass

4.5 值的操作

<div id='c1'>内容</div>
复制
$("#c1").text()        // 获取文本内容
$("#c1").text("休息")   // 设置文本内容
复制
<input type='text' id='c2' />
复制
$("#c2").val()            // 获取用户输入的值
$("#c2").val("哈哈哈")     // 设置值
复制

案例：动态创建数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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="static/jquery-3.6.0.min.js"></script>
<script>
    function getInfo() {
        // 1.获取用户输入的用户名和密码
        var username = $("#txtUser").val();
        var email = $("#txtEmail").val();
        var dataString = username + " - " + email;
 
        // 2.创建li标签，在li的内部写入内容。 $("<li>")
        var newLi = $("<li>").text(dataString);
 
        // 3.把新创建的li标签添加到ul里面。
        $("#view").append(newLi);
    }
 
</script>
</body>
</html>
复制

4.6 事件

<input type="button" value="提交" onclick="getInfo()"/>
 
<script>
    function getInfo() {
        
    }
</script>
复制
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
 
<script>
    $("li").click(function(){
        // 点击li标签时，自动执行这个函数；
        // $(this)  当前你点击的是那个标签。
    });
</script>
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
 
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $("li").click(function () {
        var text = $(this).text();
        console.log(text);
    });
 
</script>
</body>
</html>
复制

在jQuery中可以删除某个标签。

<div id='c1'>内容</div>
 
$("#c1").remove();
复制

案例：删除元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
 
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $("li").click(function () {
        $(this).remove();
    });
 
</script>
</body>
</html>
复制

当页面框架加载完成之后执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
 
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        
        // 当页面的框架加载完成之后，自动就执行。
        $("li").click(function () {
            $(this).remove();
        });
 
    });
</script>
</body>
</html>
复制

案例：表格操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>啊啊啊</td>
        <td>
            <input type="button" value="删除" class="delete"/>
        </td>
    </tr>
 
    <tr>
        <td>1</td>
        <td>本宝宝</td>
        <td>
            <input type="button" value="删除" class="delete"/>
        </td>
    </tr>
 
    <tr>
        <td>1</td>
        <td>吃吃吃</td>
        <td>
            <input type="button" value="删除" class="delete"/>
        </td>
    </tr>
 
    <tr>
        <td>1</td>
        <td>得到的</td>
        <td>
            <input type="button" value="删除" class="delete"/>
        </td>
    </tr>
 
    </tbody>
</table>
 
<script src="static/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        //找到所有class=delete的标签，绑定事件
        $(".delete").click(function () {
            // 删除当前行的数据
            $(this).parent().parent().remove();
        });
    })
</script>
</body>
</html>
复制

5. 前端整合

  • HTML
  • CSS
  • JavaScript、jQuery
  • BootStrap（动态效果依赖jQuery）。

案例：添加数据页面

人员信息录入功能，需要提供用户信息：

用户名、年龄、薪资、部门、入职时间（*）

对于时间的选择：不能输入；选择；（插件） datetimepicker

  • 下载插件
  • 应用插件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css">
</head>
<body>
<div class="container">
    <form class="form-horizontal" style="margin-top: 20px">
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="姓名">
                    </div>
                </div>
            </div>
 
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="年龄">
                    </div>
                </div>
            </div>
 
        </div>
 
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">薪资</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" placeholder="薪资">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">部门</label>
                    <div class="col-sm-10">
                        <select class="form-control">
                            <option>IT部门</option>
                            <option>销售部门</option>
                            <option>运营部</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
 
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-2 control-label">入职日期</label>
                    <div class="col-sm-10">
                        <input type="text" id="dt" class="form-control" placeholder="入职日期">
                    </div>
                </div>
            </div>
        </div>
 
        <div class="row clearfix">
            <div class="col-xs-6">
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary">提 交</button>
                    </div>
                </div>
            </div>
        </div>
 
    </form>
 
</div>
 
 
<script src="static/js/jquery-3.6.0.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
 
<script>
    $(function () {
 
        $('#dt').datepicker({
            format: 'yyyy-mm-dd',
            startDate: '0',
            language: "zh-CN",
            autoclose: true
        });
 
    })
</script>
</body>
</html>
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/22390.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

如何修改电脑mac地址？

2025-03-03 13:03:33

Flutter_学习记录_实现列表上拉加载更多的功能

2025-03-03 13:03:29

Redis---缓存穿透，雪崩，击穿

2025-03-03 13:03:29

React生态、Vue生态与跨框架前端解决方案

2025-03-03 13:03:29

本地部署 DeepSeek：从 Ollama 配置到 Spring Boot 集成

2025-03-03 13:03:29

【Maven】将普通Eclipse项目改造为Maven项目（非SpringBoot项目）

2025-03-03 13:03:28

每天一个Flutter开发小项目 (6) : 表单与验证的专业实践 - 构建预约应用

2025-03-03 13:03:28

确定 Flutter SDK 及其关联的 Gradle 版本与适配的 JDK 版本

2025-03-03 13:03:28

校园订餐微信小程序(全套)

2025-03-03 13:03:28

C 数组：深入解析与应用

2025-03-03 13:03:28

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！