jQuery学习记录
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，可以当成一个最小标签，比如
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
用来保存已经选中的行，即使按行排序以后，也要保持
返回属性值
返回被选元素的属性值。
语法
1
$(selector).attr(attribute)
参数
attribute 规定要获取其值的属性。
设置属性/值
设置被选元素的属性和值。
语法
1
$(selector).attr(attribute,value)
从带有索引号为 2 的
元素开始选中
元素：
$("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的博客-CSDN博客
xml和json，可以参考
jquery 解析返回的xml和json_QH_JAVA的专栏-CSDN博客
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的博客-CSDN博客_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的翻页导航是一个方法，你可以事先定义一些其他操作，比如：编辑、新增、删除及搜索。也可以增加自定义的函数。导航工具栏是定义到翻页控件上的。定义如下：