jQuery基础之一些简单使用
前言
记录了在学习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()方法使用注意细节
插入元素
使用$( "" ) 创建对象设置属性并连接到form表单里面
// Insert a hidden input as a replacement for the missing submit button
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); // 5jQuery.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+"
");
document.write(result1+"
");
输出：false，true对象中使用
var obj={
w:"wen",
j:"jian",
b:"bao"
}
var result=(2 in obj);
var result1=("j" in obj);
document.write(result)+"
";
document.write(result1)+"
";
输出：false,trueFor…In 声明用于对数组或者对象的属性进行循环/迭代操作。
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars) {
document.write(mycars[x] + "
")
}
输出Saab Volvo BMW jQuery.not
not() 从匹配元素集合中删除元素。
语法一
使用selector选择器从集合中删除符合选择器的元素
.not(selector)语法二
从集合中删除一个或多个dom元素
.not(element)语法三
.not(function(index))对于 jQuery 1.4，.not() 方法能够采用函数作为其参数，与 .filter() 方法相同。其函数返回 true 的元素会被排除在过滤集之外；所有其他元素将被包含其中。
例子-语法三
<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">Ili>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">Ali>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1li>
<li class="item-2">2li>
<li class="item-3">3li>
ul>
li>
<li class="item-c">Cli>
ul>
li>
<li class="item-iii">IIIli>
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 + "
Age: " + this.age);
}
};
$("button").click($.proxy(objPerson,"test"));
});