jQuery官网API的简易解读

jQuery官网API的简易解读

       整个API内容还是很多的，对于初学者来说，看着真是头晕，下面我把最常用的一些内容，展示一下，仅供参考。具体有【Ajax】、【Attributes】、【CSS】、【Effects】、【Events】、【Selectors】这些目录下的常用方法。

l        要点1：Ajax

AJAX的异步访问和加载片段

[1]异步访问

服务器端代码Server.php

<?php

       if(issert($_GET['name'])){

              echo"hello:".$_GET['name'];

       }else{

              echo"Args Error";

       }

客户端代码ajaxindex.html

<input type="text"id="namevalue"/>

<br/>

<buttonid="btn">Send</button>

结果：<spanid="result"></span>

 

客户端JS代码ajaxindex.js

$(document).ready(function(){

       $("#btn").on("click",function(){

              $("#result").text("请求数据中，请稍后····");

              $.get("Server.php",{name:$("#namevalue").val()},function(data){

                     alert("Hello");  //数据加载过程，中断一下，为了看效果

                     $("#result").text(data);

              }).error(function(){

                     $("#result").text("通讯有问题");

              });

       });

});

【post方式只需要将文件中的get改为post就可以了】

[2]加载碎片（HTML碎片或JS碎片）

主文档main.html

主脚本main.js

//加载HTML碎片

$(document).ready(function(){

       $("body").text("wait....");      //为了更好地看结果

       alert("Hello");                //为了更好地看结果

       $("body").load("box.htm",function(a,status,c){

              console.log(status);

              if(status=="error"){

                     $("body").text("片段加载失败");

              }

       });

});

 

//加载js碎片

$.getScript("HelloJS.js").complete(function(){

       sayHello();

});

 

碎片box.htm

<divstyle="width:100px;height:100px;background-color:#ff0000"></div>

 

碎片HelloJS.js

function sayHello(){

       alert("Hello,AJAX");

}

l        要点2：Attributes

HTML的捕获，设置，元素添加与删除

捕获方法：text()【div等的文本节点】,html(),val()【input的默认value值】,attr()

设置方法：text(),html(),val(),attr()

添加内容：append(),after(),prepend(),before()

        【可以直接文本，html元素，jQuery元素，JS的DOM元素】

         $("#p1").append("this is aquestion");  //直接文本

         var text1="<p>iwen</p>";  //HTML方式

        var text2=$("<p></p>").text("ime");

        var text3=document.createElement("p");

        text3.innerHTML="acely";

         $("body").append(text1,text2,text3);

 

删除内容：remove()【删除它自身及其内部】,empty()【删除里面的子元素】

l        要点3：CSS

CSS操作及其盒子模型【查看API中CSS部分】

$("div").css("width","100px");

$("div").css({width:"100px",height:"100px"});

$("div").addClass("style1");

$("div").removeClass("style1");

$("div").toggleClass("style1");

 

盒子模型中的“height”只是内容的高度

“innerHeight”是内容+padding的高度

“outerHeight(true)”有true则包含margin高度，无true则只包含border

l        要点4：Effects

【1】隐藏与显示[hide(),show(),toggle()]

【2】淡入淡出[fade]

【3】滑动[slide]

【4】回调[方法执行完毕，就会执行函数体内部的语句]

特效可以同时执行多个动画，并列进行叠加效果

l        要点5：Events

事件【Events】查看官网API

【1】常用事件方法[click,dbclick,mouseenter]

【2】绑定事件[bind][高版本建议用on]

【3】解除绑定事件[unbind][高版本建议用off]

【5】事件的冒泡[stopPropagation:阻止父级的冒泡事件，stoplmmediatePropagation:阻止所有的冒泡事件]

【6】自定义事件

让一个按钮绑定一个click事件，同时绑定一个自定义事件

var ClickMeBtn;

$(document).ready(function(){

       ClickMeBtn=$("#ClickMeBtn");

       ClickMeBtn.click(function(){

              var e=jQuery.Event("MyEvent");

              ClickMeBtn.trigger(e);

       });

       ClickMeBtn.bind("MyEvent",function(event){

              console.log(event);

       });

});

小技巧：console.log(event);在浏览器的控制台输出，不是所有的浏览器都支持的

l        要点6：Selectors

jQuery选择器【Selectors】查看官网API

元素选择器【$("p")】，id选择器【$("#pId")】，类选择器【$(".pClass")】都是最常见的