jquery 常用方法 集锦

2021-07-06 03:04

阅读:568

YPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

标签:idt   border   隐藏   check   选择   dcl   文档   ddc   渐进   

JQuery常用方法

  1、获取元素

    $("标签名")、$("#id")、$(".类名")、$("标签名,#id,.class")

    $("祖先 子孙")、$("父>子")、$("前+后")、$("兄~弟")指定层次关系

    $("p[id]")获取有id的p、$("p[id^=p]")获取有id且,id设定值最初部分都为p的元素

    $("li:odd")获取奇数序号元素,通过过滤器获取元素:even、:first、eq(index)、:not(:first)获取除第一个元素之外的其它元素

    $(":input")获取表单元素

    $("input:text:disabled")、:enabled、:checked、:selected通过过滤器获取表单元素

    $("p").eq(2)通过指定序号获取元素

    $("p").filter(".center")获取条件一致的元素

    $("p").slice(4,7)获取制定范围的元素

    $("p").is(".blue")获取class为blue的p

    $("p").next(".yes")获取p的下个class为yes的元素

    $("p").prev(".yes")获取前一个元素

    $("p").parent()获取父元素

    $("p").children()获取子元素

  2、元素控制

    $("div").append("

追加p标签

")在元素内部追加内容

    $("p").appendTo("#content")在元素不同位置追加内容

    $("p").prepend()在元素前追加内容

    $("p").prependTo("#content)将p追加到#content之前

    $("p").after()元素后追加兄弟元素

    $("p").before()元素前追加

    $("span").wrap("

")用指定结构元素包含元素

    $("p").wrapAll("

")用指定结构元素包含多个元素的集合

    $("p").wrapInner("")用指定标签包含子元素

    $(A).replaceWith(B)用B元素替换A元素

    $(A).replaceAll(B)将B元素替换成A元素

    $("p").empty()删除p的子元素

    $("p").remove("#id")删除p中的id p元素

    $("p").clone().prependTo("#id")复制并插入元素p

  3、获取与控制属性

    $("p").attr(name | properties | key,value | key,fn)获取、设置属性值

    $("p").removeAttr("style")删除属性值

    $("p").addClass("class") [注意:没有点]修改class属性值

    $("p").toggleClass("class",cnt++%3==0)根据条件设置class值

    $("p").html(val)设置html元素

    $("p").html()获取html元素

    $("p").text()获取文本

    $("p").text(val)设置文本

    $("p").val()获取、设置value

  4、CSS控制

    $("p").css("color")获取元素的style属性值

    $("p").css("color","red")设置属性值

    $("p").css({color:"white",backgroundColor:"green"})设置属性值

    var off=$("p").offset();off.top;获取元素显示位置

    $("p").height()获取元素高度

    $("p").width()获取元素宽度 

  5、事件控制

    $(document).ready(fn()) | $(fn())导入页面后执行函数

    $("p").bind("click",function(){}) | unbind 事件绑定函数

    $("p").hover(over(),out())鼠标放置/离开动作

    $("p").toggle(fn1(),fn2(),fn3(),···)元素被单击时函数的切换操作

    $("p").click(fn())元素单击事件

    $("p").mouseover()在元素中绑定mouseover事件

    $("p").mouseout()绑定mouseout事件 

  6、设定效果

    $("p").show([speed(um),[callback(fn())]])显示隐藏元素

    $("p").hide(speed,callback)隐藏显示元素

    $("p").toggle( | switch | speed,callback )切换元素显示/隐藏状态

    $("p").slideUp(speed,callback)渐进隐藏元素

    $("p").slideDown(speed,callback)逐渐显示元素

    $("p").slideToggle(speed,callback)交替显示元素

    $("p").fadeIn(speed,callback)控制元素的渐入效果

    $("p").fadeOut(speed,callback)控制元素的渐出效果

    $("p").animate(params,options | params,[duration],[easing],[callback])运行自定义动画

   7、Ajax的控制

    $.ajax(options) | jQuery.ajax(options)通过HTTP通信读入页面

    $("p").load(url,data,callback)读入HTML文件后插入到元素中

    $("p").ajaxComplete(callback)ajax通信完成后执行的函数

    $("p").ajaxError(callback)设置ajax通信失败后执行的函数

    $("p").ajaxSuccess(callback)设置ajax通信成功后执行的函数

    $("form").serialize()系列化获取元素值

  实例:

Insert title here
你好
class="dd" aa="bb">111
class="dd">222
class="dd">333

 

jquery 常用方法 集锦

标签:idt   border   隐藏   check   选择   dcl   文档   ddc   渐进   

原文地址:http://www.cnblogs.com/bekeyuan123/p/7103811.html


评论


亲,登录后才可以留言!