zoukankan html css js c++ java

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

查看全文

相关阅读:
第一个MIPS汇编
 选你所爱，爱你所选
 海明码（汉明码）的工作机制
 第一个x86汇编程序
 机器学习 coursera【week1-3】
描述符应用与类的装饰器
 多态，封装，反射，类内置attr属性，os操作复习
 面向对象操作
 类属性的增删改查，类属性和实例属性
 os常用模块，json，pickle，shelve模块，正则表达式（实现运算符分离），logging模块，配置模块，路径叠加，哈希算法

原文地址：https://www.cnblogs.com/guokaixin/p/5669913.html