jquery 苑的离去，感觉些许悲伤，保重 --- --- 苑，怨，缘。。。

一 jQuery是什么？ 

<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();

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

$("#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 对象

$(this)  是转化为jQuery对象的方法
$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML


<input type="checkbox" >  标签实例如下：

console.log($(":checkbox").prop("checked"))
VM122:1 false
undefined
console.log($(":checkbox")[0].checked)
VM134:1 false
undefined

jQuery对象转成DOM对象： 
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 
(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。 
如：var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 
如：var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 

DOM对象转成jQuery对象: 
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 
如：var v=document.getElementById("v"); //DOM对象 
var $v=$(v); //jQuery对象 
转换后，就可以任意使用jQuery的方法了。 
通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。 

下面是其它的相关使用方法：
1、DOM对象转jQuery对象 
普通的Dom对象一般可以通过$()转换成jQuery对象。 

如：$(document.getElementById("msg")) 
返回的就是jQuery对象，可以使用jQuery的方法。 

2、jQuery对象转DOM对象 
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索引取出。 
如： $("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5] 

这些都是Dom对象，可以使用Dom中的方法，但不能再使用jQuery的方法。 

以下几种写法都是正确的： 
$("#msg").html(); 
$("#msg")[0].innerHTML; 
$("#msg").eq(0)[0].innerHTML; 
$("#msg").get(0).innerHTML;
三 寻找元素(选择器和筛选器) 

3.1   选择器

3.1.1 基本选择器      

1
$("*")全部  $("#id")找id   $(".class")找类  $("element")找标签  $(".class,p,div")同时找多个
3.1.2 层级选择器      

2
$(".outer div")后代  $(".outer>div")子代   $(".outer+div")毗邻（紧挨）  $(".outer~div")兄弟
3.1.3 基本筛选器      

3
$("li:first")第一个  $("li:eq(2)")/$("li").eq(2)第二个  $("li:even")奇数 $("li:odd")偶数 $("li:gt(1)")大于
　　$("li:lt(1)")小于
3.1.4 属性选择器    

4
$('[id="div1"]')   $('["alex="sb"][id]')
3.1.5 表单选择器     

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

3.2 筛选器

 3.2.1  过滤筛选器    

 $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")返回true或false

 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()所有负body和html  $(".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])　　　　只有input标签才有得属性
---------------------------
$("").css("color","red")　　　　css调整格式




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





4.2 文档处理





//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");在后面插入
    $("").appendTo(content)       ----->$("p").appendTo("div");把自己插到谁里面，是html内部的插入
    $("").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()  加上 上下的padding
        $("").innerWidth()
        $("").outerHeight([soptions])　　
        $("").outerWidth([options])
　　　　　　　


$("").outerHeight()  加上 上下的boder



$("").outerHeight(true)  加上 上下的margin


 




五 事件




页面载入
    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)



七 扩展方法 (插件机制)


一 用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);











        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/chedanlangren/p/6924330.html