验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程

验证用户输入的是不是中文名字

<!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>
<body>
<input type="text" value="" id="txt"><br>
<input type="button" value="验证" id="btn"><br></body>
</html>

淘宝精品案例

<!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="data:images/女靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li><li><a href="#"><img src="data: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>

元素样式设置的方式

<!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>

链式编程

<!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>

验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程相关推荐

淘宝精品案例JS、jQuery
自己只会适用原生js来实现 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
jQuery 实现淘宝精品案例
源码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
jquery实现淘宝精品案例
HTML <div class="wrapper"><ul id="left"><li><a href="# ...
用正则验证用户输入文本框的内容是否是中文汉字
正则表达式:验证用户输入的是否是中文汉字:[\u4e00-\u9fa5]$ : 在网上也找了一些,可是多多少少都有些错,这个必须得自己动手尝试, 下面就是我做的例子: 1.首先,在前台添加一个Te ...
检验入参合法性有哪些_验证用户输入的参数合法性的shell脚本
今天这个例子是用来验证用户输入的参数的合法性的,程序并不复杂,如下所示: #!/bin/sh # validAlphaNum - Ensures that input consists only o ...
使用AT SELECTION-SCREEN事件验证用户输入条件的反思
回想一下,为什么要在AT SELECTION-SCREEN事件验证用户输入条件?好像是第一次做ABAP培训中老师提到的,当时也没有觉得有什么问题,以后在程序中也就按照这样的思路去写代码了.像下面简单的 ...
用户输入邮箱，验证邮箱格式是否正确（验证用户输入的邮箱地址中是否含有字符'@'）
要求:用户输入邮箱,验证邮箱格式是否正确(验证用户输入的邮箱地址中是否含有字符'@'). 目的:掌握邮箱验证控件的原理和方法. #include<stdio.h> #include< ...
编写一个将用户输入的信息输出到网页的js程序和用if else验证用户输入的密码是否正确（两个代码）
js的一次作业罢了 tip:编写一个将用户输入的信息输出到网页的js程序和用if else验证用户输入的密码是否正确 (两个代码) 1.编写一个将用户输入的信息输出到网页的js程序 <!DO ...
如何在 Python 中验证用户输入
要验证用户输入: 使用 while 循环进行迭代,直到提供的输入值有效. 检查输入值在每次迭代中是否有效. 如果该值有效,则跳出 while 循环. # ✅ 验证用户输入的是否是整数num = 0wh ...

验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程

验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程相关推荐

最新文章

热门文章

验证用户输入的是不是中文名字 淘宝精品案例 元素样式设置的方式 链式编程

验证用户输入的是不是中文名字 淘宝精品案例 元素样式设置的方式 链式编程相关推荐

最新文章

热门文章

验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程

验证用户输入的是不是中文名字淘宝精品案例元素样式设置的方式链式编程相关推荐