Jquery基本知识快速上手

JQuery的开始写法

<script type="text/javascript">
$('document').ready(

    function(){
    $("button").click(function(){$("p").hide();});

});
</script>

Jquery选择器的各种用法

$(this)   当前元素
$("p")   所有<p>元素
$("input")  所有input元素
$(".intro")  所有 class=“intro” 的元素
$("p.intro")  所有 class="intro" 的<p>元素
$("#intro")  id="intro" 的第一个元素
$("ul > li")   ul下的所有li节点
$("ul li:first")  每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的 href 属性的属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$(li[a:contains('Register')]")  内容包含Register的<a>元素
$("input[@name=bar]")   name是bar的<input>元素
$("input[@type=radio][@checked]") type是radio的<input>元素
$(“li”).not(“ul”)    li下没有包含ul节点的节点元素
$("span[@id]")    包含id属性的<span>元素
$("[@id=span1]")   id为span1的节点元素

 

常见事件
$(selector).click()  被选元素的点击事件
$(selector).dblclick()  被选元素的双击事件
$(selector).focus()  被选元素的获得焦点事件
$(selector).mouseover()  被选元素的鼠标悬停事件
$(selector).css();  被选元素的CSS事件
$(selector). hide();  被选元素的隐藏事件
$(selector). show('slow');  被选元素的显示事件

Dom节点操作
$(“a”).addClass(“red”)    为所有<a>增加class=”red”
$(“a”).removeClass(“red”)   为所有<a>去掉class=”red”
$(“li”).append(“BB!”)    为<li>增加”BB!”innerHTML
执行事件
//hover是在执行完第一个函数后再执行第二个

$(“p”).hover(function(){   
  $(this).addClass("hover");
},function(){
  $(this).removeClass("hover");
});

//toggle第一次点击执行第一个函数，再点击执行第二个

$(“p”).toggle(function(){  
$(this).addClass("selected"); 
},function(){
  $(this).removeClass("selected");
});

隐藏显示
$(selector).hide(speed,callback)  //隐藏
$(selector).show(speed,callback) //显示

切换与滑动

$(selector).toggle(speed,callback)  //切换功能
$(selector).slideDown(speed,callback) //向下滑动，并显示遮挡
$(selector).slideUp(speed,callback) //向上滑动，并隐藏遮挡
$(selector). slideToggle(speed,callback) //上下滑动，实现切换
$(selector). slideToggle("slow/fast")
淡入淡出和动画
$(selector). fadeOut(speed,callback) //变淡至空
$(selector). fadeIn(speed,callback) //变亮至全部
$(selector). fadeTo(speed,opacity,callback) //变淡至指定效果 opacity亮度直用0.0 ~ 1.0之间
$(selector).animate({params},duration,easing,callback)  //动画  params可以是变化后的CSS效果，如：{height:300}   duration变化速度用毫秒  callback变化效果的名称（需要插件）

Ajax+jquery
1、jQuery.ajax(options)
2、jQuery.get(url,data,callback,type)
3、jQuery.post(url,data,callback,type)
4、jQuery (selector).load(url,data,callback)
url  发送请求的地址。
type 请求方式 ("POST" 或 "GET")
timeout 设置请求超时时间（毫秒）。
async (默认: true) 异步请求。
Data 发送的参数可以是json类型
dataType  返回的数据类型：xml,html,json,txt
success 成功后可以返回function(data,st){}

$.ajax({
 type: "GET",
 url: "php.php",
 data: { PHP: "100", Name: "Jquery" },
 success:function(data, st){
 $("div#asd").html(data);
 }
  });
<div id="asd"><h2>VIPzuowen网，通过 AJAX 调用内容</h2></div>

jQuery.get(url,data,callback,type)  jQuery.post(url,data,callback,type)

url 待载入页面的 URL 地址。
data 待发送 Key / value 参数。
callback 载入成功时回调函数。
type 返回内容格式，xml, html, script, json, text, _default。

$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: txt});

jQuery (selector).load(url,data,callback)
$(document).ready(function(){
  $(“button").click(function(){
  $('Div').load(‘php100.php‘,{name:’123’},function(){});
  });
});

添加到元素

$(content).appendTo(selector)
$("button").click(function(){
       $("<b>Hello World!</b>").appendTo("p");
 });

css
$(selector).addClass(class)
$(selector).removeClass(class)
$(selector).hasClass(class)
.find(class)
$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr(attribute,function(index,oldvalue))

相关参数
:input 
:text 
:password 
:radio 
:checkbox 
:submit 
:image 
:reset 
:button 
:file 
:hidden 
 
  
:first 
:last 
:not 
:even 奇数
:odd 偶数
:eq 
:gt 
:lt 
:header 
:animated 
 
  
:contains 
:empty 
:has 
:parent 
:hidden 
:visible 

如表格隔行换色
$("table > tr:odd").addClass("red")

$("table>tr:even").addclass("green")

$("table>tr:has:(:checked)").addClass("blue")

例 ：始终居页面底部的div 

<div style="position:absolute"></div>

$(".botbox").css("top",$(window).height()-$(".botbox").height()); 
$(window).resize(function() { 
var abc = $(document).scrollTop(); 
$(".botbox").css("top",$(window).height()-$(".botbox").height()+abc); 
}); 
$(window).scroll(function(){ 
var abc = $(document).scrollTop(); 
$(".botbox").css("top",$(window).height()-$(".botbox").height()+abc); 
})