jQuery是一款优秀js开发库类,使我们写js变得更加方便,使我们开发效率更快。
<script type="text/javascript" src="/js/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
<script>
$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法。 同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
DOM操作
1.对象获取
首先,平常使用最多的是一些JQuery的对象获取方法。有很多种,
譬如:
$("a") 是返回所有A标签
$("#pId") 是返回 Id为“pId”的标签
$(".claName") 是返回class为“claName”的标签
$("*") 是返回文档内所有的标签元素
这个取元素是最直接的,最方便的,举一个简单的例子。
最少的代码做最多的事情, 这句话用在这里最经典的!
$("#cboMain").click(function(){
$("input[name='cbo']").attr("checked",this.checked ); })
取出复选框选中的集合
注意写法:"[name='chkbox'][checked]" 不兼容 chrome,IE6浏览器可以
function GetCboIds() {
var ids = "";
$('input[name="chkbox"]:checked').each(function () {
ids += $(this).val() + ",";
});
if (ids == "") {
alert("请选择项!");
return;
}
return ids;
}
全选,和 反选功能
function fnCheckAll(element)
{
$.each($('input[name="cboFiled"]'), function (i, v) {
if (element.checked){
this.checked = true;
} else {
this.checked = false;
}
});
}
获取一组radio被选中项的值
var sexVal = $("input:radio[name='suit'][checked]").val();
2.属性取值,和赋值。
$("#cboMain").attr("checked") 取出id为cboMain 的checked值
$("#cboMain").attr("checked",true) 修改属性值
$("#image").attr.removeAttr("src");
Class样式修改
$("p").addClass("selected"); 添加,
$("p").removeClass("selected"); 修改样式
$("#pContent").html("123") //修改标签值 可包含(标签)
$("#pContent").text("123") //修改标签值 不包含
$("#txt").val("I'm here! Don't look back, Let it go! ");
判断DIV是否隐藏:
<div id="test" style="display: none">
</div>
var temp = $("#test").is(":hidden"); //是否隐藏
var temp1 = $("#test").is(":visible"); //是否可见
alert(temp); //true
alert(temp1); //false
3. 事件绑定
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
取消事件绑定
$("p").unbind( "click" )
AJAJ调用,
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done");
}});
$("#aAjax").load("UPAGE.aspx","参数",function(){});
循环数组:
$.each( ['a','b','c'], function( n,j){
alert( "Item "+ ": " + n+"value:"+j);
}); n为,索引,j为值
后来查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话,要使用其它的方式
break----用return false;
continue --用return ture;
判断一个值在数组中是否存在!
var arr = [ 4, "Pete", 8, "John" ];
jQuery.inArray("John", arr); //3
jQuery.inArray(4, arr); //0
jQuery.inArray("David", arr); //-1
解析JSON 数据
var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );
使用JQuery加载HTML文件
1.第一种方法
$('#top_search').load('/search/Search.html'); //窗体加载查询页面
2.第二种方法
$.get("/search/Search.html", function(data) {
$("#top_search").html(data);
});