button样式

添加&删除&切换样式类型

好久不见. 提交于 2019-11-28 07:28:10
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>添加&删除&切换样式类型</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 div{ 12 width: 400px; 13 height: 400px; 14 background: url("source/images/off.png"); 15 background-size: 100% 100%; 16 } 17 button{ 18 width: 80px; 19 } 20 .active{ 21 background: url("source/images/on.png"); 22 background-size: 100% 100%; 23 } 24 25 26 </style> 27 </head> 28 <body> 29 <div ></div> 30 <br/> 31 <br/> 32 <br/> 33 34 <button id="off">开灯</button> 35 <button id="on">关灯</button> 36 <button id="auto">自动开关</button> 37 <script src="js

python 之 前端开发( jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作)

吃可爱长大的小学妹 提交于 2019-11-28 01:31:39
11.5 jQuery 引入方式: 方式一:本地引入 <script src="jquery-3.3.1.min.js"></script> <script> //注意,一定在引入jQuery之后,再使用jQuery提供的各种操作 code... </script> ​ 方式二:直接使用CDN <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> code... </script> 文档就绪事件: DOM文档加载的步骤 1. 解析HTML结构。 2. 加载外部脚本和样式表文件。 3. 解析并执行脚本代码。 4. DOM树构建完成。 5. 加载图片等外部文件。 6. 页面加载完毕 11.51 选择器 id选择器: $("#i1") 标签选择器: $("p") class选择器: $(".c1") 所有元素选择器: $("*") 交集选择器: $("div.c1") // 找到类为c1的div标签 并集选择器: $("#i1,.c1,p") // 找到所有id="i1"的标签和class="c1"的标签和p标签 层级选择器: $("x y"); // x的所有后代y(子子孙孙) $("x>y"); // x的所有儿子y(儿子) $("x+y") // 找到所有紧挨在x后面的兄弟y

08.16号 dom 节点的创建 和删除DOM表单与非表单取值的方法 和操作属性与操作样式

半世苍凉 提交于 2019-11-27 18:05:34
<html> <head> <meta charset="utf-8"> <title>Dom操作</title> <script type="text/javascript" src="08.16/08.16.js"></script> </head> <body> <!--dom节点添加 删除 ; createElemen 创建一个新的节点 appendChild(newNode) 将newNode添加成当前节点的最后一个子节点 insertBefore(newNode,refNode) 将refNode节点之前插入newNode节点 replaceChild(newNode,oldNode) 将oldNode节点替换成newNode节点 removeChild(oldNode) 将oldNode子节点删除 cloneNode(true // false) 当deep为true时,表示复制当前节点以及当前结点的全部后代节点。为false时,只复制当前节点 --> <form id="myform" action="https://www.baidu.com/" method="get" target="_blank"> <input name="username" type="text" value="张三"><br> <input name="password" type=

小程序-----button 分享按钮

独自空忆成欢 提交于 2019-11-27 16:01:15
关于小程序的分享按钮 在做项目的过程中,有这么一需求, 用户A可以将当前的商品分享给别的用户B, 用户B点击查看时,可以直接定位到当前的商品。 经过一番学习,找到了 button 控件中的 open-type='share' <button open-type='share'>分享</button> 小程序文档: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 步骤一、 先在界面上,放置 button 按钮,并绑定函数 "shareView" (建议用 catchtap 绑定 ,不用 bindtap 防止点击冒泡) <button catchtap="shareView" open-type='share'>分享</button> 步骤二、 定义点击之后的函数操作(函数名:shareView) shareView:function(e) { return { title: 'xx小程序',//分享内容(为空则为当前页面文本) path: 'pages/index/index?id=123&age=18',//分享地址 路径,传递参数到指定页面。(为空则为当前页面路径) imageUrl: '../../imgs/xx.png',//分享的封面图(为空则为当前页面)     success:

【再学WPF】自定义样式

北慕城南 提交于 2019-11-27 15:30:00
1、添加“资源字典”; 工程名称:WpfApp1 新建Styles文件夹;创建“Dictionary1.xaml”的文件; 2、编辑样式; <SolidColorBrush x:Key="MainColor">#FF000000</SolidColorBrush> <SolidColorBrush x:Key="MainColor1">#FFFFFFFF</SolidColorBrush> <Style TargetType="Button"> <Setter Property="Background" Value="Blue"/> </Style> <Style TargetType="TextBox"> <Setter Property="FontFamily" Value="微软雅黑"/> <Setter Property="FontSize" Value="23"/> </Style> 3、在App.xaml中引用样式 <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/WpfApp1;component/Styles/Dictionary1.xaml"/>

button按钮怎么实现超链接

扶醉桌前 提交于 2019-11-27 08:30:21
转载自: https://www.cnblogs.com/Renyi-Fan/p/8945820.html 一、总结 1、我的按钮实现超链接是通过 button内嵌a标签 来实现的 <button class="am-btn am-btn-default am-btn-xs am-text-danger "><a href="{:url('discipline/delete',array('id'=>$vo.id))}"><span class="am-icon-trash-o"></span> Delete</a></button> 2、表单提交的时候form里面的那个action可以实现跳转 3、多说一点,要给什么元素添加样式不仅可以定义这个元素的style属性,还可以在外面套上div,span来添加样式 4、从下面的问题和解答里面来看,button标签实现超链接是通过 onclick事件 来解决的 5、明显onclick事件实现超链接比button标签内嵌a标签实现超链接要好,因为a标签会使文字变色 二、问题 http://zhidao.baidu.com/question/41167708.html 我在asp页面里试了,<input type=button onclick="window.open('连接')">有效,但<input type=button onclick

Vant 学习笔记

|▌冷眼眸甩不掉的悲伤 提交于 2019-11-27 06:53:31
1 vant 安装vue 脚手架 npm install -g @vue/cli 创建项目 创建时可选择 默认还是人工手动选择组件,比较耗时 vue create vantproj vue ui(命令的作用???)3.0新加的功能,可以创建项目,目前主要是添加组件,全局安装?反正失败了,或者新导入项目,在某一个项目内安装把 依赖,安装依赖 vant 手动安装 vant npm i vant -S 启动命令已经变成了 对应着 npm run serve "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" 安装插件,这个目的是如果是 import 的方式会自动改为 按需引入的方式 官网例子都是这个方式,所以还是引入这个把 npm i babel-plugin-import -D import { Button } from 'vant'; 上面是第一种方式, 第二种方式,手动引入 import Button from 'vant/lib/button'; import 'vant/lib/button/style'; 第三种方式:,引入所有的组件 import Vue from 'vue'; import Vant from 'vant';

JavaScript 之jQuery(二)

一世执手 提交于 2019-11-26 22:38:22
四. 操作元素 与 文档处理 ( 属性,css ) --------------------------属性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("").css("color","red") 1.操作元素 (1) attr() 设置属性值或者 返回被选元素的属性值 例: <div class="q" id="div01" box="box1"> </div> <script src="jquery-3.4.1.min.js"></script> <script> //获取值:attr()设置一个属性值的时候 只是获取值 var id = $('div').attr('id'); console.log(id); var cla = $('div')

jQuery攻略之事件处理

北城余情 提交于 2019-11-26 21:22:37
(每一段jQuery对应一段html代码,以标记为准则,css为共用代码,每段代码需独立运行。html和css代码在文章尾部,如下例) 、 分别为按钮添加事件(c1) $(document).ready( function () { $('.bold').bind('click', function () { alert("你点击了Bold按钮"); }); $('.italic').bind('click', function () { alert("你点击了Italic按钮"); }) }); 事件作用到两个按钮(c1) $(document).ready( function () { $('.button').bind('click', function () { alert("你点击了" + $( this ).text() + '按钮'); }); }); 直接附加事件(c1) $(document).ready( function () { $('.button').click( function () { alert("你点击了" + $( this ).text() + '按钮'); }); }); 利用事件对象的目标属性(c1) $(document).ready( function () { $('.button').click( function (event

Vue:选中商品规格改变字体和边框颜色(默认选中第一种规格)

我与影子孤独终老i 提交于 2019-11-26 16:17:09
效果图: CSS: <div class="label"> <p>标签类别</p> <ul> <li v-for="(item, idx) in list1" :key="idx" :class="{ specColor:changeColor1 === idx}" @click="changeSpec(1,idx)"> <button class="but1">{{item.label}}</button> </li> </ul> </div> <div class="label"> <p>标签类别</p> <ul> <li v-for="(item, idx) in list1" :key="idx" :class="{ specColor:changeColor2 === idx}" @click="changeSpec(0,idx)"> <button class="but1">{{item.label}}</button> </li> </ul> </div> JS: <script> export default { name: 'detailsOfGoods', data () { return { changeColor1: 0, changeColor2: 0, } }, methods: { /* * 选中商品规格 */ changeSpec (i, idx)