jQuery 网页特效编程

rain

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

$().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中，在则返回位置，不在则返回-1

1. proxy()  : 改变this指向的
   
2. function show(n1,n2){
   
3.                 alert(n1);
   
4.                 alert(n2);
   
5.                 alert(this);
   
6.         }
   
7. 
   
8.         //show();
   
9.         
   
10.         //$.proxy(show , document,3)(4);        赋值过去
    
11.         
    
12.         $(document).click( $.proxy(show,window,3,4)  );           点击才触发
    
13. noConflict() : 防止冲突的
    
14. parseJSON()   解析js
    
15. 例：var str = '{"name":"hello"}';       alert($.parseJSON( str ).name);

复制代码

MakeArray()  把类数组转化成数组
window.onload = function(){
        var aDiv = document.getElementsByTagName('div');  //类数组
        $.makeArray(aDiv).push();

rain

插件
//$.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

$('*')  选择所有的元素
$('a')   选择所有的a
$('.link')   选择相同的class标签，如.link
$(':input[type="text"]').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')     自动实现滑出效果，有slow  normal  fast 三个速度参数，也可以提供第二个参数，表示动画时长。
$('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

阮一峰博客：设计思想

阮一峰博客：最佳实践