- 浏览: 323243 次
- 性别:
- 来自: 南昌
文章分类
最新评论
-
j_bird:
你好,想探讨下滑动窗口是怎么计算的,一条群发短信发出去,滑动窗 ...
协议研发 中移动CMPP2.0协议API -
andyliulin:
楼主,现在的magicode 生成器工具的 官网,http: ...
Mgicode 生成器正式发布 -
huazai_wow:
楼主 你只是分析了 在jquery 中 有使用到 jQu ...
jquery event trigger 分析 -
dengkanghua:
CMPP2.0中出现流量控制错误是什么引起的。有什么解决办法吗 ...
协议研发 中移动CMPP2.0协议API -
JohnHust:
[flash=200,200][/flash][url][/u ...
Jquery源码分析(一)
/** * author:prk * date:2008-08-04 * comment:comment for selector of jQuery * */ var chars = jQuery.browser.safari && parseInt(jQuery.browser.version) < 417 ? "(?:[\\w*_-]|\\\\.)" : "(?:[\\w\u0128-\uFFFF*_-]|\\\\.)", quickChild = new RegExp("^>\\s*(" + chars + "+)"), quickID = new RegExp("^(" + chars + "+)(#)(" + chars + "+)"), // ^((?:[\\w*_-]|\\\\.))(#)((?:[\\w*_-]|\\\\.)) quickClass = new RegExp("^([#.]?)(" + chars + "*)");// ^([#.]?)((?:[\\w*_-]|\\\\.)*) jQuery.extend( { expr : { "" : function(a, i, m) { return m[2] == "*" || jQuery.nodeName(a, m[2]); }, "#" : function(a, i, m) { return a.getAttribute("id") == m[2]; }, ":" : { // Position Checks lt : function(a, i, m) { return i < m[3] - 0; }, gt : function(a, i, m) { return i > m[3] - 0; }, nth : function(a, i, m) { return m[3] - 0 == i; }, eq : function(a, i, m) { return m[3] - 0 == i; }, first : function(a, i) { return i == 0; }, last : function(a, i, m, r) { return i == r.length - 1; }, even : function(a, i) { return i % 2 == 0; }, odd : function(a, i) { return i % 2; }, // Child Checks "first-child" : function(a) { return a.parentNode.getElementsByTagName("*")[0] == a; }, "last-child" : function(a) { return jQuery.nth(a.parentNode.lastChild, 1, "previousSibling") == a; }, "only-child" : function(a) { return !jQuery.nth(a.parentNode.lastChild, 2, "previousSibling"); }, // Parent Checks parent : function(a) { return a.firstChild; }, empty : function(a) { return !a.firstChild; }, // Text Check contains : function(a, i, m) { return (a.textContent || a.innerText || jQuery(a).text() || "") .indexOf(m[3]) >= 0; }, // Visibility visible : function(a) { return "hidden" != a.type && jQuery.css(a, "display") != "none" && jQuery.css(a, "visibility") != "hidden"; }, hidden : function(a) { return "hidden" == a.type || jQuery.css(a, "display") == "none" || jQuery.css(a, "visibility") == "hidden"; }, // Form attributes enabled : function(a) { return !a.disabled; }, disabled : function(a) { return a.disabled; }, checked : function(a) { return a.checked; }, selected : function(a) { return a.selected || jQuery.attr(a, "selected"); }, // Form elements text : function(a) { return "text" == a.type; }, radio : function(a) { return "radio" == a.type; }, checkbox : function(a) { return "checkbox" == a.type; }, file : function(a) { return "file" == a.type; }, password : function(a) { return "password" == a.type; }, submit : function(a) { return "submit" == a.type; }, image : function(a) { return "image" == a.type; }, reset : function(a) { return "reset" == a.type; }, button : function(a) { return "button" == a.type || jQuery.nodeName(a, "button"); }, input : function(a) { return /input|select|textarea|button/i.test(a.nodeName); }, // :has() has : function(a, i, m) { return jQuery.find(m[3], a).length; }, // :header header : function(a) { return /h\d/i.test(a.nodeName); }, // :animated animated : function(a) { return jQuery.grep(jQuery.timers, function(fn) { return a == fn.elem; }).length; } } }, // The regular expressions that power the parsing engine parse : [ // Match: [@value='test'], [@foo] /^(\[) *@?([\w:-]+) *([!*$^~=]*) *('?"?)(.*?)\4 *\]/, // Match: :contains('foo') /^(:)([\w-]+)\("?'?(.*?(\(.*?\))?[^(]*?)"?'?\)/, // Match: :even, :last-child, #id, .class new RegExp("^([:.#]*)(" + chars + "+)")], multiFilter : function(expr, elems, not) { var old, cur = []; while (expr && expr != old) {// 存在且改变 old = expr; var f = jQuery.filter(expr, elems, not); expr = f.t.replace(/^\s*,\s*/, ""); cur = not ? elems = f.r : jQuery.merge(cur, f.r); } return cur; }, find : function(t, context) { if (typeof t != "string") return [t];// 快速处理非字符表达式 if (context && context.nodeType != 1 && context.nodeType != 9) return [];// 确保context是DOM元素或document context = context || document;// 缺省的context // 初始化,ret:result, done:已经完成,last:上一次的t,nodeName:节点名,如p var ret = [context], done = [], last, nodeName; //这里就是把复合选择器的字符串从左到右取最小单元的选择进行分析操作 //分析操作完之后就这个分析过的字符串部分给删除, //然后循环分析接下来的剩余的部分。直到字符串为空。 //这里的最小单元指如#id,~F(+F,>F),.class,[id='xx'],F,:last()之类 while (t && last != t) {// t存在,且变化 var r = []; // ret的tempValue last = t; // last:上一次的t t = jQuery.trim(t);// 去首尾空格 var foundToken = false, re = quickChild, // 以>开头的regexp m = re.exec(t); //这一部分处理了>,+,~的元素选择器。当然有的后代,有的兄弟选择的。 if (m) {// 首先判断是不是以>开头,因为每次处理都处理都删除分析过的字符串部分 1 //这里可以看作是>作为找到tagName元素的子节点们的标记 nodeName = m[1].toUpperCase();//tagName //在结果集中(第一次是默认是给定的context)找到满足的tagName元素的所有子节点。 //两个循环,第一是对结果集中每个元素进行,第二个是对每个元素中每个子元素节点。 //找到结果集中所有的元素的所有子元素的集合。 for (var i = 0;ret[i]; i++) for (var c = ret[i].firstChild;c; c = c.nextSibling) if (c.nodeType == 1 && (nodeName == "*" || c.nodeName.toUpperCase() == nodeName)) r.push(c); ret = r; // 现在找到的所有元素都是结果集 t = t.replace(re, "");// remove已经处理过的字符串部分 //对于E (F,>F,+F etc)的形式,这里跳过后面的代码又回到while处执行。 //但是在while处之后会把这个空格去掉。好像没有进行操作。这里变化了是ret。 //无论后面是怎样的最小单元选择器,都是要根据这个个ret中的元素来进行操作。 //如果是tagName,那么就是转4处执行ret[i].getElementsByTagName(). //如果是>tagName,就执行1处的代码,其它的省略, //可见每个最小单元之后都可以是任意的空格分隔。 if (t.indexOf(" ") == 0)continue; foundToken = true;// 找到标识 } else {// 第二判断是不是以+~开头 2 re = /^([>+~])\s*(\w*)/i; if ((m = re.exec(t)) != null) {// 以+~开头的 r = []; var merge = {}; nodeName = m[2].toUpperCase();// 节点名 m = m[1];// 符号,如+,~ // 如果selector字符串的匹配+或~(子元素),在结果集中所有元素中找到其兄弟元素节点。 //不同的+找的是后续的第一个兄弟元素,而~是找到所有的后续的兄弟元素节点。 //之后把找到的所有的元素放到结果集合中。 for (var j = 0, rl = ret.length;j < rl; j++) { // 把~和+的操作统一在一起进行处理 var n = (m == "~" || m == "+" ? ret[j].nextSibling: ret[j].firstChild); for (;n; n = n.nextSibling) if (n.nodeType == 1) {// 保证节点是元素类型 var id = jQuery.data(n);// 为n元素生成全局唯一的id if (m == "~" && merge[id])// 保证ret中元素不重复 break;// nextSibling会循环到第一个节点? if (!nodeName|| n.nodeName.toUpperCase() == nodeName) { if (m == "~")// 找到元素保存起来 merge[id] = true; r.push(n); } if (m == "+")// 直接后续兄弟节点,只进行一次操作。 break; } } ret = r;// 找到的所有的元素放到结果集合中。 t = jQuery.trim(t.replace(re, "")); foundToken = true; } } //// 不是以>~+开头的或者说除去已经分析过的字符,接下来的字符是不是>~+开头 if (t && !foundToken) { //这里的意思是在开始的位置找到,号,说明一个selector已经完成了,那么 //结果集就要存到已经完成的集合中。结果集也应该初如化。 if (!t.indexOf(",")) { //说明运行到这里的时候,还是单个selector的字符串分析是刚刚开始 //因为>~+不可能得到ret[0]元素等于元素的自身。如果等于的话, //那就清除出ret,因为接下来就要把ret结果集中的元素存入done中 if (context == ret[0]) ret.shift(); done = jQuery.merge(done, ret);// ret的其它元素放入done r = ret = [context];// 重新初始化 //把,采用空格代替。 t = " " + t.substr(1, t.length); } else { // 说明这一个selector部分还没有完成,同时还没有找到元素 // 或者是 >F的后面用空格来分隔。 //* qId:^((?:[\w*_-]|\.)+)(#)((?:[\w*_-]|\.)+) // * qclass:^([#.]?)((?:[\\w*_-]|\.)*) var re2 = quickID;// 如(.)nodeName#idName var m = re2.exec(t);// 找到第一个相配的 if (m) { m = [0, m[2], m[3], m[1]];// m=[0,#,idName,nodeName] } else { re2 = quickClass;// #nodeName,.className m = re2.exec(t);// m=[all,#,idName] } m[2] = m[2].replace(/\\/g, "");// 去除转义字符 //取数组的最后一个元素,其实就是为了取到是不是为document, //因为只有document才有getElementById,为什么不直接采用 //document呢?难道document的查找会比先根据element. //getElementsByTagName找到元素下面的tagname的相符的 //集合然后采用id属性去判断对比来得更慢吗?不一定?对于大的Dom树, //而element的范围又很小的话,可能会慢一些。 //不过由于这里还要通过属性选择器来进行验证进行验证,一般来说 //element.getElementsByTagName会快一点。 var elem = ret[ret.length - 1]; if (m[1] == "#" && elem && elem.getElementById && !jQuery.isXMLDoc(elem)) { var oid = elem.getElementById(m[2]); // 回测元素的ID的确存在,在IE中会取name属性的值,同时在form 元素中 // 会选中在form中元素的name属性为id的元素。 if ((jQuery.browser.msie || jQuery.browser.opera) && oid && typeof oid.id == "string" && oid.id != m[2]) //通过属性选择器来进行验证。 oid = jQuery('[@id="' + m[2] + '"]', elem)[0]; // 回测元素的node Name是否相同,如div#foo,可以提交效率 ret = r = oid && (!m[3] || jQuery.nodeName(oid, m[3])) ? [oid] : []; } else { //这里处理了#id,.class tagName,div#id四种形式 //这里我们还可以看出E F形式。并没有特殊的处理。就是采用了 //E.getElementsByTagName(F)就可以了。 //这个就能取后元素的所有后代为F和F的元素节点。 //和F使用是统一的起来。因为E都是结果集。 for (var i = 0;ret[i]; i++) { //因为m有两种情况:[0,#,idName,nodeName]、[all,#/.,idName/class/tagName] //这里就是根据这两种情况来取得tagName,m[1] == "#" && m[3] //为真,说明是第一种,取nodeName。如果m[1] == "#" && m[3]为假 //说明m[1] <> "#"||!m[3],而m[1] != ""说明只能是第二个数组中的.或# //说明了对于#nodeName,.className采用element.getElementsByTagName(*). //当m[1] == "",说明是一个E 元素选择器,它不带任何的前缀。如:p。这个时候 //m[2]是tagName. //m[0] == "" ,只能指第二个数组中的。它=="",说明没有找到符合qclass的regExp. //其它的情况都不会为"",它为"",!m[1],!m[2]也都为true. var tag = (m[1] == "#" && m[3] ? m[3] : (m[1] != "" || m[0] == "" ? "*" : m[2]));// 分情况取tagName //*的情况下,对于object标签转换为param标签进行操作。 if (tag == "*"&& ret[i].nodeName.toLowerCase() == "object") tag = "param";// Handle IE7 being really dumb about <object>s //把结果集合中第一个元素的getElementsByTagName存入到临时的结果集中。 r = jQuery.merge(r, ret[i].getElementsByTagName(tag)); } //class选择器的话,就根据class属性在找到结果集合中过滤 if (m[1] == ".") r = jQuery.classFilter(r, m[2]); //id选择器的话,就根据id属性在找到结果集合中过滤 if (m[1] == "#") { var tmp = []; for (var i = 0;r[i]; i++) if (r[i].getAttribute("id") == m[2]) { tmp = [r[i]]; break; } r = tmp; } ret = r; } t = t.replace(re2, ""); } } //这个时候已经找到结果的集合,对于如CSS Selector为:hidden的属性筛选器, //它的集合就是context的下面的所有元素节点。也就是说上面的 //代码无论如何都能找到元素的集合。这个集合可能是>/+~ F //或#id,.class tagName,div#id,对于不满足这些条件的,就采用 //context.getElementsByTagName(*)要取得其下所有的元素 //确保接下来的过滤(筛选) if (t) {// 根据余下的selector,对找到的r集合中的元素进行过滤 var val = jQuery.filter(t, r); ret = r = val.r; t = jQuery.trim(val.t);// 去首尾空格 } } //如果还会有t存在说明一个问题:last == t //也就是上一次的过程中没有进行成功的解析一个最小单元的选择器 //原因是输入的 t 字符串有语法上的错误。如果是采用,分隔的多选择器 //那么就是当前及之后的选择器不分析。完成的done就是之前的结果集。 //觉得这样处理不好,很多时间我们都会写错CSS selectror,不报错, //对于调试发现问题特难。 if (t) ret = []; //出现这种情况说明运行到这里的时候,还是单个selector的字符串分析是刚刚开始 //如果等于的话,那就清除出ret,因为接下来就要把ret结果集中的元素存入done中 if (ret && context == ret[0]) ret.shift();// 去掉根上下文 done = jQuery.merge(done, ret);// 合并 return done; }, // 找到r中element中的className中含有m 或不含有的所有的元素 classFilter : function(r, m, not) { m = " " + m + " "; var tmp = []; for (var i = 0;r[i]; i++) { var pass = (" " + r[i].className + " ").indexOf(m) >= 0; if (!not && pass || not && !pass) tmp.push(r[i]); } return tmp; }, //根据CSS selector表达式查找集合中满足该表达式的所有元素 //还可以根据not来指定不满足CSS selector表达式元素集 filter : function(t, r, not) { var last; while (t && t != last) {// t存在,且改变 last = t; // Match: [@value='test'], [@foo] // 1、^(\[) *@?([\w:-]+) *([!*$^~=]*) *('?"?)(.*?)\4 *\]/, // Match: :contains('foo') // 2、^(:)([\w-]+)\("?'?(.*?(\(.*?\))?[^(]*?)"?'?\)/, // Match: :even, :last-child, #id, .class // 3、new RegExp("^([:.#]*)(" + chars + "+)")], //这里可以看出我们直接调用filter的时候的selector如不是筛选器的话, //那就不进行筛选了,这里的selector语法如[@value='test'], [@foo]、 //:contains('foo'),:even, :last-child, #id, .class的形式 //可以是上面这几种形式的组合,但不能包括元素选择器。 //而且复合的形式中间不能采用空格隔开,如[@value='test']#id.class可行的。 var p = jQuery.parse, m; for (var i = 0;p[i]; i++) {// 找到与jQuery.parse中regexp相配的 m = p[i].exec(t); if (m) { t = t.substring(m[0].length);//删除处理过的字符部分 m[2] = m[2].replace(/\\/g, "");// 有可能会有没有转换的\去掉 break; } } // 与上面三种的regexp都不相配 if (!m) break; //处理 :not(.class)的形式,返回集合中不包含.class的其它的元素 if (m[1] == ":" && m[2] == "not") // 性能上优化 m[3]是.class经常出现 r = isSimple.test(m[3])// isSimple = /^.[^:#\[\.]*$/ ? jQuery.filter(m[3], r, true).r: jQuery(r).not(m[3]); //处理.class的过滤。只要看看m[2]这个class是不是被集合中元素的class包含。 else if (m[1] == ".")// 性能上优化考虑 r = jQuery.classFilter(r, m[2], not); //处理属性过滤。如[@value='test']形式的属性选择 else if (m[1] == "[") { var tmp = [], type = m[3];// 符号,如= for (var i = 0, rl = r.length;i < rl; i++) { //jQuery.props[m[2]]进行tag中属性名和对应的元素的属性名转换, //因为tag中属性名是元素中简写,z取到 元素的属性值 var a = r[i], z = a[jQuery.props[m[2]] || m[2]]; //直接取元素的属性值,没有取到,说明有的浏览器不支持这种方法 //进一步尝试采用jQuery.attr来进行非标准的兼容取属性值。 //就算是取到了值,但对于属性名为style|href|src|selected, //它们不能直接取值,要进行特殊的处理,这个在jQuery.attr进行。 //其实这里可以直接采用jQuery.attr(a, m[2]),一步到位。 if (z == null || /style|href|src|selected/.test(m[2])) z = jQuery.attr(a, m[2]) || '';// 几个特殊的处理 //如果属性选择器满足这[foo],[foo=aa][foo!=aa][foo^=aa][foo$=aa][foo~=aa] //这几种方式之一,这个元素就可能通过。即满足条件。m[5]属性值。 if ( (type == "" && !!z//[foo] || type == "=" && z == m[5]//[foo=aa] || type == "!=" && z != m[5]//[foo!=aa] || type == "^=" && z&& !z.indexOf(m[5])//[foo^=aa] || type == "$=" && z.substr(z.length - m[5].length) == m[5]//[foo$=aa] || (type == "*=" || type == "~=")&& z.indexOf(m[5]) >= 0//[foo~=aa] ) ^ not) tmp.push(a); } r = tmp; } //处理:nth-child(n+1)。其实这里也改变了结果集, //不过这里是采用的是间接引用的方式,只要知道元素就可以了, //不需要dom树去查找。因为它要解析参数中的表达式 else if (m[1] == ":" && m[2] == "nth-child") {// 性能考量 var merge = {}, tmp = [], // 分析:nth-child(n+1)中的参数,这里支持 //'even', 'odd', '5', '2n', '3n+2', '4n-1', '-n+6'几种形式 //test[1]="-或空",test[2]="n前面的数或空",test[3]="n后面的数或空" //这样把参数分成三个部分:1是负号的处理,2是xn中的x处理,3是n-x中-x的处理 //3中的是带有符号的。也就是+或-。 test = /(-?)(\d*)n((?:\+|-)?\d*)/.exec(m[3] == "even" && "2n" || m[3] == "odd" && "2n+1" || !/\D/.test(m[3]) && "0n+" + m[3] || m[3]), // 计算(first)n+(last) first = (test[1] + (test[2] || 1)) - 0, last = test[3] - 0; //找到符合(first)n+(last)表达式的所有子元素 for (var i = 0, rl = r.length;i < rl; i++) { var node = r[i], parentNode = node.parentNode, id = jQuery.data(parentNode);//为该元素parentNode分配了一个全局的id if (!merge[id]) {// 为元素的每个子节点标上顺序号,作了不重复标识 var c = 1; for (var n = parentNode.firstChild;n; n = n.nextSibling) if (n.nodeType == 1)n.nodeIndex = c++; merge[id] = true; } var add = false;//初始化add的标记 //常数的形式,如1,2等等,当然还要判断元素的序号和这个数是否相等。 if (first == 0) {// 0不能作除数 if (node.nodeIndex == last) add = true; } // 处理3n+2这种形式同时表达式要大于0 //当前的子节点的序号要满足两个条件: //1、其序号进行first求余的结果=last. //2、其序号要大于last。对于-n的形式,要大于-last. else if ((node.nodeIndex - last) % first == 0 && (node.nodeIndex - last) / first >= 0) add = true; if (add ^ not) tmp.push(node); } r = tmp; } else {// 根据m[1]m[2]在Query.expr找到对应的处理函数 var fn = jQuery.expr[m[1]]; //支持一个符号(如:last)后的方法名与函数的对应 if (typeof fn == "object") fn = fn[m[2]]; //支持更简短的string来代替jQuery.expr中的funciton。 //这里没有用到。 if (typeof fn == "string") fn = eval("false||function(a,i){return " + fn + ";}"); // 执行处理函数fn过滤。对于r中每个元素,如果fn返回的结果为true,保留下来。 r = jQuery.grep(r, function(elem, i) { return fn(elem, i, m, r); }, not); } } // Return an array of filtered elements (r) // and the modified expression string (t) return { r : r, t : t }; }, //递归取得dir,如,parentNode dir : function(elem, dir) { var matched = [], cur = elem[dir]; while (cur && cur != document) { if (cur.nodeType == 1) matched.push(cur); cur = cur[dir]; } return matched; }, // dir:nextSibling result:deep cur:current. elem :no use nth : function(cur, result, dir, elem) { result = result || 1; var num = 0; for (;cur; cur = cur[dir]) if (cur.nodeType == 1 && ++num == result) break; return cur; }, // 从包含n元素开始的所有后续兄弟,但不包含elem。 sibling : function(n, elem) { var r = []; for (;n; n = n.nextSibling) { if (n.nodeType == 1 && n != elem) r.push(n); } return r; } });
发表评论
-
[转载]jquery.validate.js的基本用法入门
2011-03-10 22:35 2884[转载]jquery.validate.js的基本用法入门 j ... -
使用javascript动态创建SVG对象的问题
2011-01-11 17:18 4745无沙备忘录系列 -平时的一些研究,有时也会颇费功夫,然 ... -
evaluate mxGraph
2010-06-10 16:09 1726To evaluate mxGraph: - Navigate ... -
js中的prototype与constructor
2010-06-09 10:53 2923并且每个函数都有一个默认的prototype属性。 如果这个函 ... -
Jquery1.2.6 源码分析
2008-08-29 00:13 14152jQuery是一个非常优秀的J ... -
jquery fx分析
2008-08-28 19:37 63178 FX分析 prk/彭仁夔 ... -
jqueyr fx源码(修改)
2008-08-28 19:33 2673/* * author:prk date:2008-08-0 ... -
jquery.ajax
2008-08-27 16:50 81157.2 jquery.ajax ... -
jquery event domready
2008-08-26 17:39 41416.3 domReady的处理 ... -
jquery event trigger 分析
2008-08-26 17:37 113786.2.2 trigger ... -
jquery event addEvent 分析
2008-08-26 17:36 111976.2 事件的处理 ... -
jquery event 封装的源源分析
2008-08-26 17:35 46036.Event分析 ... -
jquery position
2008-08-25 16:34 87825.2.3 position ... -
jquery wrap
2008-08-25 08:12 44805.3.5 wrap ... -
jquery element content
2008-08-25 08:11 43495.4dom元素的内容 ... -
jquery class
2008-08-22 23:18 53715.1.2 Class prk/彭仁夔 2008- ... -
jquery attr
2008-08-22 23:16 76165 DOM元素 prk/彭仁夔 ... -
CSS selector (jquery的源码分析,修改)
2008-08-21 17:09 44183.3、采用CSS方式查找Dom节点 ... -
如何找到Dom元素
2008-08-20 22:10 28323、如何找到Dom元素 ... -
Jquery源码分析(修改)
2008-08-20 22:07 5784Jquery源码分析 ...
相关推荐
jQuery的核心库已经包含了许多强大的选择器,如ID选择器 (#id)、类选择器 (.class) 和元素选择器 (tagname),但Selector.js插件进一步增强了这些功能,使开发者能够更高效地选取DOM元素,实现更加复杂的页面交互。...
6. **CSS操作**:Selector也支持修改元素的样式,例如`css()`方法用于设置或获取CSS属性,`addClass()`和`removeClass()`则用于添加和移除类名。 7. **动画效果**:尽管Selector体积小巧,但依然提供了一些基本的...
1. DOM操作:jQuery提供了一套简便的API来选择、操作和修改HTML元素。如 `$()` 用于选取元素,`$(selector).html()` 可以获取或设置元素的HTML内容,`$(selector).append()` 可以向元素内部添加内容。 2. 事件处理...
2. **DOM操作**:jQuery提供简便的方法来操作DOM元素,如`$(selector).html()`用于修改元素内容,`$(selector).append()`和`$(selector).prepend()`用于在元素前后插入内容,`$(selector).remove()`用于删除元素。...
本项目"右键菜单 jQuery 易于修改"专注于利用jQuery库来实现一个可定制化的右键菜单系统。下面将详细阐述这个系统的实现原理和关键知识点。 首先,jQuery是一个强大的JavaScript库,它简化了HTML文档遍历、事件处理...
- **DOM操作**:jQuery封装了DOM操作,如`$(selector).html()`, `$(selector).append()`等,使得插入、删除和修改HTML内容更加便捷。 - **事件处理**:通过`.on()`, `.click()`, `.change()`等方法,可以轻松地绑定...
在DOM操作方面,jQuery提供了丰富的API,如`$(selector).html()`用于修改元素的HTML内容,`$(selector).append()`和`.prepend()`用于在元素内部添加内容。事件处理则通过`$(selector).on('event', handler)`进行,...
《jQuery Country Selector:一款高效的国家选择插件》 在当今全球化日益加速的时代,网页应用往往需要集成国家选择功能,以满足不同用户的需求。jQuery Country Selector 正是这样一款专为前端开发者设计的开源...
4. 动画效果:jQuery的动画功能强大,如$(selector).fadeIn()和$(selector).fadeOut()实现淡入淡出效果,$(selector).animate()可以自定义平滑过渡。 二、jQuery进阶 1. Ajax交互:$.ajax()函数是jQuery进行Ajax...
2. **DOM操作**:jQuery简化了DOM元素的操作,包括`$(selector).html()`, `$(selector).append()`, `$(selector).remove()`等方法,使插入、修改和删除HTML内容变得更加容易。 3. **事件处理**:jQuery的事件处理...
2. **DOM操作(DOM Manipulation)**:jQuery提供了一系列方法来创建、修改和删除DOM元素,如`$(selector).append()`用于在元素内部添加内容,`$(selector).remove()`用于删除元素。 3. **事件处理(Event Handling...
可接受的值:任何有效jQuery-selector或布尔值 功能:是否从iframe打印而不是弹出窗口; 可以将jQuery-selector现有iframe作为值 附加/添加 默认: null 可接受的值:任何有效jQuery-selector或HTML文本 功能:在选定...
5. **CSS3兼容**:虽然jQuery主要用于JavaScript,但它也能与CSS3配合使用,如应用CSS3的动画效果,通过`$(selector).css({'property': 'value'})`修改样式。 6. **AJAX请求**:jQuery的`$.ajax()`, `$.get()`, `$....
例如,用jQuery选择元素要比使用原生JavaScript更为简便,一句`$('selector')`就能轻松选取DOM元素。 在"jquery-2.1.4.js"中,包含了完整的jQuery库,提供了所有可用的功能和插件支持。这个版本的jQuery修复了一些...
2. **DOM操作(DOM Manipulation)**:包括`$(selector).html()`, `$(selector).append()`等方法,用于修改元素内容、添加子元素或者删除元素。 3. **事件处理(Events)**:通过`$(selector).on('event', function...
2. **DOM操作**:jQuery提供了一整套API来操作DOM,包括$(selector).html()用于修改元素内容,$(selector).append()和$(selector).prepend()用于在元素前后插入内容,$(selector).remove()用于删除元素。 3. **事件...
- **其他属性调整**: 如`$(selector).datagrid('options', {title: '新标题'})`修改数据网格的标题。 8. **自定义样式**: - **CSS类应用**: 可以通过添加或移除CSS类改变组件的样式,如`$(selector).addClass('...
2. **DOM操作**:jQuery提供了一套强大的DOM(文档对象模型)操作方法,如`$(selector).html()`, `$(selector).append()`, `$(selector).attr()`, 使得添加、删除或修改问卷的元素变得简单。例如,当用户选择一个...
jQuery的核心功能包括选择器(用于选取DOM元素)、DOM操作(添加、删除、修改元素)、事件处理、Ajax请求以及动画效果。然而,这些基础功能可能无法满足所有开发场景,这就催生了jQuery插件的诞生。通过编写或使用...