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

JQurey的更多相关文章

jqurey 中dialog未定义问题
$(function () { $('#btnIndustry').click(function () { $.dialo ...
【Jqurey EasyUI+Asp.net】---DataGrid增加、删、更改、搜
在前面写了两,但不知道如何完成,对比刚刚开始学这个,他们摸着石头过河,一步步.在最后两天DataGridCRUD融合在一起.因此份额.我希望像我这样谁是刚刚开始学习一些帮助. 直接主题酒吧. 它是说数 ...
eclipse配置自动提示EXTJS和jQurey
extjs-2.3.0下载地址1:http://dev.sencha.com/deploy/ext-2.3.0.zip 下载地址2:http://www.sencha.com/products/ext ...
Jqurey 得到url参数 getUrlParam
Jqurey 得到url参数 getUrlParam <script type="text/javascript"> (function ($) { //扩展方法获取u ...
【Jqurey EasyUI+Asp.net】----DataGrid数据绑定，以及增、删、改(SQL)
也懒得打其他字了,直接进入主题吧 1.首先,数据表Rex_Test ID int 自增 tName varchar(10) 姓名 tEmail varchar(80) 邮箱 2.至于代码里的Jqure ...
JavaScript或者Jqurey把控件id作为參数来调用
1.JavaScript把控件id作为參数调用 <script type="text/javascript"> function xx(pmba) { document ...
PHP JQurey
JQuery是用JS编写的程序,使用起来比JS更为简单,使用前需引入一个JQurey文件,下面为JQurey语法 <script type="text/javascript" ...
jQurey判断下一项是否为指定项、下一项是否有指定项
jQurey判断下一项是否为指定项.下一项是否有指定项此例子中,如果某个列表项没有二级列表,那么去掉它的展开.收起按钮.就是前边那个减号. 此时我们需要判断VOC综合治理技术这一项是否含有二级菜单, ...
省市县三级联动(jqurey+json)
1.效果图 2.联动js /** * jquery.choosearea.js - 地区联动封装 */ ; (function ($) { var choosearea = function (opt ...

随机推荐

我的Android第五章：通过Intent实现活动与活动之间的交互
Intent在活动的操作作用: Itent是Android程序中各个组件直接交换的一个重要方式可以指定当前组件要执行任务同时也可以给各个组件直接进行数据交互同时Inten ...
mac系统及xcode使用的SVN客户端安装升级
当前的SVN版本已经升级到1.8.x了,但mac系统自带的以及xcode使用的SVN客户端版本没有跟着升级,还是1.6.x的版本.为了解决隐藏目录.svn只在根目录下存在的情况,至少要升级到1.7.x ...
GRANT/SELECT View时的遭遇ORA-01720和ORA-01031错误
关于创建视图遇到ORA-01031错误信息,请参考我以前整理的一篇文章Create view failed with ORA-01031:insufficient privileges,本来以为我那篇 ...
Linux命令学习总结：shutdown
命令简介: 该命令可以安全关闭或者重新启动系统.你没有看错,shutdown命令不仅可以关闭系统.也可以重启Linux系统. 命令语法: /sbin/shutdown [-t sec] [-ark ...
asp.net signalR 专题—— 第四篇模拟RPC模式的Hub操作
在之前的文章中,我们使用的都是持久连接,但是使用持久连接的话,这种模拟socket的形式使用起来还是很不方便的,比如只有一个唯一的 OnReceived方法来处理业务逻辑,如下图: protected ...
从AdventureWorks学习数据库建模——实体分析
最近打算写写数据库建模的文章,所以打算分析微软官方提供的SQL Server示例数据库AdventureWorks,看看这个数据库中有哪些值得学习的地方. 首先我们需要下载安装一个SQL Server ...
MongoDB学习笔记~客户端命令行的使用
回到目录当我们从MongoDB网站下载安装包之后,它会伴随有一系列的工具,服务器程序mongod是我们耳熟能详的了,客户端mongo和性能检测mongostat我们可能就没有用过了,今天主要是介绍一 ...
MySQL InnoDB表--BTree基本数据结构
MySQL InnoDB表是索引组织表这一点应该是每一个学习MySQL的人都会首先学到的知识,这代表这表中的数据是按照主键顺序存储,也就是说BTree的叶子节点存储了所有该行的数据. 我最开始是搞Or ...
Json学习笔记
一．昨天内容回顾创建ajax对象 a) 主流浏览器 new XMLHttpRequest(); b) IE浏览器 new ActiveXObject("Msxml2.XMLHTTP. ...
Mac OS X常用操作入门指南
前两天入手一个Macbook air,在装软件过程中摸索了一些基本操作,现就常用操作进行总结, 1关于触控板: 按下(不区分左右) ＝鼠标左键 control+按下 ...

JQurey

JQurey的更多相关文章

随机推荐

热门专题