jqurey常用方法(jqurey设计思想)

jqurey过滤器:
        $('div').has('p');//选择包含p元素的div元素
        $('div').not('.myClass');//选择class不等于myClass的div元素
        $('div').filter('.myClass');//选择class等于myClass的div元素
        $().first() //被选中元素的首个元素
        $().last()被选元素的最后一个元素

     链式操作(用在DOM操作):
        $().eq()索引从0开始 被选元素中带有指定索引号的元素 如: $('p').eq(2)//选择第三个p元素
        .eq()方法可以提供索引方法(切换) 如:$('#div').find('div').eq($(this).index())
        $('div').find('*').css({}) //被选元素的后代元素,一直向下直到最后一个后代  或: $('div').find('h3')//选择其中的h3元素
        $('div').html('hellow');//将它的内容改变为hellow
.filter()筛选指定表达式的元素 如:$('p').filter(':odd').css('background','blue');//下标为基数 有 :o
.first()选择第一个元素 如: $('p').first().css('background','blue');  
.last()选择最后一个元素 如: $('p').last().css('background','blue');
.is()检测是否元素返回布尔值 如:  $('p').click(function () {if($(this).is('.first')){$(this).css('background','red');}});//第一为true所以添加颜色值
.has()保留包含特定后代的元素,去掉那些不含有指定后代的元素  DOM操作用的多 如: $('div').has('p');//选择包含p元素的div元素
.not()从匹配的元素集合中移除指定的元素(除什么之外)  如: $('p').not('.first').css('background','blue');
.slice()根据指定的下标范围,选取匹配的元素集合  如:$('p').slice(0,5).css('background','blue');  下标从0开始 选择0到5添加颜色值
        .end() //选项卡用的多 使得结果集可以后退一步 如:$('div').find('h3').eq(2).css('color','red').end().eq(4).css('color','blue');
    
        相邻元素查找:
        $('div').next('p'); //选择div元素后面的第一个元素p元素
        $('div').parent(); //选择div元素的父元素
        $('div').childrem(); //选择div的所有子元素

常用的遍历查找:

.find()  如: $('div').find('*').css({}) //被选元素的后代元素,一直向下直到最后一个后代  或: $('div').find('h3')//选择其中的h3元素

        jqurey中创建div元素  var oDiv1 = $("<div></div>");直接创建  或在$('ul').append('<li>hellow</li>');
jqurey创建class名   div1.addclass("contentDiv");


        取值与赋值:
        $('h1').html(); //html()没有参数,表示取出h1的值
        $('h1').html('hellow');//html()有参数hellow，表示对h1进行赋值


        val()//表单字段的值
        text()//所选元素的文本内容
        attr()//用于获取属性值/设置、改变属性值 改值提供回调函数 有两个参数:1.当前元素下标 2.原始值(旧的值)
        width()//设置属性宽度 不包括内外边框边距
        height()//设置属性高度 不包括内外边框边距
        outerWidth()//包括内外边框边距
        outerHeight()//包括内外边框边距
        取值是一组中第一个元素,赋值是所有的元素 一个值为获取.() 两个值是设置 .('helow')


        元素移形换位:
        .直接移动该元素
        $('div').insertAfter($('p')); //把div元素移动p元素后面
        $('div').appendTo($('p'));


        添加元素:
        $('div').after($('div')); //把p元素加到div元素前面
        .append()//元素的结尾插入内容
        .prepend() //元素开头插入内容
        .before()//元素之前插入内容
        .replacewith()//元素替换为内容

jqurey选择器的优化:

1.优化使用id选择器  id选择器在DOM操作中是最快的


2.在class选择器前添加标签名


3.采用find()，而使用上下文查找 如:$('.itm').find('li').css('color','red');


4.强大的链式操作比缓存更快


5.从左至右的模式1.3+版本更新

        剪切:
        $('div').appendTo($('p'));//div元素在p元素后面


        赋值节点(克隆的意思):
        $('div').clone().appendTo($('p'));//.clone()在元素之前赋值 或者选择性赋值


        工具方法:
        .each()方法jQ对象下面使用  $.方法:工具方法; 原生的js也可以用  操作数组可以用工具方法
        .$trm($('div'),attr('class')) //方法可以把前后空格去掉


        独立事件:
        click()  mouseover()等等


        通用事件:
        bind()绑定多个事件(可以是函数内的多个参数绑定事件)  one()操作一次  unbind()  e:event()对象 pageX(获取坐标)等
        .toggle(function(){},function(){})//可以绑定多个函数  可以做切换效果


        运动特征:
        常见效果 1、 .fadeIn() //淡入  .fadeOut() //淡出  .slideDown() //向下展开  .slideUp() //向上卷起
        复杂效果 .animate()动画  stop()阻止//滑入运动事件前添加该属性不会出现bug


        拖拽插件网:  http://jquerui.com/demos/draggable/
        版本号组件库: 1.8.22/jqurey-ui.min.js  用绝对定位写


        比较好的插件库(国外):
        http://workshop.rs/projects/coin-slider/  


        插件写法:
        1.在写jqurey插件时要写成闭包的形式(布局函数)
        2.以开头(function($))( 代码 )(JQurey);结尾
        $.fn : 扩展插件方法


        实例:
        (function($){
            $.fn.miaovTab = funtion(){ //$.fn.maiovTab这里的.maiovTab是插件的url地址
                 // This 对应的外部的<script>引用


                 var This = this; //因为作用的问题 必须这么写才不发生冲突
                $('This').find('input').click(function(){
                    $('This').find('input').attr('class','');
                    $('This').find('div').css('display','none');


                    $(this).attr('class','active');
                    $('This').find('div').eq($(this).index()).css('display','block');
                });
            };
        })(jQuery);


        <script>
            $(function(){
                $('#div1').miaovTab();
            });
        </script>


            <!--
        工具函数:
        $.trim(); //去掉空格


        $.each()遍历数组
        如:
        <div id="box"></div> //html代码
        var arr = ['张三','李四','王五','马龙'];//遍历数组形式  也可以遍历对象
        $.each(arr,function(index,value){
            $('#box').html($('box').html() + (index +1)+ '.' + value + '<br/>');
        });