jquery常用方法教程

相关jquery操作教程可以看这里的比较详细jquery效果方法

1.选择器

jQuery 参考手册 – 选择器

在写一个上面没有的,在表单里面用

$(“[name=user]”)  表单name值等于user的元素

 

2.常用循环

$.each()     返回原始数组  $.each(arr,function(item,index){})

$.map()    返回新数组的元素  $.map(arr,function(item,index){})

$.extend()    合并     $.extend(abj,obj2,obj3)

 

3.DOM操作

操作标签内容:

①闭合标签:
        $(“选择器”).html()           获取
        $(“选择器”).html(设置的内容)    设置
②input标签:
        $(“选择器”).val()          获取
        $(“选择器”).val(设置的内容)    设置
        $(“:radio”).val([“男”])     设置单选框选项
        $(“:checkbox”).val([“a”,”b”,”c”])   设置复选框选中项

 

操作标签属性:prop与attr

$(“div”).attr(“id”)      获取id属性

$(“div”).attr(“id”,”active”)     设置属性

$(“div”).removeAttr(“id”)      删除

固定属性(true/false)用prop,自定义属性用attr,除了input的checked属性外,都可以用attr

 

操作class属性:

$(“div”).addClass(“bg”)      添加/追加

$(“div”).removeClass(“bg”)    删除

$(“div”).toggleClass(“bg”)   开关效果 ,没有就添加有就删除

$(“div”).hasClass(“bg”)    退了判断是否有bg这个class,返回布尔值

 

操作样式:

$(“div”).css(“width”)      获取样式

$(“div”).css(“width”,”200px”)   设置样式

$(“div”).css({“width”:”200px”,”color”:”red”})    批量操作

 

获取元素高度:

$(“div”).width()      获取

$(“div”).innerWidth()     获取可视宽/高

$(document).innerWidth()    文档可视宽/高

$(windows).innerWidth()      屏幕可视宽高

$(“div”).outerWidth(boolean)   获取元素占位宽高   默认false,不含margin

$(“div”).offset()     元素到body的距离

$(document).scrollTop()     获取页面滚动距离

 

标签的增删查改:

①创建:$(“<li></li>”)

②添加:

$(父元素).append(元素)    将元素添加到父元素末尾

$(元素).appendTo(父元素)     同上

$(父元素).prepend(元素)  将元素添加到父元素头部

$(元素).prependTo(父元素)    同上

$(参考元素).before(要加的元素)  将元素添加至某个元素之前

$(要加的元素).insertbefore(参考元素)  同上

③删除:

$(“div”).remove()     删除元素,返回被删元素的引用

$(“div”).detach()    删除元素,返回被删元素的引用,同时保留事件

$(“div”).empty()     清空节点

④克隆:

$(被复制的内容).clone(boolean)   复制标签所有内容,true/false是否复制js中添加的事件,默认false

⑤替换:

$(被替换的).replaceWith(新的节点)

$(新的节点).replaceAll(被替换的)

⑥包裹:

$(“span”).wrap(“div”)   在每个span外包一个div

$(“span”).wrapAll(“div”)  把所有的span都包裹在一个div中

⑦遍历:

$(“ul”).children()    只查找一层,找儿子

$(“ul”).children(“li”)    只查找一层

$(“span”).next()    当前元素的下一个兄弟

$(“span”).nextAll()  当前元素后面所有的兄弟 $(“span”).nextAll().css(“color”,”red”)

$(“span”).prev()   当前元素上一个兄弟

$(“span”).prevAll()   当前元素上面所有兄弟节点

$(“span”).siblings()   当前元素的兄弟节点

$(“”).parent()   获取直接父元素

$(“”).parents()   获取所有父元素

$(“”).parents(“div”)   接受筛选条件

$(“ul”).find(“li”).css(“color”:”red”)   先找到ul,在找到ul下面的li,find查找子孙节点

 

4.事件对象

ev.stopPropagation()       阻止冒泡 (return false)

ev.preventDefault()       阻止默认事件  (return false)

$(“.box”).on(‘click’,function(){})      事件绑定

$(“.box”).one(‘click’,function(){})    事件绑定,只执行一次

$(“.box”).on(‘click’,’li’,function(){ $(this).css(….)})    事件代理

$(“.box”).off(‘click’)  取消所有点击事件

$(“.box”).off(‘click’,fun)   取消所有点击事件(命名空间)

$(“.box”).hover(滑上执行的函数,离开执行的函数)     合成事件

 

$(“.box”).show()      显示  $(“.box”).show(speed,easing,callback)

$(“.box”).hide()       隐藏

$(“.box”).toggle()     开关效果

 

透明度改变:

$(“.box”).fadeIn(speed,callback)  显示 事件参数如果不写,默认400ms

$(“.box”).fadeOut(speed,callback)   隐藏

$(“.box”).fadeTo(speed,透明度,callback)   透明到多少0-1

$(“.box”).fadeToggle(speed,callback)    开关效果

 

改变高度:

$(“.box”).slideDown(speed,callback)    显示

$(“.box”).slideUp(speed,callback)    隐藏

$(“.box”).slideToggle(speed,callback)    开关效果

 

自定义动画animate()

jq对象.animate({动画参数},时间,运动形式, 回调)

运动形式默认swing(慢快慢),linear(匀速)

//点击box时,3s内宽度由100px匀速运动到500px,完成后弹出....
$(".box").click(function(){
    $(this).animate({
        left:500
    },3000,'linear',function(){
        alert('我运动到了')
    })
})

$("button").click(function(){
    $(".box").animate({width:500},3000)
    .delay(2000)   //延迟2s再进行
    .animate({height:500},3000)
})

 

jq对象.stop(clearQueue,gotoEnd)  停止元素动画,没有参数默认只停止当前进行的运动

clearQueue 是否停止未执行完的动画队列  默认false

gotoEnd  是否直接将正在执行的动画跳转至末尾  默认false

jq对象.finish()    所有运动立即到达终点

 

5.jquery与ajax

//格式
$.ajax({
    url:'',  //请求地址
    type:'',  //请求方式,默认get
    data:'',  //发送到后端的数据
    timeout:'',  //超时时间,单位毫秒
    dataType:'',  //预期服务器返回的数据类型,xml,html,script,json,jsonp,text
    success:function(data){},  //成功的回调
    error:function(err){},  //失败的回调
    complete:function(){},  //请求完调用的函数
    global:true  //是否触发全局ajax事件,默认true
})

//模拟post
$.ajax({
    url:'',
    type:'post',
    data:'',
    success:function(data){},
    error:function(err){}
})

//$.get
$.get({url,发送到后端的数据,回调})
//$.post
$.post({url,发送到后端的数据,回调})

 

© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片