学习jquery

http://www.w3school.com.cn/jquery/

js对象和jquery对象的区别：

jquery就是js中的new Object生成的普通对象

原型：

function $(attr){
obj=new Object();
obj.username="user123";
obj.say=function(){
    alert("my name is"+this.username);
    return this;
}
     obj.eat=function(){
     alert("eat");
}
return obj;
}
//对象链式结构
$("imgid").say().eat();

js对象和jquery对象的方法能不能共用？不能共用

js对象和jquery对象能不能互换？能 

imgobj=document.getElementById("imgid");//dom对象
imgobj.οnclick=function(){
this.src="b.png";
}
$(imgobj).click(function(){ //把dom对象转成jquery对象
this.src="b.png"; //this是dom对象 或者写成 $(this).attr({"src":"b.png"});
});

this代表dom对象，转成jquery对象即是$(this),这时可以用jquery的方法

val=$("h1")[0].outerHTML;//把jquery对象转成dom对象，jquery没有outerHTML方法 或者val=$("h1").get(0).outerHTML;
alert(val);

arr=$("h1").get();//把jquery对象转成dom对象数组
alert(arr[0].outerHTML);
alert(arr[1].outerHTML);

核心方法

alert($("h1").size()); //几个h1
alert($("h1").length);  //几个h1

$("h1").each(function(i){
    $(this).attr("num",i+1);  //each是把每个赋不同的值 alert(i);
})
$("h1").click(function(){
    $(this).html($(this).attr("num"));
});

$(".menu li").mouseenter(function(){
    idx=$(this).index(".menu li");//从0开始
    $(".info p").eq(idx).show();
    $(".info p").not($(".info p").eq(idx)).hide();
});

attr();动属性 data()；和attr()；写法一致，不动属性

选择器

alert（$）;  //或者

alert（jQuery）;//解决$冲突问题

返回函数， 判断有没有引用jquery。

1.常用选择器

$("#hid"）.css({"color ":"#f00"," ":" "});
$(".hcls").css({"color":"#foo","":""});
$("h1").css({"color":"#foo","":""});
$("h1,p").css({"color":"#foo","":""});//h1和p标签
$("*").css({"color":"#foo","":""});

2.层级选择器

$(".div1 h1").css({"color":"#f00"});//类名为div1下的所有h1
$(".div1>h1").css({"color":"#f00"});//类名为div1下的h1的子元素
$(".div1+h1").css({"color":"#f00"});//同级下一个h1
$(".div1～h1").css({"color":"#f00"});//同级后面所有的h1

3.基本选择器

$("h1:first").css({"color":"#00f"});//第一个h1
$("h1:last").css({"color":"#00f"});//最后一个h1
$("h1:not(:first)").css({"color":"#00f"});//除了第一个h1
$("h1:even").css({"color":"#00f"});//偶数h1，从0开始
$("h1:odd").css({"color":"#00f"});//奇数h1，从0开始
$("h1:eq(2)").css({"color":"#00f"});//第3个h1，从0开始
$("h1:gt(1)").css({"color":"#00f"});//大于2的所有h1
$("h1:lt(1)").css({"color":"#00f"});//小于2的所有h1

4.内容选择器

$("div:has(h1)").css({"color":"#00f"});//含有h1的div
$("h1:not(:empty)").css({"color":"#00f"});//非空的h1
$("h1:empty").html("xxxx").css({"color":"#00f"});//空的h1
$("div:parent").css({"color":"#00f"});//有父亲角色的div（包含文本文件）

5.属性选择器

$("h1[name]").css({"color":"red"});//有属性name的h1
$("h1[name=user123]").css({"color":"red"});
$("h1[name^=linux]").css({"color":"red"});//name属性以linux开头的h1
$("h1[name$=123]").css({"color":"red"});//name属性以123结尾的h1
$("h1[name*=123]").css({"color":"red"});//name属性包含123的h1
$("h1[name][age]").css({"color":"red"});//有属性name和age的h1
$("h1[name!=user123]").css({"color":"red"});//name属性不等于user123deh1

6.子元素选择器

$("div h1:first-child").css({"color":"red"});//所有div下所有第一个h1
$("div h1:last-child").css({"color":"red"});//所有div下所有最后一个h1
$("div h1:nth-child(2)").css({"color":"red"});//从1开始数，div下的第2个h1
$("div h1:only-child").css({"color":"red"});//div下，只有一个h1的h1

7.表单选择器type（input,text,password,radio,checkbox,submit,reset,button,file,hidden）

$(":input").css({"background":"#f00"});//所有表单，同样适用于button
$(":text").css({"background":"#f00"});//所有文本表单

8.表单属性选择器:checked :selected;

筛选选择器

1.过滤

$("h1").eq(0).css("color","red");//第1个h1
$("h1").not($("h1".eq(0)).css("color","red");//除了第一个所有h1
$("h1").first().css("color","red");//第一个h1
$("h1").last().css("color","red");//最后一个h1
$("h1").slice(1,4).css("color","red");//从第2个到第4个
$("h1").slice(1).css("color","red");//从第2个到最后

2.查找 next()后一个兄弟，nextAll()后面所有的兄弟，parent()父亲，prev()前一个兄弟，prevAll()前面所有兄弟

children()是父亲找孩子；find()是祖先找后代；siblings();前后所有的兄弟

$("button").click(function(){
$(this).parent().prev().children().children("h1").css("color","red");
})

3.串联

$("h1").add("p").css("color":"red");//h1和p标签
$("div").next().andSelf.css("color","red");//div同级的下一个并且把自己捎上

用this时，只能用筛选来实现

属性选择器

1.属性

$("img").click(function(){
this.src="b.png";
$(this).attr("src","b.png");
$(this).attr({"src":"b.png","":""});
alert($(this).attr("src"));
});

2.css类

$("img").mouseenter(function(){
$(this).addClass("img");
});
$("img").mouseleave(function(){
$(this).removeClass("img");
});
$("img").mouseenter(function(){
$(this).toggleClass("img");//没有变有，有变没有，即切换样式
});
$("img").mouseleave(function(){
$(this).toggleClass("img");
});

3.HTML代码

$("button").click(function(){
a=$(".d1").html();//取值
$(".d2").html(a);//赋值
});

4.文本

text();text(val);只有文本

5.值（表单元素获取和赋值）

$("button").click(function(){
b=$("input").eq(0).val();
$("input").eq(1).val(b);
});

文档处理

1.内部插入

$(".div1 h1").click(function(){
$(".div2").append($(this));
$(this).appendTo(".div2");
$(".div2").prepend($(this));//往前面插入
$(this).prependTo(".div2");
});

2.外部插入（兄弟关系）

$(".div1 h1").click(function(){
$(".div2").after($(this));
$(this).insertAfter(".div2");
$(".div2").before($(this));
$(this).insertBefore(".div2");
});

3.包围

$("p").wrap("<i></i>");//p外面有i，外包围
$("p").wrapInner("<i></i>");//p里面有i，内包围
$("p").wrapAll("<i></i>");//所有p外一个i，外部全包围

4.替换

$(p).replaceWith("<h1>linux</h1>");
$("<h1>linux</h1>").replaceAll("p");

5.删除

empty（）；把标签内容删除

remove（）；把整个标签删除

detach（）；把整个标签删除但带有事件

$("p").click(function(){
$(this).empty();//$(this).html("");
$(this).remove();
obj=$(this).remove();
$("body").append(obj);//事件消失
obj=$(this).detach();
$("body").append(obj);//事件还存在
});

6.复制

$("img").click({
$(this).after($(this).clone());
$(this).after($(this).clone(true));//事件也克隆了
});

css处理

1.css样式css（）；css（{“”：“”}，{“”：“”}）

2.位置 offset();相对于浏览器，position();相对于父

$(".shop").mouseenter(function(){
x=$(this).position().left+40;
y=$(this).position().top+10+200;
$(".img").show().css({"top":y+"px","left":x+"px"});
});

3.尺寸

innerHeight();innerWidth();加上内边距

outerHeight();outerWidth();加内边距加边框；

$("img").load(function(){
w=$("img").width();
h=$("img").height():
alert(w+"|"+h);
});

4.获取三个高

1）可视区域的高 $(window).height();

2）文档总高度 $(document).height();

3）滚动的高 $(window).scrollTop();

事件

0.js加载执行的时机

1）DOM加载完毕

把js标签放在body之后即可！

2）资源加载完毕

$(window).load(function(){

//代码

});

3）jquery中实现等dom加载完毕

$(function(){

//所有代码都是等dom加载完毕才会去执行！

});

1.页面载入

$(document).ready(fn);

$(fn);  或者jQuery(fn);

2.事件处理 one（）；只绑定一次事件

i=0;
$("button").eq(0).click(function(){
$("img").bind("click",function(){ //绑定事件
if(i%2==0){
   this.src="b.png";
   }else{
   this.src="a.png";
    }
    i++;
});
});
$("button").eq(1).click(function(){
//$("img").unbind("click");  //解绑事件
$("img").unbind();  //解绑所有事件
});

用one（）；实现点赞功能

$("botton").one("click",function(){
val=parseInt($("span").html())+1;
$("span").html(val);
$(this).css({"background":"#00f","color":"#fff"});
});

i=0;
$("botton").click(function(){
if(i==0){
val=parseInt($("span").html())+1;
$("span").html(val);
$(this).css({"background":"#00f","color":"#fff"});}
else{alert("您已经点过了");}
i++;
});

3.事件委派live（）；永远在执行绑定   die（）；

&times叉叉符号，留言板

4.事件切换hover（）；第一个函数为移入，第二个函数为移出  toggle（）；循环单击

$("img").toggle(
function(){
this.src="b.png";
},
function(){
this.src="a.png";
}
);