jquery的基本使用语法

jQuery是一个javascript函数库.
jQuery库包含以下特性:
  HTML元素的选取,操作,事件操作,DOM操作
  CSS操作
  JavaScript特效和动画
  Ajax
  
jQuery语法:
基础语法:$(selector).action()
     a.$符:定义jQuery
     b.(selector):选择器,查找html元素
     c.action() 对元素的操作
     
     $(this).hide();    //隐藏当前元素
     $("p").hide();     //隐藏所有段落
     $("p.test").hide();//隐藏所有calss="test"的段落
     $("#test").hide(); //隐藏所有id="test"的元素
     
     
文档就绪函数:防止文档在完全加载之前运行jquery代码.
$(document).ready(function(){
//todo
});


jQuery选择器:允许jQuery对元素组或单个元素进行操作.
jQuery元素选择器
jQuery使用css选择器来选择html元素
$("p")       选取<p>元素
$("p.test")  选取所有class="test"的<p>元素
$("p#demo")  选择id="demo"的第一个<p>元素


jQuery 属性选择器:使用xpath表达式来选择带有给定属性的元素
$("[href]")        选择所有带有href属性的元素
$("[href='#']")    选择所有带有href属性,值等于#的元素
$("[href!='#']")   选择所有带有href属性,值不等于#的元素
$("[href$='.jpg']")选择所有带有href属性,值以".jpg"结尾的元素


jQuery css选择器:可以改变html元素的css属性
$("p").css("background-color","blue");


$("ul li:first")    每个<ul>的第一个<li>元素
$("div#info.head")  id="info"的<div>元素中所有class="head"的元素


jQuery事件函数
$("元素名").click(function(){//todo});
$("button").click(function(){//todo});


函数                                事件
$(document).ready(function)       将函数绑定到文档的就绪事件
$(selector).click(function)       触发或将函数绑定到被选元素的点击事件
$(selector).dbclick(function)     触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)       触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)   触发或将函数绑定到被选元素的鼠标悬停事件




高级语法:$(selector).action(speed,callback)
speed规定了执行动作的速度,可以设置:"slow","fase","normal"或毫秒.
callback指的是在动作执行完成后再执行其他函数的名称


jQuery切换函数:toggle()
toggle() 可以在show()和hide()之间进行切换


jQuery滑动函数  slideDown, slideUp,slideToggle
slideDown:向下滑动
slideUp:向上滑动
slideToggle:被选元素切换向上和向下滑动


jQuery Fade 函数  fadeIn(),fadeOut(),fadeTo()
fadeIn()淡入被选元素
fadeOut()淡出被选元素
fadeTo(speed,百分比) 把被选元素淡出为给定的不透明度


jQuery自定义动画 animate({params},[选择],[speed],[callback])




jQuery 操作html函数
$(selector).html(content)     改变被选元素的html内容
$(selector).append(content)   向被选元素追加html内容
$(selector).prepend(content)  向被选元素前插入内容
$(selector).after(content)    在被选元素之后添加内容
$(selector).before(content)    在被选元素之后添加内容


jQuery 操作css函数
$(selector).css(name,value)    为匹配元素设置样式属性的值
$(selector).css(properties)    为匹配元素设置设置多个样式属性
$(selector).css(name)     获得第一个匹配元素的样式属性值
$(selector).height(value)      设置匹配元素的高度
$(selector).width(value)       设置匹配元素的宽度


jQuery ajax函数
$.ajax(options);  发送本地数据,并将远程数据加载到xmlHttpResuest对象中
$.ajax({
url:'/login'发送信息的地址
data:{username:${'#username'}.val()}  发送的数据
dataType:被返回的数据类型(html,xml,text,script)
callback:当数据被加载时执行的函数
error:运行错误
success:运行成功
});