找到要设置样式的类名,直接按照下面写法设置就可以了!
<style lang="less" scoped>
@deep: ~'>>>';
@{deep}.ivu-transfer-operation {
visibility: hidden !important;
}
</style>
复制代码
uniapp引入css样式、图标库、动画库
uniapp如何引入官方的css样式库
1.项目目录新建一个common的文件夹
common一般存放的是项目引入的一个css和js样式库
2.将样式库的css或者js复制到common文件夹
3.在App.vue中引入需要的样式库
<script> export default { onLaunch: function() { console.log('App Launch'); }, onShow: function() { console.log('App Show'); }, onHide: function() { console.log('App Hide'); } }; </script> <style> /*每个页面公共css */ /* 引入hello模板公共样式库 */ @import './common/uni.css'; /* 引入animate动画库 */ @import './common/animate.css'; /* 引入图标 */ @import './common/icon.css'; </style>
4.注意事项
如果引入的是hello模板里面的uni.css样式库,则还需要拷贝static文件夹下的后缀名为.ttf的文件 相应创建一个static文件夹,将文件放置到文件夹中,否则启动项目会报错。 原因:uni.css中引入了uni.ttf @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src: url('~@/static/uni.ttf') format('truetype'); }
uniapp如何引入的css图标库
1.进入https://www.iconfont.cn/阿里巴巴矢量图标库
2.如何下载图标
选择你要使用的图标,点击购物车,加入完成后点击右上角购物车按钮,然后进入点击添加至项目 取一个项目名然后进去之后会默认选择unicode,选择右边的下载至本地,然后下载过后解压文件 里面有个iconfont.css文件拷贝到项目文件common文件夹中 App.vue中@import './common/iconfont.css';
3.如何使用图标
解压的压缩包中有一个html文件,将html文件打开,里面有显示的图标,F12审查元素 选择你要使用的图标,点击它,在底部查看他的类名,复制他的类名到项目标签中,即可使用。
uniapp如何引入的css动画库
1.进入https://daneden.github.io/animate.css/
2.点击下方的下载
3.下载好之后右键另存为animate.css将其复制到common文件夹中
4.在App.vue中引入(同上)
5.在class类名中添加相应的类名就可以引入相关的动画
jQuery中的 DOM 操作
查
查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 操作文本节点:通过 text() 方法
增
创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回. 注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 $(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”) 或 $(“<P>”) 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
改
删
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. $(function() { function showContent(li) { alert($(li).text()); } $("li").click(function() { showContent(this); }); //1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, //可以取消指定元素的默认行为. 比如 submit, a 等 //2. val() 方法, 相当于 attr("value"), 获取表单元素的 value 属性值. //3. $.trim(str): 可以去除 str 的前后空格. //4. jQuery 对象的方法的连缀: 调用一个方法的返回值还是调用的对象, 于是可以 //在调用方法的后面依然调用先前的那个对象的其他方法. $(":submit").click( function() { var $type = $(":radio[name='type']:checked"); if ($type.length == 0) { alert("请选择类型."); return false; } var type = $type.val(); var $name = $(":text[name='name']"); var name = $name.val(); //$.trim(str): 可以去除 str 的前后空格. name = $.trim(name); $name.val(name); if (name == "") { alert("请输入内容"); return false; } $("<li>" + name + "</li>").appendTo($("#" + type)).click( function() { showContent(this); }); //取消 submit 的默认行为 return false; }); }) </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br> <br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br> <br> <form action="dom-7.html" name="myform"> <input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="game">游戏 name: <input type="text" name="name" /> <input type="submit" value="Submit" id="submit" /> </form> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话 //那么这个对象一定是一个 jQuery 对象 //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象 function removeTr(aNoe){ //获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象 var $trNode = $(aNoe).parent().parent(); var textContent = $trNode.find("td:first").text(); textContent = $.trim(textContent); var flag = confirm("确定要删除" + textContent + "的信息吗?"); if(flag){ $trNode.remove(); } return false; } $("#employeetable a").click(function(){ return removeTr(this); }); $("#addEmpButton").click(function(){ $("<tr></tr>").append("<td>" + $("#name").val() + "</td>") .append("<td>" + $("#email").val() + "</td>") .append("<td>" + $("#salary").val() + "</td>") .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>") .appendTo("#employeetable tbody") .find("a") .click(function(){ return removeTr(this) }); }); }) </script> </head> <body> <center> <br> <br> 添加新员工 <br> <br> name: <input type="text" name="name" id="name" /> email: <input type="text" name="email" id="email" /> salary: <input type="text" name="salary" id="salary" /> <br> <br> <button id="addEmpButton" value="abc">Submit</button> <br> <br> <hr> <br> <br> <table id="employeetable" border="1" cellpadding="5" cellspacing=0> <tbody> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td> Jerry </td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </tbody> </table> </center> </body> </html>
复制和替换
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为. clone(true): 复制元素的同时也复制元素中的的事件 注意: //复制 #bj 节点, 并添加到 #rl 节点的后面 /* 1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id 属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况. 2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. */ $("#bj").clone(true) .attr("id", "bj2") .insertAfter($("#rl")); replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素 replaceAll(): 颠倒了的 replaceWith() 方法. 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失 以上的两个方法还有移动节点的功能 节点互换需要先克隆节点. 这是用bj2来替换rl,返回的是被替换的节点的引用就是rl节点的引用 var $rl = $("#rl").replaceWith($bj2);
包裹节点
wrap(): 将指定节点用其他标记包裹起来. 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义. wrapAll(): 将所有匹配的元素用一个元素来包裹. 而 wrap() 方法是将所有的元素进行单独包裹. wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> //测试使用 jQuery wrap, wrapAll, wrapInner $(function() { //包装 li 本身 $("#game li").wrap("<font color='red'></font>"); //包装所有的 li $("#city li").wrapAll("<font color='red'></font>"); //包装 li 里边的文字. $("#language li").wrapInner("<font color='red'></font>"); }) </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li id="dj">东京</li> <li id="se">首尔</li> </ul> <br> <br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br> <br> <p>你喜欢哪种开发语言?</p> <ul id="language"> <li>C</li> <li>Java</li> <li>.NET</li> <li>PHP</li> </ul> <br> <br> gender: <input type="radio" name="gender" value="male" />Male <input type="radio" name="gender" value="female" />Female <br> <br> name: <input type="text" name="username" value="atguigu" /> </body> </html>
属性操作
attr(): 获取属性和设置属性 当为该方法传递一个参数时, 即为某元素的获取指定属性 当为该方法传递两个参数时, 即为某元素设置指定属性的值 jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等. removeAttr(): 删除指定元素的指定属性 读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档 读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档. 读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值). 如果为多选下拉列表框, 则返回一个包含所有选择值的数组
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ //1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数 $(":text").focus(function(){ //2. 当获取焦点时, 若 #address 中是默认值 //(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 "" var val = $(this).val(); if(val == this.defaultValue){ $(this).val(""); } }).blur(function(){ //3. 失去焦点是, 若 #address 的值在去除前后空格后等于 "" //则为其恢复默认值. var val = this.value; if($.trim(val) == ""){ this.value = this.defaultValue; } }); //2. $(":button:eq(1)").click(function(){ $("#single").val("选择3号"); }); $(":button:eq(2)").click(function(){ $("#multiple").val(["选择2号", "选择4号"]); }); $(":button:eq(3)").click(function(){ $(":checkbox[name='c']").val(["check2", "check4"]); }); $(":button:eq(4)").click(function(){ //即便是为一组 radio 赋值, val 参数中也应该使用数组. //使用一个值不起作用。 $(":radio[name='r']").val(["radio2"]); }); $(":button:eq(5)").click(function(){ //val() 可以直接获取 select 的被选择的值. alert($("#single").val()); alert($("#multiple").val()); //val 不能直接获取 checkbox 被选择的值 //若直接获取, 只能得到第一个被选择的值. //因为 $(":checkbox[name='c']:checked") 得到的是一个 //数组. 而使用 val() 方法只能获取数组元素的第一个值 //若希望打印被选择的所有制, 需要使用 each 遍历. //alert($(":checkbox[name='c']:checked").val()); $(":checkbox[name='c']:checked").each(function(){ alert(this.value); }); //而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. alert($(":radio[name='r']:checked").val()); }); }) </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址"><br> <input type="text" id="password" value="请输入邮箱密码"><br> <input type="button" value="登录"> <br><br><br> <input type="button" value="使单选下拉框的'选择3号'被选中"/> <input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br> <input type="button" value="使多选框的'多选2'和'多选4'被选中"/> <input type="button" value="使单选框的'单选2'被选中"/><br> <input type="button" value="打印已经被选中的值"><br> <br/> <select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <br/><br/> <input type="checkbox" name="c" value="check1"/> 多选1 <input type="checkbox" name="c" value="check2"/> 多选2 <input type="checkbox" name="c" value="check3"/> 多选3 <input type="checkbox" name="c" value="check4"/> 多选4 <br/> <input type="radio" name="r" value="radio1"/> 单选1 <input type="radio" name="r" value="radio2"/> 单选2 <input type="radio" name="r" value="radio3"/> 单选3 </body> </html>
样式操作
获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它. 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false 获取和设置元素的样式属性: css() 获取和设置元素透明度: opacity 属性 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”); 获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 12px; text-align: center; } a { color: #04D; text-decoration: none; } a:hover { color: #F50; text-decoration: underline; } .SubCategoryBox { width: 600px; margin: 0 auto; text-align: center; margin-top: 40px; } .SubCategoryBox ul { list-style: none; } .SubCategoryBox ul li { display: block; float: left; width: 200px; line-height: 20px; } .showmore { clear: both; text-align: center; padding-top: 10px; } .showmore a { display: block; width: 120px; margin: 0 auto; line-height: 24px; border: 1px solid #AAA; } .showmore a span { padding-left: 15px; background: url(img/down.gif) no-repeat 0 0; } .promoted a { color: #F50; } </style> <script type="text/javascript" src="scripts/jquery-1.3.1.js"></script> <script type="text/javascript"> $(function() { //测试 jQuery 样式相关的方法. //1. hasClass(): 某元素是否有指定的样式 alert($("div:first").hasClass("SubCategoryBox")); //true //2. 移除样式 $("div:first").removeClass("SubCategoryBox"); alert($("div:first").hasClass("SubCategoryBox")); //3. 添加样式 $("div:first").addClass("SubCategoryBox"); //4. 切换样式: 存在, 则去除; 没有, 则添加. $(".showmore").click(function() { $("div:first").toggleClass("SubCategoryBox"); return false; }); //5. 获取和设置元素透明度: opacity 属性 alert($("div:first").css("opacity")); $("div:first").css("opacity", 0.5); //6. width 和 height alert($("div:first").width()); alert($("div:first").height()); $("div:first").width(400); $("div:first").height(80); //7. 获取元素在当前视窗中的相对位移: offset(). //其返回对象包含了两个属性: top, left. 该方法只对可见元素有效 alert($("div:first").offset().top); alert($("div:first").offset().left); }); </script> </head> <body> <div class="SubCategoryBox"> <ul> <li><a href="#">佳能</a><i>(30440) </i></li> <li><a href="#">索尼</a><i>(27220) </i></li> <li><a href="#">三星</a><i>(20808) </i></li> <li><a href="#">尼康</a><i>(17821) </i></li> <li><a href="#">松下</a><i>(12289) </i></li> <li><a href="#">卡西欧</a><i>(8242) </i></li> <li><a href="#">富士</a><i>(14894) </i></li> <li><a href="#">柯达</a><i>(9520) </i></li> <li><a href="#">宾得</a><i>(2195) </i></li> <li><a href="#">理光</a><i>(4114) </i></li> <li><a href="#">奥林巴斯</a><i>(12205) </i></li> <li><a href="#">明基</a><i>(1466) </i></li> <li><a href="#">爱国者</a><i>(3091) </i></li> <li><a href="#">其它品牌相机</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="more.html"><span>显示全部品牌</span></a> </div> </div> </body> </html>
找到要设置样式的类名,直接按照下面写法设置就可以了!
<style lang="less" scoped>
@deep: ~'>>>';
@{deep}.ivu-transfer-operation {
visibility: hidden !important;
}
</style>
复制代码
转载于:https://juejin.im/post/5ce3a29f6fb9a07eff005cdf
引入官方css样式库
https://uniapp.dcloud.io/snippet
留下data那一行,结尾用分号结束
/* icon.css - 自定义图标库 */
@import './common/icon.css';
12
找到之前解压的文件,里面有一个demo的html文件,在浏览器中打开,选择font-class
在页面单击右键,检查
复制class中的内容,用到我们需要引入该图标的页面中,如下
运行即可显示。