`
syhu100200
  • 浏览: 23302 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
文章分类
社区版块
存档分类
最新评论
  • tangzlboy: 很长好,学了这么久的入门书籍,这边才是最好的!
    web入门

JQERY总结

 
阅读更多
jQuery 工具安装-jqueryWTP  http://chengyue2007.iteye.com/blog/719994  安装成功,就是能显示函数,能点(.)出来



1.交替显示图片

$(document).ready(function(){
   $("#btn").toggle(function(){
   alert('click');
       $("#im").hide('slow');
       },function(){
       $("#im").attr("src","image/deleteFile.gif");
       $("#im").show('fast');
      });
     });



<button id="btn">交换图片</button>
    <img id="im" src="image/addFile.gif">



5.jQuery 表单


$(this).ready(function(){
   $("#f").submit(function(){
    var name=$("#name").attr("value");//根据id来取值
    var pass=$("#pass").attr("value");
    var birthday=$("#birthday").attr("value");
   
    var name2=$("input[name=name]").attr("value"); //根据name取值
   
    var sex=$("input[name=sex]:checked").attr("value");  //radio取值
    //var checkbox=$("input[name=ah]").attr("checked");
    var ahStr="";
    var ah=$("input[name=ah][checked]").each(   //checkbox取值
     function(){
      ahStr+=$(this).val()+",";
     });
    var file=$("input[name=file]").val();
    var comm=$("#comm").val();
    alert(comm);
    return false;//不提交
   });
  });



<form action="" id="f">
     <table>
      <tr><td>用户名:</td><td><input type="text" id="name" name="name"></td></tr>
      <tr><td>密码:</td><td><input type="password" name="pass" id="pass"></td></tr>
      <tr><td>出生日期:</td><td><input type="text" name="birthday" id="birthday"></td></tr>
      <tr><td>性别:</td><td><input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女</td></tr>
      <tr><td>爱好:</td><td><input type="checkbox" value="听音乐" name="ah">听音乐
              <input type="checkbox" value="上网" name="ah">上网
              <input type="checkbox" value="看电视" name="ah">看电视
             </td></tr>
      <tr><td>上传照片:</td><td><input type="file" name="file"></td></tr>
      <tr><td>备注:</td><td><textarea rows="5" name="comm" id="comm"></textarea></td></tr>
      <tr><td colspan="2"><input type="submit" value="提交"></td></tr>
      </table>
    </form>





属性
1.attr(key,value) 为所有匹配的元素设置一个属性值。 相当于给key赋值如 $("img").attr("src","http://www.usle.cn/logo.gif"); 即意为给img元素赋予图片地址。类似这个在上一篇 移除或替换链接指向 中用到了此方法。

2.attr(key,fn) 类似上面,只不过fn当做函数来写,如$("img").attr("title",function(){return this.src});这个函数是将图片的链接赋给图片的title属性中。

3.attr(name) 很容易弄明白,取得第一个匹配元素的属性值,如果元素没有相应属性,则返回undefined

4.attr(properties) 光看这个看不明白,实际上是给匹配的元素批量设置很多属性 。举例$("img").attr({title:"this is title",alt:"this is alt"}); 需要注意的是属性名后面跟“:”冒号,多个属性间用逗号隔开,外围包上大括号“{}”。

5.removeAttr(name) 从每一个匹配的元素中删除一个属性 ,如$("img").removeAttr("src");意为移除图片的链接地址。


1.addClass(class) 为每个匹配的元素添加指定的类名(css样式)。如$("p").addClass("p1");

2.removeClass(class) 很容易理解,移除css样式

3.toggleClass(class) 如果存在这样css样式就删除一个样式,或者不存在的话就添加一个样式。
$("p").toggleClass("p1");意为为没有类名p1的css样式的p元素添加p1样式,对有p1样式的pf元素,删除它的p1 css样式。

HTML
1.html() 取得第一个匹配元素的html内容,用法如 $("div").html();

2.html(val) 设置每一个匹配元素的html内容, $("div").html(“hello,world”); 给匹配的div元素设置内容为hello,world 。原有的会被清除。

文本
1.text() 取得所有匹配元素的内容。就好比提取出纯文本一样。用法同上述html。

2.text(val) 类似html(val) ,但将编码 HTML (这句没看明白,反正和html差不多)


1.val() 获得第一个匹配元素的当前值。用法也如 $("input").val();

2.val(val) 为匹配的元素赋值 check,select,radio等都能使用为之赋值
用法如 $("input").val("hello") ,类似$("input").attr("value","hi");

3.赋多个值用法如 $("input").val(["check2", "radio1"]); 意为给
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
这两项同时赋上值,即同时选择上复选框值为check2的和单选值为radio1的。



2.Jquery表单取值赋值


Jquery表单取值赋值的一些基本操作2008-12-25 03:17/*获得TEXT.AREATEXT的值*/
   var textval = $("#text_id").attr("value");
//或者
   var textval = $("#text_id").val();
/*获取单选按钮的值*/
   var valradio = $("input[@type=radio][@checked]").val();
/*获取一组名为(items)的radio被选中项的值*/
   var item = $('input[@name=items][@checked]').val();
/*获取复选框的值*/
var checkboxval = $("#checkbox_id").attr("value");
/*获取下拉列表的值*/
   var selectval = $('#select_id').val();
//文本框,文本区域:
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');//填充内容
//多选框checkbox:
$("#chk_id").attr("checked",'');//使其未勾选
$("#chk_id").attr("checked",true);//勾选
if($("#chk_id").attr('checked')==true) //判断是否已经选中
//单选组radio:
$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
//下拉框select:
$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项
$("testtest2").appendTo("#select_id")//添加下拉框的option
$("#select_id").empty();//清空下拉框
获取一组名为(items)的radio被选中项的值
var item = $('input[@name=items][@checked]').val();//若未被选中 则val() = undefined
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;
//重置表单
$("form").each(function(){
   .reset();
});



3.checkbox 全选


<!--
$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){//反选
if($(this).attr("checked")){
$(this).removeAttr("checked");
}
else{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){//输出选中的值
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\r\n";
//alert($(this).val());
})
alert(str);
})
})
-->
分享到:
评论

相关推荐

    基于Springboot的实验报告系统源码数据库文档.zip

    基于Springboot的实验报告系统源码数据库文档.zip

    ERA5_Climate_Single_Month.txt

    GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载

    基于springboot智能健康饮食系统源码数据库文档.zip

    基于springboot智能健康饮食系统源码数据库文档.zip

    基于SpringBoot的校园服务系统源码数据库文档.zip

    基于SpringBoot的校园服务系统源码数据库文档.zip

    史上最全IXIA测试仪配置使用指导手册(含IxNetwork,图文并茂超详细!).zip

    内容概要: IXIA测试仪的基本配置.doc ixia测试仪基础使用示例.doc IxNetwork如何进行抓包回放-V1.0.pdf IxNetwork如何自定义报文-V2.0.pdf ixia构造ip分片方法.txt IxNetwork使用简介.pdf 适用人群:网络协议造包、打流相关的测试工程技术人员,想要学习的同学可以下载哈 使用场景:构造pcap包,打流 Ixia简介 IXIA使用的是Server-client模式,Server端在测试仪表的主机上,在开机后会随着主机内的操作系统的启动而自动启动,一般情况下不需要人为的手工启动。因此在通常不需要为主机配置专用的显示器和键盘。 client端包括两个测试软件: Ixia Explorer和ScriptMate。这两个软件一般安装在测试用计算机上,在仪表自带的主机中也有这两个软件。根据测试项目的不同来选择使用不同的软件。Ixia Explorer主要提供数据流的测试,针对设备的功能进行测试; ScriptMate提供各种性能测试窗口,针对设备的性能进行测试。 Auto:自动分配;

    基于Python+Django花卉商城系统源码数据库文档.zip

    基于Python+Django花卉商城系统源码数据库文档.zip

    Umi-OCR-main.zip

    Umi-OCR-main.zip

    微信小程序源码-促销抽奖.zip

    基于微信小程序开发的促销抽奖小工具源码,适用于初学者了解小程序开发过程以及简单抽奖工具的实现。

    Sen2_median.txt

    GEE训练教程——Landsat5、8和Sentinel-2、DEM和各2哦想指数下载

    springboot的概要介绍与分析

    以下是一个关于Spring Boot设计的资源描述及项目源码的简要概述: Spring Boot设计资源描述 Spring Boot是一个为基于Spring的应用提供快速开发工具的框架,其设计旨在简化Spring应用的初始搭建和开发过程。以下是一些关键资源: Spring Boot官方文档:详细阐述了Spring Boot的核心特性、自动配置原理、起步依赖、内嵌式服务器等关键概念。这是学习和掌握Spring Boot设计的首选资源。 在线教程与视频:各大在线教育平台提供了丰富的Spring Boot教程和视频课程,从基础入门到高级应用,帮助开发者全面了解和掌握Spring Boot设计。 书籍与电子资料:许多技术书籍和在线电子资料深入讲解了Spring Boot的设计原理、最佳实践和项目案例,为开发者提供了宝贵的学习资源。 项目源码示例 以下是一个简单的Spring Boot项目源码示例,用于演示Spring Boot的基本结构和自动配置功能: java // 引入Spring Boot依赖 @SpringBootApplication public class MySpri

    基于springboot美妆领域管理系统源码数据库文档.zip

    基于springboot美妆领域管理系统源码数据库文档.zip

    tables-3.7.0+gpl-cp37-cp37m-win_amd64.whl

    tables-3.7.0+gpl-cp37-cp37m-win_amd64.whl

    算法实现的概要介绍与分析

    算法是计算机科学的核心,它们在解决各种问题时发挥着关键作用。一个好的算法不仅可以提高程序的效率,还可以简化复杂的问题。下面我将通过一个具体的例子——快速排序算法(Quick Sort)——来展示算法的实现过程,包括资源描述和项目源码。 ### 快速排序算法简介 快速排序是一种高效的排序算法,采用分治法的思想。其基本步骤如下: 1. 从数列中挑出一个元素,称为“基准”(pivot)。 2. 重新排序数列,所有比基准值小的元素放到基准前面,所有比基准值大的元素放到基准后面(相同的数可以到任一边)。在这个分割结束之后,该基准就处于数列的中间位置。这个称为分割(partition)操作。 3. 递归地(recursive)把小于基准值的子数列和大于基准值的子数列排序。 ### 资源描述 快速排序算法因其高效性和简洁性,在实际应用中非常受欢迎。它的时间复杂度平均为 O(n log n),最坏情况下为 O(n^2),但这种情况很少发生。快速排序的空间复杂度为 O(log n),因为它使用了递归来实现。 快速排序的一个典型应用场景是在数据库系统中对大量数据进行排序。由于它的高效性,快速排序

    基于springboot农场投入品运营线上管理系统源码数据库文档.zip

    基于springboot农场投入品运营线上管理系统源码数据库文档.zip

    基于springboot个性化影院推荐系统源码数据库文档.zip

    基于springboot个性化影院推荐系统源码数据库文档.zip

    linux基础进阶笔记

    linux基础进阶笔记,配套视频:https://www.bilibili.com/list/474327672?sid=4493093&spm_id_from=333.999.0.0&desc=1

    微信自动抢红包动态库.zip程序资源学习资料参考

    小程序 微信自动抢红包动态库.zip程序资源学习资料参考

    iOS版微信抢红包插件(支持后台抢红包).zip

    小程序 iOS版微信抢红包插件(支持后台抢红包).zip

    经典-FPGA时序约束教程

    经典-FPGA时序约束教程

    基于springboot的智慧点餐系统源码数据库文档.zip

    基于springboot的智慧点餐系统源码数据库文档.zip

Global site tag (gtag.js) - Google Analytics