|
1 |
jQuery |
1 关于text()，返回选择元素结果集，实际就是该jq obj对象内的html可视内容；
2 关于选择器。大部分时间，都把jQuery() or $()，用作选择器，实际上，配合appendTo()，还可以实现动态创建元素，如
|
1 |
$('<div>I am a div element</div>').appendTo('body'); |
这里创建后，新元素处于body 元素的最后。
3 查看当前jQuery版本号：$.fn.jquery；$().jquery；jQuery.fn.jquery；jQuery().jquery。
4 $在非正常的dom 文档模型下是会出现异常的，所以，建议使用html5的文档模型
|
1 |
<!DOCTYPE html> |
5 何时引入jquery脚本。从1.3起，ready()并不能保证当前所有的css文件都已经被加载，所以，如果使用1.3以后版本的jquery，须在引入脚本前引入所有css文件。
6 关于文档是否准备好，以下三个用法，标明了dom加载状态，主要是由于事件window.onload是否执行的缘故。文档加载完成，并不代表window加载完成。
|
1 2 3 4 5 6 7 8 9 |
jQuery(document).ready(function(){ alert('DOM is ready!'); }); jQuery(function(){ alert('No really, the DOM is ready!'); }); jQuery(function($){ alert('Seriously its ready!'); }); |
所以，在使用的时候，要注意区别，根据实际环境来使用。
7 关于引入脚本的非压缩版本和压缩版本的区别。当开发时，使用非压缩的，有助于调试错误，而生产环境，则使用压缩的，加快页面加载速度。如下：
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> |
8 load()与unload()。当window加载完成时，使用load()执行脚本，当用户离开也即关闭页面是，使用unload()执行脚本。如下：
|
1 2 |
jQuery(window).load(function(){alert('Window already loaded!');}); jQuery(window).unload(function(){alert('Bye now!');}); |
注意，这里的load()和ajax的load()是不同的表现。
9 jquery 对象链。使用完jQuery的一个方法后，返回的依旧是一个jquery对象。
10 匿名函数，jQuery的别名$。如下（不会存在冲突）：
|
1 |
(function($){})(jQuery); |
|
1 |
(function(){})(); |
11 end()的用法。释放距离最近的一个选择器所返回的对象，返回上一级选择器返回的对象。如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
(function($){ $('#list') // Original wrapper set .find('> li') // Destructive method .filter(':last') // Destructive method .addClass('last') .end() // End .filter(':last') .find('ul') // Destructive method .css('background', '#ccc') .find('li:last') // Destructive method .addClass('last') .end() // End .find('li:last') .end() // End .find('ul') .end() // End .find('> li') .find('li') // Back to the orginal $('#list') .append('I am an <li>'); })(jQuery); |
12 jQuery函数的多面性。选择、创建、ready()时间的捷径。如下：
|
1 2 3 4 5 6 7 8 9 10 |
jQuery(function($){ // Pass jQuery a function // Pass jQuery a string of HTML $('<p></p>').appendTo('body'); // Pass jQuery an element reference $(document.createElement('a')).text('jQuery').appendTo('p'); // Pass jQuery a CSS expression $('a:first').attr('href', 'http://www.jquery.com'); // Pass jQuery DOM reference $(document.anchors[0]).attr('jQuery'); }); |
13 this和$(this)的区别。当你的脚本里当前对象唯一时，使用两者皆可。如果使用each()，对象在变化中，则需要使用$(this)来获取动态的当前对象。
14 获取对象集中的某一个顺序元素对象，有三种方法：
|
1 2 3 |
$('a').[0]; $('a').get(0); $('a').eq(0); |
注意，其中，[0]、get(0)返回的为dom对象，而非jQuery对象，而eq(0)则返回jQuery对象，可以继续进行jQuery链操作。
15 元素属性设置。一般使用attr(‘a’, ‘b’)的形式，但是，还可以使用如下方式，只是，只适用于html存在的属性。
|
1 |
$('a')[0].target = '_self' |
1 输入成本，一直是程序员最大的芥蒂，至少我是。所以，把$，或者jQuery换下来，用自己喜欢的名字代替。如下：
|
1 2 3 4 |
(function(){ var j = jQuery.noConflict(); j('body').css('background', 'red'); })(); |
之所以采用匿名函数来执行代码，就是不想对一个项目中其他人，比如html上的$使用操作污染。
2 若要对dom中一个元素集进行相同的操作，那么就是用j().each(function(){}); 或者j.each()。
3 对于元素集选择，jQuery选择器使用document 顺序返回对象，而非选择器写法顺序返回对象。例如：
|
1 2 3 |
(function(){ j('h3, h2, h1, body').get(0).nodeName; //返回 BODY })(); |
4 在笔记1中提到 j(‘a’).eq(0); ，其实等价于 j(‘a:eq(0)’);
5 强大的j().is();，只是，对于判断某个元素是否有某个class，已经有hasClass()，不知道到当初是如何设计这个重复功能的？！
6 定义自己的选择器。除了jQuery提供的:hidden等外，我们可以定义自己的:
|
1 2 3 4 5 6 7 |
(function(){ var j = jQuery.noConflict(); j.expr[':'].yf_flag = function(e){ return j(e).attr('yf_flag') === 'oy'; } j(':yf_flag').length; })(); |
只要页面中有自定义的html element 属性（有时候太有用了）。当然，也可即用即定义：
|
1 2 3 4 |
(function(){ var j = jQuery.noConflict(); j(':yf_flag').filter(function(){return j(e).attr('yf_flag') === 'oy';}).length; })(); |
7 选择器。
A 过滤器。元素集顺序。
:first :last?:even :odd?:eq(index) :gt(index) ?:lt(index)
B DOM关系。
ancestor
descendant
parent > child
prev + next
prev ~ siblings
:nth-child(selector) :first-child?:last-child?:only-child :empty :has(selector) :parent
C 当id 、class作为选择器使用时，如果命名含有以下字符，需要做特殊处理，即 j(‘.\\*’); ，j(‘#\\*’); 。
# ; & , . + * ~ ‘ : ” ! ^ $ [ ] ( ) = > | /
例如，有一段html：
|
1 2 |
<div id="#footer>cp|logo"></div> <div class=".main:middle[left]"></div> |
则使用如下写法获取该元素对象：
|
1 2 3 4 5 |
(function(){ var j=jQuery.noConflict(); j('#\\#footer\\>cp\\|logo'); j('.\\.main\\:middle\\[left\\]'); })(); |
D 有趣有用的【堆叠选择器】（自己乱叫的），加入有一段html代码，要做操作但是不能改变其结构，可不能给该元素添加任何属性了，咋办，举例：
|
1 2 3 4 5 6 |
<script src="http://www.xoyo.com/sitefoot/ztbai/" type="text/javascript"></script> //要选中它，就这么做： (function(){ var j = jQuery.noConflict(); j('script[src $= "ztbai/"]'); })(); |
对应的还有开始标记 j(‘e[proName ^= “str”]’); 。 !=不含有。这算是正则运算符的简单运用。如上面提到的，可以自己定义过滤器，那就可以定义一个正则过滤器：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <body> <div id="123"></div> <div id="oneTwoThree"></div> <div id="0"></div> <div id="zero"></body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j = jQuery.noConflict(); jQuery.expr[':'].regex = function(e, index, match) { var match_params = match[3].split(','), valid_labels = /^(data|css):/, attr = { method: match_params[0].match(valid_labels) ? match_params[0].split(':')[0] : 'attr', property: match_params.shift().replace(valid_labels,'') }, regex_flags = 'ig', regex = new RegExp(match_params.join('').replace(/^\s+|\s+$/g,''), regex_flags); return regex.test(j(e)[attr.method](attr.property)); } alert(j('div:regex(id,[0-9])').length); alert(j('div:regex(id, Two)').length); })(); </script> </body> </html> |
复杂了复杂了。
8 !0，真，!1 就是假。所以，把true、false 省略吧，用这两个。
1 filter() 和 find() 的区别。前者是在已经被选择的元素集中进行过滤，而后者，却是在已经选择的元素集中更新当前元素集。
2 filter()，还可以给它传值一个函数，就像自定义过滤器。
3 过滤方法。expression接受css表达式。
childern(‘expression’)
next(‘expression’)
nextAll(‘expression’)
parent(‘expression’)
parents(‘expression’)
prev(‘expression’)
prevAll(‘expression’)
siblings(‘expression’)
closest(‘expression’)
4 使用$()给当前dom创建新节点后，还可以对创建的新元素进行操作find()，操作完成后，可以使用end()结束find()，进而将安排这个新节点的位置，如下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j = jQuery.noConflict(); j('<div><a></a></div>').find('a').text('jQuery').attr('href', 'http://www.jquery.com').end().appendTo('body'); })(); </script> </body> </html> |
其实，是通过document.createElement DOM method 来实现的，所以，传值给j()的字符串就要是完整闭合的、友好结构的、元素包含关系正确的元素集。
5 remove() 其实，只是吧节点从dom中移出了，但是并未把它从jquery wrapper set中移出，所以，可以继续使用。如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body> <div>remove me</div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j=jQuery.noConflict(); j('div').remove().html('<a href="http://www.jQuery.com">jQuery</a>').appendTo('body'); })(); </script> </body> </html> |
6表单元素操作。
文本框操作
|
1 2 3 4 5 6 |
//获取值 $("input[name=fname]").val(); $("input[name=fname]").attr("value"); //清空填充 $("input[name=fname]").val(""); $("input[name=fname]").val("Clinton"); |
Radio单选框操作
|
1 2 3 4 5 6 7 8 9 10 |
//选中的值 $("input[name=jRadio][checked]").val() //设置值 $("input[name=jRadio]").get(2).checked = true; $("input[type=radio][name=jRadio]").attr("checked","Airplane"); $("input[type=radio][name=jRadio][value=Bike]").attr("checked","checked"); //取消选中 $("input[name=jRadio]").each(function(){ var tmp = $(this)[0]; tmp.checked = false; tmp = null; }); |
CheckBox复选框操作
|
1 2 3 4 5 6 7 8 9 10 11 |
//获取值 $("input:checked[name=jCheckbox]").val(); $("input:checked[name=jCheckbox]").attr("value"); //循环值 $("input:checked[name=jCheckbox]").each(function(){alert($(this).val());}); //不打勾 $("#jckname").attr("checked",false); //打勾 $("#jckname").attr("checked",true); //是否打勾 if($("#jckname").attr("checked")==undefined){alert("false");}else{alert("true");}; |
激活、失效按钮。
|
1 2 3 |
j(e).attr('disabled', 'disabled'); j(e).attr('disabled', ''); j(e).removeAttr('disabled'); |
选中、去选可选框、单选框。
|
1 2 3 |
j('input:checkbox,input:radio').attr('checked', 'checked'); j('input:checkbox,input:radio').attr('checked', ''); j('input:checkbox,input:radio').removeAttr('checked'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
// 获取某个选项的 value 属性的值 $("#jSelect").val() j('select option:last').val(); // 获取所有选项的text值 j('select option:selected').text(); $("#jSelect").find("option:selected").text(); //选中的索引值 $("#jSelect").get(0).selectedIndex; //设置索引选中 $("#jSelect").get(0).selectedIndex=1; $("#jSelect")[0].selectedIndex=2 //设置值选中 $("#jSelect").val("深圳4"); //设置文本选中 $("#jSelect:last").find("option:contains('广州')").prop("selected", "selected"); //长度 $("#jSelect option").length; //清空 $("#jSelect").empty(); // 向多选项最末位添加一个选项 j('select').append('<option value="">option</option>'); // 向多选项最开始位添加一个选项 j('select').prepend('<option value="">option</option>'); // 在特殊位置之后插入选项 j('select option:eq(n)').after('<option value="">option</option>'); // 在特殊位置之前插入选项 j('select option:eq(n)').before('<option value="">option</option>'); // 替换原有选项 j('select').html('<option value="">option</option><option value="">option</option>'); // 将一个特定的选项用某个新选项替代 j('select option:eq(n)').replaceWith('<option value="">option</option>'); // 将选中属性设置给选项n j('select option:eq(n)').attr('selected', 'selected'); // 删除最后一个选项 j('select option:last').remove(); //删除特定 $("#jSelect option[value='深圳4']").remove(); // 使用过滤器选择某一个选项 j('#select option:first'); j('#select option:last'); j('#select option:eq(n)'); j('#select option:gt(n)'); j('#select option:lt(n)'); j('#select option:not(':selected')'); // 获取被选中选项的索引 PS: 不可以多个select元素一起用 j('select option').index(j('select option:selected')); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <select size="4" multiple="multiple"> <option value="option1">option one</option> <option value="option2">option two</option> <option value="option3">option three</option> <option value="option4">option four</option> </select> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j=jQuery.noConflict(); j('select').val(['option two', 'option4']); j('select').val().join('-'); //可以用作数据提交 })(); </script> </body> </html> |
|
1 |
j('input:*'); |
其实，这是j(‘eSelector[proName=”str”]’); 的等效用法。
:text :password :radio :checkbox :submit :image :reset :file :button
选中所有表单元素。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <body> <input type="button" value="Input Button"/> <input type="checkbox" /> <input type="file" /> <input type="hidden" /> <input type="image" /> <input type="password" /> <input type="radio" /> <input type="reset" /> <input type="submit" /> <input type="text" /> <select><option>Option</option></select> <textarea></textarea> <button>Button</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> (function(){ var j=jQuery.noConflict(); alert(j(':input').length); // 13 alert(j('input').length); // 10 })(); </script> </body> </html> |
注意区别。
7 调试代码，不喜欢alert，但是为了兼容性问题处理，IE下不可以使用consloe，所以，写个统一的扩展吧。更多更能，慢慢扩展了。
|
1 2 3 4 5 6 7 8 9 10 11 |
var j=jQuery.noConflict(); j.fn.log = function (msg) { msg = !msg ? 'no_msg_passed' : msg; if(jQuery.browser.msie){ alert(msg + '\n' + this.parent().html()); } else { console.log("%s: %o", msg, this); } return this; }; j('body').log(); |
8 Ajax操作模块
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var url = cfg_cmspath + 'plus/feedback_fightfly.php'; //var param = 'arcID='+id+'&nowpage='+page+'&action=show'; var param = {arcID: id, nowpage: page, action: "show"}; $.ajax({ type: 'POST', url: url, data: param, dataType: "json", beforeSend : function(XMLHttpRequest){ $('#loading').show(); $('#loading').html(loadingpic + "评论加载中…"); }, success : function(data){ //alert(data.msg); $('#gbook').html(data.msg); }, complete : function(XMLHttpRequest, textStatus){ $('#loading').hide(); }, error : function(){ $('#loading').html(“服务器错误，请稍后再试！"); } }); |
9 循环操作
|
1 2 3 |
$("img").each(function(index, domEle){}); $.each(data, function(index, value)){}); |