jQuery基础之一些简单使用

最新推荐文章于 2020-12-30 20:03:42 发布

sgls652709

最新推荐文章于 2020-12-30 20:03:42 发布

阅读量928

点赞数 1

分类专栏： Html5基础文章标签： jquery

本文链接：https://blog.csdn.net/sgls652709/article/details/53517678

版权

Html5基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

记录了在学习jQuery和基于jQuery的一些框架的源码时的一些感悟

正文

日志输出

// If nothing is selected, return nothing; can't chain anyway
        if ( !this.length ) {
            if ( options && options.debug && window.console ) {
                console.warn( "Nothing selected, can't validate, returning nothing." );
            }
            return;
        }

先判断一下该jQuery插件的配置是否要输出日志，在判断一下浏览器是否有console的日志方法

jQuery.data

data() 方法向被选元素附加数据，或者从被选元素获取数据。

使用data注意地方：jQuery $.data()方法使用注意细节

插入元素

使用$( "<input type='hidden'/>" ) 创建对象设置属性并连接到form表单里面

// Insert a hidden input as a replacement for the missing submit button
                            hidden = $( "<input type='hidden'/>" )
                                .attr( "name", validator.submitButton.name )
                                .val( $( validator.submitButton ).val() )
                                .appendTo( validator.currentForm );

jQuery.is方法

判断当前元素是否满足selector，比如 $("div").is(div) 判断当前的$ (“div”)是否是div元素

.is(selector)

jQuery.extend

ObjectjQuery.extend( target, object1, [objectN])用一个或多个其他对象来扩展一个对象，返回被扩展的对象

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options);
结果：settings == { validate: true, limit: 5, name: "bar" }

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：
$.fn.extend({          
     alertWhileClick:function() {            
           $(this).click(function(){                 
                  alert($(this).val());           
            });           
      }       
});       
$("#input1").alertWhileClick(); // 页面上为：    
$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

Query.extend(object);　为jQuery类添加类方法，可以理解为添加静态方法。

jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //  2 
jQuery.max(4,5); //  5

jQuery.each

each() 方法规定为每个匹配元素规定运行的函数。

function(index,element)
必需。为每个匹配元素规定运行的函数。
index - 选择器的 index 位置
element - 当前的元素（也可使用 “this” 选择器）

如果是对象，那么index就是key，element就是value
index为firstname,username等而element是“required”,{required:true,minlength:2}等

<script>
    var rules = {
        firstname: "required",
        lastname: "required",
        username: {
            required: true,
            minlength: 2
        },
        password: {
            required: true,
                    minlength: 5
        }
    }
    $.each(rules,function(key,value) {
        alert(value)
    })
</script>

如果是数组，那么index就是索引，element就是指定索引所在的位置
index为0，1而element就是对应的值：name,age

var objs = ['name','age'];
    $.each(objs,function(key,value) {
        alert(key+"=" + value)
    })

javascript中的in使用方法

判断对象是否为数组/对象的元素/属性
数组中应用

var arr = ["a","b","2","3","str"];  
var result = ("b" in arr);  
var result1 = (4 in arr);  
document.write(result+"<br>");  
document.write(result1+"<br>");
输出：false，true

对象中使用

var obj={  
         w:"wen",  
         j:"jian",  
         b:"bao"  

    }  

var result=(2 in obj);      
var result1=("j" in obj);  

document.write(result)+"<br/>";  
document.write(result1)+"<br/>";  
输出：false,true

For…In 声明用于对数组或者对象的属性进行循环/迭代操作。

var x  
var mycars = new Array()  
mycars[0] = "Saab"  
mycars[1] = "Volvo"  
mycars[2] = "BMW"  

for (x in mycars)  {  
    document.write(mycars[x] + "<br />")  
}  
输出Saab Volvo BMW

jQuery.not

not() 从匹配元素集合中删除元素。
语法一
使用selector选择器从集合中删除符合选择器的元素

.not(selector)

语法二
从集合中删除一个或多个dom元素

.not(element)

语法三

.not(function(index))

对于 jQuery 1.4，.not() 方法能够采用函数作为其参数，与 .filter() 方法相同。其函数返回 true 的元素会被排除在过滤集之外；所有其他元素将被包含其中。

例子-语法三

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<p id="selected">This is a paragragh.</p>
<p>This is a paragragh.</p>
<p>This is a paragragh.</p>
<script>
$("p").not(function(index){
    if($(this).is("#selected")) 
        return true;
}).css('background-color', 'red');
</script>
</body>
</html>

将id为selected的p标签排除在外

jQuery.find

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
例子-find

<body>
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

<script>
$('ul').find('.item-b > .level-3 > .item-1').css('background-color', 'red');
</script>

</body>
</html>

从ul元素下找到匹配find中选择器的元素，从选择器的内容可知要找到是item-b与level-3 形成直接父子关系下的item-1元素

例子-find-2

findByName: function( name ) {
            return $( this.currentForm ).find( "[name='" + this.escapeCssMeta( name ) + "']" );
        }

找到在currentForm下的属性为name=xxx（[name=xxxx]表示满足属性name为xxx的元素）的元素

jQuery.filter

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

可以使用选择器完成过滤

例子-选择器

//得到选中的单选/复选框的元素个数
getLength: function( value, element ) {
            switch ( element.nodeName.toLowerCase() ) {
            case "select":
                return $( "option:selected", element ).length;
            case "input":
                if ( this.checkable( element ) ) {
                    return this.findByName( element.name ).filter( ":checked" ).length;
                }
            }
            return value.length;
        },

也可以使用函数完成过滤

使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。

例子-函数过滤

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

正则判断元素

判断元素是单选框还是复选框，正则思想在平时封装中也可以使用

checkable: function( element ) {
            return ( /radio|checkbox/i ).test( element.type );
        }

jQuery.on

用法一
jQueryObject.on( events [, selector ] [, data ], handler )

用法二
jQueryObject.on( eventsMap [, selector ] [, data ] )

参数

events String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如”click”、”focus
click”、”keydown.myPlugin”。
eventsMap Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector 可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler Function类型指定的事件处理函数。

参考：Query.on() 函数详解

formnovalidate

formnovalidate 属性覆盖 form 元素的 novalidate 属性。
如果使用该属性，则提交表单时按钮不会执行验证过程。
该属性适用于 form以及以下类型的 input：text, search, url, telephone, email, password, date pickers, range 以及 color。

jQuery.data

使用jQuery.data这个函数可以在指定的的jQuery对象中保存数据
具体的使用方法

例子-jquery-validate.js

// Check if a validator for this form was already created
        var validator = $.data( this[ 0 ], "validator" );
        if ( validator ) {
            return validator;
}

validator = new $.validator( options, this[ 0 ] );
$.data( this[ 0 ], "validator", validator );

上面的jquery-validate.js的一段代码，因为该jquery插件针对与form表单，对于同一个表单如果创建了validator规则则不需要再次创建，不同的表单可以各自创建一个validator对象。这里的this是一个jQuery的form表单对象，使用this[0] 后者this.get（0）获取具体的dom元素，因此 $.data(dom，name,value),需要注意的是第一个参数是js的dom元素。 data还有另外一种使用方式：$ (“#form”).data(name,value)

jQuery插件的几种封装方式

方式一、

(function($){
    var easyValidate = function(option) {
        $$this =  new easyValidate.prototype.init();
        return $$this;
    }
    easyValidate.prototype = {
        init: function () {  //初始化方法，返回init的this对象
            return this;
        }
    }
    easyValidate.prototype.init.prototype = easyValidate.prototype;
    window.easyValidate = easyValidate;
}(jQuery));

这里是一个闭包，外界如果想要访问其中创建的对象，可以在window定义一个对象然后赋予。将easyValidate原型赋予给init原型上，这样生成的init对象（new easyValidate.prototype.init()），可以使用easyValidate原型定义的方法

方式二：在$.fn中扩展

在$.fn中扩展generatePagination函数，提供外部访问

(function($){
    $.fn.generatePagination = function(options) {
    var easyPagination = new $.easyPagination(options);
    }
}(jQuery));

在generatePagination 函数中需要用到闭包内部的封装，因此在jQuery定义一个静态的方法，使用var easyPagination = new $.easyPagination(options);生成对应的对象，以后只要在$.fn.generatePagination 内部使用生成的对象里的封装方法就行了

$.easyPagination = function(options) {
}

在$.easyPagination 中添加成员方法

$.extend($.easyPagination,{
defaultOption: {},
prototype: {
    //定义封装的方法
}
}

defaultOption是添加在easyPagination上，因此是它的类成员属性（对于easyPagination对象都有一个相同的defaultOption默认选项）
在外界可以使用extend来覆盖这里的默认选项，具体代码

this.settings = $.extend({},$.easyPagination.defaultOption,options);

this.settings对于每个不同的easyPagination对象都有各自的配置选项

jQuery插件中的传值方式

闭包中获取外部自定义插件的对象

beginValidate:function($form) {
    var _easyValidate = this
    $form.validate({
        submitHandler: function(form, event) {
            _easyValidate.validate = this;
            return false; //校验成功以后不提交
        }
    })
}

beginValidate是easyValidate插件的对象中的一个成员方法，this代表这个插件的一个对象，将它赋给_easyValidate，这里这么做是为了在submitHandler得到这个插件对象并将jquery-validate的对象存放到easyValidate对象的成员属性validate 上(submitHandler由jquery-validate插件源码某个地方回调，采用的是submitHandler.call的方式，第一个参数就是jquery-validate的对象，在submitHandler函数内可以使用this引用到这个对象)

在一些回调函数中获取外部的插件对象

jquery-form.js提供了一个ajaxSubmit的提交方式，可以提供context 更改回调函数this的对象。
如下代码

easyAjaxForm: function(form,url,data,callback,resetForm,beforeSubmit) {  //Post请求 获取form的全部元素作为querying字符串
            var $context = this;  //上下文,提供回调函数使用,这样callback函数内的this就是
            $(form).ajaxSubmit({
                context:$context,
                url:url,
                data:data, //额外的数据（表单提交会将form所有元素值传递后台，这里可以额外添加其他值）
                beforeSubmit:beforeSubmit,  //一般用于表单校验，返回false则中断,
                resetForm: resetForm, //重置表单内容  true or false
                success : callback //成功以后的回函数
            });
        }

jquery.form.js调用回调函数方式

var context = options.context || this ;
callbacks[i].apply(context, [data, status, xhr || $form, $form]);

使用apply或者call就可以更改callback回调函数的this对象，以便在回调函数中使用this引用自己想要的对象获取对象内容获取执行对象的其他方法

通过call,apply方法传值

将想要传递的对象放到call，apply方法的第一个参数上，这样做以后可以在执行对应方法时使用this获取传递过去的对象

$.data传值

使用data也可以传值，只要在指定的jQuery使用data保存内容即可

closest

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

toggleClass

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

$(selector).toggleClass(class,switch)

class
必需。规定添加或移除 class 的指定元素。
如需规定若干 class，请使用空格来分隔类名。
switch 可选。布尔值。规定是否添加或移除 class。

$.proxy()

返回一个新的函数，每个函数执行是有一个上下文this，它是指向调用当前函数的对象，比如可能是window，也可能是这个函数所属的对象。使用$.proxy一个作用就是可以更改这个上下文，例如语法

$(selector).proxy(function,context)

function就是要执行的函数，context就是函数执行的this代表的对象，context可以随意指定

还存在另外一个语法

$(selector).proxy(context,name)

$("").click(function(){
    //这里的this指向$("")这个元素的dom对象
});

使用$.proxy可以更改this的值，如下面的例子

$(document).ready(function(){
  var objPerson = {
    name: "John Doe",
    age: 32,
    test: function(){ //这里this变成了objPerson而不是dom对象
      $("p").after("Name: " + this.name + "<br> Age: " + this.age);
    }
  };
  $("button").click($.proxy(objPerson,"test"));
});