jQuery基础教程

设置类样式方法

// 添加类
$("div").addClass("current")
//移除类
$("div").removeClass("current")
//切换类
$("div").toggleClass("current")

Jquery设置动态效果

获取索引号

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

上下滑动效果

slideUp()下拉
slideDown()上拉
slideToggle()切换

事件切换复合写法

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

停止动画配对效果

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

淡入淡出效果

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

获取属性值

prop("属性")
change(function(){})
//自定义属性的获取
attr("属性")

修改属性值

prop("属性","属性值")
attr("属性","属性值")

数据缓存

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

选框匹配器

:check

内容文本值

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

parents("选择器)

可以选择出所有的祖先元素

toFixed(2)保留两位小数

表单改变事件

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

Jquery和DOM相互转换

//DOM转Jquery对象
$(dom)
//Jquery转DOM对象
$("div")[0]

遍历函数

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

创建添加删除元素

//创建元素
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一样

Jquery事件注册

//多个事件注册
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()可以动态的把新创建的元素绑定上事件

事件解绑

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

自动触发事件

对象.事件()
对象.trigger("事件")
对象.triggerHandler("事件")

对象拷贝

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

Jquery插件

jQuery插件库
jQuery之家

最后

以上就是愤怒板栗为你收集整理的jQuery基础教程的全部内容，希望文章能够帮你解决jQuery基础教程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。