本帖最后由 rain 于 2014-11-26 22:36 编辑
delegate() 事件委托
$('li').on('click',function(){
this.style.background = 'red';
$('ul').delegate('li','click',function(){
this.style.background = 'red'; 效果等同于上一个
$('ul').undelegate(); 阻止事件委托
$('#div1').trigger('click');//主动触发*/
$('#div1').on('click',{name:'hello'},function(ev){ 插入参数
alert(ev.data.name); 参数名称
alert( ev.target ); 事件源
alert( ev.type ); 事件类型
本帖最后由 rain 于 2015-4-7 18:41 编辑
$().css()$().html()$().val(): 只能给JQ对象用
$.xxx()$.yyy()$.zzz(): 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方
$(function(){
//var a = null;
//$.type() : 也是判断类型
//alert( typeof a );
//alert( $.type(a) ); 和上一行同等效果，判断a的类型为string。只是可以判断出更多的类型。
var str = ' hello';
alert('('+$.trim(str)+')'); 去掉左右的空格trim
inArray类似于 indexOf 返回查找的内容的位置，有则返回位置，没有则返回-1
var arr = ['a','b','c','d'];
alert($.inArray('b',arr)); inArray()查找b是否在arr中，在则返回位置，不在则返回-1proxy(): 改变this指向的
function show(n1,n2){
alert(n1);
alert(n2);
alert(this);
}
//show();
//$.proxy(show , document,3)(4); 赋值过去
$(document).click( $.proxy(show,window,3,4)); 点击才触发
noConflict() : 防止冲突的
parseJSON() 解析js
例：var str = '{"name":"hello"}'; alert($.parseJSON( str ).name);MakeArray()把类数组转化成数组
window.onload = function(){
var aDiv = document.getElementsByTagName('div');//类数组
$.makeArray(aDiv).push();
本帖最后由 rain 于 2014-12-8 10:32 编辑
插件
//$.extend : 扩展工具方法下的插件形式$.xxx() $.yyy()
//$.fn.extend:扩展到JQ对象下的插件形式$().xxx()$().yyy()
$.extend({
leftTrim : function(str){
return str.replace(/^\s+/,'');
},
rightTrim : function(){},
aaa : function(){
alert(1);
},
bbb : function(){}
});
$.fn.extend({
drag : function(){
//this : $('#div1')
var disX = 0;
var disY = 0;
var This = this;
this.mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
This.css('left' , ev.pageX - disX);
This.css('top' , ev.pageY - disY);
});
$(document).mouseup(function(){
$(this).off();
});
return false;
});
},
aaa : function(){
alert(2);
}
});
</script>
<script>
//$.trim()
//$.leftTrim()
/*var str = 'hello';
alert( '('+$.leftTrim(str)+')' );*/
$(function(){
$('#div1').drag();
});
$.aaa();// 1
$().aaa();//2
</script>
<div id="div1"></div>
本帖最后由 rain 于 2014-12-18 09:30 编辑
$('*')选择所有的元素
$('a') 选择所有的a
$('.link') 选择相同的class标签，如.link
$(':input').val() 选择表单元素
$(':checkbox:checked') 选择所有已勾选的复选框
$('select').val(2013) 指定下拉菜单的项目
$('div:contains("abc")').html() 选择包含特定内容的层
$('a').attr('href','http://xxx.com') 修改元素属性的值
$('span').text() 获取指定元素的内容
$('select','span') 一次性选择多个不同类的元素
$('p').remove(':contains("abc")') 删除包含abc的段落
$('<p><a href="#">link</a></p>').replaceAll('p:contains(''abc")') 替换所选择的元素
$('p').css('color','blue') 把段落的文字颜色改为蓝色
$('p').width()获取实际元素的宽度，高度用height()
$('document').ready(function(){}) 指定页面加载完成的回调，也可以简写成$(function(){})
$(':button').click(function(){}) 为按钮指定onclick事件
$('p').toggle() 自动实现显示、隐藏交替
$('p').slideDown('slow') 自动实现滑出效果，有slownormalfast 三个速度参数，也可以提供第二个参数，表示动画时长。
$('p').fadeIn('slow') 淡入效果，淡出为slideOut。
$.extend : 扩展工具方法下的插件形式$.xxx() $.yyy()
$.fn.extend:扩展到JQ对象下的插件形式$().xxx()$().yyy()
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
例：eval("x=10;y=20;document.write(x*y)") 结果为：200
本帖最后由 rain 于 2017-1-6 17:10 编辑
阮一峰博客：设计思想
阮一峰博客：最佳实践