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>]

　　$("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>]

　　$("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>]

　　 $("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>]

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">]

$('["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" /> ]

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");             查找所有文件域

<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>

$("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");

$(".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");

$("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");

验证实例：

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;width: 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"></div>

    <div class="c1"></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

相关文章