jQuery基础之一些简单使用

来源：互联网发布：医院数据质控报告编辑：程序博客网时间：2024/06/04 01:28

前言

记录了在学习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"));});

0 0