jQuery与前端开发实践-优快云博客

本文链接：https://blog.youkuaiyun.com/newbaby2012/article/details/117876920

Web前端jQuery入门视频教程_带你玩转前端利器jQuery_哔哩哔哩_bilibili

$.extend($.jgrid,{ 这里面的$就算是jQuery对象，不然不能用.接后面的属性

教学视频

参考菜鸟教程过了一遍: jQuery 教程 | 菜鸟教程能实现的效果有

slice

用来把有length的对象变成数组Array

exec

JS exec()方法：执行正则表达式匹配

closest

菜鸟教程在线编辑器

Jquery加载顺序，以及ready

ready其实就是会把$function($) {}这种函数声明，放到deffered的callback[]数组中

在core.js的DomLoaded时间发生以后，因为jquery之前已经加了EventListener，所以会回调_deffered对象的resolvedWith函数，这个函数通过

while(callback[0]) {

callback.unshift().apply(context, args)

}

来循环遍历callback数组，并执行对应的方法

JQuery的extend

其实extend是jQuery对象的一个属性，不过可以通过this指向自己，来给extend添加function：

target['funcname'] = function;

可以这么说，就是给extend这个对象添加一个属性，而extend又是jQuery的一个属性；extend的属性，可以是公用的工具类函数，比如parseDate，parseInt

deffered

一个延迟对象，主要用来添加回调函数

比如readyList就是deffered对象，deffered有很多方法，done，resolveWith等，done是用来在其他时间结束以后回调的

$.ajax("test.html")

　　.done(function(){ alert("哈哈，成功了！"); })

　　.fail(function(){ alert("出错啦！"); });

参考 jQuery的deferred对象详解 - 阮一峰的网络日志

iframe

其实就是内嵌一个网页，有点像bilibili的内嵌视频

菜鸟教程在线编辑器

ready

$(document).ready(function() {
    // ...代码...
})
//document ready 简写
$(function() {
    // ...代码...
})

serialize

菜鸟教程在线编辑器

focus

获取焦点时，发生事件

菜鸟教程在线编辑器

offset

把一个元素移动一定位置

菜鸟教程在线编辑器

prompt

提示弹框，其实是window的方法

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_prompt

bind和live的区别

都是绑定一个onclick等事件，但是live后面添加也会触发，参考

jquery bind和live区别【附源码】_深圳市贝福科技_51CTO博客

常用功能参考

jQuery设计思想 - 阮一峰的网络日志

attr和prop都是获取相对的属性

setTimeout

setTimeout(要执行的代码, 等待的毫秒数)
setTimeout(JavaScript 函数, 等待的毫秒数)

clearTimeout

停止上面的计时

和clearInterval的区别，timeout是只执行一次，而interval是每隔多久就执行一次

Combobox

jquery的下拉框插件

removeData

.removeData() : 在元素上移除绑定的数据 - jQuery API 中文文档 | jQuery 中文网

off

jQuery off() 方法 | 菜鸟教程

validateEngine的校验

所有属性如下：

_validityProp: {
			 "required": "value-missing",
			 "custom": "custom-error",
			 "groupRequired": "value-missing",
			 "ajax": "custom-error",
			 "minSize": "range-underflow",
			 "maxSize": "range-overflow",
			 "min": "range-underflow",
			 "max": "range-overflow",
			 "past": "type-mismatch",
			 "future": "type-mismatch",
			 "dateRange": "type-mismatch",
			 "dateTimeRange": "type-mismatch",
			 "maxCheckbox": "range-overflow",
			 "minCheckbox": "range-underflow",
			 "equals": "pattern-mismatch",
			 "funcCall": "custom-error",
			 "funcCallRequired": "custom-error",
			 "creditCard": "pattern-mismatch",
			 "condRequired": "value-missing"
		 }

funcCallRequired

if ((fieldType == "radio" || fieldType == "checkbox") && form.find("input[name='" + fieldName + "']").length > 1) { 单选或者多选时，找到name为fieldName的元素

field.is(":hidden")

隐藏和显示

hide show

淡入淡出

fadein fadeout

滑动

slideDown slideUp

自定义动画

animate()

停止动画

stop

完成某指定动作后执行某回调函数

callback：

例子

$("button").click(function()

{ $("p").hide("slow",function(){ alert("段落现在被隐藏了"); }); })

;

链

就是能先后执行一系列动作

遍历DOM

祖先 parent parents

后代 children

同胞 silibing

Ajax

$.load(URL,data,callback)

$.get(URL,callback)

$.post(URL,data,callback);

jQuery的new对象

jQuery = function( selector, context ) {

		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)
		return new jQuery.fn.init( selector, context );
	};

每次调用$('body')时，其实是jQuery('body')，然后就调用了上面的jQuery.fn(也即jQuery的prototype·)的init方法，而init方法其实就是，根据selector来返回不同对象：

init = jQuery.fn.init = function( selector, context, root ) {
		var match, elem;

		// HANDLE: $(""), $(null), $(undefined), $(false)
		if ( !selector ) {
			return this;
		}

		// Method init() accepts an alternate rootjQuery
		// so migrate can support jQuery.sub (gh-2101)
		root = root || rootjQuery;

		// HANDLE: $(DOMElement)
		if ( selector.nodeType ) {
			this[ 0 ] = selector;
			this.length = 1;
			return this;

		// HANDLE: $(function)
		// Shortcut for document ready
		} else if ( typeof selector === "function" ) {
			return root.ready !== undefined ?
				root.ready( selector ) :

				// Execute immediately if ready is not present
				selector( jQuery );

		} else {

			// Handle obvious HTML strings
			match = selector + "";
			if ( isObviousHtml( match ) ) {

				// Assume that strings that start and end with <> are HTML and skip
				// the regex check. This also handles browser-supported HTML wrappers
				// like TrustedHTML.
				match = [ null, selector, null ];

			// Handle HTML strings or selectors
			} else if ( typeof selector === "string" ) {
				match = rquickExpr.exec( selector );
			} else {
				return jQuery.makeArray( selector, this );
			}

			// Match html or make sure no context is specified for #id
			// Note: match[1] may be a string or a TrustedHTML wrapper
			if ( match && ( match[ 1 ] || !context ) ) {

				// HANDLE: $(html) -> $(array)
				if ( match[ 1 ] ) {
					context = context instanceof jQuery ? context[ 0 ] : context;

					// Option to run scripts is true for back-compat
					// Intentionally let the error be thrown if parseHTML is not present
					jQuery.merge( this, jQuery.parseHTML(
						match[ 1 ],
						context && context.nodeType ? context.ownerDocument || context : document,
						true
					) );

					// HANDLE: $(html, props)
					if ( rsingleTag.test( match[ 1 ] ) && jQuery.isPlainObject( context ) ) {
						for ( match in context ) {

							// Properties of context are called as methods if possible
							if ( typeof this[ match ] === "function" ) {
								this[ match ]( context[ match ] );

							// ...and otherwise set as attributes
							} else {
								this.attr( match, context[ match ] );
							}
						}
					}

					return this;

				// HANDLE: $(#id)
				} else {
					elem = document.getElementById( match[ 2 ] );

					if ( elem ) {

						// Inject the element directly into the jQuery object
						this[ 0 ] = elem;
						this.length = 1;
					}
					return this;
				}

			// HANDLE: $(expr) & $(expr, $(...))
			} else if ( !context || context.jquery ) {
				return ( context || root ).find( selector );

			// HANDLE: $(expr, context)
			// (which is just equivalent to: $(context).find(expr)
			} else {
				return this.constructor( context ).find( selector );
			}
		}

	}

jQuery.fn

jQuery.fn就是jquery的prototype的简称，prototype其实就是一个类的属性，类似于java类的字段，不过js的属性既可以是function，也可以是字段, 当new一个对象以后，可以使用prototype的方法，可以看看源码中的prototype定义了哪些可以直接用的function:

jQuery.fn = jQuery.prototype = {

	// The current version of jQuery being used
	jquery: version,

	constructor: jQuery,

	// The default length of a jQuery object is 0
	length: 0,

	toArray: function() {
		return slice.call( this );
	},

	// Get the Nth element in the matched element set OR
	// Get the whole matched element set as a clean array
	get: function( num ) {

		// Return all the elements in a clean array
		if ( num == null ) {
			return slice.call( this );
		}

		// Return just the one element from the set
		return num < 0 ? this[ num + this.length ] : this[ num ];
	},

	// Take an array of elements and push it onto the stack
	// (returning the new matched element set)
	pushStack: function( elems ) {

		// Build a new jQuery matched element set
		var ret = jQuery.merge( this.constructor(), elems );

		// Add the old object onto the stack (as a reference)
		ret.prevObject = this;

		// Return the newly-formed element set
		return ret;
	},

	// Execute a callback for every element in the matched set.
	each: function( callback ) {
		return jQuery.each( this, callback );
	},

	map: function( callback ) {
		return this.pushStack( jQuery.map( this, function( elem, i ) {
			return callback.call( elem, i, elem );
		} ) );
	},

	slice: function() {
		return this.pushStack( slice.apply( this, arguments ) );
	},

	first: function() {
		return this.eq( 0 );
	},

	last: function() {
		return this.eq( -1 );
	},

	even: function() {
		return this.pushStack( jQuery.grep( this, function( _elem, i ) {
			return ( i + 1 ) % 2;
		} ) );
	},

	odd: function() {
		return this.pushStack( jQuery.grep( this, function( _elem, i ) {
			return i % 2;
		} ) );
	},

	eq: function( i ) {
		var len = this.length,
			j = +i + ( i < 0 ? len : 0 );
		return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
	},

	end: function() {
		return this.prevObject || this.constructor();
	}
}

jQuery.merge 方法

其实就是合并两个数组，[1,2] [3] 合并成[1,2,3]

push.call( ret, arr );

call方法，其实就是对ret，执行ret.push(attr)方法，至于为啥要这么做呢。我也不知道，网上的解释是call会改变this的指向，比如call之前this指向window，call之后this指向ret, 那么为什么不直接ret.push(attr)呢，我的想法是为了报错方便，出错了就知道当前对象(this指向)是什么

documentFragment 文档碎片，一个小document，可以当成一个最小标签，比如<li> </li>

grep方法

就相当于filter方法，callback一般代表一个function

在 JavaScript 中，函数即对象。我们可以将对象作为参数传递给函数吗？答案是“可以”。

这也是为什么callback函数能作为一个对象出现的原因

grep: function( elems, callback, invert ) {
   var callbackInverse,
      matches = [],
      i = 0,
      length = elems.length,
      callbackExpect = !invert;

   // Go through the array, only saving the items
   // that pass the validator function
   for ( ; i < length; i++ ) {
      callbackInverse = !callback( elems[ i ], i );
      if ( callbackInverse !== callbackExpect ) {
         matches.push( elems[ i ] );
      }
   }

   return matches;
}

map方法

传入一个数组，返回一个新的被处理过的数组

map: function( elems, callback, arg ) {
		var length, value,
			i = 0,
			ret = [];

		// Go through the array, translating each of the items to their new values
		if ( isArrayLike( elems ) ) {
			length = elems.length;
			for ( ; i < length; i++ ) {
				value = callback( elems[ i ], i, arg );

				if ( value != null ) {
					ret.push( value );
				}
			}

		// Go through every key on the object,
		} else {
			for ( i in elems ) {
                //回调方法，elem[i]作为参数传入回调方法
				value = callback( elems[ i ], i, arg );

				if ( value != null ) {
					ret.push( value );
				}
			}
		}

		// Flatten any nested arrays
		return flat( ret );
	}

现在就是觉得公司的代码：

1. 重复太多，很多东西都没有必要，但是还得复制粘贴

2. 复制时，引用的文件没有修改，很容易导致当前包文件修改以后，比如css文件，没有生效，要试了好几次才知道错在哪，效率低

3. 我是这么想，其实不止index.jsp可以自动生成，其实js内的表单，colName，colModel也可以自动生成，日期也是可以自动生成，甚至BeApi的post请求也可以，甚至怀疑 css也可以自动生成，而在需要修改代码时，只需要修改我们生成器里面的代码，而不用jsp，js，css都去改，觉得这样可能效率高一点，不容易出错

testCell = $testDiv.appendTo("body")
   .find("td")
   .width();

getAccessor : function(obj, expr) {
   var ret,p,prm = [], i;
   if( typeof expr === 'function') { return expr(obj); }
   ret = obj[expr];
   if(ret===undefined) {
      try {
         if ( typeof expr === 'string' ) {
            prm = expr.split('.');
         }
         i = prm.length;
         if( i ) {
            ret = obj;
            while (ret && i--) {
               p = prm.shift();
               ret = ret[p];
            }
         }
      } catch (e) {}
   }
   return ret;
}, 获取某个元素的值，或者调用某个方法

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

dragstart - Web API 接口参考 | MDN

curGbox 应该是当前的box。比如一个div

scrollGrid: function( e ) {
   if(p.scroll) {
      var scrollTop = grid.bDiv.scrollTop;
      if(grid.scrollTop === undefined) { grid.scrollTop = 0; }
      if (scrollTop != grid.scrollTop) {
         grid.scrollTop = scrollTop;
         if (grid.timer) { clearTimeout(grid.timer); }
         grid.timer = setTimeout(grid.populateVisible, p.scrollTimeout);
      }
   }
   grid.hDiv.scrollLeft = grid.bDiv.scrollLeft;
   if(p.footerrow) {
      grid.sDiv.scrollLeft = grid.bDiv.scrollLeft;
   }
   if( e ) { e.stopPropagation(); }
}

滚动屏幕 scrollTop 上下滚动 scrollLeft左右滚动

selectionPreserver : function(ts) {
      var p = ts.p,
      sr = p.selrow, sra = p.selarrrow ? $.makeArray(p.selarrrow) : null,
      left = ts.grid.bDiv.scrollLeft,
      restoreSelection = function() {
         var i;
         p.selrow = null;
         p.selarrrow = [];
         if(p.multiselect && sra && sra.length>0) {
            for(i=0;i<sra.length;i++){
               if (sra[i] != sr) {
                  $(ts).jqGrid("setSelection",sra[i],false, null);
               }
            }
         }
         if (sr) {
            $(ts).jqGrid("setSelection",sr,false,null);
         }
         ts.grid.bDiv.scrollLeft = left;
         $(ts).unbind('.selectionPreserver', restoreSelection);
      };
      $(ts).bind('jqGridGridComplete.selectionPreserver', restoreSelection);
   }
};

用来保存已经选中的行，即使按行排序以后，也要保持

返回属性值

返回被选元素的属性值。

语法

1	`$(selector).attr(attribute)`

参数

attribute 规定要获取其值的属性。

设置属性/值

设置被选元素的属性和值。

语法

1	`$(selector).attr(attribute,value)`

从带有索引号为 2 的 <p> 元素开始选中 <p> 元素：

$("p").slice(2)，就是第二个p元素，到最后

dReader =  ts.p.localReader;

关于localdata和jsondata 以及

关于json：如何从URL显示jqgrid(本地数据有效，URL数据无效) | 码农家园

sorttype

'eq':function(queryObj) {return queryObj.equals;},
'ne':function(queryObj) {return queryObj.notEquals;},
'lt':function(queryObj) {return queryObj.less;},
'le':function(queryObj) {return queryObj.lessOrEquals;},
'gt':function(queryObj) {return queryObj.greater;},
'ge':function(queryObj) {return queryObj.greaterOrEquals;},
'cn':function(queryObj) {return queryObj.contains;},
'nc':function(queryObj,op) {return op === "OR" ? queryObj.orNot().contains : queryObj.andNot().contains;},
'bw':function(queryObj) {return queryObj.startsWith;},
'bn':function(queryObj,op) {return op === "OR" ? queryObj.orNot().startsWith : queryObj.andNot().startsWith;},
'en':function(queryObj,op) {return op === "OR" ? queryObj.orNot().endsWith : queryObj.andNot().endsWith;},
'ew':function(queryObj) {return queryObj.endsWith;},
'ni':function(queryObj,op) {return op === "OR" ? queryObj.orNot().equals : queryObj.andNot().equals;},
'in':function(queryObj) {return queryObj.equals;},
'nu':function(queryObj) {return queryObj.isNull;},
'nn':function(queryObj,op) {return op === "OR" ? queryObj.orNot().isNull : queryObj.andNot().isNull;}

tojLinq？？？？

html方法菜鸟教程在线编辑器

beginReq和endReq。beginReq是在获取数据的开始时调用的，endReq是在获取数据结束时调用的。那么就可以在这两个方法中写显示查询用时的功能。这里的获取数据，应该是调用后端获取数据？

所以beginReq和beforeRequest的区别是??

参考jgGrid扩展显示查询用时_cc_fys的博客-优快云博客

xml和json，可以参考

jquery 解析返回的xml和json_QH_JAVA的专栏-优快云博客

setPager 用来设置page相关

$("#first"+$.jgrid.jqID(tp)+"

if( this.id === 'first'+tp && fp ) { ts.p.page=1; selclick=true;}
if( this.id === 'prev'+tp && pp) { ts.p.page=(cp-1); selclick=true;}
if( this.id === 'next'+tp && np) { ts.p.page=(cp+1); selclick=true;}
if( this.id === 'last'+tp && lp) { ts.p.page=last; selclick=true;}

这几个，对应的就是页数的，首页，上一页，下一页，尾页

jqGridSortCol 这个好像对应的列排序

thead 其实是table head的简称，放在table里面，表示table的头部

each方法 .each() | jQuery API Documentation

其实看了这个就觉得，其实英文文档也不见得那么难，也可能很容易懂

getColumnHeaderIndex = function (th) {
   var i, headers = ts.grid.headers, ci = $.jgrid.getCellIndex(th);
   for (i = 0; i < headers.length; i++) {
      if (th === headers[i].el) {
         ci = i;
         break;
      }
   }
   return ci;
} 其实这个应该就是得到header在第几列。th就是table head简称

createElement

Document.createElement() - Web API 接口参考 | MDN

一般后面接appendChild，比如

tbody = document.createElement("tbody");
this.appendChild(tbody);

document的append，不同于java的append是放在后面，而是嵌到里面，类似于appendChild

getGridParam : function(pName) {
   var $t = this[0];
   if (!$t || !$t.grid) {return;}
   if (!pName) { return $t.p; }
   else {return typeof($t.p[pName]) != "undefined" ? $t.p[pName] : null;}
},
setGridParam : function (newParams){
   return this.each(function(){
      if (this.grid && typeof(newParams) === 'object') {$.extend(true,this.p,newParams);}
   });
},

感觉scrollTop是滚轮的最顶部，scrGrid就是滚动表格，

function scrGrid(iR){
   var ch = $($t.grid.bDiv)[0].clientHeight,
   st = $($t.grid.bDiv)[0].scrollTop,
   rpos = $($t.rows[iR]).position().top,
   rh = $t.rows[iR].clientHeight;
   if(rpos+rh >= ch+st) { $($t.grid.bDiv)[0].scrollTop = rpos-(ch+st)+rh+st; }
   else if(rpos < ch+st) {
      if(rpos < st) {
         $($t.grid.bDiv)[0].scrollTop = rpos;
      }
   }
}

这个应该是在选择了某行的回调函数，到期交割的置灰可以吗？

if( $t.p.onSelectRow && onsr) { $t.p.onSelectRow.call($t, pt.id , stat, e); }

setHeadCheckBox 这个是最前面那个，编号的正方形选择框吗

if(t.p.cellEdit === true) { 这么说，cell还是可以编辑的？不过这也合理

namedItem() method returns the element with the specified ID or name 其实 a.namedItem(‘b’) 就相当于a[b], 那为啥不直接用a[b]

nm 代表name

getRowData : function( rowid ) { 就是得到一行的数据

delRowData 删除一行，会调用

$t.updatepager(true,false);

应该是更新页面

$(this.p.colModel).each(function(i){

....
$("td:eq("+i+") > span:first",ind).html(vl).attr(title);

......

}

jQuery中$()可以有两个参数_bobo_93的博客-优快云博客_jquery 多个参数

在ind中，找到td标签的索引等于i的，并且span的class为first的元素，对找到的所有元素，都将其值改为vl，并且返回修改后的html内容，并返回其标题

addRowData就是添加一行，可以选择位置

before after first last

关于footerData，应该就是添加角标，放在最下一行

https://segmentfault.com/a/1190000020907321

showHideCol : function(colname,show) { 是否显示某一列，主要通过display控制

   $(this.cells[i]).css("display", show);

3103没看

直接到setCell，其实cell是先根据rowid定位到行(ind)：

ind = $t.rows.namedItem(rowid);

然后ind通过pos定位到列，pos其实就是代表第几列：

var tcell = $("td:eq("+pos+")",ind);

$(tcell).html(v).attr(title); 这句看不懂

getCol 关键就两个

val = $.jgrid.htmlDecode($t.rows[i].cells[pos].innerHTML); //获取某一行的那一列的cell

ret.push( val ); //将该cell放进ret数组

setGridParam设置导航栏属性

如果想改变这些设置：

1． jQuery.extend(jQuery.jgrid.defaults,{emptyrecords: "Nothing to display",...});

2． jQuery("#grid_id").jqGrid({

...

pager : '#gridpager',

emptyrecords: "Nothing to display",

...

});

导航栏的属性：

jQuery("#grid_id").setGridParam({rowNum:10}).trigger("reloadGrid");

跟翻页相关的事件只有一个：onPaging

jqGrid的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下：

jQuery学习记录

slice

exec

closest

Jquery加载顺序，以及ready

JQuery的extend

deffered

iframe

ready

serialize

focus

offset

prompt

bind和live的区别

setTimeout

clearTimeout

Combobox

removeData

off

validateEngine的校验

jQuery的new对象

jQuery.fn

jQuery.merge 方法

push.call( ret, arr );

grep方法

map方法

setGridParam设置导航栏属性