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