JQuery基本用法

jQuery简单基本语法: $(selector).action()

$(document).ready(function(){   相当于  $(function(){  $("p").click(function(){  $("p").click(function(){    $(this).hide();    $(this).hide();  });  });});});

$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有 <p> 元素$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery选择器：

1、元素选择器  $("P")  在页面中选取所有 <p> 元素

2、#id选择器       $("#id")  通过 id 选取元素

3、类选择器        $(".name") 通过指定的 class 查找元素

jQuery事件鼠标事件键盘事件表单事件文档/窗口事件click   点击事件keypresssubmit    提交load    加载dblclick   双击事件keydownchange    改变resizemouseenter   鼠标穿过keyupfocus    获得焦点scroll mouseleave   鼠标离开 blur    失去焦点unload  mousedown/mouseup  鼠标按下/松开   hover  悬停事件   

jQuery效果

隐藏：hide();  $(selector).hide(speed,callback);

显示：show():  $(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

toggle();切换 hide() 和 show() 方法$(selector).toggle(speed,callback);

淡入：fadeIn() 用于淡入已隐藏的元素。   

  $(selector).fadeIn(speed,callback);

淡出：fadeOut() 方法用于淡出可见元素。    

  $(selector).fadeOut(speed,callback);

淡入或淡出： fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。    

  $(selector).fadeToggle(speed,callback);

透明度：fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。    

  $(selector).fadeTo(speed,opacity,callback);

    opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

向上滑动：slideUp() 方法用于向上滑动元素。

    $(selector).slideUp(speed,callback);

向下滑动：slideDown() 方法用于向下滑动元素。

    $(selector).slideDown(speed,callback);

向上或向下滑动：slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    $(selector).slideToggle(speed,callback);

自定义动画：animate() 方法用于创建自定义动画。

    $(selector).animate({params},speed,callback);

  params 参数定义形成动画的 CSS 属性

animat()方法多参数使用：

$("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });

绝对值：需要在值的前面加上 += 或 -=：$("div").animate({left:'250px',height:'+=150px',width:'+=150px'});

预定义的值：设置为 "show"、"hide" 或 "toggle"：$("div").animate({height:'toggle'});

队列：编写多个 animate() 调用，逐一运行

$("button").click(function(){  var div=$("div");  div.animate({height:'300px',opacity:'0.4'},"slow");  div.animate({width:'300px',opacity:'0.8'},"slow");  div.animate({height:'100px',opacity:'0.4'},"slow");  div.animate({width:'100px',opacity:'0.8'},"slow");});

停止动画：stop() 方法用于停止动画或效果，在它们完成之前。

$(selector).stop(stopAll,goToEnd);

stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

goToEnd 参数规定是否立即完成当前动画。默认是 false。

CallBack：回调函数，事件执行完后执行的代码

链连接：方法逐一执行，$("#p1").css("color","red").slideUp(2000).slideDown(2000);

----------------------------------------------------------------------------------------------

jQuery HTML

捕获对象信息：text(); html(); val();attr();

text():设置或返回所选元素的文本内容

html():设置或返回所选元素的内容（包括 HTML 标记）

val():设置或返回表单字段的值

attr():方法用于获取属性值

$("#btn1").click(function(){  alert("Text: " + $("#test").text());  alert("HTML: " + $("#test").html());  alert("值为: " + $("#test").val());  alert($("#runoob").attr("href"));});

修改对象信息：text(参数); html(参数); val(参数);attr(参数);

text(); html(); val()的回调函数;

$("#test1").text(function(i,origText){        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";     });

i：被选元素列表中当前元素的下标。 origText：当前值

添加HTML元素

append() 方法在被选元素的结尾插入内容。$("p").append("追加文本");

prepend() 方法在被选元素的开头插入内容。$("p").prepend("在开头追加文本");

after() 方法在被选元素之后插入内容。$("img").after("在后面添加文本");

before() 方法在被选元素之前插入内容。$("img").before("在前面添加文本");

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

删除HTML元素

remove() 方法删除被选元素及其子元素。$("#div1").remove();

empty() 方法删除被选元素的子元素。$("#div1").empty();

过滤删除：remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

删除 class="italic" 的所有 <p> 元素：$("p").remove(".italic");

添加类方法：addClass()

$("button").click(function(){  $("h1,h2,p").addClass("blue");  $("div").addClass("important");  $("body div:first").addClass("important blue");});

删除类方法：removeClass()

$("button").click(function(){  $("h1,h2,p").removeClass("blue");});

添加或删除类方法：toggleClass()

$("button").click(function(){  $("h1,h2,p").toggleClass("blue");});

返回css属性的值：css("propertyname");

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

修改单个css属性的值：css("propertyname","value");

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

修改多个css属性的值：css({"propertyname":"value","propertyname":"value",...});

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

----------------------------------------------------------------------------------

祖先遍历
parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

后代遍历

children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

同胞遍历

siblings() 方法返回被选元素的所有同胞元素。

next() 方法返回被选元素的下一个同胞元素。

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

prev() 方法返回被选元素的前一个同胞元素。

prevAll() 方法返回被选元素之前的所有同胞元素。

prevUntil() 方法返回介于两个给定参数之外的所有跟随的同胞元素。

过滤遍历

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

ilter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

AJAX

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

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

回调函数

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){****});

responseTxt----包含调用成功时的结果内容

statusTxt------包含调用的状态

xhr -----------包含XMLHttpRequest对象

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

$("button").click(function(){  $.get("demo_test.php",function(data,status){    alert("数据: " + data + "\n状态: " + status);  });});

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);$("button").click(function(){    $.post("/try/ajax/demo_test_post.php",    {        name:"菜鸟教程",        url:"http://www.runoob.com"    },        function(data,status){        alert("数据: \n" + data + "\n状态: " + status);    });});

jQuery noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

1. 服务端JSONP格式数据

<?phpheader('Content-type: application/json');//获取回调函数名$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);//json数据$json_data = '["customername1","customername2"]';//输出jsonp格式的数据echo $jsoncallback . "(" . $json_data . ")";?>

2. 客户端实现 callbackFunction 函数

<script type="text/javascript">function callbackFunction(result, methodName){    var html = '<ul>';    for(var i = 0; i < result.length; i++)    {        html += '<li>' + result[i] + '</li>';    }    html += '</ul>';    document.getElementById('divCustomers').innerHTML = html;}</script>