JQurey

jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程,很容易学习。

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

一，寻找元素(重要的选择器和筛选器)

　　基本语法：$(selector).action()

（一）,选择器：

1.1基本选择器： $("*") $("#id") $(".class") $("element") $(".class,p,div")

$("#id") 根据id寻找元素：

    <div id="xxx">sasd
        <p>sss</p>
        <a class="ca">拜拜</a>
    </div>
    <div class="c1">qqqq
        <span id="c3">牛逼1</span>
        <span id="c4">牛逼1</span>
        <span id="c5">牛逼1</span>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
          $("#xxx").css("color","red").text('123434');
          $("#c3").css("color","red").text('怂逼1');
    </script>

#id

$("element") 根据标签寻找元素

    <div id="xxx">sasd
        <p>sss</p>
        <a class="ca">拜拜</a>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
             $("p").css("color","#666").text("ddd");
   </script>

结果：
        <p>ddd</p>

标签选择器

$(".class") 根据类名寻找元素

    <div id="xxx">sasd
        <p>sss</p>
        <a class="ca">拜拜</a>
    </div>
    <div class="c1">qqqq
        <span id="c3">牛逼1</span>
        <span id="c4">牛逼1</span>
        <span id="c5">牛逼1</span>
    </div>          


<script>
      $(".ca").text('123');

      $(".c1").text('88888');
</script>

结果:
        <a class="ca">123</a>
        <div class="c1">88888</div>

.class

$("*") 寻找所有的元素

  <div id="xxx">sasd
        <p>sss</p>
        <a class="ca">拜拜</a>
    </div>
    <div class="c1">qqqq
        <span id="c3">牛逼1</span>
        <span id="c4">牛逼1</span>
        <span id="c5">牛逼1</span>
    </div>

<script>
        $("*")
</script>    

结果：
     <div id="xxx">sasd </div>
        <p>sss</p>
        <a class="ca">拜拜</a>
    <div class="c1">qqqq   </div>
        <span id="c3">牛逼1</span>
        <span id="c4">牛逼1</span>
        <span id="c5">牛逼1</span>

$("*")

$(".class,p,div") 将每一个选择器匹配到的元素合并后一起返回。

    <div id="xxx">sasd
        <p>sss</p>
        <a class="ca">拜拜</a>
    </div>
    <div class="c1">qqqq
        <span id="c3">牛逼1</span>
        <span id="c4">牛逼1</span>
        <span id="c5">牛逼1</span>
    </div>

     $("#xxx,.c1 ").text('88888');

结果：
    88888
    88888

.class,#id

2 , 层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

    <form>
        <label>
            <input type="button" value="xin"/>
            Name
        </label>
        <input type="date" value="cc"/>
    </form>

    <input type="zzzzz" value="dd"/>


        $("form input")    寻找所有的input元素 

        $("form>input");   寻找所有子类元素

        $("label + input");    寻找子类下的子类元素

        $("form ~ input");   寻找父类同辈的元素

层级

3，基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")

　　$("li:first") 获取第一个元素

    <ul>
        <li>list item1</li>
        <li>list item2</li>
        <li>list item3</li>
        <li>list item4</li>
        <li>list item5</li>
    </ul>

         $("li:first");

结果：
    [<li>list item1</li>]

View Code

　　$("li:eq(2)") 获取一个给定索引值的元素

    <ul>
        <li>list item1</li>
        <li>list item2</li>
        <li>list item3</li>
        <li>list item4</li>
        <li>list item5</li>
    </ul>
    
           $("li:eq(2)");

结果;
[<li>list item3</li>]

View Code

　　$("li:even") 获取所有索引值为偶数的元素，从 0 开始计数

    <ul>
        <li>list item1</li>
        <li>list item2</li>
        <li>list item3</li>
        <li>list item4</li>
        <li>list item5</li>
    </ul>

      $("li:even");

结果：
[<li>list item1</li>, <li>list item3</li>, <li>list item5</li>]

View Code

　　 $("li:gt(1)") 所有大于给定索引值的元素

    <ul>
        <li>list item1</li>
        <li>list item2</li>
        <li>list item3</li>
        <li>list item4</li>
        <li>list item5</li>
    </ul>

  $("li:gt(1)");
结果：

[<li>list item3</li>, <li>list item4</li>, <li>list item5</li>]

View Code

4，属性选择器

$('[id="div1"]')

        <input id="ff" type="checkbox" name="123" value="请求"/>
        <input type="checkbox" name="123" value="执行"/>
        <input type="checkbox" name="345" value="停止"/>

      $("input[name='123']").attr("checked",true);
结果：
[<input id="ff" type="checkbox" name="123" value="请求" checked="checked">, <input type="checkbox" name="123" value="执行" checked="checked">]

View Code

$('["alex="sb"][id]')

<input id="news" name="man" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

$("input[id][name$='man']")

结果：

[ <input id="letterman" name="new-letterman" /> ]

View Code

6，表单选择器 $("[type='text']")----->$(":text") 注意只适用于input标签 $("input:checked")

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

 
 $(":input");     寻找所有的input元素
 $(":text");       查找所有文本框
 $(":password");  查找所有密码框
 $(":radio");         查找所有单选按钮
 $(":checkbox");    查找所有复选框
 $（":submit"）     查找所有的提交按钮
 $(":image");         匹配所有图像域
 $(":reset");          查找所有重置按钮
 $(":button");      查找所有按钮.
 $(":file");             查找所有文件域

View Code

<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

$("input:checked")

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

:checked

（二），筛选器

1，过滤筛选器　　 $("li").eq(2) $("li").first() $("ul li").hasclass("test")

    <ul>
        <li>list item1</li>
        <li>list item2</li>
        <li>list item3</li>
        <li>list item4</li>
        <li>list item5</li>
    </ul>

       $("li").eq(2).css("color",'red');  获 取匹配的第二个元素

        [<li style="color: red;">list item3</li>]

       $('li').first()                        获取匹配的第一个元素

       [<li>list item1</li>]

$("li").eq(2)

<div class="protected"></div><div></div>


$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

.hasClass

2，查找筛选器

$("div").children(".test") 子元素 $("div").find(".test") 子子孙孙元素

        <div class="c11">
            <div id="aa">
                <h1>hello</h1>
                <p>哈喽</p>
            </div>
        </div>
    <script src="jquery-1.12.4.js"></script>
    <script>

        $("#aa").children().css("color","red");

结果：
               <h1>hello</h1>
               <p>哈喽</p>

获取子元素

        <div class="c11">
            <div id="aa">
                <h1>hello</h1>
                <p>哈喽</p>
            </div>
        </div>
    <script src="jquery-1.12.4.js"></script>
    <script>


      $("#aa").find("h1");

结果：
              <h1>hello</h1>

获取指定元素

$(".test").next() 找到每个段落的后面紧邻的同辈元素。

$(".test").nextAll() 查找当前元素之后所有的同辈元素。

$(".test").nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。

    <div class="c1">11111111
        <div class="c11">0111111
            <div class="c111">001111111</div>
        </div>
        <p>555555</p>
        <div class="c22">02222222</div>
    </div>
    <div class="c2">22222222
        <p>ssssssssss</p>
    </div>
    <div class="c3">33333333</div>
    <p>ssssssssss</p>

        $('.c1').next().css("color",'#bbff00');   

        $(".c1").nextAll().css("color",'#0d0');

        $(".c1").nextUntil(".c11").css("color",'#7fe');   

结果：
       <div class="c2">22222222
        <p>ssssssssss</p>
        </div>
        <div class="c3">33333333</div>
        <p>ssssssssss</p>

View Code

$("div").prev() 取得一个元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

$("div").prevAll() 查找当前元素之前所有的同辈元素

$("div").prevUntil() 查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

    <div class="c1">11111111
        <div class="c11">0111111
            <div class="c111">001111111</div>
        </div>
        <p>555555</p>
        <div class="c22">02222222</div>
    </div>
    <div class="c2">22222222
        <p>ssssssssss</p>
    </div>
    <div class="c3">33333333</div>
    <p>ssssssssss</p>



    $(".c2").prev().css("background-color",'red');   

    $(".c3").prevAll().css("background-color","#df7");  

    $(".c22").prevUntil(".c1").css("background-color","#860");

View Code

$(".test").parent() 查找每个段落的父元素

$(".test").parents() 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。

$(".test").parentUntil() 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

     <div class="c1">11111111
        <div class="c11">0111111
            <div class="c111">001111111</div>
        </div>
        <p>555555</p>
        <div class="c22">02222222</div>
    </div>
    <div class="c2">22222222
        <p>ssssssssss</p>
    </div>
    <div class="c3">33333333</div>
    <p>ssssssssss</p>


        $(".c111").parent().css("background-color","#333");   

        $(".c11").parents().css("background-color","#666");  

        $("div.c111").parentsUntil(".c1").css("background-color","#0f0");

View Code

$("div").siblings() 获取所有同辈元素的元素集合。可以用可选的表达式进行筛选。

  <div class="c1">11111111
        <div class="c11">0111111
            <div class="c111">001111111</div>
        </div>
        <p>555555</p>
        <div class="c22">02222222</div>
    </div>
    <div class="c2">22222222
        <p>ssssssssss</p>
    </div>
    <div class="c3">33333333</div>
    <p>ssssssssss</p>

  $(".c1").siblings().css("background-color","#860");

View Code

验证实例：

var reMethod = "GET",
	pwdmin = 6;

$(document).ready(function() {


	$('#reg').click(function() {

		if ($('#user').val() == "") {
			$('#user').focus().css({
				border: "1px solid red",
				boxShadow: "0 0 2px red"
			});
			$('#userCue').html("<font color='red'><b>×用户名不能为空</b></font>");
			return false;
		}



		if ($('#user').val().length < 4 || $('#user').val().length > 16) {

			$('#user').focus().css({
				border: "1px solid red",
				boxShadow: "0 0 2px red"
			});
			$('#userCue').html("<font color='red'><b>×用户名位4-16字符</b></font>");
			return false;

		}
		$.ajax({
			type: reMethod,
			url: "/member/ajaxyz.php",
			data: "uid=" + $("#user").val() + '&temp=' + new Date(),
			dataType: 'html',
			success: function(result) {

				if (result.length > 2) {
					$('#user').focus().css({
						border: "1px solid red",
						boxShadow: "0 0 2px red"
					});$("#userCue").html(result);
					return false;
				} else {
					$('#user').css({
						border: "1px solid #D7D7D7",
						boxShadow: "none"
					});
				}

			}
		});


		if ($('#passwd').val().length < pwdmin) {
			$('#passwd').focus();
			$('#userCue').html("<font color='red'><b>×密码不能小于" + pwdmin + "位</b></font>");
			return false;
		}
		if ($('#passwd2').val() != $('#passwd').val()) {
			$('#passwd2').focus();
			$('#userCue').html("<font color='red'><b>×两次密码不一致！</b></font>");
			return false;
		}

		var sqq = /^[1-9]{1}[0-9]{4,9}$/;
		if (!sqq.test($('#qq').val()) || $('#qq').val().length < 5 || $('#qq').val().length > 12) {
			$('#qq').focus().css({
				border: "1px solid red",
				boxShadow: "0 0 2px red"
			});
			$('#userCue').html("<font color='red'><b>×QQ号码格式不正确</b></font>");return false;
		} else {
			$('#qq').css({
				border: "1px solid #D7D7D7",
				boxShadow: "none"
			});
			
		}

		$('#regUser').submit();
	});
	

});

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .outer{
            margin: 0 auto;
            width: 60%;
        }
        .menu{
            background-color:#aaaaaa;
            line-height: 40px;
        }
        .menu li{
            display: inline-block;
        }
        .menu a{
            border-right:1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid brown;
            height: 100px;
        }
        .hide{
            display: none;
        }
        .current{
            background-color: darkcyan;
            color: black;
            border-top:solid 1px darkslategrey;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="menu">
            <li xxx="c1" class="current" onclick="show(this)">菜单一</li>
            <li xxx="c2" onclick="show(this)">菜单二</li>
            <li xxx="c3" onclick="show(this)">菜单三</li>
        </ul>
        <div class="content">
            <div id="c1">内容一</div>
            <div id="c2" class="hide">内容二</div>
            <div id="c3" class="hide">内容三</div>
        </div>
    </div>
    <script>
        function show(arg){
            $(arg).addClass("current").siblings().removeClass("current");
            var index =$(arg).attr("xxx");
            $("#"+index).removeClass("hide").siblings().addClass("hide");
        }
    </script>
</body>
</html>

隐藏菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        .menu{
            height: 220px;
            width: 30%;
            background-color: #030911;
            color: white;
            float: left;
        }
        .content{
            height: 220px;
            width: 70%;
            background-color: #425a66;
            float: left;
        }
        .tite{
            line-height: 50px;
            background-color: #7cbe56;
            color: white;
        }
        .hide{
            display: none;
        }
    </style>

</head>
<body>
    <div class="outer">
        <div class="menu">
            <div class="item">
                <div class="tite" onclick="show(this);">菜单一</div>
                <div class="con">
                    <div>内容一</div>
                    <div>内容二</div>
                    <div>内容三</div>
                </div>
            </div>
            <div class="item">
                <div class="tite" onclick="show(this);">菜单二</div>
                <div class="con hide">
                    <div>内容一</div>
                    <div>内容二</div>
                    <div>内容三</div>
                </div>
            </div>
            <div class="item">
                <div class="tite" onclick="show(this);">菜单三</div>
                <div class="con hide">
                    <div>内容一</div>
                    <div>内容二</div>
                    <div>内容三</div>
                </div>
            </div>
        </div>
        <div class="content"></div>
    </div>
    <script>
        function show(arg){
            $(arg).next().removeClass("hide");
            $(arg).parent().siblings().children(".con").addClass("hide")
        }
    </script>
</body>
</html>

左侧菜单

二操作元素 ( 属性 css 文档处理)

属性：

$("p").text() 设置或返回所选元素的文本内容

$("p").html() 设置或返回所选元素的内容（包括 HTML 标记）

$(":checkbox").val() 设置或返回表单字段的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <p class="c2">请单击</p>

    <div class="a1">hello 美女 有时间聊会吗</div>
    <input type="text" id="s1" value="拜拜"/>
    <button class="cc">修改1</button>
    <button class="aa">修改2</button>
    <button class="ss">修改3</button>
<script>
    $(document).ready(function(){
        $(".cc").click(function(){
            $(".c2").text("挥挥手再见")
        });
        $(".aa").click(function(){
            $(".a1").html("<p>请别跟我说话</p>")
        });
        $(".ss").click(function(){
        $("#s1").val("再见")
        });
    })
</script>
</body>
</html>

小例子

$(".test").attr("alex") 设置或返回被选元素的属性值。

$(".test").attr("alex","sb")

$(".test").attr("checked","checked")

　　$(":checkbox").removeAttr("checked") 从每一个匹配的元素中删除一个属性

$(".test").prop("checked",true) 获取在匹配的元素集中的第一个元素的属性值。

$(".test").addClass("hide") 为每个匹配的元素添加指定的类名。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正反选</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <table>
        <tr>
            <td><input type="button" value="正选" onclick="All()"></td>
            <td><input type="button" value="取消" onclick="che()"></td>
            <td><input type="button" value="反选" onclick="reverse()"></td>
        </tr>
        <tr><td><input type="checkbox"></td><td>111</td></tr>
        <tr><td><input type="checkbox"></td><td>222</td></tr>
        <tr><td><input type="checkbox"></td><td>333</td></tr>

    </table>
    <script>
        function All(){
            $("table :checkbox").prop("checked",true);
        }
         function che(){
            $("table :checkbox").prop("checked",false);
        }
        function reverse(){
            $("table :checkbox").each(function(){
                if($(this).prop("checked")){
                    $(this).prop("checked",false)
                }
                else {
                    $(this).prop("checked",true)
                }
            });
        }
    </script>
</body>
</html>

正反选

css 操作：三种方式

(样式) css("{color:'red',backgroud:'blue'}")

(位置) offset() position() scrollTop() scrollLeft()

(尺寸) height() width()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        body{
            margin:0 auto
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: #425a66;
            position: fixed;
            right: 0;
            bottom: 0;
            color: white;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: coral;
            font-size: 5px;
            overflow: auto;
            width: 500px;
        }
        .div2{
            background-color: darkgray;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 300px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="div1 div">
        <p>11</p>        <p>11</p>
        <p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p><p>11</p>
    </div>
    <div class="div2 div"></div>
    <div class="div3 div"></div>
    <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
    <script>
        window.onscroll=function(){
            var current=$(window).scrollTop();
            console.log(current);
            if (current>100){
                $(".returnTop").removeClass("hide");
            }
            else {
                $(".returnTop").addClass("hide")
            }
        };
        function returnTop(){
            $(window).scrollTop(0);
        }
    </script>
</body>
</html>

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动菜单</title>
    <script src="jquery-1.12.4.js"></script>
    <style>
        body{
            margin: 0;
        }
        img{
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style:none;
        }
        .clearfix:after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow:0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow:0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);;
        }
        .pg-header .logo{
            float:left;
            padding: 5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width:110px;
            height: 40px;
        }
        .pg-header .nev{
            line-height:50px;
        }
        .pg-header .nev ul li{
            float:left;
        }
        .pg-header .nev ul li a{
            display:block;
            color:#ccc;
            padding:0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nev ul li a:hover{
            color:#fff;
            background-color: #425a66;
        }
        .pg-boby .catalog{
            position: absolute;
            top:60px;
            width:200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-boby .catalog.fixed{
            position: fixed;
            top:10px;
        }
        .pg-boby .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
        .pg-boby .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left:210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-boby .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="16.png">
                </a>
            </div>
            <div class="nev">
                <ul>
                    <li>
                        <a href="#">首页</a>
                    </li>
                    <li>
                        <a href="#">功能壹</a>
                    </li>
                    <li>
                        <a href="#">功能贰</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pg-boby">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第一张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第二张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第仨张</a></div>
            </div>
            <div class="content">
                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    </div>

    <script>
        window.onscroll=function(){
            var ws=$(window).scrollTop();
            if(ws>50){
                $(".catalog").addClass("fixed");
            }
            else {
                $(".catalog").removeClass("fixed");
            }
            if($(document).height()==$(window).height()+ws){
                $(".catalog").children(":last").css("fontSize","40px").siblings().css("fontSize","12px");

                return;

            }
            $(".content").children().each(function (){

                var offsett =$(this).offset().top;
                var total =$(this).height()+offsett;
                if (ws>offsett && ws<total){
                  var index=$(this).attr("menu");
                    var new_index="[auto-to ="+index+"]";
                    console.log(new_index);
                    $(new_index).css("fontSize",'40px').siblings().css("fontSize","15px");
                }
            })
        }
    </script>
</body>
</html>

滚动菜单

文档处理

内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")

prepend() prependTo()

      <div style="height: 200px;background-color: yellow" id="c1">
         <p>hello</p>
     </div>
     <b>uuu</b>

       $("#c1").append("<p>xxxx</p>")

       $("p").appendTo("div")

       $("p").prepend("div")

       $("p").prependTo("div")

添加

外部插入：

        after()    在元素后插入
        before()   在元素前插入
        insertBefore()  把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 
        insertAfter()  把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
        remove();  将元素删除
        replaceWith()   替换
        empty()   删除
        clone()    克隆

      <style>
            .c1{
            height: 200px;
            background-color: yellow;
            }
        </style>

    <body>
        <div id="c1">
         <p>hello</p>
     </div>
     <b>uuu</b>

    <script>
        $("#c1").after("<p>拜拜</p>");    在该元素后插入
        
        $("#c1").before("<p>xxxx</p>");    在该元素前插入

        $("b").insertBefore("#c1");   把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 

        $("b").insertAfter("#c1");  把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

        $("b").remove();        将该元素删除

        $("b").replaceWith("<p>sssssss</p>");   替换

        $("p").empty();       将所有p标签删除
        $("p").clone().add("#c1")     克隆

    </script>
    </body>

文档处理

事件：

　　 $(document).ready(function(){}) -----------> $(function(){}) 当页面加载完成后，自动执行的函数

　　 $("p").click(function(){}) 触发每一个查找元素的click事件。

$("p").bind("click",function(){}) 为每个元素的特定事件绑定事件处理函数

$("ul").delegate("li","click",function(){}) 给子元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>移动</title>
</head>
<body>
    <div style="border: 1px solid #ddd; 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
</body>
</html>

拖动面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
    <script>
    $(document).ready(function(){
     $("#flipshow").click(function(){
         $("#content").slideDown(1000);
     });
      $("#fliphide").click(function(){
         $("#content").slideUp(1000);
     });
      $("#toggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>
        #flipshow,#content,#fliphide,#toggle{
            padding: 5px;
            text-align: center;
            background-color: blueviolet;
            border:solid 1px red;

        }
        #content{
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>

    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="toggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>

滑动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <button>添加</button>
    <script>
        $(function(){
            $("ul").delegate("li","click",function(){
                alert("123")
            });
            $("button").click(function(){
                $("ul").append("<li>666</li>");
            })
        })
    </script>
</body>
</html>

点击添加

扩展:(插件机制)

jquery.extend({}) 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
jquery.fn.extend({}) 扩展jQuery对象本身。

<body>
    <div class="c1">111111</div>
    <div class="c1">222222</div>

    <script>
        jQuery.extend({
            show1:function(arg){
                var val = $(arg).text();
                val = val + "ppppppp";
                return val;
            }
        });
        var ret = $.show1(".c1");
        console.log(ret);
    </script>
</body>

结果：
111111222222ppppppp

jquery.extend

<body>
    <div class="c1">hello word</div>
    <div class="c1">good Bai</div>

    <script>
        jQuery.fn.extend({
            show1:function(){
                var val = this.text();
                val = val + "扩展 is my kaixin";
                return val;
            }
        });
        var ret = $(".c1").show1();
        console.log(ret);
    </script>

</body>

结果：
hello wordgood Bai扩展 is my kaixin

jquery.fn.extend