前端笔记
1 、 JQ实现判断iPhone、Android、微端、window端设备兼容性
<style type="text/css" > .dispaly-none{display:none;}</style><div class="dispaly-none ios55">iPhone|iPad|iPod|iOS</div><div class="dispaly-none zz55">Android</div><div class="dispaly-none pc55">pc</div><div class="dispaly-none wx55">微信</div>$(document).ready(function(){ var u = navigator.userAgent; var ua = navigator.userAgent.toLowerCase(); var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac O...
2 、 vue3.0搭建与安装
1、删除与安装 vue-cli2 和 vue-cli3如果你是npm install -g vue-cli装的，就npm uninstall -g vue-cli删。 如果你是npm install -g @vue/cli装的，就npm uninstall -g @vue/cli删。2、先将npm的仓库地址改为淘宝镜像（这样会快很多）执行命令：npm config set registry https://registry.npm.taobao.org --global，然后再安装：执行命令：npm install -g @vue/cli3、vue3.0项目创建vue create 搭建新项目名cd 新项目名 :进入项目然后启动项目运行项目：npm run serve
3 、 js地域屏蔽使用
直接打开屏蔽 加 地域屏蔽搜索:(放在审核页里<head>后 )
4 、 Vue 3.0 + Vite搭建项目环境
1、vue使用vite搭建项目环境npm init vite-app <project-name>cd <project-name>根据控制台的提示执行:npm install / yarnnpm run dev / yarn dev
5 、 vue前端UI框架框架值得你掌握
（1）element-ui：element ui框架的按钮组件，这款由饿了么前端开源的UI框架，一经面世，就收获大量程序员的芳心。在github 上更是高达29.8k。用于开发PC端的页面还是绰绰有余的。官网：https://element.eleme.cn/#/zh-CN（2）eElement Plus简述：Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3 的桌面端组件库。官网：https://element-plus.org/zh-CN/#/zh-CN
6 、 多个选项卡，相互不影响
<style>.xxk-content > div { display: none;}.xxk-content > div.active { display: block;}.xxk-bt button.active { background-color: #ddd; /* Add your active button styles here */}</style><div class="xxk02 tab-group"> <div class="xxk-bt"> <button data-tab="1">01</button> <button data-tab="2">02</button> <button data-tab="3">03</button> </div> <div class="xxk-content"> <div data-content="1">Content for 01</div> <div data-content="2">Content for 02</div> <div data-content="3">C...
7 、 多个选项卡案例直接用
<div class="carousel-section"> <!-- Carousel 1 --> <div id="carousel1" class="bannerbox"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="image1.jpg" alt="Slide 1"> </div> <div class="carousel-item"> <img src="image2.jpg" alt="Slide 2"> </div> <div class="carousel-item"> <img src="image3.jpg" alt="Slide 3"> </div> </div> <button class="carousel-control-prev" onclick="prevSlide('carousel1')">Previous</...
8 、 利用js实现产品筛选功能案例
利用js实现产品筛选功能案例--js实现了点击显示隐藏，
