jQuery知识点大全

纯手打...

要知道，jquery是一个类数组对象，它本身也是javascript,它是对javascript进行了封装。

1.<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();//p会被隐藏
$("#demo").hide();//id=demo会被隐藏
$(".demo1").hide();//cLass=demo1会被隐藏
$(this).hide();//当前选取的元素会被隐藏
$("*").hide();//当前页面所有东西全部隐藏
$("p.demo2").hide();//class=demo2的P元素会被隐藏
$("p:first").hide();//第一个P元素会被隐藏
$("ul li:first").hide();//第一个ul的第一个li会被隐藏
$("ul li:first-child").hide();//所有的ul的第一个li都会被隐藏
$("[href]").hide();//链接被隐藏
$(":button").hide();//所有button和type=button的元素都会被隐藏
$("button").hide();//button会被隐藏
$("tr:even").css("background","red");//偶数的tr
$("tr:odd").css("background","blue");//奇数的tr
});
});
</script>

2.事件
  $(".a").click(function() {});//单击
  $(".a").dblclick(function() {});//双击
  $(".a").mouseenter(function() {});//鼠标进入
  $(".a").mouseleave(function() {});//鼠标拿走
  $(".a").hover(function() {});//鼠标拂过
  $(".a").focus(function() {});//获得焦点
  $(".a").blur(function() {});//失去焦点
  


jQurey效果


1.$(".a").hide(1000);//隐藏，可以设置时间
  $(".a").show();//显示
  $(".a").toggle();//隐藏和显示交换
  
2.  $(".a").fadeIn();//淡入
$(".b").fadeIn("slow");
$(".c").fadeIn(2000);
$(".d").fadeOut();//淡出
$(".e").fadeOut(3000);
$(".f").fadeToggle();//淡入淡出切换
$(".g").fadeTo(3000,0.4);//渐变成淡色
$(".h").fadeTo("slow",0.4);  


3.  $(".a").slideDown(3000);//下滑出现
$(".b").slideUp("slow");//上滑隐藏
$(".c").slideToggle(3000);//滑动切换

4.$(".a").animate({
marginLeft:'100px',//css属性命名必须用Camel
width:'200px',
height:'200px',
opacity:'0.4'
});
$(".b").animate({
left:'300px',
width:'+=200px',
height:'+=200px',//所有属性都可以写在animate里面，可以相对变化，这个会一直改变大小
opacity:'0.4'
});
$(".c").animate({
height:'toggle'//可以把预定义好的动画直接放进来
});

var d=$(".d");//一个动画有多个特效，设置特效的顺序
d.animate({width:'100px',height:'20px',opacity:'0.4'},"slow");
d.animate({width:'20px',height:'100px',opacity:'0.4'},3000);

    var f=$(".f");
f.animate({left:'100px'},3000);
f.animate({fontSize:'1.5em'},2000);//一定要注意fontSize的写法

5.$("#panel").stop();//停止动画


6.$("button").click(function(){//回调callback
$(".a").slideUp(2000,function(){
alert("隐藏了");
});
});


7.$("#a").css("color","red").slideUp(2000).slideDown(2000);//链同时执行




jQuery HTML


1.html捕获


     $("#b").click(function(){
alert($("#a").text());//捕获文本
});
$("#c").click(function(){
alert($("#a").html());//不过html语句
});
$("#d").click(function(){
alert($("#in").val());//捕获input值
});
$("#e").click(function(){
alert($("#h").attr("href"));//捕获链接的值
});

2. $("#a").attr("href","http://www.runoob.com/jquery");//修改链接的值


3.添加元素
    $(".a").append("你好");//被选元素的结尾插入内容
$(".aa").prepend("不好a");//被选元素的开头插入内容
$("body").append("aaaa");//在整个页面尾加入内容
$(".aaa").after("haoya");//被选元素之后插入内容
$(".aaa").before("haobu");//被选元素之前插入内容

4.删除元素
  $(".a").remove();//删除选中的元素
  $(".a").empty();//清空选中的元素的内容
  
5.css类
  $("body div:first").addClass("im impor");//为第一个div添加im 和 impor两个css样式
  $("h1,h2,p").removeClass("blue");//为h1,h2,p元素删除其blue样式
  $("h1,h2,p").toggleClass("blue");//切换样式
  
6.css方法
  alert("背景颜色 = " + $("p").css("background-color"));//返回背景颜色
  $("p").css("background-color","yellow");//设置所有P的背景为黄色，注意都要带双引号
  $("p").css({"background-color":"yellow","font-size":"200%"});//设置多个属性，注意双引号和冒号
  
  
jQuery遍历


1. $("span").parent().css({"color":"red","border":"2px solid red"});//parent()是对上一级的父元素
   $("span").parents().css({"color":"red","border":"2px solid red"});//parents()是对所有的父元素
   $("span").parents("ul").css({"color":"red","border":"2px solid red"});//parents()是对所有的父元素，可以选择过滤
   $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});//parentsUntil()是选择介于span和div之间的所有元素
   
2. $("div").children("p.1").css({"color":"red","border":"2px solid red"});//children()选择下一级的子元素，选择子元素里class=1的p元素
   $("div").find("*").css({"color":"red","border":"2px solid red"});//find("*")返回所有后代
   
3. $("h2").siblings().css({"color":"red","font-size":"12px"});//返回h2的所有同胞，但不包括h2在内
   $("h2").siblings("p").css({"color":"red","border":"2px solid red"});//只选择同胞中的p元素
   $("h2").next().css({"color":"red","border":"2px solid red"});//返回h2的下一个同胞，该方法只有一个返回值
   $("h2").nextAll().css({"color":"red","border":"2px solid red"});//返回h2的紧跟着的所有同胞
   $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});//返回介于h2和h6之间的所有同胞
   prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过是往前遍历
   
4.过滤 $("div p").first().css("background-color","yellow");//first()选取第一个div中的第一个p
     $("div p").last().css("background-color","yellow");//last()选取最后一个div中的最后一个p
     $("p").eq(1).css("background-color","yellow");//eq()返回指定序号的元素，返回第二个p元素，因为是从0开始的
     $("p").filter(".url").css("background-color","yellow"); //filter()里面的是标准，不符合标准的会被过滤掉
     $("p").not(".url").css("background-color","yellow");//not()与filter()相反