jQuery基础教程

1
2
3
4
5
6
7
// 添加类
$("div").addClass("current")
//移除类
$("div").removeClass("current")
//切换类
$("div").toggleClass("current")

1
2
3
4
5
6
7
8
var index=$("this").index()
//show()函数，三个参数speed速度，easing切换效果默认“swing”；fn回调函数
show(1000)
//1000为切换时间
hide()隐藏函数
toggle()切换函数
//此上三例参数相同

1
2
3
4
slideUp()下拉
slideDown()上拉
slideToggle()切换

1
2
3
hover(funtion(){},function(){})
//第一个函数时鼠标over事件，第二个函数是鼠标out事件

1
2
stop()//写在动画函数前面

1
2
3
4
5
fadeIn()//淡入函数
fadeOut()//淡出效果
fadeToggle()//淡入淡出切换
fadeTo(speed,cpacity)//透明度切换

1
2
3
4
5
prop("属性")
change(function(){})
//自定义属性的获取
attr("属性")

1
2
3
prop("属性","属性值")
attr("属性","属性值")

1
2
3
4
//存放在缓存中的数据
data("属性","属性值")
data("属性")

1
2
:check

1
2
3
4
5
jquery.html()
html()//可以拿到对象中的html内容包括html标签
text()//只获取html的文本内容
val()//可以获取修改表单的value值

1
2
3
change()
//类似于click,mouseover等等事件

1
2
3
4
5
//DOM转Jquery对象
$(dom)
//Jquery转DOM对象
$("div")[0]

1
2
3
4
5
6
7
8
//第一种写法
//index索引。domEle是DOM对象
$("div").each(function(index,domEle){
})
//第二种写法,改写法也可以遍历对象，function的第一个参数为属性名，第二个为属性值
$.each($("div"),function(index,domEle){
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//创建元素
var li=$("<li></li>")

//内部添加
$("ul").addend(li)//放到ul的最后面
$("ul").prepend(li)//放到ul最前面

//外部添加
$("div").after(li)//放到后面
$("div").before(li)//放到前面

//删除元素
$("ul").remove()//自杀
$("ul").empty()//删除ul的子元素
$("ul").html("")//删除ul的子元素,作用与empty一样

1
2
3
4
5
6
7
8
9
10
11
12
13
//多个事件注册
element.on(events,selector,fn)
$("div").on({
    mouseenter:function(){事件},
    click:function(){事件},
    mouseover:function(){事件}
})
//写法二,function相同时
$("div").on("mouseenter mouseleave",function(){})
//写法三事件绑定在ul上面
$("ul").on("click","li",function(){})
//on()可以动态的把新创建的元素绑定上事件

1
2
3
4
对象.off()//解绑所有事件
对象.off("mouseenter")//接触了鼠标经过事件
one()绑定事件，该事件只触发一次

1
2
3
4
对象.事件()
对象.trigger("事件")
对象.triggerHandler("事件")

1
2
3
4
5
6
7
8
9
10
$.extensd(deep,target,object)//deep区分深拷贝还是浅拷贝
var target={}
var obj={
    id:1,
    name:"Nihao"
}
$.extend(target,obj)//当两个对象有两个相同的属性时，新的会覆盖旧的
//自定义$对象
var ni=Jquery.noConflict()