• 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
  • 相关阅读:
    Git windows换行问题
    java之aop使用及自定义注解
    Shiro授权及注解式开发
    Git Gui、Ssh key的使用和ideaui配置使用Git解决冲突(下)
    Git和Github的介绍、简单操作、冲突(上)
    Shiro身份认证、盐加密
    Shiro简介、入门案例、web容器的集成
    SpringMVC入门
    Mybatis之关联关系(一对多、多对多)
    Mybatis整合(Redis、Ehcache)实现二级缓存
  • 原文地址:https://www.cnblogs.com/guokaixin/p/5669913.html
Copyright © 2020-2023  润新知