菜单 搜索
首页 前端知识 【jQuery】看一眼就会用的jquery库

【jQuery】看一眼就会用的jquery库

2024-05-05 12:05:00 前端知识 前端哥 330 134 我要收藏

文章目录

  • jQuery（js框架）
    • 1、什么是jQuery
    • 2、jQuery基本语法
    • 3、jQuery中的选择器
      • 1、基础选择器
      • 2、扩展选择器
    • 4、jQuery操作样式
      • 1、直接设置样式
      • 2、设置类样式
    • 5、jQuery操作属性
    • 6、jQuery操作容器组件
        • 1、给容器组件赋值
        • 2、获得容器组件的内容
    • 7、jQuery操作表单组件
    • 8、jQuery关联事件
        • 1、直接关联
        • 2、动态关联事件
        • 3、动态关联事件2
        • 4、在函数中动态给其他控件绑定事件
        • 5、动态取消事件
        • 6、使用on也可以动态给事件绑定事件
        • 7、一个控件同时关联多个事件
        • 8、jQuery组合事件
    • 9、jQuery操作动画
    • 10、下拉菜单
    • 11、自定义动画
    • 12、下载jQuery插件
    • 13、jQuery组件的转换
    • 14、jQuery操作节点
        • 1、创建节点
        • 2、添加节点
        • 3、删除节点
        • 4、替换节点
        • 5、克隆节点
        • 6、查询节点
    • 15、动态向下拉列表中添加选项
    • 16、购物车

jQuery（js框架）

1、什么是jQuery

写更少的代码，实现更多的事

jQuery

jQuery是一个快速、简洁的JavaScript框架，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
 
jQuery 库包含以下特性：
        HTML 元素选取
        HTML 元素操作
        CSS 操作
        HTML 事件函数
        JavaScript 特效和动画
        HTML DOM 遍历和修改
        AJAX
        Utilities
复制

2、jQuery基本语法

当页面加载时

1、旧方法：
	window.onload=function(){
		要执行的代码
	}

2、新方法：
	$(document).ready(function(){
		要执行的代码
	})
	
复制

在这里插入图片描述

	//标准写法
	$(document).ready(function(){
		要执行的代码
	})
    
    $()----------------jQuery中的工厂函数
    document-----------它是jQuery的选择器，用于获得元素
    reday---------------它是一个事件，用于指定函数在什么时候执行
    function------------他表示事件触发时，要执行的具体代码
        
     //简化写法
        $(function(){
            要执行的代码
        })
复制

3、jQuery中的选择器

作用：获得页面上的元素

let obj=$(选择器的名称);

1、基础选择器

1、id选择器

	根据id获取一个元素
	let obj=$('#id名称');
	设置颜色
    obj.css("coclor","red");
复制

​ 2、类选择器

	根据指定类样式名称，获得一组元素
	let obj=$(".mycss");
复制

​ 3、标签选择器（元素选择器）

	根据标签，获得一组元素
	let obj=$("div");
复制

​ 4、全局选择器

	选择当前页面所有元素
	let obj=$("*");
复制

​ 5、并集选择器

	获取一组指定都元素
	let obj=$("#mydiv,.mycss,h4");
复制

2、扩展选择器

1、层次选择器

-------1、后代选择器
			语法：$("上级选择器 指定的选择器")
			作用：获得上级选择器下面包含的所有指定后代
            特点：不论是直接包含，还是间接包含都属于后代
            
-------2、父元素选择器
			语法：$("父元素>子元素")
			作用：只选择父元素为指定的子元素
 
-------3、相邻平辈选择器
			语法：$("选择器1+选择器2")
			作用：获得选择器1后面相邻的选择器2   
            注意：只能获得一个相邻的平辈元素
            
-------4、后续平辈元素选择器
			语法：$("选择器1~选择器2")
			作用：获得选择器1后面所有匹配的指定平辈元素    
复制

2、基础过滤选择器

	获得下标为0的选择器
	$("li:eq(0)").css("color","blue");
	获得下标大于2的选择器
	$("li:gt(2)").css("color","blue");
	获得下标小于2的选择器
	$("li:lt(2)").css("color","blue");
	获得下标不等于2的选择器/*先找到为2的元素，再设置不等于2*/
	$("li:not(li:eq(2))").css("color","blue");
	选择第一个选择器
    $("li:first").css("color","red");
	选择最后一个选择器
    $("li:last").css("color","red");
	选择下标为奇数的选择器
    $("li:odd").css("color","red");
	选择下标为偶数的选择器
    $("li:even").css("color","red");
复制

3、可见性过滤器

	:hidden
		用于：选择页面上所有隐藏的元素
		$("div:hidden").show(1000)
		
	:visible
		用于：选择页面上所有显示的元素
		$("div:visible").hide(1000)
复制

4、属性选择器

	1、选择包含href属性的标签
	$("[href]").css("color","red");
	
	2、选择href属性，值为#的标签
	$("[href='#']").css("color","red");
	
	3、选择href属性，值以a开头的标签
	$("[href^='a']").css("color","red");
	
	4、选择href属性，值以b结尾的标签
	$("[href$='b']").css("color","red");
	
	5、选择href属性，值的任何位置只要包含a的标签
	$("[href*='a']").css("color","red");
	
	6、选择name属性，值为name的元素
	$("[name='name']").css("color","red");	
	
	7、选择包含type属性的元素
	$("[type]").css("color","red");	
复制

5、表单选择器

	表单元素择器以 ”：“开头
	
	//选择文本框
	$(":text").css("color","red");
	//选择密码框
	$(":password").css("color","red");
	//选择按钮
	$(":button").css("color","red");
复制

4、jQuery操作样式

1、直接设置样式

1、直接设置一种样式	
	$("选择器").css("样式名称","值");
	$("div").css("color","red");
	
2、设置多种样式（旧方法）
	$("div").css("color","red").css("font-size","50px");
	
3、设置多种样式（新方法）
	$("div").css({
		"color":"red",
		"border":"1px"
	});
	
4、获得指定样式的值
	//获取当前div的字体大小
	let size=$("div").css("font-size");
复制

2、设置类样式

1、添加一个或多个样式
	//样式
	.one{
		color:red;
	}
	//添加样式（添加多个样式用空格隔开）
	$("div").addClass("one two");
	
2、移除一种或多种类样式
	//移除样式（移除多个样式用空格隔开）
	$("div").removeClass("one two");
复制

5、jQuery操作属性

1、添加单个属性（这两种方法效果一样）
	$("选择器").attr("属性名"，"属性值");
	$("table").attr("border","1px");
	
	$("选择器").prop("属性名"，"属性值");
	$("table").prop("border","1px");
	
2、添加多个属性（旧方法）
	//先添加一个，后面用小数点连接
	$("选择器").attr("属性名"，"属性值").attr("属性名"，"属性值");
	
3、添加多个属性（新方法）
	$("选择器").attr({"属性名":"值","属性名":"值"});
	$("table").attr({"border":"1px","width":"60%","algin":"left"});
 
4、获得某一个属性值
	let val=$("选择器").attr("属性值");
 
5、移除属性
	$("选择器").removerAttr("属性名1 属性名2");
复制

6、jQuery操作容器组件

容器组件

div、span、table、tr、td、th、ol...
复制
1、给容器组件赋值
	//会解析内容
	$(选择器).html(内容)；
    $("span").html("<b>123</b>");
 
    //不会解析内容
	$(选择器).text(内容)；
复制
2、获得容器组件的内容
	let msg=$(选择器).html();
	let msg=$(div).html();
复制

7、jQuery操作表单组件

	1、给表单控件赋值
        $("选择器".val(内容);
        $("#txt").val("大家好！");
	
	2、获得表单组件的值
		let txt=$("#txt").val();
		
	//所有表单控件，除了复选框外，其他控件都是用此方法赋值
复制
//加载函数
$(function(){
	//给控件类型为button添加一个点击事件
	$(":button").click(function(){
		//获取表单的值是.val()方法
		//获取表单name属性的值为name的控件
		let name=$("[name='name']").val();
		let pwd=$("[name='pwd']").val();
        let age=$("[name='age']").val();
        
        //获得单选被选中的值(:checked表示只获得选中的值)
        let gender=$("[name='gender']:checked").val();
        let msg="";
        //获得复选框选中的值
            //1、首先获得所有选中的组件--取到的是一个dom数组
            let hobbies=$("[name='hobby']:checked");
			//2、循环遍历所有被选中的值
        	for(let i=0;i<hobbies.length;i++){
                //获得dom组件
                let ck=hobbies[i];
                //拼接字符串 方法1
                msg+=ck.value+" ";
                //拼接字符串 方法2
                msg+=$(ck).val()+" ";
            }
		//窗体换行是“\n”
		alert("姓名是："+name+"\n");
	})
})
复制

8、jQuery关联事件

1、直接关联
<input type="button" value="按钮" onclick="add()">
复制
2、动态关联事件
	//动态给选择器增加事件
	$(选择器).事件名(function(){
		要执行的具体代码；
	})
    $(function(){//页面加载时触发的事件//事件直接写在控件后面
          $("#btn").click(function(){
                alert("鼠标被点击了..");
             })
      })

	在关联事件中，所有事件名称前面的on都必须去掉
复制
3、动态关联事件2
	//先写一个方法，然后将事件关联到控件上
	function show(){
		alert("消息框")
	}
	$(function(){
		//获得控件，关联事件
		$("div").click(show);//当事件触发，调用指定方法
	
	})
复制
4、在函数中动态给其他控件绑定事件
	bind:绑定
	//给div添加点击事件
    
	$("div").bind("click",function(){
		alert(触发了事件)；
	});
复制
5、动态取消事件
	unbind:卸载
	//给div删除事件
    
	$("div").unbind("click");
复制
6、使用on也可以动态给事件绑定事件
	//给控件#btn绑定点击事件
	$("#btn").on("click",funcion(){
	
		alert("触发了事件")
	})
	
	//给控件取消事件
	$("#btn").unbind("click",funcion(){
	
		alert("触发了事件")
	})
	
复制
on与bind区别：
	
	bind：只能给已经存在的控件绑定事件，不能给动态添加的控件绑定事件
	
	on：不仅可以给已存在的控件绑定事件，也能给动态产生的控件绑定事件

复制
7、一个控件同时关联多个事件
-------------语法：	
	$("控件").事件名1(function(){
		要执行的代码块
	}).事件名2(function(){
		要执行的代码块
	});
--------------示例：
        $("div").mouseover(function(){
 
            alert("触发了鼠标悬停事件");
            //让当前div添加类样式 this：代表触发事件的元素
            $(this).addClass("show");
 
        }).moueseout(function(){
 
            alert("触发了鼠标离开事件")
            //移除当前div样式
            $(this).removeClass("show");
        })
复制
8、jQuery组合事件
	
//hover:是mouseover、moueseout事件的组合
        $(选择器).hover(
 
                function(){
                    //当鼠标悬停时触发
                },
                function(){
                    //当鼠标离开时触发
                }
            )
 
//toggleClass：是addClass、removeClass的组合
		 //切换类样式，如果指定类样式已存在就移除，如果不存在就添加
		 $(选择器).click(function(){
             //切换类样式
             $(this).toggleClass("show");
         })
 
 
//toggle：display:none与display:block的组合
		//隐藏显示组合 display:none隐藏 block显示
		$("div").toggle();
复制

9、jQuery操作动画

jQuery内置三组动画

第一组：

	shwo(毫秒)--------在指定时间内显示
		
	hide(毫秒)--------在指定时间内隐藏
	
第二组：
	fadeIn(毫秒)---------在指定时间内淡入
	fadeOut(毫秒)--------在指定时间内淡出
	
	
第三组：
	slideUp()-----------在指定时间内向上收缩
	slideDown()---------在指定时间内向下展开
复制

10、下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=收缩与展开, initial-scale=1.0">
    <title>收缩与展开</title>
    <script src="./jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="../css/myCss.css">
    <style>
        .one{
            width: 100%;
            height: 300px;
 
        }
        .two{   
            margin: 0px auto;  
            width: 500px; 
            height: 100px; 
            background-color: black;
        }
        .two2{   
            width: 500px;  
            height: 200px;
            background-color: aqua;
            display: none;
            position: absolute;
            top: 96px;
            left: 509px;
        }
        #a>li{
            width: 50px;
            height: 30px;
            float: left;
            margin: 10px;
            padding: 20px;
            font-size: 23px;
            text-align: center;
            font-weight: bold;
            color: rgb(37, 165, 234);
            background-color: rgb(222, 145, 30);
        }
        #a>li:hover{
            background-color: tomato;
            color: aqua;
        }
        .three1>ul>li,.three2>ul>li,.three3>ul>li,.three4>ul>li{
            line-height: 50px;
            display: none;
            font-size: 23px;
 
        }
        .three1>ul, .three2>ul, .three3>ul, .three4>ul{
            position: absolute;
 
        }
    </style>
    <script>
        let k=0;
        //定义变量保存定时器
        let t;
        $(function(){
            $("#a>li").mouseenter(function(){
 
                //  解决频繁收缩问题，但此示例用不上
                //  如果o等于0的话，表示此时允许下拉
                 if(k==0){
                     //每展开一次，要过两秒钟之后才能继续下拉
                     k=2;
                     //设置一个定时器，一秒钟执行一次
                     t=setInterval(function(){
                         // 每过一秒，k的值减少1
                         k--;
                         // 如果当k的值等于0时，表明此时已经过了两秒钟
                        if(k==0){
                             //清除定时器
                             clearInterval(t);
                         }
                     },1000);
                
                    let i=$(this).val();
                    $(".two2").slideDown(200);
                    $(".three"+i+">ul>li").css("display","block")
                
                   
                    }
            }).mouseleave(function(){
                
                $(".two2").slideUp(200);
                    $(".three1>ul>li").css("display","none");
                    $(".three2>ul>li").css("display","none");
                    $(".three3>ul>li").css("display","none");
                    $(".three4>ul>li").css("display","none");
 
 
            });
        })
    </script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="one">
        <!-- 文字介绍 -->
        <div class="two">
            <ul id="a">
                <li value="1">主页</li>
                <li value="2">商品</li>
                <li value="3">详情</li>
                <li value="4">评论</li>
            </ul>
        </div>
        <!-- 介绍部分，默认隐藏 -->
        <div class="two2">
            <div class="three1">
                <ul>
                    <li>1、主页1</li>
                    <li>2、主页2</li>
                    <li>3、主页3</li>
                </ul>
            </div>
            <div class="three2">
                <ul>
                    <li>1、商品1</li>
                    <li>2、商品2</li>
                    <li>3、商品3</li>
                </ul>
            </div>
            <div class="three3">
                <ul>
                    <li>1、详情1</li>
                    <li>2、详情2</li>
                    <li>3、详情3</li>
                </ul>
            </div>
            <div class="three4">
                <ul>
                    <li>1、评论1</li>
                    <li>2、评论2</li>
                    <li>3、评论3</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
复制

11、自定义动画

基本语法


----表示当前样式在多少毫秒内完成
$("选择器").animate({样式名称1：值，样式名称2，值},毫秒数);
	
	
----表示样式在多少毫秒内完成，完成用户调用指定函数
$("选择器").animate({样式名称1：值，样式名称2，值},毫秒数，function(){

});
复制
	$("div").click(function(){
		$(this).animate({"width":"200px"},2000);
			//表示当前div被点击后，宽度会变成200px,再次点击不会再增加
			
		$(this).animate({"width":"+=200px"},2000);
			//表示当前div被点击后，宽度会变成200px,再次点击会再增加200px
			
		$(this).animate({"width":"+=200px"},2000)
				.animate({"height":"+=100px"},2000);
			//此代码表示每点击一次，宽度和高度都会改变（先变宽度，后边高度）
	})
 
复制

表示当前div被点击后，先往左移动，再往下移动，再变宽度和高度，最后添加样式

在这里插入图片描述

12、下载jQuery插件

https://www.jq22.com/

在这里插入图片描述

13、jQuery组件的转换

在js中如果用传统的dom语法获取的组件，称为dom组件
	let obj=document.getElementById("xx");
	obj.innerHTML="123";
	
如果采用jQuery语法获取的组件，称为jQuery组件
	let $obj=$("选择器");
	$obj.html("大家好！");
//这两组的语法不能直接混用，需要转换组件类型
 
复制

组件转换

1、将dom组件转换成jQuery组件
	let obj=document.getElementById("xx");
	let $obj=$(obj);
	$obj.html("123");
 
 
2、将jQuery组件转换成dom组件
	let $obj=$("选择器");
	var obj=$obj[0];
	obj.innerHTML="1234";
复制

14、jQuery操作节点

**什么是节点：**页面上每一个元素，都能看做是节点

通过jQuery可以对节点执行下列操作：
1、创建节点
2、添加节点
3、删除节点
4、替换节点
5、克隆节点
6、查询节点
复制
1、创建节点
语法：
	let $obj=$(创建节点的代码)
	//新建节点
	let $obj=$("<li>新节点</li>")
 
复制
2、添加节点
	//新建节点
	let $obj=$("<li>新节点</li>")
 
向父节点的尾部添加：
	子节点.appendTo(父节点);
		$obj.appendTo("ol");
	父节点.append(子节点);
		$("ol").append($obj);
 
向父节点的头部添加：
	子节点.prependTo(父节点);
		$obj.prependTo("ol");
	父节点.prepend(子节点);
		$("ol").prepend($obj);
 
添加到指定节点之前
	指定节点.before("新节点");
		$("#mydiv").before($obj);
	新节点.insertBefore("指定节点")
		$obj.insertBefore("#mydiv");
 
添加到指定节点之后
	指定节点.after("新节点");
		$("#mydiv").after($obj);
	新节点.insertAfter("指定节点")
		$obj.insertAfter("#mydiv");
 
复制
3、删除节点
//删除节点
指定节点.remove();
	//删除列表最后一个节点，连位置都会被删除掉
		$("li:last").remove();
 
//清空节点
指定节点.empty();
	//alt+shift+f 自动格式化格式
 
	//只会清空节点内容，但会保留位置
		$("li:last").empty();
复制
4、替换节点
//替换一个节点
指定节点.replaceWith(新节点);
	//1、先创建一个新节点
	let $obj=$("<li>新节点</li>")
	//2、替换
	$("li:first").replaceWith($obj);
		
//替换所有节点
新节点.replaceAll(指定节点);
	//1、先创建一个新节点
	let $obj=$("<li>新节点</li>")
	//2、替换全部节点
	$obj.replaceAll("li");
复制
5、克隆节点
    //克隆节点
		let obj=指定节点.clone();	
 
	//克隆列表第一项li，并追加到列表的尾部
        let $obj=$("li:first").clone();
        $("ol").append($obj);
 
      	//合并为一步(先克隆在追加)
      	$("li:first").clone().appendTo("ol")
复制
6、查询节点
//查找上级节点(上级)
let $变量=节点.parent();
		//获得上级节点
		let $obj=$("#mydiv").parent();
		//获得节点的属性
		let msg=$obj.attr("class");
		
//查找下级子节点(下级)
let objs=节点.children();//返回一个数组，包含所有的子节点
		//所有子节点
		let objs=$("ol").children();
 
//查找前一个节点(平级)
let obj=$("#mydiv").prev();	
		//前一个的前一个节点
		let obj=$("#mydiv").prev().prev();
		
//查找后一个节点（平级）
let obj=$("#mydiv").next();	
 
//查找所有与该节点的平级节点
let objs=节点.siblings();//返回的是一个数组
 
//遍历节点
$.each(节点数组,function(每一个节点的下标，每一个节点){
    //此处获得节点是dom组件，需要转换节点
})
        //获得li节点的数组
        let objs=$("li");
        $.each(objs,function(index,k){
            //k的类型是dom组件
            alert(k.innerHTML);
            alert($(k).hrml());//转换jQuery
        })
	
 
//从父节点中查找指定子节点
let obj=父节点.find("选择器");
		//获取父节点下的子节点
		let obj=$("ol").find("#mydiv");
		//从父节点中找到列表项下标为1的控件
		let obj=$("ol").find("li:eq(1)");
 
复制

在这里插入图片描述

15、动态向下拉列表中添加选项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $(function(){
            for (let index = 0; index <150; index++) {
                $("<option value="+index+">"+index+"岁</option>").appendTo("#sel");
            }
         
        })
    </script>
</head>
<body>
    <select name="" id="sel">
        <option value="-1">请选择：</option>
    </select>
</body>
</html>
复制

16、购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>我的购物车-小米商城</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
		<script src="../jquery-1.12.4.js"></script>
		<style>
			.del{
				/*小手样式  */
				cursor:pointer;
			}
		</style>
		<script>
			//第一步：创建加载函数
			//第二步：创建重置函数
			//第三步：复选框的值改变事件
			//第四步：全选事件
			$(function(){
				showReset();
 
				// 指定每一件商品前的复选框值改变事件
				$(":checkbox:gt(0)").change(function(){
					//每改变一次就重新选
					showReset();
				});
 
				//全选复选框事件
				$("#checd").change(function(){
 
					
					//判断当前全选框是否选中
					let flag=$(this).is(":checked");
					//让其他复选框根据当前flag的值决定是选中还是取消
					$(":checkbox:gt(0)").prop("checked",flag);
					showReset();
				});
 
				//删除事件
				$(".del").click(function(){
					$(this).addClass(".del");
					$(this).parent().remove();
					showReset();
				});
 
				//修改商品数量事件
				$(".num").change(function(){
					let num=$(this).val();
					//获得当前商品的单价
					let price=$(this).parent().prev().html();
					//显示小计
					$(this).parent().next().html(price*num);
					showReset();
				});
		});
			function showReset(){//编写函数，计算所有被选中的商品应付总金额，以及选中的商品数量
				//获得选中的复选框所在行，去掉第一个的复选框
				let arrs=$(":checkbox:gt(0):checked").parent().parent();
 
				if(arrs.length==0){
					//没有商品选中，就取消全选
					$("#checd").prop("checked",false);
				}
				//对所有选中的行遍历，获得每一件商品数量以及小计
				let  count=0;//用于统计选择的商品数量
				let total=0;//用于统计总金额
				$.each(arrs,function(index,k){
					//获得每一行的小计
					let obj=$(k).find(".subtotal").html();
					total+=parseInt(obj);
 
					// 获得每一件商品的数量
					let goodsNum=$(k).find(".num").val();
					count+=parseInt(goodsNum);
				});
				//获得总金额控件
				$(".total").html(total+".00元");
				//显示选中的商品个数
				$(".goodsCount").html(arrs.length);
				//显示购买了多少件
				$(".choiceGoodsCount").html(count);
			}
		</script>
	</head>
	<body>
		<div class="banner_x center">
			<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
			
			<div class="wdgwc fl ml40">我的购物车</div>
			<div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
			<div class="dlzc fr">
				<ul>
					<li><a href="./login.html" target="_blank">登录</a></li>
					<li>|</li>
					<li><a href="./register.html" target="_blank">注册</a></li>	
				</ul>
				
			</div>
			<div class="clear"></div>
		</div>
		<div class="xiantiao"></div>
		<div class="gwcxqbj">
			<div class="gwcxd center">
				<div class="top2 center">
					<div class="sub_top fl">
						<input type="checkbox" value="quanxuan" class="quanxuan " id="checd" />全选
					</div>
					<div class="sub_top fl">商品名称</div>
					<div class="sub_top fl">单价</div>
					<div class="sub_top fl">数量</div>
					<div class="sub_top fl">小计</div>
					<div class="sub_top fr">操作</div>
					<div class="clear"></div>
				</div>
				<div class="content2 center">
					<div class="sub_content fl ">
						<input type="checkbox" value="quanxuan" class="quanxuan"  checked/>
					</div>
					<div class="sub_content fl"><img src="./image/gwc_xiaomi6.jpg"></div>
					<div class="sub_content fl ft20">小米6全网通6GB内存+64GB 亮黑色</div>
					<div class="sub_content fl " >2499.00</div>
					<div class="sub_content fl">
						<input class="shuliang num" type="number" value="1" step="1" min="1"  >
					</div>
					<div class="sub_content fl subtotal">2499.00</div>
					<div class="sub_content fl  del">×</div>
					<div class="clear"></div>
				</div>
				<div class="content2 center">
					<div class="sub_content fl ">
						<input type="checkbox" value="quanxuan" class="quanxuan" />
					</div>
					<div class="sub_content fl"><img src="./image/gwc_xiaomi6.jpg"></div>
					<div class="sub_content fl ft20">小米6全网通6GB内存+64GB 亮黑色</div>
					<div class="sub_content fl ">2499.00</div>
					<div class="sub_content fl">
						<input class="shuliang num" type="number" value="1" step="1" min="1"  >
					</div>
					<div class="sub_content fl subtotal">2499.00</div>
					<div class="sub_content fl  del">×</div>
					<div class="clear"></div>
				</div>
				<div class="content2 center">
					<div class="sub_content fl ">
						<input type="checkbox" value="quanxuan" class="quanxuan" />
					</div>
					<div class="sub_content fl"><img src="./image/gwc_xiaomi6.jpg"></div>
					<div class="sub_content fl ft20">小米6全网通6GB内存+256GB 红色</div>
					<div class="sub_content fl ">10000.00</div>
					<div class="sub_content fl">
						<input class="shuliang num" type="number" value="1" step="1" min="1"  >
					</div>
					<div class="sub_content fl subtotal">10000.00</div>
					<div class="sub_content fl del">×</div>
					<div class="clear"></div>
				</div>
			</div>
			<div class="jiesuandan mt20 center">
				<div class="tishi fl ml20">
					<ul>
						<li><a href="./liebiao.html">继续购物</a></li>
						<li>|</li>
						<li>共<span class="goodsCount"></span>件商品，已选择<span class="choiceGoodsCount"></span>件</li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="jiesuan fr">
					<div class="jiesuanjiage fl">合计（不含运费）：<span class="total"></span></div>
					<div class="jsanniu fr"><input class="jsan" type="submit" name="jiesuan"  value="去结算"/></div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			
		</div>
 
	</body>
</html>
 
复制

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6910.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

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

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

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

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

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

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

2024-09-30 23:09:061000
4

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

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

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

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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