1.页面中引入jquery
在head中,添加<script type="text/javascript" src="jquery.js">
2.jquery 部分语法
$(selector).action() selector html元素 action 执行的操作
$(this).hide() //隐藏当前的html元素
$("#text").hide(); //隐藏id为text的原素
$("p").hide(); //隐藏所有<p>元素
$(".test").hide();// 隐藏所有class为test的元素
3.所有的jquery都存放在一个函数中
$(document).ready(function(){
})
4.jquery 可以按照元素进行选择,
jquery 可以按照属性选择
$("[href]")选取所有带有href的属性的元素
$(“[href='#'])选取所有带有href值等于#的元素
$("[href!='#']")选取所有带有href值不等于#的元素
$("[href$='.jpg']")选取所有href值以“”。jpg“”结尾的元素
5.jquery css选择器html元素的css属性
jquery 也可以填写外部文件
<script type="text/javascript" src="myjqueryfunction.js">
6.jquery中$符号冲突 可以自己定义符号
var zxl=$.noConflict();
那么所有的$可以用zxl替代
7.jquery时间
$(document).ready(function(){})将函数绑定到文档的就绪时间
$(selector).click(function) dbclick focus mouseover触发或者将函数绑定到被选择元素的点击事件
$(this).parents(".ex").hide("slow") class为ex的父级元素逐渐隐藏
8.$(selector).hide/show(speed,callback) speed 为速度,包括slow ,fast 或者是毫秒数callbak完成后执行的函数名称
显示或者隐藏可以使用toggle() 直接实现
9.jquery元素的淡入淡出
fadeIn() 淡入已隐藏的元素
fadeOut() 淡出可见元素
fadeToggle()淡入和淡出的切换
fateTo()渐变为给定的不透明度
10.slideDown() slideUp slideToggle 滑动显示和隐藏
11.动画 animate({css属性},speed,callback) callback 动画完成后,执行的函数名,如cs ,不需要cs()加括号
所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
可以使用相对值:需要在值的前面加上 += 或 -=:
可以把属性的动画值设置为 "show"、"hide" 或 "toggle": height:'toggle'
可以编写多个animate实现队列似的动画
12.stop(stopall,gotoend)方法用于在动画或者效果完成前对他们进行停止,两个参数默认都是false
stop 包含两个参数,一个是是否清楚动画队列,一个是是否立即完成当前动画
jquery所执行的动作可以直接用。来连接
13.jquery 获取对象的值
text() -设置或者返回所选元素的文本内容
html -设置或者返回所选元素的内容(包括html标记)
val-设置或返回字段的值
attr 获取属性值 如attr("href")获取连接的值
.text() 和.html()中,可以有回调函数,回调函数包含两个参数 1,一个是参数值的位置坐标,2是原始值 function(i,origText){}
14.添加元素
append()在被选元素的结尾插入内容
prepend()在被选元素的开头插入内容
after() 在被选元素之后插入内容
before在被选元素之前插入内容
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
15.使用remove()函数删除被选元素及其子元素,其中可以使用参数如 $("p").remove(".italic") 删除class为italic的<p>元素
使用empty() 从被选元素中删除子元素
16.jquery 可以对css元素进行操作
addClass() 增加一个或多个类 $("h1,h2,p").addClass("blue"); 对多个对象增加一个类
$("#div1").addClass("important blue"); 可以直接添加两个类
removeClass() 删除一个或多个类
toggleClass 添加或删除类的切换操作
css() 设置或返回样式属性
17对于css 返回制订的css属性的值 css("background-color") 返回背景颜色
$("p").css("background-color","yellow")设置所有的段落背景色为黄色
$("p").css("background-color":"yellow","font-size":"200%"); //可以直接设置多个属性
18.jquery的尺寸
width() 设置或返回元素的宽度(不包含内边距,边框,及外边距)
height() 设置或返回元素的高度(同上)
例如:$("#div1").height();
innerWidth()返回元素的宽度(包括内边距)
innerHeight()
outerWidth() 返回元素的宽度(包括内边距和边框)
19.jquery遍历
a. 祖先
parent() 反复返回被选元素的直接父元素
parents()返回被选元素的所有祖先元素,全部的父级及向上的父级,一直到文档的根元素html。中间可以加参数如$("span").parents("ul") 找到父级元素是ul的span
parentsUntil()返回介于两个给定元素之间的所有祖先元素
b 后代
children()返回被选元素的所有直接子元素 $("div").children("p.1") 也可以增加参数,即div的子元素是P并且类为1
find()返回被选元素的后代元素,一路找到最后一个后代 可以find("span") 或者find("*")
c.同胞
siblings()返回被选元素的所有同胞元素
next()返回被选元素的下一个同胞元素
nextAll() 返回被选元素的所有跟随的同胞元素,
nextUntil()介于两个给定参数之间的所有跟随的同胞元素
prev()返回被选元素的上一个同胞元素
prevAll()
prevUntil()
d过滤
fist() 返回被选元素的首个元素 $("div p").first(); 返回首个div元素内部的第一个p元素
last() 返回被选元素的最后一个元素
eq() 返回被选元素中带有指定索引号的元素 $("p").eq(1) 选择第二个p元素
filter() 匹配的元素 $("p").filter(.intro) 返回类名为intro的所有P元素
not()与filter相反
20ajax
load方法,从服务器加载数据,并把返回的数据放入到被选元素中
$(selector).load(url,data,callback)
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
样例:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});