1.获取子包装集:children()
$('#ajia').children().eq(1) 不等价于 $("#ajia").children[1] 前者通过eq返回的是新的包装集,而后者下标形式的方式,得到的是dom元素,可以理解成javascript数组中的元素,
因为jQuery允许包装集+下标 的形式来获取元素,也就是允许包装集当成js的数组来操作
2.jQuery的所有触发事件都会从目标元素冒泡的dom树顶,阻止事件默认行为或冒泡的方式有3:
return false、event.preventDefault()、event.stopPropagation()
3.复制节点:$("#ajia")
.clone().appendTo($("#youxi"));
4.get():将包装集转化成dom元素,
var arr = $("a").get() 将a标签的包装集转化成dom元素(js数组)存入变量中
var arr = $("a").get(1) 获取a标签的包装集的第一个元素且转化成dom元素,存入变量中
5.判断单/复选框是否有选中的项
if($(":radio").is(":checked")){....} 或者 if($(":radio
:checked").length>0){.....}
if($(":checkbox").is(":checked")){....} 或者 if($(":checkbox :checked").length>0){.....}
6.判断select是否有选中项
知识点:$("select").val() ,如果有选中的值则是选中的值,如果没有默认是第一个option的值
正确判断方式:if($("
select option:selected").val()){....}
7.表单按钮不可用:$(":button").attr('disable',true);
8.单选、复选框被选中 $(":radio").attr('checked',true);
9.
添加新的包装集到旧包装集中去 add()
$("img[alt]").addClass('isAlt').add("img[title]").addClass('is_alt_tile'); 首先具有alt属性的img标签都加上类isAlt,后面再将具有alt和title属性的img标签都加上is_alt_title类
10.
获取子包装集 slice( start , end ) 从0开始标示
$("img").slice(2,4) 获取第3和第4个img的子集
该方法与 children().eq() 的区别在于 前者能够随意获取
任意位置的连续子集
11. 退到前一个包装集 end()
$("#ajia").parent().addClass('xixi').end() 退回到 $("#ajia")
$("#ajia").parent().find(".youxi").addClass('xixi').
end().end() 也退回到 $("#ajia")
12. each()中的
this 是dom元素
$("img").each(function(){
this.alt = 'hello, ajia';
})
13. 属性与样式操作函数 attr()、 css() 的参数可以使用函数
14. 切换同一个样式: toggleClass()
15. 判断是否有某个class
$("#ajia").hasClass("sup") 或者 $("#ajia").is(". sup ")
16.
select()事件:当 textarea 或 文本类型 的 input 元素中的文本被选择时,会发生 select 事件
17.
event.target返回的是dom元素,可以直接用于构造jQuery对象
$(event.target).html();
$("#ajia").click(function(evt){
// this ==evt.target dom元素
})
18. 包裹元素:
比如想在每个a标签外用div作为父元素,则可 $('a'). wrap('');
比如想在id为ajia的a标签用div作为父元素,则可 $('#ajia'). wrapAll('');
unwrap()则是去除包裹的
19. remove() 删除包装集中所有的元素, 同时返回被删除的集,该集仍可用于操作,比如appendTo()
20. 替换元素的惯用方式:after()+remove();
$('#ajia'). after(' demo'). remove();
PS:由于after()返回的是被替换的那个包装集
21. 表单的val()函数不仅可以获取值,还可以设置radio和select哪个值被选中
$('select').val( ['apple','blue']); select中option的值为apple和blue的被选中
22. bind()等绑定函数可以对 同一个集进行同个事件或不同事件的多次绑定,类似js的addEventListentener();
这类函数能够绑定自定义命名的函数,再使用trigger()来触发调用
这类函数能够使用 命名空间的方式,来区分管理,例如 $("#aija").bind(' editModel.click',function(){...});
删除使用了命名空间的事件:$("#ajia").unbind("editModel.click");
23. $ 是jQuery对象的别名,若要放弃$的使用,可通过$.noconflict(),后面就用jQuery来调用
24. 想用$但又不会与其他库冲突,可使用私有域的js形式来调用
(function($){
//jqery代码处
})(jQuery); //此处的分号是必须的,jQuery作为实参传递到function中去,并以$形式在函数体内调用
另一种形式
jQuery(function($){.......}) //比较少用, 上面那种经常用于插件的编写
$("#ajia").click(function(evt){
// this ==evt.target dom元素
})
18. 包裹元素:
比如想在每个a标签外用div作为父元素,则可 $('a'). wrap('');
比如想在id为ajia的a标签用div作为父元素,则可 $('#ajia'). wrapAll('');
unwrap()则是去除包裹的
19. remove() 删除包装集中所有的元素, 同时返回被删除的集,该集仍可用于操作,比如appendTo()
20. 替换元素的惯用方式:after()+remove();
$('#ajia'). after(' demo'). remove();
PS:由于after()返回的是被替换的那个包装集
21. 表单的val()函数不仅可以获取值,还可以设置radio和select哪个值被选中
$('select').val( ['apple','blue']); select中option的值为apple和blue的被选中
22. bind()等绑定函数可以对 同一个集进行同个事件或不同事件的多次绑定,类似js的addEventListentener();
这类函数能够绑定自定义命名的函数,再使用trigger()来触发调用
这类函数能够使用 命名空间的方式,来区分管理,例如 $("#aija").bind(' editModel.click',function(){...});
删除使用了命名空间的事件:$("#ajia").unbind("editModel.click");
23. $ 是jQuery对象的别名,若要放弃$的使用,可通过$.noconflict(),后面就用jQuery来调用
24. 想用$但又不会与其他库冲突,可使用私有域的js形式来调用
(function($){
//jqery代码处
})(jQuery); //此处的分号是必须的,jQuery作为实参传递到function中去,并以$形式在函数体内调用
另一种形式
jQuery(function($){.......}) //比较少用, 上面那种经常用于插件的编写
注意:该类方法是在加载完整的dom结构前就会触发的,不同于$(function(){})的,后者是在加载完dom后才去触发
25. 编写插件的3中形式
注意:在插件中this是指jQuery实例本身,也就是this可以等于$(this),但如果是使用$.each(),在其循环体内的this仍是指dom元素
25.1 添加自定义包装器到jQuery的prototype(
fn是prototype的别名)中去,每个jQuery对象都能访问
(function($){
$. fn.hideFun = function(){ //hideFun 为自定义的函数名
return this.hide(); //自定义的包装器一般都返回操作的包装集,方便后续其他操作
}
})(jQuery); //分号必须
$. fn.hideFun = function(){ //hideFun 为自定义的函数名
return this.hide(); //自定义的包装器一般都返回操作的包装集,方便后续其他操作
}
})(jQuery); //分号必须
25.2 使用$.extend()方法,传入一个对象参数,该对象参数就会合并到jQuery对象中去
(function($){
$.extend(
{hideFun:function(){
return this.hide();
}})
})(jQuery);
26. jQuery提供的一些函数操作
$. extend(源对象,追加对象1,追加对象2........): 将追加对象的值合并到源对象中去,一般用于合并对象常量, 该方式经常用在在插件编写中合并默认初始化值和用户自定义值、
$.getScript(): 动态加载js文件
$.inArray(): 判断数组是否含有某元素
$.map(): 对数组每个元素做处理后再返回
$.grep(): 对数组元素进行筛选
$.each(): 对数组或对象进行遍历
$.trim(): 对字符串进行头尾去空
$.merge(): 合并数组
$.type(参数) 判断参数的类型
$. isEmptyObject(参数): 判断参数是否包含任何属性,包括继承的属性 ,参数不一定是要对象
$.isPlainObject(对象): 判断对象是否含有任何属性,包括继承的属性,参数必须为对象
$.makeArray():将jQuery包装集转化成js数组
$.unique(): 剔除Dom数组中重复元素
27. 如果想在 选择器表达式 里使用特殊字符,需要使用反斜线转义,特殊符号:#、$、'、" 等等
$("#\\$ajia").length //对id为$ajia的选择表达式 转义
28. 属性选择器
完全等于:$("[属性名 = '属性值']")
完全不等于:$("[属性名 != '属性值']")
包含: $("[属性名 *= '属性值']")
复式属性选择器:例如 $("[属性名 = '属性值'][属性名 = '属性值']")
26. jQuery提供的一些函数操作
$. extend(源对象,追加对象1,追加对象2........): 将追加对象的值合并到源对象中去,一般用于合并对象常量, 该方式经常用在在插件编写中合并默认初始化值和用户自定义值、
$.getScript(): 动态加载js文件
$.inArray(): 判断数组是否含有某元素
$.map(): 对数组每个元素做处理后再返回
$.grep(): 对数组元素进行筛选
$.each(): 对数组或对象进行遍历
$.trim(): 对字符串进行头尾去空
$.merge(): 合并数组
$.type(参数) 判断参数的类型
$. isEmptyObject(参数): 判断参数是否包含任何属性,包括继承的属性 ,参数不一定是要对象
$.isPlainObject(对象): 判断对象是否含有任何属性,包括继承的属性,参数必须为对象
$.makeArray():将jQuery包装集转化成js数组
$.unique(): 剔除Dom数组中重复元素
27. 如果想在 选择器表达式 里使用特殊字符,需要使用反斜线转义,特殊符号:#、$、'、" 等等
$("#\\$ajia").length //对id为$ajia的选择表达式 转义
28. 属性选择器
完全等于:$("[属性名 = '属性值']")
完全不等于:$("[属性名 != '属性值']")
包含: $("[属性名 *= '属性值']")
复式属性选择器:例如 $("[属性名 = '属性值'][属性名 = '属性值']")
29. 过滤选择器中的:
nth-child()下标是从1开始
$('div:nth-child(2)') //第二个div
$('div:nth-child(2n+1)') //每隔2个的那个div
30. 自定义选择器,通过扩展
$.expr[':']
$.expr[':'].名称 = function(param){
return $(param).css('backgound-color') === "green";
}
var n =
$(":名称").length;
31.
triggerHandler函数:触发第一个被匹配元素的指定事件
与 trigger() 方法相比的不同之处:
它不会引起事件(比如表单提交)的默认行为
.trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
该方法的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象。此外,如果没有处理程 序被触发,则这个方法返回 undefined。
33. jQuery一些选择去性能比对,参考该链接
http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html