jquery 常用操作（2）

第三天：

昨天写了下ajax的通用方法：今天看下其它的方法
load(url,[data],[callback]),
默认是GET方式:如果load("ajax.php")用GET方式提交数据;
如果有任何参数:如load("ajax.php","name=terry");刚用post方式提交数

$.get(url,[data],[callback])用get方式向远程页面传递参数
如
$.get('ajax.php',{name:"terry",id:5},function(msg){
         $("#content").html(msg);
})
以GET方式得到数据并放到层id为content的层中

$.post(url,[data],[callback])同上，但数据以post方式提交

$.getJSON(url,[data],[callback])
以get方式获得json数据，这里重点写下：

如果返回的数据为数组
如["a","b","c"]处理方式
$.each(["a","c","c"].function(i){alert(this)})
返依次弹出a,b,c

如果返回的数据为hash对象
如{"name":"terry","age":"25"}处理方式
$.each(msg,function(i){
             alert(i+"="+this);
})
刚依次弹出name=terry,age=25
就是说对于数组，i为0.1.2等，对于hash对象i为键

如果返回的数据外边是数组，里边是hash对象
[{"name":"terry","age":"25"},{"name":"abc","age":"30"}],刚处理方式
function jq(){
     $.getJSON('ajax.php',function(msg){
         $.each(msg,function(i){
             $.each(this,function(j){
                 alert(j+this);
             });
         })
     })
}


一个处理时的效果
function jq(){

$.get('ajax.php',function(msg){
     $("#content").html(msg);
     $("#con").html("处理结束");
});
$("#con").html('处理中......');
}

jQuery的bind函数

jQuery学习之bind

在jQuery里面，直接用bind函数和unbind函数为某个DOM或者HTML标签等绑定一个操作和移除一个事件就行了。

例如为一个button添加一个click。可以这样操作

XML/HTML代码
< input type = 'button' id = 'myBtn' >    
这是一个button，现在我们要为他添加一个事件

JavaScript代码
<script>        
$( '#myBtn' ).bind( "click" , function (){        
     alert( 'click' );        
});        
</script>      
这样，我们就为这个button绑定了一个click的事件。

bind函数可以有三个参数，当第二个参数不是一个函数，而是一个数据对象时，它将默认做为bind第三个参数（函数）的参数。例如：

JavaScript代码
<script>      
function showAlert(events){        
     alert(events.data.foo);        
}        
$( '#myBtn' ).bind( 'click' ,{foo: 'click' },showAlert);        
</script>      
点击时，同样会显示:click

这些就是bind的一些基本用法，当然还有一些方法

比如在绑定方法的时候，用的是return false;可以让这个方法失效

JavaScript代码
<script>        
$( '#myBtn' ).bind( 'click' , function (){        
return false ;        
})        
</script>      
这样，刚才绑定的click又失效了，不过，这种方法往往用在submit提交的时候比较多。

还有一些方法可以取消默认行为和阻止事件起泡：preventDefault 和stopPropagation

例：

JavaScript代码
<script>    
$( '#myBtn' ).bind( 'click' , function (event){    
event.preventDefault(); //取消默认的click行为    
});    
$( '#myBtn' ).bind( 'click' , function (event){    
event.stopPropagation(); //阻止click事件起泡    
});    
  
</script>  
jquery radio,checkbox,select操作

JavaScript代码
获取一组radio被选中项的值      
var item = $( 'input[@name=items][@checked]' ).val();      
获取select被选中项的文本      
var item = $( "select[@name=items] option[@selected]" ).text();      
select下拉框的第二个元素为当前选中值      
$( '#select_id' )[0].selectedIndex = 1;      
radio单选组的第二个元素为当前选中值      
$( 'input[@name=items]' ).get(1).checked = true ;      
      
获取值：      
      
文本框，文本区域：$( "#txt" ).attr( "value" )；      
多选框checkbox：$( "#checkbox_id" ).attr( "value" )；      
单选组radio：    $( "input[@type=radio][@checked]" ).val();      
下拉框select： $( '#sel' ).val();      
      
控制表单元素：      
文本框，文本区域：$( "#txt" ).attr( "value" , '' ); //清空内容      
                  $( "#txt" ).attr( "value" , '11' ); //填充内容      
      
多选框checkbox： $( "#chk1" ).attr( "checked" , '' ); //不打勾      
                  $( "#chk2" ).attr( "checked" , true ); //打勾      
                  if ($( "#chk1" ).attr( 'checked' )==undefined) //判断是否已经打勾      
      
单选组radio：     $( "input[@type=radio]" ).attr( "checked" , '2' ); //设置value=2的项目为当前选中项      
下拉框select：    $( "#sel" ).attr( "value" , '-sel3' ); //设置value=-sel3的项目为当前选中项      
                 $( "<option value='1'>1111</option><option value='2'>2222</option>" ).appendTo( "#sel" ) //添加下拉框的option      
                 $( "#sel" ).empty()； //清空下拉框        

http://docs.jquery.com/UI

所有效果说明：
基本的鼠标互动：
拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
各种互动效果：
手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条

(sliders)、表格排序(table sorters)、页签(tabs)
放大镜效果(magnifier)、阴影效果(shadow)