jquery知识简单运用

this的用法:

$(function(){
    $('input').click(function(){
        //$(this).style.background = 'red';   //$(this)是jquery对象，是当前调用click方法的对象$("input");
        this.style.background = 'red';    //this是js对象,$中大部分是指js对象
    });    
});

js与jquery互转:

    $(function(){
        //jquery->js
        $('div')[1].style.background = 'red';
        $('div').get(1).style.background = 'red';
        //js->jquery
        var oDiv = document.getElementById('div2');
        $(oDiv).css('background','red');
    });

has与contains

$(function(){
    $('div:has(p)').css('background','red');//div内包含的p标签
    $('div:contains(p)').css('background','red');//div内包含的p内容
});

val,html,attr:

$(function(){
                $('div').html('123');//非表单元素
                $('input').val('1111');//表单元素
                $('#box').attr({'lot':'let','money':'less'});//属性
            });

 

选择器:

$(function(){
        //$('#div1').css('background','aqua');    
        //$('.red').css('background','pink');    
        //$('ul li').css('background','white');    
        //$('ul li').css('background','banana');
        //$('ul li:first').css('background','orange');    
        //$('ul li:last').css('background','orange');    
        //$('ul li:even').css('background','green');    
        //$('ul li:eq(2)').css('background','green');    
        $('ul li:lt(2)').css('background','green');
　　　　 $('li[type=true]').css('background','yellow');    
    });

removeClass与addClass:

$(function(){
        $('p').removeClass('red').addClass('green');
    });

hover里面两个函数（mouseover与moverout）:

$(function(){
    $('#div1').hover(function(){
        $('#div1').css({width:'400px',height:'400px',background:'red'});
    },function(){
        $('#div1').css({width:'200px',height:'200px',background:'green'});
    });
});

trim:

$(function(){
        var str = ' fd    asfa    dsa     ';
        alert('|'+$.trim(str)+'|');   //去掉字符串起始和结尾的空格
    });

 取消冒泡:

$(function(){
        $(document).click(function(){
            alert('document');
        });
        $('body').click(function(){
            alert('body');
        });
        $('input').click(function(ev){
            alert('input');
            return false;  //除了取消冒泡外还阻止默认行为
            ev.stopPropagation();   //只取消冒泡
        });
    });

 删除元素:

$(function(){
    $('#btn').click(function(){
        $('#li1').remove();    
    });
});

事件绑定:

$(function(){
           $('input').bind('click',function (){alert(1)});  //bind(事件名,函数名)
           $('input').bind('click mouseover',function (){alert(2)});//可以批量加事件
           $('input').unbind('click',fn1);//匿名函数可以绑定但不可以解绑定;
      });

事件委托:

$(function(){
           $('#btn').click(function(){
                $('<li>'+$('#txt').val()+'</li>').prependTo('#ul1');//prependTo添加到后面元素子集的第一个
                $('#txt').val('');
            });
            function fn1(){                   //off时不能是匿名函数
               alert($(this).html());
            }
            $('#ul1').on('click','li',fn1);                       
            $('#ul1').off('click','li',fn1); //off(事件名,子集,函数名)
 });

循环:

$(function(){
        $('input').each(function(index,element){
            //alert(this == element);//true
            alert(index);  //0，1，2相当于for循环的i
        });    
    });

jquery插件:

        <script>
                    $.fn.extend({
                        cs:function(name,value){
                            this.css(name,value);   //this是jquery对象
                        },
                    });
        </script>
        <script>
                $(function(){
                    $('#box').cs('background','red');
                    $('#box1').cs('background','green');
                    $('#box1').cs('width','300px');
                });
        </script>

find方法:

<script>
    $.fn.extend({
        cs:function(name,value){
            this.css(name,value);
        }
    });
</script>
<script>
    $(function(){
        $('p').find('em').cs('font-size',30);  //这个函数是找出正在处理的元素的后代元素的好方法。
        $('p').find('em').cs('color','red');
    });
    
</script>