【JQuery】基本用法

学习时顺手做的测试，全是最基本的用法。



<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script language="javascript" type="text/javascript">

//Ajax

$(document).ready(function(){

$("#btn1").click(function(){

$.get("Ajax.ashx",{name:$("#txt1").val(),pass:$("#txt2").val()},function(response){

$("#div1").html(response);

});

});

});



//三种选择器

$(document).ready(function(){

$("span").html("标签选择器");

});



$(document).ready(function(){

$(".span1").html("应用样式选择器");

});



$(document).ready(function(){

$("#span1").html("类选择器");

});



/**

/*调用函数，测试失败。$(document).ready(f1()); 2010年12月12日21:40:56

/*如下，成功。 2010年12月12日21:52:48

*/

function f1(){

$("#Button1").click(function(){

alert("调用函数");

});

}



$(document).ready(function(){

f1();

});



// $(document).ready(f1());





//根据属性名获取或设置属性

$(document).ready(function(){

$("#span2").attr("style","color:blue");//获取只需第一个参数

});



//标签删选和多重筛选

$(document).ready(function(){

$("input[type='text'][name='sx']").attr("value","筛选");//为筛选出来的元素设置属性

$("input[type='text'][name='sx']").attr("readonly","readonly");

});

</script>





HTML部分



<div>

<!--Ajax-->

<input type="text" id="txt1" />

<input type="text" id="txt2" />

<input type="button" id="btn1" value="Test" />

<div id="div1"></div>



<br />

<!--选择器-->

<span id="span1">初始值</span><br />

<span class="span1">初始值</span><br />

<span >初始值</span><br />

<span class="span1">初始值</span><br />



<br /><br /><br />



<input type="button" id="Button1" value="测试调用函数" />





<br /><br /><br />

<!--根据属性名获取或设置属性-->

<span id="span2" style="color:red">根据属性名获取或设置属性</span>





<br /><br /><br />

<!--标签删选和多重筛选-->

<input type="text" name="sx" />

<input type="text" />

<input type="text" name="sx" />

<input type="text" />

</div>