jquery小结

1、基本语法

$===jQuery

var aaa = $("<p>aaa</p>");

$("#div").css();//选中的类

$("span").css()//所有的span

$("#div").append(aaa);

$("#div").css().append(aaa);//每次都会返回JQ对象供下次调用;

$(function(){

alert();

alert();

})//加载完DOM就执行，可以重复执行；

选择器：

$("div>ul>li:nth-child(2)").css("");

$("div ul li")

$("input[type='checkbox']"))//字符串属性选择器

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

$("div>ul>li:not(:last-child)").css();

获取HTML,设置HTML：

$("#div").html();

$("#div").html("<p>这是文字</p>");

$("#div").html($("#div").html+"<p>这是文字</p>");

获取值,设置值：

$("#div").val("");

$("#div").val("ABC");

获取属性,设置属性：

$("#div").attr("id");//返回属性ID；

$("#div").attr("title","我是div");

$("#div").attr({"class":"divclass2","title":"divtitle","name":"divname"});//设置多个属性，有需要的时候可以用

//用函数返回值,所有的地方都可以加函数；

$( "#div").attr("class",function(){

return "divclass3";

})

//获取原生节点对象

var div3=$("#div3");

congsole.log(div3.get(0));

2、实现插入

var newNode=$("<div>新添加的节点</div>")

//在main子节点中插入

$("#main").append(newNode).css();//在main的子节点之后插入节点

$("#main").preappend(newNode)//在main的子节点前插入节点

$("p").appendTo($("#main"));//把P移动到main的子节点

//在main之前插入

$("#main").after($("<p>这是文字</p>"))//在main节点之前

$("#main").after($("<p>这是文字</p>"))//在main节点之后

$("<p>这是新内容</p>").inserAfter($("#main"));//在main节点之后插入

//包裹节点，给整个节点包裹外面标签

$("span").wrap("<div></div>")//每个元素当成一个独立体，在每个元素外面包裹一个；

$("span").wrapAll("<div></div>")//每个元素当成一个独立体，包裹最外面的一层；

$("span").unwrap().unwrap();//每次只移除一层，可以链式调用移除两层；

//复制，删除，替换节点

$("span").clone().appendTo($("#main"));//复制节点

$("span").remove();                                    //移除节点

$("span").replace("<div>这是替换的内容</div>")//替换节点

//切换

$("#main").toggleClass("red");//如果没有red，添加red，否则移除red；

$("#main").toggleClass("blue yellow")//red和整个blue yellow切换；

$("#main").toggleClass(function(){

return blue;

})

//只在两种颜色中切换

$("#main").toggleClass(function(){

if($("#main").hasClass("blue")){

$("#main").remove("blue");

return "yellow";

 }else{

$("#main").remove("yellow");

return "blue";}

})

3、数组和事件

var arrList=$("input[ type='checked']");

$each(arrList,function(i,n){//n代表数组，i代表下标

console.log($(n).val());//代表输出的结果

$(n).attr("checked",true)          //$(n).attr() 每一个数组中的值进行操作；

if(i==4){

return false;        //跳出循环

}

})

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

事件：

$(function(){

$("#mybtn1").click(function(){})        //点击调用事件

})

mouseenter,mouseleaver--疯赚了mouseover,mouseout;

$(function(){                                        //通过on可以调用多个事件

$("#mybtn1").on("click mouseover mouseout",function(){

})})

$(function(){                                          //通过on多个事件分别调用不同的函数；

$("#mybtn1").on({

"click":myFunc1();

"mouseover":myFunc2();

"mouseout":myFunc3();

})

})

$("#mybtn1").off();                                //解除事件绑定

$("#mybtn1").off("click")                    //解除某一个事件的绑定

$("#mybtn1").on("click",function4(){}) //同一个事件可以绑定多次

$("#mybtn1").off("click",function4)        //解除某一个事件的某一个函数绑定；

$("#mybtn1").click(function(e){            //获取event对象，同时直接在下面函数中使用；

alert(e.clintX)

})

//通过bind绑定

$("#mybtn1").bind("click",function(){

})

$("#mybtn1").unbind("click");

//自定义事件

$("#mybtn1").click(function(){                      //mybtn1点击会调用mybtn2的事件

                                                                       //同时调用mybtn3中的普通事件；

    $("#mybtn2").trigger("myEvent");   

    $("#mybtn3").click();         

})

$("#mybtn2").on("myEvent",function(){

})

$("#mybtn3").click(function(){})

4、动画

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

$("#box").show("fast");                //从左到右，从上到下显示；

})

$("#show").hide("slow");                    //隐藏，从右到左，从下到上；

$("#show").toggle();                        //切换显示隐藏；

$("#box").slideToggle();                    //上下滑动；

$("#box").slideUp();                           //向上滑动；

$("#box").slideDown();                    //向下滑动；

$("#box").fadeIn(100);                            //淡入；

$("#box").fadeOut(100);                        //淡出；

$("#box").fadeToggle(100);                    //淡入淡出切换；

队列显示：

$(".test").show(100)                                //所有的test类一起显示；

$(".test").eq(0).show(100,function(){          //将test类分成4部分显示出来；递归显示，同时调用回调函数；

$(".test".eq(1).show(100,function(){

$(".test".eq(2).show(100,function(){

$("test".eq(3).show(100,function(){

}))

}))

}))})

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

自定义动画：

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

$("#box").animation(){

"width":"99px";

"height":"80px";

"opacity":".5";

"margin-left":"+=50px";

"background-color":"red";

},5000);

})

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

队列动画：

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

$("#box").animate({

"width":"100px";

},1000 ).animate({

"height":"98px";

},300).animate({

"opacity":".6";

},100，function(){

$("#box").css({

"background-color":"red";

"-webkit-transition":"all 1s linear";

})

}

})

//清除动画

1、是否清除队列动画；

2、是否停止在该队列的末尾状态；

$("#btn2").stop(true,true) 

       //ture代表停止在该队列的末尾状态，false代表停止在该位置；

5、ajax

过滤器：

//$("#btn2").click(funtion(){

$("#box").load("test.html");        //直接发送ajax请求；

})

//$("#btn2").click(function(){

$("#box").load("test.html .container");

})

//动态的加载页面，默认的是get请求，如果返回的是页面显示页面，返回的是ejs就返回ejs内容；ejs可以只写需要的东西；
$("#btn2").click(function(){

$("#box").load(test.do);    //通过服务器来相应的页面引入；

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

$("#box").load("test.html"); //表示层的页面可以在每个页面引入其他页面

})

app.get("/test.do",function(req,resp){

resp.redirect("test.html");        //服务器返回页面；

})

//带参数的请求,自动转给POST方式；

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

$("#box").load("test.do",function(){

"username":$("username").test();

},function(data,status,xhr){

console.log(data);

console.log(status);

console.log(xhr);

})