验证用户输入的是不是中文名字 淘宝精品案例 元素样式设置的方式 链式编程
生活随笔
收集整理的這篇文章主要介紹了
验证用户输入的是不是中文名字 淘宝精品案例 元素样式设置的方式 链式编程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
驗證用戶輸入的是不是中文名字
<!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="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>元素樣式設置的方式
<!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>?
總結
以上是生活随笔為你收集整理的验证用户输入的是不是中文名字 淘宝精品案例 元素样式设置的方式 链式编程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 列表隔行变色、显示和隐藏下拉菜单、列表的
- 下一篇： 元素的样式设置 元素类样式的操作 开关灯