JQuery1.4学习笔记 -

lirenjuan

浏览: 69153 次
性别:
来自: 北京

最近访客更多访客>>

xncz

747017186

wedtlcy

decider

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JQuery1.4学习笔记

jQuery CSS Ajax HTML Opera

一：核心部分

/** (1)
* $()
* 运行：点击文档中所有a标签时将弹出对话框
* 说明：$("a") 是一个jQuery选择器；$本身表示一个jQuery类，所有$()是构造一个jQuery对象；
* click()是这个对象的方法。同理$ (document)也是一个jQuery对象，ready(fn)是$(document)的方法，
* 表示当document全部下载完毕时执行函数。
*/
/*
$(document).ready(function(){
 // do something here
 $("a").click(function() {
 alert("Hello world!");
 });

});
*/

/** (2)
* html()
* 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
*/
/*
 function jq(){
 alert($("div > p").html());
 }
*/

/** (3)
* appendTo()
* 运行：当点击id为test的元素时，向body中添加“<div>Hello</div>”
*/
/*
 function jq(){
 $("<div>Hello</div>").appendTo("body");
 }
*/

/** (4)
* css()
* 运行：当点击id为test的元素时，背景色变成黑色
* 说明：原文为$(document.body).background("black"); 在jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代
*/
/*
 function jq(){
 $(document.body).css("background-color","black");
 }
*/

/** (5)
* $(elems)
* 运行：当点击id为test的元素时，隐藏form1表单中的所有元素。
* 说明：限制jQuery作用于一组特定的DOM元素
* 参数： elem：一组通过jQuery对象压缩的DOM元素
*/
/*
function jq(){
 $(form1.elements ).hide();
}
*/

/** (6)
* $(obj)
* 运行：当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。
* 说明：复制一个jQuery对象
*/
/*
function jq(){
 var f = $("div");
 alert($(f).find("p").html());
}
*/

/** (7)
* each(fn)
* 运行：当点击id为test的元素时，img标签的src都变成了2.jpg
* 说明：将函数作用于所有匹配的对象上
*/
/*
function jq(){
 $("img").each(function(){
 this.src = "http://news.xinhuanet.com/ent/2006-08/23/xinsrc_592080323084167412218.jpg"; });
}
*/

/** (8)
* get(num)
* 运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个标签的内容
* 说明：获取匹配元素，get(num)返回匹配元素中的某一个元素
* 参数：get (Number): 期望限制的索引，从0 开始
* 注意：get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML
*/
/*
function jq(){
 alert($("p").get(1).innerHTML);
}
*/

/** (9)
* eq(pos)
* 运行：当点击id为test的元素时，alert对话框显示：So is this，即第二个标签的内
* 说明：减少匹配对象到一个单独的dom元素
* 参数：pos (Number): 期望限制的索引，从0 开始
* 注意：get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML
*/
/*
function jq(){
 alert($("p").eq(1).html())
}
*/

/** (10)
* index(obj)
* 运行：当点击id为test的元素时，两次弹出alert对话框分别显示0，1
* 说明：返回对象索引
* 参数：obj (Object): 要查找的对象
*/
/*
function jq(){
 alert($("div").index(document.getElementById('test1')));
 alert($("div").index(document.getElementById('test2')));
}
*/

/** (11)
* size()或Length
* 运行：当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象
* 说明：当前匹配对象的数量，两者等价
*/
/*
function jq(){
 //alert($("img").length);
 alert($("img").size());
}
*/


二：DOM操作

/** (1)
* attr("属性名")或attr("属性名","属性值")
* 运行：先弹出对话框显示id为test的连接url(1.html)，在将其url改为2.html，当弹出对话框后会看到转向到2.html
* 说明： jquery自1.2.3版本取消了直接的href等相关操作属性的方法，只能使用attr方式。包括src属性等
*/
/*
function jq(){
 alert($("#test").attr("href"));
 $("#test").attr("href","2.html");
}
*/

/** (2)
* after("html代码")
* 运行：在匹配元素后插入一段 html Hello；<a href="#" id="test" onClick="jq()"& gt;jQuery</a>Hello
* 说明：执行完后在界面可看见执行效果
*/
/*
function jq(){
 $("#test").after("Hello");
}
*/
/** (3)
* after(elem)或after(elems)
* 运行：将指定对象elem或对象组elems插入到在匹配元素后
* 说明：执行后相当于 <a href="#" onClick="jq()">jQuery</a>after
*/
/*
function jq(){
 $("#test").after($("#hello"));
}
*/

/** (4)
* append(html)
* 运行：在匹配元素内部，且末尾插入指定html
* 说明：同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解！
*/
/*
function jq(){
 $("#test").append("Hello");
}
*/
/** (5)
* appendTo(html)
* 运行：在匹配元素内部，且末尾插入指定html
* 说明：appendTo()与append() 正好相反
*/
/*
function jq(){
 $("Hello").appendTo($("#test"));
}
*/
/** (6)
* appendTo(html)
* 运行：复制一个id为hello的对象并且放在id为test的元素内部未尾
* 说明：原元素无保持无变化
*/
/*
function jq(){
 $("#hello").clone().appendTo($("#test"));
}
*/
/** (7)
* empty()
* 运行：删除匹配对象的所有子节点
*/
/*
function jq(){
 $("#delete").empty();
}
*/
/** (8)
* prepend(elem/elems/html)
* 运行：在匹配元素的内部且开始处插入
* 说明：比较：append(elem),appendTo(expr),prepend(elem) ,append在匹配元素内部结束处插入,appendTo与append匹配相反
*/
/*
function jq(){
 $ ("#delete").prepend($("#test1"))
 alert($ ("#delete").html());
}
*/
/** (8)
* after(elem)
* 运行：在匹配元素的外部后面开始插入
* 说明：比较：before(elem)在匹配元素的外部前面开始插入,insertAfter(elem)与after相反匹配,insertBefore(elem)与before匹配相反
*/
/*
function jq(){
 $ ("#delete").before($("#test1"))
}
*/
/** (9)
* remove()
* 运行：移除匹配对象
* 说明：注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象
*/
/*
function jq(){
 $ ("#delete").remove();
}
*/
/**(10)
* wrap(htm)
* 运行：将匹配对象包含在给出的html代码内
* 说明：wrap(elem) 将匹配对象包含在给出的对象内(只是一种包装，原对象不变)
*/
/*
function jq(){
 //$("#delete").wrap("");
 $("#delete").wrap($("#content"));
}
*/
/**(11)
* add(el)
* 运行：在匹配对象的基础上在附加指定的dom元素
* 说明：add(els)在匹配对象的基础上在附加指定的一组对象，els是一个数组
*/
/*
function jq(){
 var f=$("p").add("b");
 //var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
 for(var i=0;i < $(f).size();i++){
 alert($(f).eq(i).html());}
}
*/
/**(12)
* parents()
* 运行：一依次以匹配结点的父节点的内容为对象,一般一个文档还有<body>和<html>，依次类推下去
* 说明：parents(expr)在parents()的基础上之取符合表达式的对象
* 注意：新版本中取代老版本的ancestors()
*/
/*
function jq(){
 var f= $("span").parents();
 for(var i=0;i < $(f).size();i++){
 alert($(f).eq(i).html());}
}
*/

/** (13)
* children()
* 运行：返回匹配对象的所有子结点
* 说明：children(expr)返回匹配对象的子介点中符合表达式的节点,与之对应的有parent()和parent(expr)
*/

/*
function jq(){
 //alert($("#delete").children("span").html());
 alert($("#delete").children().html());
}
*/

/** (14)
* contains( String text ) returns Array<Element>
* 运行：匹配元素根据提供的test
* 说明：contents( ) returns jQuery
*/
/*
function jq(){
 //$("p:contains('just')").css("text-decoration", "underline"); //pass
 //alert($("p:contains('just')").css("text-decoration", "underline").html()); //pass
 //$("p").contents().wrap(""); //pass Find all the text nodes inside a paragraph and wrap them with a bold tag.
 // $("p").not(".green, #blueone").css("text-decoration", "underline")//pass emoves elements matching the specified expression from the set of matched elements.
}
*/

/** (15)
* filter( Function fn ) returns jQuery
* 运行：首先选择所有的div并设计其css,然后过滤掉除index为1或id为delete的元素，并且设置其css
* 说明：过滤元素，把不匹配的filter中定义的方法都过滤掉(当function return true时选择，否则过滤)
*/
/*
function jq(){
 $("div").css("background", "#b4b0da")
 .filter(function (index) {
 return index == 1 || $(this).attr("id") == "delete";
 })
 .css("border", "3px double red");
}
*/
/** (15)
* find("elem")
*/
/*
function jq(){
 alert($("div").find("#span").html());
 alert($("#delete").find("span").html());
 alert($("div").find("span").html());
}
*/
/**
* is(expr)
* 运行：判断对象是否符合表达式,返回boolen值
*/
/*
function jq(){
 alert($("#p").is("#p"));
}
*/

/**
* next()
* 运行：返回匹配对象下一个兄弟节点
* 说明：next(expr) 返回匹配对象下一个符合条件的兄弟节点中;prev(),prev,(expr)参照next理解
*/

/*
function jq(){
 alert($("p").next().html());
 alert($("p").next("#one").html());
}
*/

/**
* toggleClass(String)
* 运行：将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象
*/
/*
function jq(){
 $("p").toggleClass("selected");
}
*/

/**
* removeAttr (name)
* 运行：将对象的指定属性移出
*/
/*
function jq(){
 $("img"). removeAttr("src");
}
*/
function jq(){
 //alert($("#payoutListTable").size());
 //alert($("#payoutListTable").find("#tr2").html());
 //alert($("#payoutListTable").html());
 alert($("html" ).html());
}


 三：css操作



/*
*css(name)
*css(prop)
*css(key, value)
*说明：css(name) 获取样式名为name的样式；css(prop) prop是一个hash对象，用于设置大量的css样式；css(key, value) 用于设置一个单独得css样式
*
*/
/*
function jq(){
 //$("#b").css({ color: "red", background: "blue" });
 //$("#b").css("color","red");
 //alert($("#b").css("color"));
}
*/




 四：javascript处理

/**
*
*/
/*
function jq(){
 if($.browser.msie) {
 alert("这是一个IE浏览器");}
 else if($.browser.opera) {
 alert("这是一个opera浏览器");}
 else alert("others");
}
*/
/**
* $.each(obj, fn)
* 说明：obj为对象或数组，fn为在obj上依次执行的函数，obj可以为一个hash对象，依次将hash中每组对象传入到函数中
*/
/*
function jq(){
 //$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
 $.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this )});
}
*/
/**
*
*/
/*
function jq(){
 var settings = { validate: false, limit: 5, name: "foo" };
 var options = { validate: true, name: "bar" };
 $.extend(settings, options);
 $.each(settings, function(i){ alert( i + "=" + this ); });
}
*/
/**
* $.grep(array,fn)
* 说明：通过函数fn来过滤array，将array中的元素依次传给fn，fn必须返回一个boolen，如fn返回true，将被过滤
*/
/*
function jq(){
 var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
 $.each(arr, function(i){ alert(i); });
}
*/
/*
function jq(){
var arr = $.merge([0,1,2],[2,1,3])
$.each(arr,function(i){ alert(arr[i]); });
}
*/
/**
* $.trim(str
* 说明：移出字符串两端的空格
*/
/*
function jq(){
var arr ="Hello World!~ "
var arrTrim=$.trim(arr);
alert(arr.length);
alert(arrTrim.length);
}
*/




 五：动态效果


/**
* hide(speed)
*/
/*
function jq(){
//$("#one").hide();
//$("#one").hide("slow");//speed有3级("slow", "normal", "fast")
//$("#one").hide(1300); //也可以是自定义的速度
//$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
}
*/
/**
* hide(speed)
*/
/*
function jq2(){
//$("#one").show();
//$("#one").show("slow");
//$("#one").show(1300,function(){alert("shwo");});
}
*/
/**
* fadeIn(speeds)
*/
/*
function jq(){
$("#one").fadeIn("slow");
//$("#one").hide("slow");//speed有3级("slow", "normal", "fast")
//$("#one").hide(1300); //也可以是自定义的速度
//$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
}
*/
/**
* fadeOut(speeds)
*/
/*
function jq2(){
$("#one").fadeOut("slow");
//$("#one").hide("slow");//speed有3级("slow", "normal", "fast")
//$("#one").hide(1300); //也可以是自定义的速度
//$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
}
*/
/**
* fadeTo(speed, opacity, callback)
*/
/*
function jq(){
$("#one").fadeTo("slow",0.2,function(){alert("fadeTo 0.2");});
}
*/
/**
* slideDown(speed, callback)
*/
/*
function jq(){
$("#one").slideUp("slow",function(){alert("slideUp");});
}
*/
/**
* slideDown(speed,callback)
*/
/*
function jq2(){
$("#one").slideDown("slow",function(){alert("slideDown");});
}
*/
/**
* slideToggle(speed,callback)
*/
function jq2(){
$("#one" ).slideToggle( "slow" , function (){alert( "slideToggle" );});
}


 六：event事件
/**
* hover(fn,fn)
*/
/*
$(function(){
$("#one").hover(
 function(){$(this).addClass("red");},
 function(){ $(this).removeClass("red");
 });
})
*/

/**
* toggle(fn,fn)
*/
/*
$(function(){
$("#one").toggle (
 function(){$(this).addClass("red");},
 function(){ $(this).removeClass("red");
 });
})
*/
/**
* bind(type, fn)
*/
/*
$(function(){
$("#one").bind("click",function(){
 alert("click");
 $("#one").unbind("click");
 });
})
*/


 七：ajax支持

/**
通用方式：
$.ajax(prop) 通过一个ajax请求，回去远程数据，prop是一个hash表，它可以传递的key/value有以下几种。
 (String)type：数据传递方式(get或post)。
 ((String)url：数据请求页面的url
 ((String)data：传递数据的参数字符串，只适合post方式
 ((String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
 ((Boolean)ifModified：当最后一次请求的相应有变化是才成功返回，默认值是false
 ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
 ((Boolean)global：是否为当前请求触发ajax全局事件，默认为true
 ((Function)error：当请求失败时触发的函数。
 ((Function)success：当请求成功时触发函数
 ((Function)complete：当请求完成后出发函数
*/
/*
//示例：
 function pageselectCallback(page_id, jq) {
 $.ajax({
 type: "POST",
 url: "../account/alloplist.action?pageNo=" + (page_id*1+1),
 data: "timedesc=" + $("#TiemDese").val()+"&userid=<c:out value='${userid}'/>",
 success: function(msg) {
 $("#tabs-3").html(msg);
 }
 });
 }
//说明：些示例为翻页的ajax请求jquery处理,
 传递方式为post,指定了请求路径(URL),传递的参数数据，如果操作成功将更新id为tabs-3的标签
*/

分享到：