首页 > 代码库 > Jquery基础（一）

Jquery基础（一）

2024-10-08 02:08:02   210人阅读

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二 什么是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()

三 寻找元素(选择器和筛选器) 

3.1   选择器

3.1.1 基本选择器      

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

3.1.2 层级选择器      

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

3.1.3 基本筛选器      

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

3.1.4 属性选择器     

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

3.1.5 表单选择器      

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

实例之左侧菜单

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>left_menu</title>    <style>          .menu{              height: 500px;              width: 30%;              background-color: gainsboro;              float: left;          }          .content{              height: 500px;              width: 70%;              background-color: rebeccapurple;              float: left;          }         .title{             line-height: 50px;             background-color: #425a66;             color: forestgreen;}         .hide{             display: none;         }    </style></head><body><div class="outer">    <div class="menu">        <div class="item">            <div class="title">菜单一</div>            <div class="con">                <div>111</div>                <div>111</div>                <div>111</div>            </div>        </div>        <div class="item">            <div class="title">菜单二</div>            <div class="con hide">                <div>111</div>                <div>111</div>                <div>111</div>            </div>        </div>        <div class="item">            <div class="title">菜单三</div>            <div class="con hide">                <div>111</div>                <div>111</div>                <div>111</div>            </div>        </div>    </div>    <div class="content"></div></div><script src="jquery-3.2.1.js"></script><script>           $(".item .title").click(function () {                $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");//                $(this).next().removeClass("hide");//                $(this).parent().siblings().children(".con").addClass("hide");           })</script></body></html>
View Code

实例之tab切换

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>tab</title>    <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>
View Code

3.2 筛选器

 3.2.1  过滤筛选器     

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

 3.2.2  查找筛选器

 $("div").children(".test")     $("div").find(".test")                                 
 $(".test").next()    $(".test").nextAll()    $(".test").nextUntil() 
                           
 $("div").prev()  $("div").prevAll()  $("div").prevUntil()   
                        
 $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 
 $("div").siblings()

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

4.1 属性操作

--------------------------属性$("").attr();$("").removeAttr();$("").prop();$("").removeProp();--------------------------CSS类$("").addClass(class|fn)$("").removeClass([class|fn])--------------------------HTML代码/文本/值$("").html([val|fn])$("").text([val|fn])$("").val([val|fn|arr])---------------------------$("").css("color","red")

注意：

技术分享
<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

技术分享4.2 文档处理

//创建一个标签对象    $("<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]])

技术分享4.3 css操作

CSS        $("").css(name|pro|[,val|fn])    位置        $("").offset([coordinates])        $("").position()        $("").scrollTop([val])        $("").scrollLeft([val])    尺寸        $("").height([val|fn])        $("").width([val|fn])        $("").innerHeight()        $("").innerWidth()        $("").outerHeight([soptions])        $("").outerWidth([options])

五 事件

页面载入    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 lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://www.mamicode.com/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="http://www.mamicode.com/style.css"></head><body>    <p>hello</p>    <button id="hide">隐藏</button>    <button id="show">显示</button>    <button id="toggle">切换</button></body></html>
View Code

滑动

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://www.mamicode.com/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>
View Code

淡入淡出

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://www.mamicode.com/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>
View Code

回调函数

技术分享
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://www.mamicode.com/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>
View Code

七 扩展方法 (插件机制)

一 用JQuery写插件时，最核心的方两个方法

<script>    $.extend(object)      //为JQuery 添加一个静态方法。$.fn.extend(object)   //为JQuery实例添加一个方法。    jQuery.extend({          min: function(a, b) { return a < b ? a : b; },          max: function(a, b) { return a > b ? a : b; }        });    console.log($.min(3,4));//-----------------------------------------------------------------------
$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

$("p").print();
</script>

二 定义作用域

      定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。

(function(a,b){return a+b})(3,5)       (function ($) { })(jQuery);//相当于        var fn = function ($) { };        fn(jQuery);

 三 默认参数

定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。

技术分享
/step01 定义JQuery的作用域(function ($) {    //step03-a 插件的默认值属性    var defaults = {        prevId: ‘prevBtn‘,        prevText: ‘Previous‘,        nextId: ‘nextBtn‘,        nextText: ‘Next‘        //……    };    //step06-a 在插件里定义方法    var showLink = function (obj) {        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });    }    //step02 插件的扩展方法名称    $.fn.easySlider = function (options) {        //step03-b 合并用户自定义属性，默认属性        var options = $.extend(defaults, options);        //step4 支持JQuery选择器        //step5 支持链式调用        return this.each(function () {            //step06-b 在插件里定义方法            showLink(this);        });    }})(jQuery);
View Code

参考：http://www.cnblogs.com/xcj26/p/3345556.html

Jquery基础（一）


联系
我们