验证用户输入的是不是中文名字 淘宝精品案例 元素样式设置的方式 链式编程
2019-01-16 08:48
751 查看
验证用户输入的是不是中文名字
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.1.js"></script> <script> // 点击按钮,验证用户输入的是不是中文名字,如果是中文名字,则文本框的背景 // 为绿色,否则为红色 $(function(){ var reg = /^[\u4e00-\u9fa5]{2,6}$/; var flag = reg.test($("#txt").val()); // 按钮的点击事件 $("#btn").click(function(){ if(flag){ $("#txt").css("backgroundColor","green"); }else{ $("#txt").css("backgroundColor","red"); } }); }); </script> </head> <bo 4000 dy> <input type="text" value="" id="txt"><br> <input type="button" value="验证" id="btn"><br> </body> </html>
淘宝精品案例
[code]<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } ul { list-style: none; } a { text-decoration: none; } .wrapper { width: 298px; height: 248px; margin: 100px auto 0; border: 1px solid pink; overflow: hidden; } #left, #center, #right { float: left; } #left li, #right li { background: url(images/lili.jpg) repeat-x; } #left li a, #right li a { display: block; width: 48px; height: 27px; border-bottom: 1px solid pink; line-height: 27px; text-align: center; color: black; } #left li a:hover, #right li a:hover { background-image: url(images/abg.gif); } #center { border-left: 1px solid pink; border-right: 1px solid pink; } </style> <script src="jquery-1.12.1.js"></script> <script> // .index()方法---->当前这个元素的索引 // :eq(索引值)---->选择器----对应索引的元素 // 页面加载事件 $(function(){ // 左边的ul中的li $("#left>li").mouseenter(function(){ // 先获取当前li的索引值 var index = $(this).index(); // console.log(index); // 先隐藏所有的li $("#center>li").hide(); // 设置某个li显示 // $("#center>li:eq(索引值)")---->对应的li标签 // 显示当前的对应的li即可 $("#center>li:eq("+index+")").show(); }); // 右边的ul中的li $("#right>li").mouseenter(function(){ // 先获取当前li的索引值 var index = $(this).index()+9; // console.log(index); // 先隐藏所有的li $("#center>li").hide(); // 设置某个li显示 // 显示当前的对应的li即可 $("#center>li:eq("+index+")").show(); }); }); </script> </head> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> </ul> <ul id="center"> <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li> <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li> </ul> <ul id="right"> <li><a href="#">女包</a></li> <li><a href="#">男靴</a></li> <li><a href="#">登山鞋</a></li> <li><a href="#">皮带</a></li> <li><a href="#">围巾</a></li> <li><a href="#">皮衣</a></li> <li><a href="#">男毛衣</a></li> <li><a href="#">男棉服</a></li> <li><a href="#">男包</a></li> </ul> </div> </body> </html>
元素样式设置的方式
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.1.js"></script> <script> $(function(){ $("#btn").click(function(){ // 设置div的样式 // 第一种写法: // $("#dv").css("width","200px"); // $("#dv").css("height","200px"); // $("#dv").css("backgroundColor","hotpink"); // $("#dv").css("border","1px solid red"); // 第二种写法: // $("#dv").css("width","200px") // .css("height","200px") // .css("backgroundColor","hotpink") // .css("border","1px solid red"); // 第三种写法:键值对写法 var json = { "width":"200px", "height":"100px", "backgroundColor":"pink", "border":"1px solid green" }; $("#dv").css(json); }); }); </script> </head> <body> <input type="button" value="显示效果" id="btn"> <div id="dv"></div> </body> </html>
链式编程
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.1.js"></script> <script> $(function(){ // 链式编程:对象不停的调用方法 // 对象.方法().方法().方法(); // 对象调用方法,如果返回值还是当前这个对象,那么就可以继续的调用方法 // 经验:在jQuery中,一般情况,对象调用的方法,这个方法的意思是设置的意思 // 那么返回来的几乎都是当前的对象,就可以继续的链式编程了 $("#btn").click(function(){ // 获取按钮的value属性值----这个方法此时是获取,返回的是某个属性值 // console.log($(this).val()); // var obj = $(this).val("哈哈,我又变帅了"); // console.log(obj); // $(this).val("哈哈").css("backgroundColor","red"); // var result = $(this).css("backgroundColor","red"); // console.log(result); // $(this).val("哈哈").css("backgroundColor","red") // .css("width","200px"); // $("p").text();---->获取 // $("p").text("哈哈") // $("p").html() }); }); </script> </head> <body> <input type="button" value="显示效果" id="btn"> </body> </html>
相关文章推荐
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- struts的快速入门案例(用户登录验证)——手动配置方式
- js验证函数 验证手机 邮箱/email 邮编 身份证 中文 ip及S有3种方式来获取元素
- 用java编写一个程序,来验证用户输入的数是不是2的阶次方
- 黄聪:phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- 如何以编程方式设置基于 Windows Mobile 的 Smartphone 输入模式?
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- win10 中怎么将用户密码输入验证设置为当电脑从睡眠模式中唤醒时
- 用正则验证用户输入文本框的内容是否是中文汉字
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- jquery.metadata.js 方式验证用户输入框功能
- 5.JavaScript改变样式,验证用户输入
- 用正则验证用户输入文本框的内容时候是中文汉字
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护
- 安全编程: 验证输入--接收用户数据的最佳实践
- 页面禁止用户输入中文实现方式
- DOM模型验证用户输入小案例
- phpexcel中文教程-设置表格字体颜色背景样式、数据格式、对齐方式、添加图片、批注、文字块、合并拆分单元格、单元格密码保护