JQuery常用方法

一、工具类方法

1.1 $.extend()

  • 概述：用一个或多个其它对象来扩展一个对象,返回被扩展的对象
  1. var obj1 = {name:'Jerry',age:24,score:90};
  2.     var obj2 = {name:'Tom',age:20,sex:'man'};
  3.     var a = $.extend({},obj1,obj2);
  4.     console.log(a);// -> obj2会覆盖obj1相同的 {name: "Tom", age: 20, score: 90, sex: "man"}
  6.     var settings = { validate: false, limit: 5, name: "foo" };
  7.     var options = { validate: true, name: "bar" };
  8.     var a1 = $.extend({},settings,options);
  9.     console.log(a1); // -> {validate: true, limit: 5, name: "bar"}

1.2 $.grep()

  • 概述：使用过滤函数过滤数组元素
  1. // -> 此函数返回一个Boolean值
  2.     // n -> 待过滤数组
  3.     // i -> 元素索引值
  4.     var g = $.grep([0,1,2,3],function(n,i){
  5.         return n > 0;
  6.     });
  7.     console.log(g);// [1,2,3]
  9.     // -> 第三个参数为true,则返回函数中为false的元素集
  10.     var g1 = $.grep([0,1,2,3],function(n,i){
  11.         return n > 0;
  12.     },true);
  13.     console.log(g1);// [0]

1.3 $.makeArray()

  • 概述：将类数组转换为数组
  1. <ul id="list">
  2.         <li>1</li>
  3.         <li>2</li>
  4.         <li>3</li>
  5.     </ul>
var oList = document.getElementsByTagName('li');
    var b = $.makeArray(oList);
    console.log(b);// -> [li, li, li]

1.4 $.map()

  • 概述：将一个数组中的元素转换到另一个数组中
// n - 表示数组元素
    // 此方法可返回任何值
    var m = $.map([1,2,3],function(n){
        return n + 4;
    });
    console.log(m);// [5,6,7]

1.5 $.inArray(value,array,fromIndex)

  • 概述：确定第一个参数在数组中的位置,从0开始计数,如果没有找到默认是返回-1
// -> value 用于在数组中查找是否存在的值
    // -> array 待处理数组
    // -> fromIndex 从第几索引开始搜索
    var arr = ['1','Jerry',3,'Tom',9];
    console.log($.inArray('Jerry',arr));//1
    console.log($.inArray('Pete',arr,2));//-1

1.6 $.merge()

  • 概述：合并两个数组成一个新数组
var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var d = $.merge(arr1,arr2);
    console.log(d);// [1,2,3,4,5,6]

1.7 $.unique()

  • 概述：删除数组中重复元素
var o = [1,2,3,3,4,4,5,6,6,7,7,7,8,9];
    var o1 = $.unique(o);
    console.log(o1);// [1, 2, 3, 4, 5, 6, 7, 8, 9]

1.8 $.contains()

  • 概述：检测一个元素是否包含另一个元素
console.log($.contains(document.documentElement,document.body));// true

1.9 $.type()

  • 概述：用于检测数据类型的
console.log($.type(true));// boolean
    console.log($.type(3)); // number

    // -> 扩展：
    // -> $.isArray() 用于检测是否是数组对象
    console.log($.isArray([])); // true
    // -> $.isFunction() 用于检测是否为函数
    console.log($.isFunction(function(){})); // true
    // -> $.isEmptyObject() 用于检测是否是空对象
    console.log($.isEmptyObject({}));//true
    // -> $.isPlainObject() 用于检测是否是纯粹的对象(通过new Object或者{}创建的)
    console.log($.isPlainObject(new Object()));// true

1.10 $.trim()

  • 概述：去掉首尾空格
var str = '  JerryTom ';
    var f = $.trim(str);
    console.log(f);// JerryTom

1.11 $.param()

  • 概述：将表单元素或者数组序列化
var p = {width:160,height:280};
    var g = $.param(p);
    console.log(g); // width=160&height=280

二、核心方法

2.1 get([index])

  • 概述：通过索引取得匹配的DOM集合对其操作,而不是通过JQ函数

  • 理解：$(this).get(0) <=> $(this)[0]

console.log($("img").get(0).getAttribute('src'));// get获取到的是原生DOM集合,但是eq()方法,获取的是JQ元素

2.2 index([empty]||[selector])

  • 概述：搜索匹配的元素,并返回相应元素的索引值
<ul id="list">
        <li>1</li>
        <li id="bar">2</li>
        <li>3</li>
    </ul>

// -> index() 不传递参数,返回值就是第一个元素相对于其同辈元素的位置
    console.log($("#bar").index());//1

    // -> index([selector]) 如果传递一个选择器,则表示从这个对象中查找元素,并返回索引位置;如果找不到就返回-1
    console.log($("li").index($("#bar")));//1

2.3 $.fn.extend()

  • 概述：扩展jQ元素来提供新的方法
$.fn.extend({
        check:function(){

        },
        unCheck:function(){

        }
    });
    $('input').check();

2.4 $.extend()

  • 概述：扩展JQ对象本身(也就是说在命名空间上增加函数)
$.extend({
        min:function(a,b){
            return a < b ? a : b;
        }
    });
    $.min(2,3);

三、JQ中的Each方法

  • JQ中的each有三种：

    • (1)写在原型上的each -> 遍历jQ对象中的每一项

    • (2)写在对象上的each -> 工具方法,可以用来遍历数组、类数组、对象等

    • (3)内置的each -> 其实也是调用原型上的each处理的,只不过JQ在处理的时候会内部自己调用

// -> 内置each 
    $("a").addClass('select');//-> 我们获取的a可能有很多个,执行一次addClass,相当于给每一个获取的a都增加了一个叫做select的样式类(JQ中大部分方法在执行的时候,都会把获取的JQ集合中的每一项调用each进行遍历,把需要操作的任务对每一个遍历的元素进行操作)

    $("a").css('width');//->获取的时候只返回第一个元素的样式(设置走内置each批量处理,获取只处理第一个)

    // -> 原型上的each
    $("a").each(function(index,item){
        // -> 传递参数的顺序和数组内置的forEach顺序相反,数组内置的[Array].forEach((item,index)=>{})
        // -> 获取的a有多少个,回调函数被触发执行多少次
        // -> index 为当前这一项的索引 | item 是当前这一项的内容
        // -> this 是 item,是一个JS原生对象
        // -> $(this) 也是当前遍历的这一项,但是属于JQ对象
    });

    // -> 对象上的each
    $.each(Array/likeArray/Object,function(index,item){

    });

四、属性方法

4.1 attr()

  • 概述：设置或者返回被选元素的属性值
// -> 情况1：参数name
    var a = $("#box").attr("id");
    console.log(a);// box

    // -> 情况2：参数properties
    $("img").attr({
        "src":"2.jpg",
        "alt":"123"
    });

    // -> 情况3：key/value
    $("img").attr("src","3.png");

    // -> 情况4：参数key,回调函数
    $("img").attr('data-src',function(i,n){
        console.log(i);// 0 -> 索引
        console.log(n);// 4.jpg -> 原先的属性值
        return this.src;
    });

4.2 prop()

  • 概述：获取在匹配的元素集中的第一个元素的属性值

  • 值得注意的是：prop用法基本和attr一致,但是prop一般处理表单元素居多

console.log($("input[type=checkbox]").prop('checked'));
    // -> 禁用名字叫szr的checkbox
    $("input[name=szr]").prop({
        disabled:true
    });
    // -> 禁用和选中页面上名字叫tom的复选框
    $("input[name=tom]").prop("disabled",true);
    $("input[name=tom]").prop("checked",true);

    // -> 通过函数的形式来设置页面上所有名字叫green的复选框被选中
    $("input[name=green]").prop('checked',function(i,val){
        // val -> 表示原先的属性值
        // i -> 表示索引值
        return !val;
    });

4.3 类名操作 addClass()/removeClass()/toggleClass()

4.3.1 addClass() / removeClass()

  • 概述：为每个匹配的元素 添加 / 移除 指定的类名
// -> 添加一个或者多个类名,中间需要用空格分隔
    $("#box").addClass("sel");
    $("#box").addClass("sel desc");

    // -> 给li元素添加不同的类名
    $("#list li").addClass(function(i,c){
        // i -> 表示索引值
        // c -> 表示原来的类名
        return 'item' + i;
    });

    // removeClass() 用法与addClass()一致

4.3.2 toggleClass()

  • 概述：如果存在（不存在）就删除（添加）一个类
.r{color:red;}

<div id="s">1111111</div>

$("#s").on('click',function(){
        $(this).toggleClass('r',false);
        // $(this).toggleClass('r',true);// -> 最后的boolean值是用来判断是添加还是移除
    });

4.4 html() / text()

  • 概述：取得第一个匹配元素的html内容 / 取得所有匹配元素的内容
<p>1111111111111111111111111111111</p>

// -> 获取内容
    var c = $("p").html();
    console.log(c);// 1111111111111111111111111111111

    // -> 设置内容
    $("p").html(123);

    // -> 接收一个函数
    $("p").html(function(i,h){
        return '~~~'+h; // ~~~123
    });

    // -> text()用法和html()大体一致

4.5 val()

  • 获得匹配元素的当前值
<input type="text" value="45666">
    <input type="text" value="1" id="input2">

    <input type="checkbox" name="d" value="ck1">
    <input type="checkbox" name="d" value="ck2">

var d = $("#input1").val();
    console.log(d); // 45666

    $("#input2").val(function(i,v){
        // i -> 表示索引值
        // v -> 表示原先的value值
        return v + 'Jerry'; // 1Jerry
    });

    // -> ["value1","value2"]
    var h = $("input[name=d]").val(["ck1","ck2"]);
    console.log($.makeArray(h));

五、CSS方法

5.1 css()

  • 概述：访问匹配元素的样式属性
<p id="p1">123</p>

// -> 获取值
    console.log($("#p1").css('color'));

    // -> 设置值
    $("#p1").css('color','red'); // 设置
    $("#p1").css({
        'background-color':'blue',
        'font-size':'18px'
    });

    // -> 接收一个回调
    // -> index 表示索引值 ; value 表示原先的属性值
    $("#p1").css({
        width:function(index,value){
            return parseFloat(value) * 1;
        },
        height:function(index,value){
            return parseFloat(value) * 1;
        }
    });

5.2 offset()

  • 概述：获取匹配元素在当前视口的相对偏移
<div id="box"></div>

#box{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        top: 100px;
        left: 200px;
    }

// -> 返回的对象包含两个整型属性 'left' 、 'top',以像素计,只对可见元素有效
    console.log($("#box").offset().top);//100
    console.log($("#box").offset().left);//200

    $("#box").offset(function(index,old){
        console.log(old);// Object {left:200,top:100} -> 接收选择器的当前坐标
        return {left:old.left + 100,top:old.top + 100}; // -> 返回新的坐标
    });

    console.log($("#box").offset().top);//200
    console.log($("#box").offset().left);//300

5.3 position()

  • 概述：获取匹配元素相对父元素的偏移,也是返回left和top,只对可见元素有效
// -> 父级是body,故和offset()的值相同
    console.log($("#box").position().top);//100
    console.log($("#box").position().left);//200

5.4 scrollTop() / Left()

  • 概述：获取匹配元素相对于滚动条顶部 / 左侧的偏移
// -> 此方法对可见元素和隐藏元素均有效
    console.log($("#box").scrollTop());    //0

    // -> 设置相对于滚动条顶部的偏移
    $("#box").scrollTop(300);

5.5 width() / height()

  • 概述：取得匹配元素当前计算的高度值
// -> 获取宽高值(无单位)
    console.log($("#box").width());// 100

    // -> 设置宽高值
    $("#box").height(400);

    // -> 接收一个函数
    $("#box").width(function(index,val){
        console.log(val); // 100
        return val * 3; // 此时新的宽度就是原先值的3倍了
    })

5.6 innerWidth() / innerHeight()

  • 概述：获取匹配元素内部区域宽高度,包括补白但是不包括边框,对可见元素和隐藏元素均有效
console.log($("#box").innerWidth());// 如果加上padding的话就是 width + padding的值

5.7 outerWidth() / outerHeight()

  • 概述：获取匹配元素外部宽高度,默认情况下包括补白和边框
// -> 实例与上一个没有什么不同,但是此方法中会有一个参数,是一个boolean值
    // -> 如果加上true,则会把边距计算在内
    $("#box").outerWidth(true);

六、选择器

6.1 :eq

  • 概述:匹配一个给定索引值的元素
console.log($("li:eq(1)")); // -> 注意不能在选择器后面加,只能在元素后加

6.2 :gt / :lt

  • 概述：匹配所有 大于 / 小于 给定索引值的元素
console.log($("li:gt(0)"));
    console.log($("li:lt(2)"));

6.3 :not / :checked / :selected

  • 概述：去除所有与给定选择器匹配的元素
<input type="checkbox">
    <input type="checkbox">
    <input type="checkbox" checked>

    <br/>
    <select>
        <option value="1">123</option>
        <option value="2" selected="selected">456</option>
        <option value="3">789</option>
    </select>

// -> 需求：获取到所有未被选中的checkbox
    console.log($("input:not(:checked)"));

    // -> 需求：获取所有选中的被选中元素(但是不包括select中的option)
    console.log($("input:checked"));

    // -> 需求：匹配所有选中的option元素
    console.log($("select option:selected"));

6.4 :input

  • 概述：匹配所有input、textarea、select、button的表单元素
console.log($(":input"));// -> 连type为hidden的也会获取到

七、筛选

7.1 eq()

  • 概述：eq([index]) 获取第n个JQ元素,[index]值可以为负数,意为倒数
console.log($("#plist p").eq(2)) //3
    console.log($("#plist p").eq(-1)) //4

7.2 hasClass()

  • 概述：是否包含某个特定的类名
<div class="box">123</div>

console.log($("div").hasClass("box")); // -> 返回值是Boolean值

7.3 filter()

  • 概述：筛选出与指定表达式匹配的元素集合
<div id="plist">
        <p>1</p>
        <p class="s">2</p>
        <p class="e">3</p>
        <p>4</p>
    </div>

// -> 需求：筛选出带有s,e类名的元素
    console.log($("#plist p").filter(".s,.e"));

    // -> filter函数还接收一个回调,并携带一个参数index
    $("#plist p").filter(function(index){
        console.log(index);// 0 1 2 3
    })

7.4 children()

  • 概述：取得一个元素集合中每一个元素的所有子元素的元素集合
<ul class="level2">
        <li>A</li>
        <li>B
            <ul class="level3">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>C</li>
    </ul>

// -> children只考虑子元素而不考虑所有后代元素
    // -> children方法的参数是可选的,用来过滤子元素
    $(".level2").children().css("border",'1px solid green');

7.5 find()

  • 概述：取得正在处理元素的后代元素(也就是说是所有的下级元素)
// -> find方法的参数是必选的
    $(".level2").find("li").css("border","2px solid red");

7.6 is()

  • 概述：根据选择器/DOM元素/JQ对象来检测匹配元素集合

  • 如果有一个匹配就返回true,否则返回false

console.log($("#plist p").is("p"));//true

    var a = $("#plist p").is(function(index){
        return $(this).html() > 1;
    });
    if(a){
        alert(1);
    }

7.7 not()

  • 概述：删除与指定表达式匹配的元素
<div class="con">
        <p>0000000000000</p>
        <p class="selected">1111111111111</p>
    </div>

// -> 里面传一个选择器或者DOM元素,更或者是一个回调函数    
    console.log($(".con p").not($(".selected")));

7.8 offsetParent()

  • 概述：返回父元素第一个position设为relative或者absolute的元素
<div id="box1">
        <p class="p1">OffsetParent</p>
    </div>

$(".p1").offsetParent().css("background", "red");

7.9 siblings()

  • 概述：用于筛选同辈元素
<p>123</p>
    <div class="sib">Hello Siblings</div>
    <p>456</p>

$(".sib").siblings().css("color","#f00");

八、文档处理

8.1 append()

  • 概述：向匹配元素内部追加内容【后追加】,与之相反的是prepend(),属于【前追加】

  • 参数：

    • content {String | Element} 要追加到目标中的内容

    • callback {Function(index, html)} 返回一个html字符串,index表示索引值,html表示原先的html值

<div id="box"></div>

$("#box").append('<span>123</span>')
    $("#box").append(function(index, html) {
        return html + '789';
    })

8.2 appendTo()

  • 概述：(A)被追加(B)
$("<p>123</p>").appendTo($("#box"))

8.3 before() / after()

  • 概述：在匹配元素前/后插入内容,类似append,被插入是insertBefore/After()

九、效果

9.1 show() / hide() / toggle()

  • 概念：显示隐藏的匹配元素 / 隐藏显示的匹配元素 / 切换显示隐藏元素
  • 参数
<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
    <div id="box"></div>
    <input type="button" value="显示" id="show">
    <input type="button" value="隐藏" id="hide">
    <input type="button" value="切换" id="toggle">
    <script>
        /*
            参数：
            1.speed 三种预定速度之一的字符串 'slow', 'normal', 'fast' 或者 表示动画时长的毫秒数 (1000)
            2.easing 用来指定切换效果,默认是'swing', 可用参数 'linear'
            3.fn 在动画完成时执行的函数,每个元素执行1次
        */ 
        $("#show").click(function() {
            $("#box").show('normal', 'linear', function() {
                console.log(1);
            });
        });
        $("#hide").click(function() {
            $("#box").hide('normal', 'linear', function() {
                console.log(2);
            });
        });
        $("#toggle").click(function() {
            $("#box").toggle('normal', 'linear', function() {
                console.log(3);
            });
        });
    </script>

9.2 slideDown() / slideUp() / slideToggle()

  • 概念：通过高度变化向下增大 / 向上减小 / 切换匹配元素的可见性
  • 参数：与9.1方法参数一致

9.3 fadeIn() / fadeOut() / fadeToggle()

  • 概念：通过不透明度变化实现淡入效果 / 淡出效果 / 切换淡入和淡出
  • 参数：与9.1方法参数一致

9.4 animate() / stop()

  • 概念：创建自定义动画 / 停止动画
  • 参数：
<style>
        #box {
            width: 100px;
            height: 100px;
            background-color: #000;
        }
    </style>
    <input type="button" value="动画" id="animate">
    <input type="button" value="停止" id="stop">
    <script>
        /*
            参数：
            params {Object} 一组包含作为动画属性和终值的样式属性和及其值的集合
            speed {String} 'slow','normal','fast'或者动画时长的毫秒值(1000)
            easing {String} 'linear','swing'
            fn {Function} 动画完成时执行的函数,每个元素执行1次
        */
        $("#animate").click(function() {
            $("#box").animate({
                width: '800px'
            }, 1000, 'linear', function() {
                console.log(111);
            });
        });
        $("#stop").click(function() {
            $("#box").stop();
        });
    </script>