jquery 常用方法集锦

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标签</p>")在元素内部追加内容

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

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

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

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

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

　　　　$("span").wrap("<div></div>")用指定结构元素包含元素

　　　　$("p").wrapAll("<div></div>")用指定结构元素包含多个元素的集合

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

　　　　$(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()系列化获取元素值

　　实例：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function() {
    // =================选择器
    // 1, id选择器
    // var a = $("#container").html("天不错");
    // 2, class选择器, 返回的对象是一个数组
    // var b = $(".dd").eq(2).html("哈哈哈");
    // 3, element选择器, 返回的也是一个数组
/*     var a = $("p");
    for(var p in a) {
        console.log(p+"======="+a[p]);
    } */
    // =====================属性
    // 设置属性
/*     $("#container1").attr({cc:"dd"});
    // 获取属性
    console.log($("#container1").attr("cc"));
    // 移除属性
    $("#container1").removeAttr("cc");
    console.log("==="+$("#container1").attr("cc")); */
    // ===================文档处理
    // append方法, 追加一部分内容
    // $("#container1").append(", 今天晚上吃点啥 ?");
    // appendTo, 追加到所有的对象中
    // $("#container").appendTo(".dd");
    // replaceWith(后面换前面), 移动之后来替换, 不是复制!!!
    // $("#container").replaceWith($(".dd").eq(1));
    // replaceAll(前面换后面)
    // $("#container").replaceAll(".dd");
    // 将某个元素置空
    // $("#container").empty();
    // 将某个元素移除
    //$("#container").remove();
    // ==================CSS
    // 以字符串的形式返回这个css属性的值
    // var t = $("#container").css("border");
    // 设置一个css样式
    // $("#container").css({"color":"pink","font-family":"楷体"});
    // =====================事件
/*     $(".dd[aa='bb']").click(function() {
        $("#container").toggle(5000);
    }); */
    // ===========================ajax
    // $.get(请求的地址,需要传递的参数,回调函数,返回的数据类型);
    // $.post(请求的地址,需要传递的参数,回调函数,返回的数据类型);
/*     $.ajax({
        async:true,// 默认是true
        url:"",
        data:"",
        dataType:"",
        type:"",
        success:function(data) {},
        error:function() {}
    }); */
});
</script>
</head>
<body>
<div style="100px;color:red;border:1px red solid;" id="container">你好</div>
<div class="dd" aa="bb">111</div>
<div class="dd">222</div>
<div class="dd">333</div>
</body>
</html>

jquery 常用方法 集锦

jquery 常用方法集锦