什么是jQuery对象？

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();

$("#test").html()

       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象

var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

　　

jquery的基础语法：$(selector).action()

寻找元素(选择器和基本筛选器)

基本选择器

$("*") $("#id") $(".class") $("element") $(".class,p,div")

　　

层级选择器

$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")

$(".outer div"):outer下的div标签

$(".outer>div"):子节点

$(".outer+div"):挨着向下的兄弟节点

$(".outer~div"):向下找兄弟节点

　　

基本筛选器

$("li:first") $("li:last") $("li:eq(2)") $("li:even") $("li:gt(1)")

$("li:first"):第一个li标签

$("li:last"):最后一个li标签

$("li:eq(2)"):第三个li标签

$("li:even"):偶数

$("li:odd"):奇数

$("li:gt(1)"):大于1

$("li:lt(1)"):小于1

　　

属性选择器

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

表单选择器

$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")

　　

筛选器

过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

$("li").eq(2).css("color","red");

　　

查找筛选器

$("div").children(".test"):找到子代标签[class为test]

$("div").find(".test")  :找到所有子孙标签[class为test]

$(".test").next()：下一个同级标签

$(".test").nextAll()：下面所有同级标签

$(".test").nextUntil():

$("div").prev()：上一个同级标签

$("div").prevAll()：上面所有同级标签

$("div").prevUntil()：

$(".test").parent()：找到父级标签

$(".test").parents() ：找到所有父级标签

$(".test").parentUntil() ：

 $("div").siblings():兄弟标签

　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>

        </title>

        <style>

        .outer{

            height: 1000px;

            width: 100%;

        }

        .menu{

            float:left;

            background-color:beige;

            width:30%;

            height: 500px;

        }

        .content{

            float:left;

            background-color:darkslateblue;

            width:70%;

            height: 500px;

        }

        .title{

            background-color:wheat;

            line-height: 40px;

        }

        .hide{

            display: none;

        }

        </style>

    </head>

    <body>

        <div class="outer">

            <div class="menu">

                <div class="item">

                    <div class="title" onclick="show(this);">菜单一</div>

                    <div class="con hide">

                        <ul>

                            <li>1</li>

                            <li>2</li>

                            <li>3</li>

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <div class="title"  onclick="show(this);">菜单二</div>

                    <div class="con hide">

                        <ul>

                            <li>4</li>

                            <li>5</li>

                            <li>6</li>

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <div class="title"  onclick="show(this);">菜单三</div>

                    <div class="con hide">

                        <ul>

                            <li>7</li>

                            <li>8</li>

                            <li>9</li>

                        </ul>

                    </div>

                </div>    

            </div>

            <div class="content"></div>

        </div>

        <script src="js/jquery-3.3.1.min.js"></script>

        <script>

            //self为我们点击的标签对象

            function show(self){

                //点击移除hide class，则出现内容

                $(self).next().removeClass('hide');

                //点击给别的增加hide，隐藏别的内容

                $(self).parent().siblings().children('.con').addClass('hide');

            }

        </script>

    </body>

</html>

左侧菜单栏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tab</title>

    <script src="js/jquery-3.3.1.min.js"></script>

    <script>

           function tab(self){

               var index=$(self).attr("xxx");

               $("#"+index).removeClass("hide").siblings().addClass("hide");

               $(self).addClass("current").siblings().removeClass("current");

           }

    </script>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            margin: 0px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            /*border: 1px solid red;*/

            line-height: 40px;

        }

        .menu li{

            display: inline-block;

        }

        .menu a{

            border-right: 1px solid red;

            padding: 11px;

        }

        .content{

            background-color: tan;

            border: 1px solid green;

            height: 300px;

        }

        .hide{

            display: none;

        }

        .current{

            background-color: darkgray;

            color: yellow;

            border-top: solid 2px rebeccapurple;

        }

    </style>

</head>

<body>

      <div class="tab_outer">

          <ul class="menu">

              <li xxx="c1" class="current" onclick="tab(this);">菜单一</li>

              <li xxx="c2" onclick="tab(this);">菜单二</li>

              <li xxx="c3" onclick="tab(this);">菜单三</li>

          </ul>

          <div class="content">

              <div id="c1">内容一</div>

              <div id="c2" class="hide">内容二</div>

              <div id="c3" class="hide">内容三</div>

          </div>

      </div>

</body>

</html>

tab切换

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

属性操作

--------------------------属性

固有属性

$("").attr();

$("").removeAttr();

自定义属性

$("").prop();

$("").removeProp();

--------------------------CSS类

$("").addClass(class|fn)

$("").removeClass([class|fn])

--------------------------HTML代码/文本/值

$("").html([val|fn])

$("").text([val|fn])

$("").val([val|fn|arr])

---------------------------CSS属性

$("").css("color","red")

$("").css({"color":"red","background-color":"green"})
<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

<script>

//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此

//需要使用prop方法去操作才能获得正确的结果。

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    false

//  ---------手动选中的时候attr()获得到没有意义的undefined-----------

//    $("#chk1").attr("checked")

//    undefined

//    $("#chk1").prop("checked")

//    true

    console.log($("#chk1").prop("checked"));//false

    console.log($("#chk2").prop("checked"));//true

    console.log($("#chk1").attr("checked"));//undefined

    console.log($("#chk2").attr("checked"));//checked

</script>

attr和prop

attr与prog

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.11.3.min.js"></script>

    <script>

             function selectall(){

                 $("table :checkbox").prop("checked",true)

             }

             function cancel(){

                 $("table :checkbox").prop("checked",false)

             }

             function reverse(){

                 //                 var idlist=$("table :checkbox")

//                 for(var i=0;i<idlist.length;i++){

//                     var element=idlist[i];

//

//                     var ischecked=$(element).prop("checked")

//                     if (ischecked){

//                         $(element).prop("checked",false)

//                     }

//                     else {

//                         $(element).prop("checked",true)

//                     }

//

//                 }

//    jquery循环的两种方式

                 //方式一

//                 li=[10,20,30,40]

//                 dic={name:"yuan",sex:"male"}

//                 $.each(li,function(i,x){

//                     console.log(i,x)

//                 })

                 //方式二

//                    $("tr").each(function(){

//                        console.log($(this).html())

//                    })

                 $("table :checkbox").each(function(){

                     $(this).prop("checked",!$(this).prop("checked"));

//                     if ($(this).prop("checked")){

//                         $(this).prop("checked",false)

//                     }

//                     else {

//                         $(this).prop("checked",true)

//                     }

                     // 思考:如果用attr方法可以实现吗?

                 });

             }

    </script>

</head>

<body>

     <button onclick="selectall();">全选</button>

     <button onclick="cancel();">取消</button>

     <button onclick="reverse();">反选</button>

     <table border="1">

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

         <tr>

             <td><input type="checkbox"></td>

             <td>444</td>

         </tr>

     </table>

</body>

</html>

全反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .back{

            background-color: rebeccapurple;

            height: 2000px;

        }

        .shade{

            position: fixed;

            top: 0;

            bottom: 0;

            left:0;

            right: 0;

            background-color: coral;

            opacity: 0.4;

        }

        .hide{

            display: none;

        }

        .models{

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

            background-color: gold;

        }

    </style>

</head>

<body>

<div class="back">

    <input id="ID1" type="button" value="click" onclick="action1(this)">

</div>

<div class="shade hide"></div>

<div class="models hide">

    <input id="ID2" type="button" value="cancel" onclick="action2(this)">

</div>

<script src="jquery-1.11.3.min.js"></script>

<script>

    function action1(self){

        $(self).parent().siblings().removeClass("hide");

    }

    function action2(self){

        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")

    }

</script>

</body>

</html>

模态对话框

文档处理

//创建一个标签对象

    $("<p>")

//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");

    $("").appendTo(content)       ----->$("p").appendTo("div");

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()

    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

            <div class="outer">

                <div class="item">

                        <input type="button" value="+" onclick="add(this);">

                        <input type="text">

                </div>

            </div>

<script src="jquery-1.11.3.min.js"></script>

    <script>

            //var $clone_obj=$(self).parent().clone();  // $clone_obj放在这个位置可以吗?

            function add(self){

                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加

                 var $clone_obj=$(self).parent().clone();

                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");

                 $(self).parent().parent().append($clone_obj);

            }

           function removed(self){

               $(self).parent().remove()

           }

    </script>

</body>

</html>

复制样式表

css操作

CSS

        $("").css(name|pro|[,val|fn])

    位置

offset():相对于视口的偏移量

        $("").offset().top

        $("").offset().left

        $("").offset([coordinates])

position():相当于定位父标签的偏移量

        $("").position()

        $("").position().top

        $("").position().left

        $("").scrollTop([val])

        $("").scrollLeft([val])

尺寸

返回元素内容大小

        $("").height([val|fn])

        $("").width([val|fn])

返回元素内容大小+panddin大小

        $("").innerHeight()

        $("").innerWidth()

返回元素内容大小+panddin大小+border大小

如果加上true就是考虑到外边界

        $("").outerHeight([soptions])

        $("").outerWidth([options])

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery-2.2.3.js"></script>

    <script>

          window.onscroll=function(){

              var current=$(window).scrollTop();

              console.log(current)

              if (current>100){

                  $(".returnTop").removeClass("hide")

              }

              else {

              $(".returnTop").addClass("hide")

          }

          }

           function returnTop(){

//               $(".div1").scrollTop(0);

               $(window).scrollTop(0)

           }

    </script>

    <style>

        body{

            margin: 0px;

        }

        .returnTop{

            height: 60px;

            width: 100px;

            background-color: darkgray;

            position: fixed;

            right: 0;

            bottom: 0;

            color: greenyellow;

            line-height: 60px;

            text-align: center;

        }

        .div1{

            background-color: orchid;

            font-size: 5px;

            overflow: auto;

            width: 500px;

        }

        .div2{

            background-color: darkcyan;

        }

        .div3{

            background-color: aqua;

        }

        .div{

            height: 300px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

     <div class="div1 div">

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

         <p>hello</p>

     </div>

     <div class="div2 div"></div>

     <div class="div3 div"></div>

     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>

</body>

</html>

返回顶部

事件

页面载入

    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

    $(document).ready(function(){}) -----------> $(function(){})

事件处理

    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：

    //  $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定

    //  click事件；

    [selector]参数的好处:

        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$('ul li').on('click', function(){console.log('click');})的绑定方式和

        //$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个

        //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的

        //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加

        //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

    [data]参数的调用:

             function myHandler(event) {

                alert(event.data.foo);

                }

             $("li").on("click", {foo: "bar"}, myHandler)

　　

<!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-2.2.3.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>bigger</title>

    <style>

        *{

            margin: 0;

            padding:0;

        }

        .outer{

            height: 350px;

            width: 350px;

            border: dashed 5px cornflowerblue;

        }

        .outer .small_box{

            position: relative;

        }

        .outer .small_box .float{

            height: 175px;

            width: 175px;

            background-color: darkgray;

            opacity: 0.4;

            fill-opacity: 0.4;

            position: absolute;

            display: none;

        }

        .outer .big_box{

            height: 400px;

            width: 400px;

            overflow: hidden;

            position:absolute;

            left: 360px;

            top: 0px;

            z-index: 1;

            border: 5px solid rebeccapurple;

            display: none;

        }

        .outer .big_box img{

            position: absolute;

            z-index: 5;

        }

    </style>

</head>

<body>

        <div class="outer">

            <div class="small_box">

                <div class="float"></div>

                <img src="small.jpg">

            </div>

            <div class="big_box">

                <img src="big.jpg">

            </div>

        </div>

<script src="jquery-2.1.4.min.js"></script>

<script>

    $(function(){

          $(".small_box").mouseover(function(){

              $(".float").css("display","block");

              $(".big_box").css("display","block")

          });

          $(".small_box").mouseout(function(){

              $(".float").css("display","none");

              $(".big_box").css("display","none")

          });

          $(".small_box").mousemove(function(e){

              var _event=e || window.event;

              var float_width=$(".float").width();

              var float_height=$(".float").height();

              console.log(float_height,float_width);

              var float_height_half=float_height/2;

              var float_width_half=float_width/2;

              console.log(float_height_half,float_width_half);

               var small_box_width=$(".small_box").height();

               var small_box_height=$(".small_box").width();

//  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理

              var mouse_left=_event.clientX-float_width_half;

              var mouse_top=_event.clientY-float_height_half;

              if(mouse_left<0){

                  mouse_left=0

              }else if (mouse_left>small_box_width-float_width){

                  mouse_left=small_box_width-float_width

              }

              if(mouse_top<0){

                  mouse_top=0

              }else if (mouse_top>small_box_height-float_height){

                  mouse_top=small_box_height-float_height

              }

               $(".float").css("left",mouse_left+"px");

               $(".float").css("top",mouse_top+"px")

               var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);

               var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);

              console.log(percentX,percentY)

               $(".big_box img").css("left", -percentX*mouse_left+"px")

               $(".big_box img").css("top", -percentY*mouse_top+"px")

          })

    })

</script>

</body>

</html>

放大镜

动画效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

$(document).ready(function() {

    $("#hide").click(function () {

        $("p").hide(1000);

    });

    $("#show").click(function () {

        $("p").show(1000);

    });

//用于切换被选元素的 hide() 与 show() 方法。

    $("#toggle").click(function () {

        $("p").toggle();

    });

})

    </script>

    <link type="text/css" rel="stylesheet" href="style.css">

</head>

<body>

    <p>hello</p>

    <button id="hide">隐藏</button>

    <button id="show">显示</button>

    <button id="toggle">切换</button>

</body>

</html>

显示隐藏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

    $(document).ready(function(){

     $("#slideDown").click(function(){

         $("#content").slideDown(1000);

     });

      $("#slideUp").click(function(){

         $("#content").slideUp(1000);

     });

      $("#slideToggle").click(function(){

         $("#content").slideToggle(1000);

     })

  });

    </script>

    <style>

        #content{

            text-align: center;

            background-color: lightblue;

            border:solid 1px red;

            display: none;

            padding: 50px;

        }

    </style>

</head>

<body>

    <div id="slideDown">出现</div>

    <div id="slideUp">隐藏</div>

    <div id="slideToggle">toggle</div>

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

</body>

</html>

滑动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

    <script>

    $(document).ready(function(){

   $("#in").click(function(){

       $("#id1").fadeIn(1000);

   });

    $("#out").click(function(){

       $("#id1").fadeOut(1000);

   });

    $("#toggle").click(function(){

       $("#id1").fadeToggle(1000);

   });

    $("#fadeto").click(function(){

       $("#id1").fadeTo(1000,0.4);

   });

});

    </script>

</head>

<body>

      <button id="in">fadein</button>

      <button id="out">fadeout</button>

      <button id="toggle">fadetoggle</button>

      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>

</html>

淡入淡出

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-2.1.4.min.js"></script>

</head>

<body>

  <button>hide</button>

  <p>helloworld helloworld helloworld</p>

 <script>

   $("button").click(function(){

       $("p").hide(1000,function(){

           alert($(this).html())

       })

   })

    </script>

</body>

</html>

回调函数

转载：https://www.cnblogs.com/yuanchenqi/articles/6070667.html

Jquery操作一遍过的更多相关文章

  1. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  2. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  3. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  4. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  5. input jquery 操作

    本文章主要为了总结开发常用的input等常见html的jquery操作,不是为了展示自己多么菜,只为了积累知识,勿喷!!!不断更新中 $(function () { $("input[nam ...

  6. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  7. Jquery操作cookie，实现简单的记住用户名的操作

     一.jquery.cookie.js介绍  jquery.cookie.js是一个基于jquery的插件,一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cook ...

  8. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. Jquery操作select,左右移动,双击移动 取到所有option的值

    $(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected& ...

随机推荐

  1. js调用ajax案例

    js调用ajax案例 测试地址:http://www.w3school.com.cn/tiy/t.asp?f=ajax_get 嵌入下面代码,点击提交,再点击请求数据.就可以看到结果了. <ht ...

  2. 处理数据库 Ora-00845: memory_traget not supported on this system 的错误

    问题出现情况:在数据库启动的时候:如果出现如下图的错误: 查看官方文档: 处理操作步骤: [oracle@localhost orcl]$ su - root Password: [root@loca ...

  3. 【VBA】数组定义时，括号内的数值n为最大下标，其长度为n+1

    定义数组 dim arr(9) as integer注意这是数组的长度为10,而9指的是最大下标值. 所以在redim和赋值的时候要特别小心,防止错位.

  4. vue-cli3初尝试之路径别名配置

    let path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports ...

  5. D3.js 添加zoom缩放功能后dblclick双击也会放大的问题

    svg.call(zoom).on("dblclick.zoom", null); https://stackoverflow.com/questions/25007466/d3- ...

  6. 【python】ftp连接，主被动，调试等级

    示例代码如下: #!/usr/bin/env python # -*- coding: utf-8 -*- import os from ftplib import FTP def ftp_down( ...

  7. 闭包&装饰器

    闭包 1.函数引用 def test(): print('--test--') # 调用函数 test() # 引用函数 ret = test print(id(ret)) print(id(test ...

  8. java web 项目中 简单定时器实现 Timer

    java web 项目中 简单定时器实现 Timer 标签: Java定时器 2016-01-14 17:28 7070人阅读 评论(0) 收藏 举报  分类: JAVA(24)  版权声明:本文为博 ...

  9. 基于nginx的WebSocket反向代理

    系统:windows 版本:nginx 1.4.5 配置内容: location ~ \.do$ {             proxy_pass   http://192.168.20.102:80 ...

  10. asp.net core WebApi 返回 HttpResponseMessage

    ASP.NET WebApi 2 中的示例代码: [Route("values/{id}")] public async Task<HttpResponseMessage&g ...