날 카 로 운 JQuery 학습 노트
//------------------------- JQuery -------------------------
· （ ready()）
$(document).ready(function(){
alert("hello world");
})
· ：JQuery ， 、
// myDiv ， css1 ， a， css2
$("#myDiv").addClass("css1").children("a").removeClass("css2");
·JQuery
$("#myDiv").html()
·JQuery DOM
var $myVar = "";
var myVar = "";
·DOM JQuery
var obj = documnet.getElementById("myDiv");
var $obj = $(obj);
·JQuery DOM
var $obj = $("#myDiv");
var obj = $obj.get(0); // var obj = $obj[0];
· JQuery $
JQuery.noConflict();
//---------------------------- JQuery -------------------------------
·JQuery
document.getElementById("test").style.color = "red"; // test ，
$("#test").css("color","red"); // test ， 。 JQuery
·
if( $(".class").length > 0 ){
// todo something
}
·
$("#myDiv") // ID ， ：
$(".myClass") // ， ：
$("div") // ， ：
$("#myDiv,div.myClass,span") // ， ：
$("*") // ， ：
·
$("div span") // DIV SPAN （ ）， ：
$("div>span") // DIV SPAN （ ）， ：
$(".myClass+div") // myClass DIV ， ：
$(".myClass+div") // $(".myClass").next("div");
$(".myClass~div") // myClass DIV ， ：
$(".myClass~div") // $(".myClass").nextAll();
$(".myClass").siblings("div") // myClass DIV （ ），
· （index 0 ）
$("div:first") // DIV DIV ， ：
$("div:last") // DIV DIV ， ：
$("div:not(.myClass)") // myClass DIV ， ：
$("div:even") // DIV ， ：
$("div:odd") // DIV ， ：
$("div:eq(index)") // index DIV ， ：
$("div:gt(index)") // index DIV ， ：
$("div:lt(index)") // index DIV ， ：
$(":header") // （h1,h2,h3）， ：
$("div:animated") // DIV ， ：
· （index 1 ）
$(":nth-child(index/even/odd)") // index/ / ， ：
$(":first-child") // ， ：
$(":last-child") // ， ：
$("ul li:only-child") // UL LI ， ：
·
$(":contains(text)") // text ， ：
$("div:empty") // DIV ， ：
$("div:has(span)") // SPAN DIV ， ：
$("div:parent") // DIV ， ：
·
$(":hidden") // （type="hidden" style="display:none" style="visibility:none"）， ：
$(":visible") // ， ：
·
$("[id]") // id ， ：
$("[class=myClass]") // class myClass ， ：
$("[class!=myClass]") // class myClass ， ：
$("[alt^=begin]") // alt begin ， ：
$("[alt^=end]") // alt end ， ：
$("[alt*=some]") // alt some ， ：
$("div[id][class=myClass]") // id class myClass ， ：
·
$("#myForm:enabled") // ID myForm ， ：
$("#myForm:disabled") // ID myForm ， ：
$("#myForm:checked") // ID myForm ， ：
$("#myForm:selected") // ID myForm ， ：
·
$(":input") //
$(":text") // ， ：
$(":password") // ， ：
$(":radio") // ， ：
$(":checkbox") // ， ：
$(":submit") // ， ：
$(":image") // ， ：
$(":reset") // ， ：
$(":button") // ， ：
$(":file") // ， ：
$(":hidden") // ， ：
//---------------------------- JQuery DOM -------------------------------
·
var str = $("#myDiv").text(); //123
alert(str); // ：123
·
var str = $("#myDiv").attr("title"); //123
alert(str); // ：hello
·
var $li1 = $(""); // ， li
var $li2 = $(""); // , XHTML （ 、 ）
$("#myDiv").append($li1); // id myDiv
$("#myDiv").append($li2); // ：
$("#myDIv").append($li1).append($li2); // ： ， ^_^
·
var $li1 = $("first");
var $li2 = $("second");
$("#myDIv").append($li1).append($li2);
// ：firstsecond
·
var $li1 = $("111">first");
var $li2 = $("222">second");
$("#myDIv").append($li1).append($li2);
// ：firstsecond
·
$("#myDiv").append(""); // id myDiv span
$("").appendTo("#myDiv"); // ， span id myDiv
$("#myDiv").prepend(""); // id myDiv span
$("").prependTo("#myDiv"); // ， span id myDiv
$("#myDiv").after(""); // id myDiv span （ ， ）
$("").insertAfter("#myDiv"); // ， span id myDiv （ ， ）
$("#myDiv").before(""); // id myDiv span （ ， ）
$("").insertBefore("#myDiv"); // ， span id myDiv （ ， ）
·
$("#myDiv").remove(); // id myDiv
·
$("#myDiv").remove("span"); // id myDiv span
·
$("#myDiv span").click( function(){ // id myDiv span ， click
$(this).clone().appendTo("#myDiv"); // span ， id myDiv
$(this).clone(true).appendTo("#myDiv"); // clone true ，
})
·
$("p").replaceWith(" "); // p
-->
$(" ").replaceAll("p"); // ，
·
$("strong").wrap(""); // b strong
$("strong").wrapAll(""); // b strong
$("strong").wrapInner(""); // b strong
·
var txt = $("#myDiv").arrt("title"); // id myDiv title
$("#myDiv").attr("title"," "); // id myDiv title
$("#myDiv").attr({"title":" ", "alt":" "); //
$("#myDiv").removeAttr("alt"); // id myDiv title
·
var txt = $("#myDiv").attr("class"); // id myDiv
$("#myDiv").attr("class","myClass"); // id myDiv
$("#myDiv").addClass("other"); // id myDiv
$("#myDiv").removeClass("other"); // id myDiv other
$("#myDiv").removeClass("myClass other"); // id myDiv myClass other
$("#myDiv").removeClass(); // id myDiv
$("#myDiv").toggleClass("other"); // ， other other
$("#myDiv").hasClass("other"); // other
· HTML、
alert( $("#myDiv").html() ); // id myDiv HTML （ innerHTML）
$("#myDiv").html("hello"); // id myDiv HTML
alert( $("#myDiv").text() ); // id myDiv HTML （ innerText）
$("#myDiv").text("hello"); // id myDiv HTML
alert( $("#myInput").val() ); // id myDiv value （ 、 、 、 ）
$("#myInput").val("hello"); // id myDiv value （ 、 、 ）
·
var $cList = $("#myDiv").children(); // id myDiv （ ， ）
var $sNext = $("#myDiv").next(); // id myDiv
var $sPrev = $("#myDiv").prev(); // id myDiv
var $sSibl = $("#myDiv").siblings(); // id myDiv
var $pClos = $("#myDiv").closest("span"); // id myDiv ， span （ ）
·CSS-DOM
$("#myDiv").css("color"); // id myDiv color
$("#myDiv").css("color", "blue"); // id myDiv color
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); // id myDiv color （ ）
$("#myDiv").css("opacity", "0.5"); // id myDiv （ ）
$("#myDiv").css("height"); // id myDiv （ ：px， ）
$("#myDiv").height(); // （ ）
$("#myDiv").css("width"); // id myDiv （ ：px， ）
$("#myDiv").width(); // （ ）
var offset = $("#myDiv").offset(); // id myDiv
alert( offset.top + "|" + offset.left );
var offset = $("#myDiv").position(); // id myDiv position relative absolute
alert( offset.top + "|" + offset.left );
$("#txtArea").scrollTop(); // id txtArea
$("#txtArea").scrollLeft(); // id txtArea
$("#txtArea").scrollTop(100); // id txtArea
$("#txtArea").scrollLeft(100); // id txtArea
//---------------------------- JQuery -------------------------------
· DOM
$(window).load() window.onload
$(document).ready() window.onload ， ：
(1) ：
window.onload （ ）
$(document).ready() DOM ， ，
(2) ： $(document).ready()
(3) ： $(function(){ }) $().ready()
·
， bind() ， ，
bind( type, [data, ] fn );
type： :
blur（ ）、focus（ ）
load（ ）、unload（ ）
resize（ ）、scroll（ ）
click（ ）、dbclick（ ）
mousedown（ ）、mouseup（ ）
mousemove（ ）、mouseover（ ）、mouseout（ ）
mouseenter（ ）、mouseleave（ ）
change（ ）、select（ ）、submit（ ）
keydown（ ）、keyup（ ）、keypress（ ）
error（ ）
data： ，event.data
fn： ， ，$(this) DOM
·
hover(enter,leave)： enter、 leave
$("#myDiv").hover( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
toggle(fn1,fn2,...fnN)： ， ，
$("#myDiv").toggle( function(){
$(this).css("border", "1px solid black");0
}, function(){
$(this).css("border", "none");
});
·
，BODY DIV ，DIV SPAN ， click 。
，click DOM ， ， 。
SPAN
$("span").bind("click", function(){ alert('span click'); });
$("div").bind("click", function(){ alert('div click'); });
$("body").bind("click", function(){ alert('body click'); });
·
： SPAN click ， 。
$("span").bind("click", function(event){
alert('span click');
event.stopPropagation(); //
});
·
，
$("#btnSubmit").bind("click", function(event){
event.preventDefault(); // return false;
});
·
$("#myDiv").bind("click", function(event){ });
event.type() // ：click
event.target() //
event.relatedTarget() //
event.pageX()/event.pageY() // X Y
event.which() // 123
event.metaKey() // （ctrl/alt/shift）
·
$("#myDiv").bind("click", fn1 = function(){
alert("function1");
}).bind("click", fn2 = function(){
alert("function2");
}).bind("click", fn3 = function(){
alert("function3");
});
$("#myDiv").unbind(); // id myDiv
$("#myDiv").unbind("click"); // id myDiv click
$("#myDiv").unbind("click",fn1); // id myDiv fn1 click
· ：
$("#myDiv").one("click", [data], function(){
alert("function1");
});
·
$("#btn").trigger("click", [data]); // click
$("#btn").click(); //
·
$("#myDiv").bind("click.hello", function(){
alert("function1");
});
$("#myDiv").bind("click", function(){
alert("function1");
})
$("div").unbind("click"); //
$("div").unbind(".hello"); //
$("div").unbind("click!"); // （ ， ）
·JQuery
$("div").hide(); // DIV ， sytle="display:none"
$("div").show(); // DIV
$("div").hide(1000); // DIV ， ：slow(600) normal(400) fast(200)
$("div").show(1000); // DIV
$("div").fadeOut(); // ， （ ， ）
$("div").fadeIn(); // ，
$("div").slideUp(); // ， （ ）
$("div").slideDown(); // ，
· animate
$(elem).animate(params, speed, callback);
params： {protected:"value", protected:"value"}
speed:
callback: ，
$("#myDiv").animate({left:"500px"}, 2000); // ID myDiv 500px
$("#myDiv").animate({left:"+=500px"}, 2000); // ， 、
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); // ， ，
$("#myDiv").animate({opacity:"0.5"}, 1000) // 50%
.animate({top:"500px"}, 500) // 500px
.animate({left:"500px"}, 500) // 500px
.fadeOut(1000); // （ ， ）
$("#myDiv").stop([cleanQuene] [,gotuEnd]); // ， boolean
$("#myDiv").is(":animate") //
·
$("#myDiv").toggle(); //
$("#myDiv").slideToggle(); //
$("#myDiv").fadeTo(1000, 0.2); // 20%
//-------------------- JQuery 、 ------------------------
· （ ， ， ， ）
$(":input").focus(function(){ this.addClass("inputFocus"); })
.blur(function(){ this.removeClass("inputFocus"); });
· （ 、 ， 500px， ）
var $txt = $("#textArea");
$(".bigger").click(function(){
if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
//if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
});
$(".smaller").click(function(){
if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
//if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
});
· （ 、 、 ）
$("#btnCheckedAll").click(function(){ //
$("[name=items]:checkbox").attr("checked", true);
});
$("#btnCheckedNone").click(function(){ //
$("[name=items]:checkbox").attr("checked", false);
});
$("#btnCheckedRev").click(function(){ //
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !$(this).attr("checked"));
//this.checked = !this.checked;
}
});
· （ ）
$("#btnAdd").click(function(){ //
$("#mySelect1 option:selected").appendTo("#mySelect2");
});
$("#btnAddAll").click(function(){ //
$("#mySelect1 option").appendTo("#mySelect2");
});
$("#mySelect1").dblclick(function()[ //
$("#mySelect1 option:selected").appendTo("#mySelect2");
}
·
$("form :input.required").each(function(){ // class required input *
$(this).parent().append( $("*") );
});
$("form :input.required").blur(function(){ //
if( this.value == "" ){
$(this).parent().append( $(" ") );
}
else{
$(this).parent().append( $(" ") );
$(this).parent().find(".error").remove();
}
}).keyup(function(){ //
$(this).triggerHandler("blur");
}).focus(function(){ //
$(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
$("form :input.required").trigger("blur"); //
var errNum = $("form .error").length;
if( errNum ){
alert(" ， ");
return false;
}
});
·
$("tr:odd").addClass("oddTr"); // oddTr
$("tr:even").addClass("evenTr"); // evenTr
$("tr:contains(' ')").addClass("highlightTr"); // “ ” ， highlightTr
$("tr").click(function(){
$(this).addClass("selectedTr") //
.siblings().removeClass("selectedTr") //
.end() // ， $(this)，
.find(':radio").attr("checked",true); // ，
});
//-------------------- JQuery Ajax ------------------------
·load( url [,data] [,callback] )
url：
data：
callback：
$("#myDiv").load("hello.html"); // myDiv hello.html
$("#myDiv").load("hello.html .myClass"); // ， hello.html myClass
$("#myDiv").load("hello.html", function(){} ); // ， GET
$("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); // ， POST
$("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //
//responseText :
//textStatus : success error notmodified timeout
//XMLHttpRequest : Ajax
});
·$.get( url [,data] [,callback] [,type]) $.post( url [,data] [,callback] [,type])
url：
data：
callback：
type： xml html script json text _default
$.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ // success
//data :
//textStatus : success error notmodified timeout
// data HTML ，
$("#myDiv").html(data);
// data XML ， 123 " name="dier" age="27" />
var age = $(data).find("user").attr("age");
// data JSON ， {id:"123", name:"dier", age:"27"}
var age = data.age;
});
·getScript(url [,callback])
$(function(){ // JS
$.getScript("test.js");
$.getScript("test.js", function(){ //
//do something..
});
});
·getJSON(url [,callback])
$(function(){ // JS
$.getJSON("test.js");
$.getJSON("test.js", function(data){ //
//do something..
//data :
$.each( data, function(index, item){ // ， foreach
//index :
//item :
//return false;
});
});
});
·ajax(options)
url :
type : GET POST GET
timeout : ( ： ）
data : （String,Object）
dataType : xml html script json jsonp text
bdforeSend : ， return false function(XmlHttpRequest){}
complete : ， function(XmlHttpRequest, textStatus){}
success : function(data, textStatus){}
error : function(XmlHttpRequest, textStatus, errorThrown){}
global : ， true， AjaxStart、AjaxStop
$.ajax({
url : "test.aspx",
type : "POST",
timeout : "3000",
data : {id:"123", name:"dier"},
dataType : "HTML",
success : function(data,textStatus){
$("#myDiv").html( data );
}
error : function(XmlHttpRequest, textStatus, errThrown){
$("#myDiv").html( " ：" + errThrown );
}
});
· serialize()
$.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
// form1 ，
});
· serializeArray()
var arr = $(":checkbox, :radio").serializeArray();
· param()
var obj = {id:"123", name:"dier", age:"27"};
var kv = $.param(obj); //id=123&name=dier&age=27
·JQuery Ajax
ajaxStart(callback) //
ajaxStop(callback) //
ajaxComplete(callback) //
ajaxSuccess(callback) //
ajaxError(callback) //
ajaxSend(callback) //
$("#loading").ajaxStart(function(){ // AJAX ，
$(this).show();
}.ajaxStop(function(){
$(this).hide();
}
);
// 본문 전재:http://blog.csdn.net/dier4836/article/details/4859506#
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
