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

最新推荐文章于 2024-07-26 23:28:40 发布
最新推荐文章于 2024-07-26 23:28:40 发布
阅读量247 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/86501745
版权

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

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

 

Leon_Jinhai_Sun
关注
jquery day1
LBunny_的博客
09-29 171
1、官网：jquery.com  1.12.1版本 正常版本 压缩版本：开发都可以，上线使用压缩版本 //引入jquery文件 &lt;script src="jquery-q.21.1.js"&gt;&lt;/script&gt; //点击按钮，设置div样式 $("#btn").click(function(){ $("#dv").css({"width":"200px&
AttributeError: module 'labelme.utils' has no attribute 'draw_label'
简简单单
02-05 9945
实现labelme批量json_to_dataset方法中 https://blog.csdn.net/yql_617540298/article/details/81110685#comments 看到有人问：AttributeError: module 'labelme.utils' has no attribute 'draw_label'出现了这个问题，由于我这里没有出现这个问题，所以...
CSS样式表和选择器
cj460253216的博客
02-23 477
第四天内容 1. 什么是样式表 css 全称是Cascading Style Sheet Cascading 级联、层叠 Style 样式、风格 Sheet 表 作用：是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 语法：css规则由两个主要的部分构成：选择器，以及一条或多条申明（每条申请由一个属性和一个值组成） 例子：h1{color:red;}
session应用----登录验证小案例
weixin_30835649的博客
10-26 128
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServe...
HTML/CSS之 利用伪元素制作鼠标hover展示动画！
hzxOnlineOk的博客
01-07 814
作者：LeJo 链接：https://www.imooc.com/article/5083 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf8" &gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; body {
jQuery表单验证
12-25
4. **显示反馈信息**：如果验证失败，可以通过改变元素样式或显示错误消息来提示用户。例如，使用`.addClass()`和`.removeClass()`改变边框颜色，或者使用`.html()`修改元素内的文本。 三、jQuery插件：进一步增强...
jQuery之案例
qq_41320857的博客
08-04 467
下拉列表  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
【愚公系列】《AIGC辅助软件开发》013-AI辅助客户端编程：AI辅助 iOS 应用开发
最新发布
时光隧道
07-26 1万+
随着人工智能技术的迅猛发展，AI 在软件开发领域的应用越来越广泛，尤其是客户端编程。本文将探讨 AI 如何辅助 iOS 应用开发，通过智能化的工具和技术，提高开发效率、优化代码质量，以及增强用户体验。在 iOS 开发过程中，面对复杂的编程任务和多变的需求，开发者常常需要花费大量时间进行调试和优化。而 AI 的引入，正好为这一挑战提供了有效的解决方案。通过利用 AI 的强大计算能力和学习能力，开发者能够更加高效地生成代码、检测错误，并获取技术建议。
精通jquery（中文第二版）_扫描版_以及源代码
07-26
4. **CSS和样式操作**：讲解如何通过jQuery修改元素的样式，包括获取和设置CSS属性，以及使用addClass、removeClass和toggleClass操作类名。 5. **特效与动画**：涵盖fadeIn、fadeOut、slideToggle等基本动画效果，...
【WebHelpers.html.builder项目案例】：实例揭秘构建电子商务网站的前端艺术
该库允许开发者以声明式的方式构建 HTML 元素，从而提高代码的可读性和可维护性。 ## 核心特性 WebHelpers.html.builder 的核心特性包括： - **链式调用**：通过链式调用方法，可以简洁地构建复杂的 HTML 结构。 - ...
jQuery----淘宝商品展示（类似与tab切换）
01-16 933
实现效果如图： 功能需求： ①鼠标进入商品名称，商品名称变色，同时对应的物品展示图片显示对应的物品，鼠标移出时候，商品名称恢复原来的颜色 实现分析： 1.HTML+CSS页面结构如下： 页面结构设计中，需要注意的知识点： ①商品li设置边框时候，只设置下边框 ②三个列表之间的分割线，使用id为center的ul 的borde...
02.jQuery 选择器及应用
人间清醒
04-07 403
1.选择器案例 a.点击按钮，设置层中的显示内容为：这是一个层，同时设置这个层的背景颜色 (id选择器); <input type="button" value="好听的歌" id="btn"> <div id="dv"></div> // 点击按钮，设置层中的显示内容为：这是一个层，同时设置这个层的背景颜色 // (id选择器); ...
python轻量级爬虫学习笔记 之 urllib的应用
poppyque的博客
06-10 1206
在cmd中导入相关库和模块 urllib 库的request模块 from urllib import request请求URLresp = request.urlopen("http://www.baidu.com")使用响应变量输出数据print(resp.read().decode('utf-8')) 模拟浏览器设置 携带User-Agent头 req = request.Request
淘宝精品案例
a63438840的博客
09-14 368
案例分析： 1，鼠标移动到左右两边的 li 上面，所对应的中间的图片就会展示出来，其余图片隐藏 2，左边的 li 的索引号是 0-8 , 中间图片 li 的索引号是 0-17 ， 右边 li 的索引号是 0-8 ，但是 右边 li 所对应的图片的索引号是 9-17 ， 要加8 关键代码 $(function(){ $("#left > li").mous...
抓取淘宝商品详情时，用到的一些正则表达式
weixin_44490109的博客
05-30 741
一、去除数据里的标签 delHtmlTag(str) { str = str.replace(/<[^>]+>/g, ''); //去掉所有的html标记 return str.replace(/\s+/g,''); //去掉所有空格 } 二、详情数据处理 /<\s*img\s+[^>]*?size\s*=\s*(.*?)[^>]*?\/?\s*>/i.test(el) //判断是否是<img></img>标签包裹的数据
威纶触摸屏：设置数值输入上下限与用户密码登录教程
首先，设置数值输入元件的上下限，可以帮助用户限制输入范围，防止数据溢出或误操作。具体步骤如下： 1. 打开项目文件，选择需要限制的数值输入元件，右键点击后选择“属性”。在弹出的“属性”窗口中，进入“格式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值