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:运行成功

});