jQuery学习笔记

jQuery


Selector
$("#").
$(".").
$("[]").


Event
.click(function{

})


.mouseover(function{

})






var jq = jQuery.noconflict()


.hide()
.show()
.toggle()


.fadeIn()
.fadeOut()
.fadeToggle()
.fadeTo()


.slideDown()
.slideUp()
.slideToggle()


.animate({})
.stop()


.css()


.text()
.html()
.val()


.attr("href")


$("#").html(function(i, text){
return "" + text + "";
});


.append
.prepend
.after
.before


//<img>和<br>单标签只能用.after和.before


<script>
function appendText()
{
var txt1 = "<p>Text.</p>";
var txt2 = $("<p></p>").text("Text.");
var txt3 = document.createElement("p");
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3);
}
</scirpt>


.remove()
.empty()
.remove(".")
//remove删除被选元素及其子元素
//empty清空子元素


.addClass()
.removeClass()
.toggleClass()
.css()


<style>
.blue{

}
</style>


.addclass("blue")


.width()
.height()
.innerWidth()
.innerHeight()
.outerWidth()
.outerHeight()


$(document).width()
$(window).width()


.parent()
.parents()
.parentsUntil("div")
.parent("ul")


.children()
.children("p.1")
.find("span")
.find("*")


.siblings()
.siblings("p")
.next()
.nextAll()
.nextUntil("h6")
.prev()
.prevAll()
.preUntil("")


$("div p").first().css()
$("div p").last().css()
$("p").eq(1).css()
$("p").filter(".intro").css()
$("p").not(".intro").css()


$(selector).load(URL, data, callback)


$("#div1").load("demo_test.txt")
$("#div1").load("demo_test.txt #p1")


callback
responseTXT, statusTXT, xhr


$("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr)){
if (statusTxt == "success")
;
if (statusTxt == 'error')
alert("Error: "+ xhr.status + ": " + xhr.statusText);
}


//HTTP请求


$.get
$.post
$.get(URL, callback)
$.post(URL, data, callback)


$("button").click(function(){
$.post("demo.asp",
{
name: "",
city: ""
})
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
}
})




$.noConflict()
jQuery(document).ready(function(){
jQuery("button").click(function(){


})
})


$.noConflict()
jQuery(document).ready(function($){
$("button").click(function(){


})
})


//函数内使用 $ 符号 - 而在函数外，依旧不得不使用"jQuery"


$(this).hide()


$(document).ready(function(){
$("button").click(function(){
$(this).hide();
})
})


.css()
.offset()
.offset().left
.offset().right


//偏移


.position()
.position().left
.position().top


//相对于父元素位置


.hasClass("intro")


//true 


//post
.size()


//event


$("button").bind("click": function(){
$("p").slideToggle();
})


.mouseover(function(){

})
.mouseout(function(){

})
.mouseenter(function{

})
.mouseleave(function{

})


//不论鼠标指针穿过被选元素或其子元素，都会触发mouseover
//只有在鼠标指针穿过被选元素时，才会触发mouseenter