jQuery 总结

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);
})
})
-->