Jquery:
javaScript脚本包,它里面有一堆一堆的封装好的方法,
我们学习的就是这些方法如何使用
是JS的升级版
$是jquery特有的,取元素的时候提示一下
文件类型:
1、不带min的,是源文件,可以看得懂,但是文件较大,
加载速度慢。
2、带min的,编译后的文件,已经没法看懂了,但是文
件较小,加载速度快。
一般咱使用带min的文件就可以了,不需要看懂它的代码。
一、选择器:
1、基本选择器:跟css很像。
1)基本
id选择器:#
class选择器:.
标签选择器:标签名
2)组合
并列:用,隔开
后代:用空格隔开
2、过滤选择器
1)基本过滤:
首尾:首个first,尾个last
等于:任意个 :eq(索引号)ps:$(".div").eq(1)或是$(".div:eq(1)")
不等于:大于是:gt(索引号),小于是:lt(索引号),排除是:not(选择器)
ps:$(".div:gt(1)"),$(".div:not(#div1)")
奇偶,按索引,从0开始:奇数 :odd 是把奇数排除了,偶数 :even 是把偶数排除了
2)属性过滤:
属性名过滤: [属性名] ps:$(".div:[aaa]")
属性的明值对过滤:[属性名=值],[属性名!=值]
3)内容过滤
文字 :contains("字符串")包含了某一段字符串
子元素 :has("选择器")
二、事件
1、常规事件:把js中的事件,on去掉即可
复合事件:hover(function(){},function(){}).相当于把mouseover(鼠标移入)mouseout(鼠标移出)合二为一
toggle(function(){},function(){},....)可以放无数个function方法. 点击事件循环执行
2、事件冒泡:阻止事件冒泡用return false
三、DOM操作
1、操作属性:
1)获取属性
var a=$("选择器").attr("属性名")
2)设置属性
$("选择器").attr("属性名","属性值")
3)删除属性
$("选择器").removeAttr("属性名")
2、操作样式
1)操作内联样式
获取样式
var a=$("选择器").css("样式名")
设置样式
$("选择器").css("样式名","值")
2)操作样式表的class
添加class
$("选择器").addClass("class名")
移除class
$("选择器").removeClass("class名")
移除后立马添加
$("选择器").removeClass("class名")..addClass("class名")
添加移除交替class
$("选择器").toggleClass("class名")
ps:$("#div").toggleClass(".b",".a")//b替换a,刚开始显示的是a
Jquery里面全是方法。
三、DOM操作:
3、操作内容
1)、表单元素
取值:var s = $("选择器").val()
赋值:$("选择器").val("值")
2)、非表单元素
取值:var s = $("选择器").html(), var s = $("选择
器").text()
赋值:$("选择器").html("值"), $("选择器").text("值")
4、操作相关元素
1)、查找:平级用索引来取
父辈与前辈(前辈是父辈的父辈)
parent(),父辈(用起来更好用,更清晰)
parents(选择器),前辈(取出来一堆,要在后面加.eq)
子代与后代(后代就是子代的子代)
children(选择器),子级(比较好用,取出来一堆)
find(选择器),后代
兄弟
哥:prev(),前面的一个元素;prevAll(选择器),前面兄弟
级的元素
弟:next(),后面的一个元素;nextAll(选择器),后面兄弟
级的元素
2)操作
新建:$("HTML字符串")(可以用appen替代)
添加:appen(jquery对象),内部添加;after(jquery对象),
下部平级添加;before(jquery对象),上部平级添加
移除:empty(),清空内部全部元素(选择器选择父级的);
remove(),移除元素(选择器选择子级的)
复制:clone()
-------未来元素--
$('元素').Live(‘事件名’,方法(){});
$(".but2").live("click", function () {
alert("aaaa");
});//but2 点击
-----------------------------
四、动画
1)show(),显示;hide(),隐藏
2)slideDown(),以滑动方式显示隐藏的;slideUp(),以滑动方
式隐藏的
3)fadeIn(),淡入;fadeOut(),淡出
4)自定义动画:
animate({left:"300px",top:"300px"},3000,function(){回调
函数//回调函数可有可无})//旋转做不了
停止动画,防止动画积累: .stop(true) //在animate前添加
fadeIn(),fadeOut() 可以用,其他特效用animate就可以啦