java jquery ready,JQuery学习笔记

在页面加载完成之前执行：

$(document).ready(function(){

//可以执行多个函数

})

$(window).resize(TB_position);用户在跳转窗口大小时执行TB_position函数

$(window).scroll(TB_position);用户在拖动页面翻页的时候执行TB_position函数

jQuery元素选择器

点击button后，

$(document).ready(function(){

$("button").click(function(){

$(this).hide();所有的button都隐藏//$(“#test”).hide();让id为test的元素隐藏//

$(“.test”).hide();所有class为test的都隐藏//$(“p”).hide();所有

元素隐藏

//$(this).show();显示

});

})

jQuery使用CSS选择器来选取HTML元素

jQuery属性选择器

$("[href]")选取所有带有href属性的元素。

$("[href='#']")选取所有带有href值等于"#"的元素。

$("[href!='#']")选取所有带有href值不等于"#"的元素。

$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。

jQuery CSS选择器

jQuery CSS选择器可用于改变HTML元素的CSS属性

1.$(selector).css(name,value)

$("p").css("background-color","red");

2.$(selector).css({properties})

$("p").css({"background-color":"red","font-size":"200%"});

3. $(selector).css(name)返回指定的css的属性值

$(this).css("background-color");

var jq=jQuery.noConflict()，帮助您使用自己的名称(比如jq)来代替$符号

显示隐藏：

$(document).ready(function(){

$(".flip").click(function(){

$(".panel").slideToggle("slow");//点击向下显示OR隐藏

$(".panel").slideUp("slow");//点击向上

$(".panel").slideDown("slow");//点击向下

});

})

完全隐藏：

$(document).ready(function(){

$(".ex .hide").click(function(){

$(this).parents(".ex").hide("slow");

});

});;

颜色淡出：

$(document).ready(function(){

$("button").click(function(){

$("div").fadeTo("slow",0.25);//把被选元素淡出为给定的不透明度

$(“div”).fadeOut(4000);//淡出

$(“div”).fadeIn(4000);//淡入

});

});

JQuery自定义动画：

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义产生动画的CSS属性。可以同时设置多个此类属性：

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是："slow", "fast", "normal"或毫秒。

$(document).ready(function(){

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

$("#box").animate({height:300},"slow");

$("#box").animate({width:300},"slow");

$("#box").animate({height:100},"slow");

$("#box").animate({width:100},"slow");

});

});

hide()和show()都可以设置两个可选参数：speed和callback。

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

使用callback，当动画完成后即调用防止页面出错

speed参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal"或毫秒。

callback参数是在hide或show函数完成之后被执行的函数名称function(){}

toggle()：隐藏显示的元素，显示隐藏的元素。$(“p”).toggle();

$(selector).toggle(speed,callback)

$(selector).html(content)改变所匹配的元素的内容

$("p").append(" W3School");在所匹配的元素内部追加内容

$(selector).after(content)：在所匹配的元素之后追加内容

JQuery和Ajax

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

url为指定数据的web地址

data为向服务器发送的数据

callback为执行完毕触发的函数

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

把远程数据加载到被选的元素中

$.ajax(options)

把远程数据加载到XMLHttpRequest对象中

$.get(url,data,callback,type)

使用HTTP GET来加载远程数据

$.post(url,data,callback,type)

使用HTTP POST来加载远程数据

$.getJSON(url,data,callback)

使用HTTP GET来加载远程JSON数据

$.getScript(url,callback)

加载并执行远程的JavaScript文件

(url)被加载的数据的URL(地址)

(data)发送到服务器的数据的键/值对象

(callback)当数据被加载时，所执行的函数

(type)被返回的数据的类型(html,xml,json,jasonp,script,text)

(options)完整AJAX请求的所有键/值对选项

Checkbox全选/取消全选

$(function () {

$("#CheckedRev").click(

function () {

$("input:checkbox").attr("checked",this.checked);

});

var box=$("#d1 input");

box.click(function(){

if(box.length!=$("#d1 input").attr("checked").length){

$('#CheckedRev').removeAttr('checked');

}

});

});

全选

一

三

二

得到一组checkbox选中的值

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

$('input[type="checkbox"]:checked').each(

function() {

alert($(this).val());

}

);

})

$("[id^='chckId']").live("click",function(){})//模糊匹配，live每次点击时变化

$(this).parents('div').next('input').attr('name');得到上一级div同级的input的name

$(this).parents('div').next('input').removeAttr("readonly");//去除input元素的readonly属性

$(this).parents('div').next('input').css({"border":"1px solid black","background-color":"white"});得到上级为div的父标签的同级input

$("#tab input[type='text']") id为tab的table表格中所有type=text的input

$("[id^='chckId']").live("click",function(){

if($(this).attr("checked")){

alert($(this).parents('div').next('input').attr('name'));

$(this).parents('div').next('input').removeAttr("readonly");//去除input元素的readonly属性

$(this).parents('div').next('input').css({"border":"1px solid black","background-color":"white"});

}elseif(!($(this).attr("checked"))){

$(this).parents('div').next('input').attr("readonly","readonly");

$(this).parents('div').next('input').css({"border":"0","background-color":"#f2f2f2"});

}

})