JQuery基本使用

id选择器 ：
  $('#username')  相当于 document.getElementByIdx_x("username");
  $('.username')  这个就像css里面的class = username
  $('p')   获得p标签
  $('p>input') 获得子标签，也就是获得p标签下面的input标签
  $('p,div,span')同时获得多个标签
  $(':input')获得表单标签
  $('input[name='username']')获得name等于username的input标签
  $("td:odd")表格的隔行
jQuery的加载事件
$(document).ready(function(){
});
隐藏效果
以前我们写隐藏效果主要是通过document.getElementByIdx_x("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(
Unknown macro: {left}

,"slow");
$("#box").annimate(
Unknown macro: {right}

,"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(
Unknown macro: {"background-color"}

)
$("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")
id选择器：

  $('#username')  相当于 document.getElementByIdx_x("username");
  $('.username')  这个就像css里面的class = username
  $('p')   获得p标签
  $('p>input') 获得子标签，也就是获得p标签下面的input标签
  $('p,div,span')同时获得多个标签
  $(':input')获得表单标签
  $('input[name='username']')获得name等于username的input标签
  $("td:odd")表格的隔行
jQuery的加载事件

$(document).ready(function(){
});
隐藏效果

以前我们写隐藏效果主要是通过document.getElementByIdx_x("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(
Unknown macro: {left}

,"slow");
$("#box").annimate(
Unknown macro: {right}

,"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(
Unknown macro: {"background-color"}

)
$("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")


原文出处：无言冬季的博客
http://blog.sina.com.cn/wuyandongji