JQuery基础例题详解

一、上

1. jQuery选择器和2. jQuery效果
包括：显示和隐藏、显示隐藏交替 show() hide() toggle
淡入淡出、淡入淡出交替fadeIn()fadeOut()toggle()
动画animate()

二、中

2. jQuery获取元素、添加删除元素、添加css样式、获取长宽

获取元素
$().html();//获取html元素
$().text();//获取文本内容
$().val();//获取表单元素的value值
$().attr(“属性”);//获取选中元素的属性的值

添加删除元素

$("#append_id").append("<div style='background-color:#f00;'>测试append</div>");
$("#prepend_id").prepend("<div style='background-color:#f00;'>测试append</div>");
$("#after_id").after("<div style='background-color:#f00;'>测试append</div>");
$("#before_id").before("<div style='background-color:#f00;'>测试append</div>");

$().remove()
$().empty()

添加css样式

		$("#btn1").click(function () {
            $("#btn5").addClass("btn btn-success");
        });
        $("#btn2").click(function () {
            $("#btn5").addClass("btn btn-danger");
        });
        $("#btn3").click(function () {
            $("#btn5").toggleClass("btn btn-danger");
        });
        $("#btn4").click(function () {
            $("#btn5").removeClass("btn btn-success");
        })
        $("#div_id").css("border","solid 1px #f00")
        .css("background-color","aqua")
        .css("width","300px")
        .css("height","100px");

获取长宽

 var w = $("#d1").width();
 var iw = $("#d1").innerWidth();
 var ih = $("#d1").innerHeight();
 var ow = $("#d1").outerWidth();
 var oh = $("#d1").outerHeight();
 var ow2 = $("#d1").outerWidth(true);

三、下

parent()方法、children()、siblings()、 first()

四、jQuery AJAX

jQuery 集成AJAX