Jquery学习笔记之一[常用组件]

已于 2024-06-29 08:13:59 修改
阅读量31 收藏
点赞数
分类专栏： 前端学习笔记 文章标签： jquery 学习 笔记
于 2019-09-25 08:59:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43071699/article/details/101280114
版权

1, 全选全不选操作:

<html>
	<head>
		<style type="text/css">
		   body{ font-size:150% }
           td{text-align:center}
	  </style>
	   <!--  引入jquery框架的源码     -->
      <script type="text/javascript" src="jquery-1.8.3.js"></script>
      
	  <script type="text/javascript">
	  	  
	  	  function fun(){
	  	  // jquery支持对一组标签直接设置属性
	  	      $("input[type=checkbox]:gt(0)").prop("checked",  $("#ck1").prop("checked") );
	  	  }
	  	  
	  	  function f1(){
	  	  	// 得到所有被选中的复选框
	  	  	 var len1 = $("input[type=checkbox]:gt(0):checked").length ;
	  	  	 // 得到所有复选框(除了第一个)
	  	  	 var len2 = $("input[type=checkbox]:gt(0)").length;
	  	  	 if( len1 == len2 ){  $("#ck1").prop("checked",true); }	  
	  	  	 else{ $("#ck1").prop("checked",false);  }	  	  
	  	  }
	  	    
	  	  
	  </script>
  </head>
	
	
  <body>
  	 Id: <input type="text" id="id"  style="margin-right:20px"/>
  	 Name: <input type="text" id="name" style="margin-right:20px"/> 
  	 Price:<input type="text" id="price"/>
  	 <input type="button" value="add" style="margin-left:20px"/>
  	 
  	 <hr size="2"/>
  	 
  	 <p> &nbsp; </p>
     <table border="1" bordercolor="blue" cellspacing="0" width="70%" align="center">
       <tbody id="tbody">
          <tr bgcolor="lightblue" align="center"> 
          	  <td><b> <input type="checkbox" id="ck1" onclick="fun()"/> </b></td>
              <td><b> Id </b></td>
              <td><b> Name </b></td>
			  <td><b> Price </b></td>
			  <td><b> Count </b></td>
			  <td><b> Total_Price </b></td>
              <td><b> Delete </b> </td>
          </tr>
          <tr> 
              <td> <input name="a1" onclick="f1()" type="checkbox" /> </td>
              <td> 1 </td>
              <td>Iphone6</td>
			  <td>5000</td><td><input type="button" value="-"/><input type="text" size="2" value="1"/><input type="button" value="+"/></td><td>5000</td>
              <td> <input type="button" value="delete"/> </td>
          </tr>
          <tr> 
              <td> <input name="a1" onclick="f1()" type="checkbox" /> </td>
              <td> 2 </td>
              <td>IPad</td>
			  <td>2000</td><td><input type="button" value="-"/><input type="text" size="2" value="1"/><input type="button" value="+"/></td><td>2000</td>
              <td> <input type="button" value="delete"/> </td>
          </tr>
          
<tr>  
              <td> <input name="a1" onclick="f1()" type="checkbox" /> </td>
              <td> 3 </td>
              <td>Apple</td>
			  <td>7</td><td><input type="button" value="-"/><input type="text" size="2" value="1"/><input type="button" value="+"/></td><td>7</td>
              <td> <input type="button" value="delete"/> </td>
          </tr>
          <tr>  
              <td> <input name="a1" onclick="f1()" type="checkbox" /> </td>
              <td> 3 </td>
              <td>Apple</td>
			  <td>7</td><td><input type="button" value="-"/><input type="text" size="2" value="1"/><input type="button" value="+"/></td><td>7</td>
              <td> <input type="button" value="delete"/> </td>
          </tr>
          <tr>  
              <td> <input name="a1" onclick="f1()" type="checkbox" /> </td>
              <td> 3 </td>
              <td>Apple</td>
			  <td>7</td><td><input type="button" value="-"/><input type="text" size="2" value="1"/><input type="button" value="+"/></td><td>7</td>
              <td> <input type="button" value="delete"/> </td>
          </tr>
     </table>
     <div style="text-align:center">
          <input type="button" value="select all" style="margin-right:20px"/>
          <input type="button" value="delete all select" style="margin-right:20px"/>
          <input type="button" value="取消选中" style="margin-right:20px"/>
     </div>
  </body>
</html>

2.1, 用jquery搜索框下拉列表更换URL

<html>
    <head>
       <meta http-equiv="content-type" content="text/html;charset=GBK"/>    
       <style type="text/css">
           span{ color:red ; font-size:82.5% ; margin-left:5px ; font-weight:bolder }
           .ok{ color:green }
       </style>
       <script type="text/javascript" src="/jquery_day1/jquery-1.8.3.js"></script>
       <script type="text/javascript">
            
            function fun(){
               var val = $("#qc option:selected").val();
               if( val=="name" ){  $("#f1").prop("action","/xxx/NameAction");      }
               if( val=="mobile"){  $("#f1").prop("action","/xxx/MobileAction"); }
               if( val=="email"){  $("#f1").prop("action","/xxx/EmailAction");  }       
            }  
       </script>
    </head>
    <body>
       <form action="" method="get" id="f1">
           <select id="qc" name="qc" onchange="fun()">
               <option>请选择</option>
               <option value="name">按名字搜索</option>
               <option value="mobile">按手机号码搜索</option>
               <option value="email">按email邮箱搜索</option>
           </select>
           <input type="text" name="qcv" id="qcv"/>
           <input type="submit" value="搜索"/>
       </form>
    </body>
</html>

2.2, 用js搜索框下拉列表更换URL


<html>
    <head>
       <meta http-equiv="content-type" content="text/html;charset=GBK"/>    
       <style type="text/css">
           span{ color:red ; font-size:82.5% ; margin-left:5px ; font-weight:bolder }
           .ok{ color:green }
       </style>
       
       <script type="text/javascript">
            
            function fun(){
               //获取下拉列表
               var qc = document.getElementById("qc");
               // 获取所有option
               var ops = qc.options; 
               // 获取被选中的option的下标
               var idx = qc.selectedIndex;
               // 获取被选中的值
               var val = ops[idx].value;
               //设置form标签的action属性
               var f1 = document.getElementById("f1");
               if( val == "name" ) f1.action="/js_day2/NameAction";
               if( val == "mobile") f1.action="/js_day2/MobileAction";
               if( val == "email") f1.action="/js_day2/EmailAction";
            }
            
       </script>
    </head>
    <body>
       <form action="" method="get" id="f1">
           <select id="qc" name="qc" onchange="fun()">
               <option>请选择</option>
               <option value="name">按名字搜索</option>
               <option value="mobile">按手机号码搜索</option>
               <option value="email">按email邮箱搜索</option>
           </select>
           <input type="text" name="qcv" id="qcv"/>
           <input type="submit" value="搜索"/>
       </form>
    </body>
</html>

3, 用JS联级下拉列表框


<html>
    <head>
       <meta http-equiv="content-type" content="text/html;charset=GBK"/>    
       <style type="text/css">
      
       </style>
       
       <script type="text/javascript">
           
           var liaoning = [{text:"沈阳",value:"shenyang"},{text:"铁岭",value:"tieling"},{text:"大连",value:"dalian"}];
           var henan = [{text:"郑州",value:"zhengzhou"},{text:"信阳",value:"xinyang"},{text:"安阳",value:"anyang"}]; 
           
           // 定义一个函数,获取省份对应的数组
           function getArray(prov){
              if( prov=="liaoning" ) return liaoning;
              if( prov=="henan") return henan;
           }
           
           function selectCitys(tag){
              // 此处tag代表 province 下拉列表
              // options    selectedIndex 
              var prov = tag.options[ tag.selectedIndex ].value; 
              // 获取prov对应的数组
              var array = getArray(prov);
              // 获取城市下拉列表
              var city = document.getElementById("city");
              // 清空city下拉列表
              city.options.length = 0;
              // 将数组里的数据存入city下拉列表
              for( var i=0;i<array.length;i++){
                 city.options[i] = new Option( array[i].text , array[i].value );
              }
           }
           
       </script>
    </head>
    <body>
        <select name="province" onchange="selectCitys(this)">
            <option>请选择省份</option>
            <option value="liaoning">辽宁</option>
            <option value="henan">河南</option>
        </select>
        <select name="city" id="city">
            <option>请选择城市</option>
        </select>
    </body>
</html>
java我跟你拼了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
jQuery 学习笔记
MYgirlHHH的博客
12-15 770
jQuery
jQuery学习笔记之初始jQuery
我的博客
03-18 406
1、jQuery是什么 jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设...
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 461
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery 学习笔记（一）
qq_39494076的博客
08-04 276
1-2 jQuery 语法 API 3- 网络 前后端数据交互 ajax 4-5 项目 列表渲染 ajax 6- 项目 UI框架 后台系统（方式） 今日要点 了解什么是JS框架和库 了解jQuery背景和优点 掌握jQuery引入方式和入口函数的使用 掌握jQuery事件绑定语法 了解jQuery中的动画函数的使用 掌握jQuery中文本内容的访问和写入 掌握jQuery对象和DOM对象间的相互转换 掌握css和标签属性的修改方法 掌握jQuery常用选择器及方法 一、什么是J
jQuery学习笔记之jQuery常用方法，【设计思想解读开源框架
2401_83621426的博客
04-01 796
• 设置标签的属性 语法：jQuery对象.attr(name,value);// 标签属性设置：需要传 2 个参数$pic.attr(“hobby”,“sleep”) // 设置自定义的属性• 获取标签属性值 语法：jQuery对象.attr(name);// 获取标签属性的值：需要 1 个参数console.log($pic.attr(“hobby”)) // 获取自定义的属性removeAttr() 方法作用：移除标签的属性语法：removeAttr(name);
react18 函数组件 学习笔记
Scar_goSky的博客
05-11 1465
rect笔记
$ JQuery学习笔记
qq_46063425的博客
06-20 703
$ JQuery学习笔记 一、认识jquery 1.jquery中的顶级对象是 $ 或者 jQuery 用于 获取jquery对象 入口函数（页面加载事件） 高级功能 注意：jquery中的$和jQuery关键字本身为同一对象 $可以认为就是一个构造函数 可以使用 $(选择器) 的方式调用 $ ,得到一个对象，在对象上就可以调用$的实例方法 也可以使用 $.方法名 调用静态方法。 比如遍历数组对象的 $.each() 相当 for循环
JQuery学习笔记记录
m0_48159893的博客
12-20 143
文章目录JQuery简述1.1 获取JQuery的两种方式1.1.1 直接下载库文件1.1.2 url(CDN)引用1.2 初试JQuery1.3 JQuery的几种选择器方式1.4 JQuery一些细节JQuery样式案例细节补充1、全选案例代码实例2、jquery操作DOM元素之创建添加结点案例3、发表评论案例4、弹幕制作案例5、获取可视区的宽高6、回到顶部案例7、Jquery中的事件委托（delegate，不推荐使用）8、on注册事件（重点）9、jquery delay延迟案例10、五角星评分案例 J
vue学习笔记三：Jquery VS Vue之差异比较概览
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
02-28 1257
比较熟悉Jquery的使用，Vue中的不太熟悉，今天来汇总下jquery中的常用操作在Vue中的对应实现方法。 Jquery中的常用操作包括：网页动态更新、选择器、第三方库的引用、html元素操作、元素动画、Ajax、事件监听及处理、JS原生的接口等，本篇汇总下这些操作在Vue中对应的实现方式。
微信小程序开发学习笔记②组件和API
tutgxu的博客
01-01 1543
微信小程序开发组件与API
jquery学习笔记及常用函数封装.zip
11-04
《jQuery学习笔记及常用函数封装》 在编程领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本资料包“jquery学习笔记及常用函数封装.zip”包含了从JQuery基础...
Bootstrap学习笔记之js组件（4）
10-22
在本文中，我们将深入探讨Bootstrap的JavaScript组件，特别是关于js组件的使用，这是学习笔记的第四部分。 首先，要使用Bootstrap的JS组件，必须确保正确地引入了必要的JavaScript文件。jQuery库是所有Bootstrap...
JQuery笔记
01-09
jQuery是一款高效、简洁且功能丰富的JavaScript库，由John Resig在2006年创建。它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务，使得JavaScript编程更加简单和直观。jQuery的核心理念是"Write Less, Do ...
分享bootstrap学习笔记心得(组件及其属性)
11-29
通常包括有以下常用组件：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、分页、排版、缩略图、警告对话框、进度条、媒体对象等。此外，bootstrap还包含有众多jQuery插件：莫泰局昂、标签页、滚动条、弹出框等。 ...
笔记本样式jQuery滑块特效代码
03-20
综上所述，"笔记本样式jQuery滑块特效代码"是一个集视觉效果、互动性和功能性的网页组件，适合用于展示产品、作品集或多媒体内容。开发者可以通过学习和应用这个特效，提升网站的互动性和用户体验。
2024Datawhale AI夏令营---基于术语词典干预的机器翻译挑战赛--学习笔记
weixin_61573157的博客
07-15 1081
机器翻译（Machine Translation，简称MT）是自然语言处理领域的一个重要分支，其目标是将一种语言的文本自动转换为另一种语言的文本。机器翻译的发展可以追溯到20世纪50年代，经历了从基于规则的方法、统计方法到深度学习方法的演变过程。当前，机器翻译正朝着更加智能化和个性化方向发展。一方面，结合上下文理解、情感分析等技术，提高翻译的准确性和自然度；另一方面，通过用户反馈和个性化学习，提供更加符合用户需求的翻译服务。同时，跨语言信息检索、多模态翻译等新兴领域也正在成为研究热点。
昇思25天学习打卡营第14天|LLM-文本解码原理--以MindNLP为例
wwt72的博客
07-17 606
限制输出序列的最大长度为50个token。top-p=0.95，top-p采样表示在每一步生成token时，只从概率分布中累计概率达到95%的token中进行采样，有助于保持生成文本的流畅性和质量，同时允许一些低概率的token被选中，从而增加多样性。表示禁用了top-k采样，因为在top-k采样中，通常是从概率最高的k个token中随机选择一个token作为下一个输出，而这里设置为0表示不限制token的选择，实际上这将等同于使用 softmax 概率分布直接进行采样。这有助于提高生成文本的多样性。
kubernetes学习日志（七）
最新发布
qq_47037022的博客
07-18 349
本文记录了service管理，ingress管理，Dashboard管理插件，集群鉴权策略，角色与全局角色，赋权与全局角色赋权。
NumPy库学习之np.random.rand函数
qq_46396470的博客
07-15 302
是 NumPy 库中的一个函数，用于生成随机数。这些随机数是从均匀分布 [0, 1) 中抽取的，即每个数都在0到1之间，但不包括1。
Jquery学习笔记分享：优势应用及选择器详解
JQuery 的选择器是其最为重要的功能之一，可以帮助我们快速准确地定位到需要操作的 DOM 元素。我们介绍了基本选择器、层次选择器、过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java我跟你拼了

您的鼓励是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值