jQuery实例演示

最新推荐文章于 2024-05-08 02:39:14 发布
最新推荐文章于 2024-05-08 02:39:14 发布
阅读量149 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lgclgc666/article/details/94476745
版权

jQuery实例演示

最先最后

代码

<script src="http://how2j.cn/study/jquery.min.js"></script>
     
<script>
$(function(){
   $("#b1").click(function(){
      $("div:first").addClass("pink");  //给选定元素添加样式的属性操作
   });
      
   $("#b2").click(function(){
      $("div:last").addClass("pink");
   });
 
});
      
</script>
  <button id="b1">第一个增加背景色</button>
  <button id="b2">最后一个增加背景色</button>
<br>
<br>
     
<style>
.pink{
   background-color:pink;
}
</style>
      
<div>
  <span>Hello JQuery</span>
     
</div>
    
<div >
  <span>Hello JQuery</span>
</div>
    
<div >
  <span>Hello JQuery</span>
</div>

在这里插入图片描述
在这里插入图片描述

奇偶

<script src="http://how2j.cn/study/jquery.min.js"></script>
      
<script>
$(function(){
   $("#b1").click(function(){
      $("div:odd").toggleClass("pink");    //toggleClass() 对设置或移除被选元素的一个或多个类进行切换
                                                             //$(selector:odd) 满足选择器条件的奇数元素 
   });
       
   $("#b2").click(function(){
      $("div:even").toggleClass("green");
   });
  
});
       
</script>
  <button id="b1">切换奇数背景色</button>
  <button id="b2">切换偶数背景色</button>
<br>
<br>
      
<style>
.pink{
   background-color:pink;
}
.green{
   background-color:green;
}
</style>
       
<div>
  <span>Hello JQuery 0</span>
      
</div>
 
<div>
  <span>Hello JQuery 1</span>
      
</div>
     
<div >
  <span>Hello JQuery 2</span>
</div>
     
<div >
  <span>Hello JQuery 3</span>
</div>
 
<div >
  <span>Hello JQuery 4</span>
</div>
 
</div>
     
<div >
  <span>Hello JQuery 5</span>
</div>
     
<div >
  <span>Hello JQuery 6</span>
</div>

在这里插入图片描述
在这里插入图片描述

可见性

$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素 ;
注意：div:visible 和div :visible(有空格)是不同的意思
（1）div:visible 表示选中可见的div
（2）div :visible(有空格) 表示选中div下可见的元素

<script src="http://how2j.cn/study/jquery.min.js"></script>
        
<script>
$(function(){
   $("#b1").click(function(){
     $("div:visible").hide();
   });
   $("#b2").click(function(){
      $("div:hidden").show();     
   });
});
         
</script>
  <button id="b1">隐藏可见的</button>
  <button id="b2">显示不可见的</button>
  
<br>
<br>
        
<style>
.pink{
   background-color:pink;
}
  
</style>
         
<div>
  <span>Hello JQuery 1</span>
        
</div>
       
<div >
  <span>Hello JQuery 2</span>
</div>
       
<div >
  <span>Hello JQuery 3</span>
</div>
   
<div >
  <span >Hello JQuery 4</span>
</div>
   
</div>
       
<div >
  <span>Hello JQuery 5</span>
</div>
       
<div >
  <span>Hello JQuery 6</span>
</div>

在这里插入图片描述
在这里插入图片描述

表单对象

在这里插入图片描述

<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<script>
$(function(){
   $(".b").click(function(){
      var value = $(this).val();
      $("td[rowspan!=13] "+value).toggle(500);  //toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒
   });
        
});
        
</script>
 
<style>
table{
    border-collapse:collapse;
        table-layout:fixed;
    width:80%;
}
table td{
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    padding-top: 5px;
}
 
div button{
    display:block;
}
 
</style>
 
<table>
    <tr>
         
        <td rowspan="13" valign="top" width="150px">
            <div >
                <button value=":input" class="b">切换所有的:input</button>
                <button value=":button" class="b">切换:button</button>
                <button value=":radio" class="b">切换:radio</button>     
                <button value=":checkbox" class="b">切换:checkbox</button>       
                <button value=":text" class="b">切换:text</button>       
                <button value=":password" class="b">切换:password</button>       
                <button value=":file" class="b">切换:file</button>       
                <button value=":submit" class="b">切换:submit</button>       
                <button value=":image" class="b">切换:image</button>     
                <button value=":reset" class="b">切换:reset</button>         
            </div>           
        </td>
        <td width="120px">说明</td>
        <td width="120px">表单对象</td>
        <td width="">示例</td>
    </tr>
<tr>
  <td >input按钮</td>
  <td >:button</td>
  <td><input type="button" value="input按钮"/></td>
</tr>
 
<tr>
  <td>button按钮</td>
  <td >:button</td>
  <td><button>Button按钮</button></td>
</tr>
<tr>
  <td>单选框</td>
  <td >:radio</td>
  <td><input type="radio" ></td>
</tr>
<tr>
  <td>复选框</td>
  <td >:checkbox</td>
  <td><input type="checkbox"  ></td>
</tr>
 
<tr>
  <td>文本框</td>
  <td >:text</td>
  <td><input type="text" /></td>
</tr>
<tr>
  <td>文本域</td>
  <td ></td>
  <td><textarea></textarea></td>
</tr>
<tr>
  <td>密码框</td>
  <td >:password</td>
  <td><input type="password" /></td>
</tr>
<tr>
  <td>下拉框</td>
  <td ></td>
  <td><select><option>Option</option></select></td>
</tr>
 
<tr>
  <td>文件上传</td>
  <td >:file</td>
  <td> <input type="file" /></td>
</tr>
 
<tr>
  <td>提交按钮</td>
  <td >:submit</td>
  <td><input type="submit" /></td>
</tr>
<tr>
  <td>图片型提交按钮</td>
  <td >:image</td>
  <td><input type="image" src="http://how2j.cn/example.gif" /></td>
</tr>
 
<tr>
  <td>重置按钮</td>
  <td >:reset</td>
  <td><input type="reset" /></td>
</tr>
 
</table>

在这里插入图片描述

当前元素

<script src="http://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
   $("#b1").click(function(){
     $(this).hide();
   });
    
});
</script>
  
<button id="b1">点击隐藏</button>

在这里插入图片描述

斑马线

<script src="http://how2j.cn/study/jquery.min.js"></script>
       
<script>
$(function(){
      $("tr:odd").css("background-color","#f8f8f8"); 
});
</script>
     
<style>
table{
border-collapse:collapse;
width:90%;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
   
td{
width:25%;
text-align:center;
}
   
</style>
<table id="t">
   <tr >
       <td>id</td>
       <td>名称</td>
       <td>血量</td>
       <td>伤害</td>
    </tr>
   <tr >
       <td>1</td>
       <td>gareen</td>
       <td>340</td>
       <td>58</td>
    </tr>
   <tr >
       <td>2</td>
       <td>teemo</td>
       <td>320</td>
       <td>76</td>
    </tr>
   <tr >
       <td>3</td>
       <td>annie</td>
       <td>380</td>
       <td>38</td>
    </tr>
   <tr >
       <td>4</td>
       <td>deadbrother</td>
       <td>400</td>
       <td>90</td>
    </tr>
</table>

在这里插入图片描述
在这里插入图片描述
喜欢的朋友可以关注我的个人公众号，后台回复java资料可免费领取资源。
在这里插入图片描述

有幸添砖java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery小型事例项目
09-30
这个里面的例子 很适合初学者来体验jquery的强大之处，现在我把这个项目贴出来，和大家一起分享，下载后到各个浏览器上运行都兼容，希望能够帮助到各位！
jQuery项目案例
qq_52108058的博客
06-27 4874
2、微博发布 3、移动水果 4、上下拉切换 5、精品演示 6、tab标签切换 7、突出显示 总结 li:first li:last li:eq(2) li:odd --奇数 li:even --偶数 ul li --子代 ul
JQuery实现小项目
xyk：的博客
05-25 2339
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344?jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。拥有便捷的插件扩展机制和丰富的插件。总的来说，它就是一个工具js，是一个很好的外部资源，它提供了很多简洁高效的API。想下载的看下我的码云~~
50个实用的jquery案例
二手农民的学习博客
02-25 4689
1. 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器，   //只剩下那些与给定的选择器匹配的部分。在这种情况下，   //查询删除了任何没（:not）有（:has）   //包含class为“selected”（.selected）的子节点。   .filter(":not(:has(.selected))")  2. 如何重用元素搜索 var a
JQuery 常见效果演示
litengbin的博客
01-18 315
显示 隐藏 切换 显示 隐藏 切换 分别通过show(), hide(),toggle()实现 也可以加上毫秒数，表示延时操作,比如show(2000) $(function(){ var div = $("#d"); $("#b1").click(function(){ div.hide(); }); $("#b2").click(functi
jquery实例演示及动态效果
06-04
在"jQuery实例演示及动态效果"中，我们可以找到一系列示例，涵盖了多种jQuery的核心功能和常见应用。 首先，`myeclipse创建的实例`可能涉及到了在集成开发环境MyEclipse中如何引入和使用jQuery库。MyEclipse是用于...
jQuery表单验证实例演示特效代码
03-20
**jQuery表单验证实例详解** 在网页开发中，表单验证是必不可少的一部分，它能确保用户输入的数据符合预设的规则，从而提高数据质量和用户体验。本实例基于jQuery库，提供了手机号码、电子邮箱、中文姓名和身份证...
jQuery表单验证实例演示代码
04-07
本实例演示代码是关于jQuery实现的表单验证，它允许开发者轻松地对手机号码、电子邮箱、中文姓名和身份证号码等常见输入类型进行有效性检查。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、...
jquery实现表单验证简单实例演示
10-23
标题“jquery实现表单验证简单实例演示”和描述“向大家推荐了一个jquery实现表单验证简单实例演示，需要的朋友可以参考下”指向的内容是关于如何使用jQuery来实现一个表单验证的简单实例。jQuery是一个快速、小巧、...
jQuery圆点步骤条实例演示代码
07-24
在本文中，我们将深入探讨如何使用jQuery来实现一个圆点步骤条实例，这将帮助你创建一个具有四个步骤的简单导航工具，其中每个步骤都由一个圆点表示，并且可以通过按钮进行控制，以便用户可以逐步操作。这个实例适用...
JQuery项目
10-16
jQuery项目实例开发，案例齐全，全面 对你肯定有很大帮助！
jQuery案例
WangZhang_521的博客
05-06 2636
01-精品展示案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
值得 Web 开发人员学习的20个 jQuery 实例教程
loster_Li的博客
09-06 413
1. How to create a parallax scrolling using jQuery 学习使用 jQuery 实现一个精美的视差滚动（Parallax Scrolling）幻灯片效果。 在线演示     源码下载    2. How to make a curving text using jQuery and CSS3 教你综合运用 jQ
JQuery 入门 - 附案例代码_jquery前端开发实战教程案例源码(1)
2401_84164672的博客
04-17 1135
\*\* 自定义动画\* 参数1：需要做动画的属性\* 参数2：需要执行动画的总时长\* 参数3：执行动画的时候的速度\* 参数4：执行动画完成之后的回调函数\* \*/console.log('动画执行完成');});案例-《360开关机动画》
最新JQuery 入门 - 附案例代码_jquery前端开发实战教程案例源码，2024年最新阿里三面
最新发布
2401_84185556的博客
05-08 1024
/通过给$.fn添加方法就能够扩展jquery对象});});标题1我是弹出来的div1◆◆◆});});});
jquery案例演示
李卫康的博客
07-11 815
案例一：&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script language="JavaScript" src="../js/jquery-1.4.2.js"&gt;&lt;/scri
jquery中发布微博案例分析
weixin_45147894的博客
10-23 650
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-...
jQuery[详解]+小案例
m0_56245036的博客
01-06 772
初始jQuery jQuery是JavaScript的程序库之一，它是JavaScript对象和实用函数的封装(不存在浏览器兼容性问题) jQuery的优势 1.轻量级 2.强大的选择器 3.出色的DOM封装 4.可靠的事件处理机制 5.出色的浏览器的兼容性问题 6.隐式迭代 7.丰富的插件支持 jQuery语法 $(document).ready(function(){代码}) 窗体加载执行 window.onload和$(document...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值