jquery的一点小总结

1：选择器：
id选择器 ：
  $('#username')  相当于 document.getElementById("username");
  $('.username')   这个就像css里面的class = username
  $('p')   获得p标签
  $('p>input') 获得子标签，也就是获得p标签下面的input标签
  $('p,div,span')同时获得多个标签
  $(':input')获得表单标签
  $('input[name='username']')获得name等于username的input标签
  $("td:odd")表格的隔行
2:以前我们在页面加载的时候老喜欢用onload
   现在学习jquery以后就不再用它了，因为jquery有了另一个更好的它
$(document)  .ready(function(){
     $('p').click(function(){
      $(this).hide();
});
});
利用上面的知识点写一个简单的隐藏效果，以前我们写隐藏效果主要是通过
document.getElementById("pp").style.display="none"
现在我们通过jquery来达到同样的效果
$(document).ready(function(){
  $("button").click(function(){
     $("#pp").hide();
});
});
同样可得出隐藏有几种写法：
第一种可以通过指定id来进行隐藏:
$("#id1").hide();
第二种可以通过class来进行隐藏
$(".class1").hide();
第三种可以通过标签来进行隐藏
$("p").hide();
第四种可以通过this来表示当前的使用对象
$(this).hide();


当然也可以隐藏子元素比如
$("ul .classli").hide();
隐藏所有class = classli的ul标签的内容，当然id的子元素也可以
$("ul#id1").hide()也可以

当然有隐藏那肯定有显示了
$("ul #id1").show()
属性选择器：
比如要想找
$("[src]")  选取所有带有src属性的元素
$("[src='a.jpg']")  选取所有带有src属性的并且src=a.jpg的元素
$("[src$='a']")选取以a结尾的src元素


jquery的css选择器

比如我想给
$("p").css("background-color","red");

第一个元素可以这杨表示
$("ul li:first")表示ul元素下面的第一个li元素

jquery事件：

单击事件：
$("#id").click(function(){

})
获得焦点事件：
$("#id").focus(function(){
})
鼠标移过事件
$("#id").mouseover(function(){

})
jquery给我们封装好一个显示和隐藏切换的方法
toggle()方法，这样的话我们就可以切换直接切换了，比如
$("#iddd").click(function(){
   $("p").toggle();
})
这样的话就可以得到一种隐藏跟显示的效果了！
jquery封装了向上滚动和向下滚动的效果，只要调用相应的方法即可！
$("#shidup").click(function(){
   $("#up").slideUp();
})

$("#shiddown").click(function(){
  $("#down").slideDown();
})

$("#slidetoggle").click(function(){
   $("#toggle").slideToggle();
})
还有一种特效就是渐渐的变透明和消失，jquery里面也有封装好的方法
$("div").click(function(){
$(this).fadeOut("show",32);
})
还有fadeIn();

jquery里面还有一个还好的函数就是自定义动画函数animate();
$("#button").click(function(){
  $("#box").annimate({left:30px},"slow");
  $("#box").annimate({right:30px},"slow");
})

jquery里面的回调函数
比如你想让标签span隐藏2000毫秒以后回调一个函数就这么写
$("span").hide(1000,function(){
  alert("已经隐藏了");
})

改变html内容
$("p").html="okkk"
$("p").append="this is add"//追加内容
$("p").before //在匹配的元素前面添加
$("p").after  //在匹配的元素后面添加

添加css样式：
$("p").css("background-color","red")
$("p").css({"background-color":"red","font-size":"12px"})
$("p").height()
$("p").width()


jquery给ajax提供了很多便利的方法可以直接调用
$.get(url,data,callback,type)
$.post(url,data.callback,type)
$.load(url,data,callback)
$.getJSon(url,data,callback)

在jquery里面
$("ul li:first")第一行
$("ul li:lat")最后一行
$("tr:odd")偶数行
$("tr:odd")奇数行

所有type="button"的元素
$(":button")
同理所有type="radion"的元素
$(":radio")