JQuery小知识点代码

1、链式操作

$(function(){
    
    /*var oDiv = $('#div1');
    
    oDiv.html('hello');
    
    oDiv.css('background','red');
    
    oDiv.click(function(){
        alert(123);
    });*/
    
    $('#div1').html('hello').css('background','red').click(function(){
        alert(123);
    });
    
});

2、取值赋值合体

$(function(){

    //oDiv.innerHTML = 'hello';  //赋值
    
    //alert( oDiv.innerHTML );  //取值

　　在JQuery中，用同一个函数html（）同一个方式就实现了。
    
    //$('#div1').html('hello');  //赋值
    
    //alert( $('#div1').html() ); //取值
    
    css('width','200px')
    css('width')
});

$(function(){


    $('li').html("sssss"); ;  //当一组元素的时候，取值是一组中的第一个.赋值则可以全部改变！
    
    //$('li').get().innerHTML('hello');  //当一组元素的时候,赋值是一组中的所有元素
    //$('li').get(0).innerHTML = "ssss";    //上面一种经测试有问题，这种才能通过。
});
/*window.onload = function(){
    var obj = document.getElementsByTagName("li")[0];
    //alert(obj);
    
    obj.innerHTML = "html";
    }*/

3、attr

//jquery中的css()是用来操纵style{}的，而attr()是加在标签内部的，attr()的权重比css()要大，它会覆盖css()的样式

$(function(){

    //alert($('div').attr('title'));
    
    $('div').attr('title','456');
    $('div').attr('class','box');
    
});

4、filter，not，has

//filter : 过滤
//not : filter的反义词

$(function(){

    //$('div').filter('.box').css('background','red');
　　//find()方法是获得在当前结果集中每个元素的后代。参数（选择器、jquery集合或DOM元素）做为过滤条件，满足过滤条件的则保留，保留的是后代。
　　//$('div').find('.box').eq(1).css('background','red');
    //$('div').has('.box').css('background','red');//而has()方法中，参数只做为条件，符合条件的，它的前元素加入新的结果集，而不是后代加入新的结果集。并且是所有符合的前辈元素。
    //$('div').not('.box').css('background','red');
    //$('li').filter('[title=hello]').css('background','red');
    $('div').filter('[class != box]').css('background','red');
    //alert( $('#h').index() );  //索引就是当前元素在所有兄弟节点中的位置,从0开始；
});

5、addClass，removeClass

$(function(){

    $('div').addClass('box2 box4');//让它属于多个类，拥有多各类的样式；
    
    $('div').removeClass('box1');
    
});

6、append,appendTo,appendChild,removeChild,remove,empty;

1，追加与删除HTML元素

　　创建HTML元素

　　var newEle =document.createElement(p);

　　创建的元素追加到别的元素之后：

　　A. appendChild(B)： 若B是新建的元素，在A元素的所有子元素的末尾增加元素B 。

　　若B页面中已存在的元素，则这句语句产生的效果是将B元素移动到了A的子元素中。

　　appendChild（）这个函数和innerHTML这个属性的效果差不多，区别在：1 innerHTML运行效果会比appendChild慢（也许是需要解析的原因） 2 innerHTML比appendChild要方便些，像写字符串似的。

 

　　还有另外两个元素：

　　append() 和appendTo()这两个函数呢是jquery的函数。使用模式为：

　　append()前面是要选择的对象，后面是要在对象内插入的元素内容。

　　$("p").append("<b>Hello</b>");

　　appendTo()把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用 end()方法，参见例二。

　　example1：

　　　　$("p").appendTo("div");//将p标签的所有追加到div标签集合中；

　example2：
　$(function(){
    $('<div>content</div>')
   .appendTo("div")
   .addClass("test")
   .end()最近的1次破坏性操作是对这两个新建的div设置分别设置class，还原的话就是还原到上一步操作appendTo所选中的元素：即 新建第二个div并添加。；
   .addClass("test2");
   });
结果：<div><div class = "test"></div></div>
<div><div class = "test test2"></div></div>

7、事件的写法


$(function(){

    /*$('div').click(function(){
        alert(123);
    });*/
    
    /*$('div').on('click',function(){
        alert(123);
    });*/
    
    /*$('div').on('click mouseover',function(){
        alert(123);
    });*/
    
    /*$('div').on({
        'click' : function(){
            alert(123);
        },
        'mouseover' : function(){
            alert(456);
        }
    });*/
    
    $('div').on('click mouseover',function(){
        alert(123);
        $('div').off('mouseover');
    });
    
});

8.$(function(){

    /*$('div').click(function(ev){
        
        //ev : event对象
        
        //ev.pageX(相对于文档的) : clientX(相对于可视区)
        
        //ev.which针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
        
        ev.preventDefault();  //阻止默认事件
        
        ev.stopPropagation();  //阻止冒泡的操作
        
        return false;   //阻止默认事件 + 阻止冒泡的操作
        
    });*/
    
    $('div').one('click',function(){  //只执行事件一次
        alert(123);
    });
    
});

浏览器的默认行为：

你在空白的地方按 空格键 页面会向下滚动 安方向键 滚动条也会滚动
如果你用键盘的方向键和空格键 来做 在线音乐 控制音量切换歌曲暂停什么的，你就需要阻止浏览器默认行为

冒泡事件：

比如子盒子和父盒子都有onclick事件，那么当点击子盒子时，不仅会出发子盒子的点击事件，父盒子以及祖宗盒子的点击事件都会触发！

 9、offset和position()，offsetParent

$(function(){

    //var div22 = document.getElementById('div2');
    console.log("22" ); //js中内元素外边框到父元素内边框左侧距离
    
    //alert( $('#div2').offset().left );  //获取到屏幕的左距离;offset()方法返回或设置匹配元素相对于文档的偏移（    位置）。返                 回第一个匹配元素的偏移坐标。
    //该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
    
    //alert( $('#div2').position().left );  //到有定位的父级的left值,把当前元素转化成类似定位的形式
    position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移，也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。

    所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。

    该函数返回一个坐标对象，该对象有一个left属性和top属性。属性值均为数字，它们都以像素(px)为单位。

    与offset()不同的是：position()返回的是相对于被定位的祖辈元素的坐标，offset()返回的是相对于当前文档的坐标。此外，position()函             数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static)，那么该函数返回的偏移位置与offset()函数相同。

});

使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。

可以看看下边的图：

从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。

offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。

offsetParent：

//parent() : 获取父级
    //offsetParent() : 获取有定位的父级，即只要定位position：不是static；
    
    //$('#div2').parent().css('background','blue');
    
    $('#div2').offsetParent().css('background','blue');

   10.   hover

    //hover第一个参数就是鼠标放上执行的函数，第二个是鼠标离开执行的函数；
    //当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见 错误）

11、paresents(),closest();nextAll(),preAll(),Util()，clone(),animate()

//parents() : 获取当前元素的所有祖先节点，参数就是筛选功能

//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个；

//siblings() : 找所有的兄弟节点，参数也是筛选功能

//nextAll() : 下面所有的兄弟节点，参数也是筛选功能

//prevAll() : 上面所有的兄弟节点

//Until() : 截止

jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] )

参数	描述
withDataAndEvents	可选/Boolean类型是否同时复制元素的附加数据和绑定事件，默认为false。
deepWithDataAndEvents	可选/Boolean类型是否同时复制元素的所有子元素的附加数据和绑定事件，默认值即为参数withDataAndEvents的值。

animate() :
//第一个参数 : {} 运动的值和属性

//第二个参数 : 时间(运动快慢的)  默认 : 400

//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )

//第四个参数 :  回调函数

$(function(){

    $('#div1').click(function(){
        
        $(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
            alert(123);
        });
        
        $('#div2').animate({width : 300 , height : 300} , 4000 , 'swing');
        
    });
    
    
});

    $('#div2').click(function(){
        
        //$('#div1').stop();   //默认 : 只会阻止当前运动；不是所有运动都阻止；
        
        //$('#div1').stop(true); //阻止后续的运动；
        
        //$('#div1').stop(true,true); //可以立即停止到指定的目标点
        
        $('#div1').finish();  //立即停止到所有指定的目标点
        
    });

 12.事件委托，delegate，undelegate，on

    /*$('li').on('click',function(){
        this.style.background = 'red';
    });*/
    
    $('ul').delegate('li','click',function(){
        
        this.style.background = 'red';
        
        $('ul').undelegate();
        
    });

13.主动触发：trigger

    $('#div1').on('click',function(){
        alert(123);
    });
    
    $('#div1').trigger('click');  //主动触发被选元素的某一事件；

14工具方法

//$().css()  $().html()  $().val()  : 只能给JQ对象用
//$.xxx()  $.yyy()  $.zzz()  : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法
//inArray() : 类似于 indexOf
    //alert(  $.inArray('b',arr)  );//在数组arr中找b的位置；
//$.type() : 也是判断类型
alert('('+$.trim(str)+')');//去除前后空格；原生的得写正则
//proxy()  : 改变this指向的
         function show(n1,n2){...}
        //$.proxy(show , document,3)(4);
    //$.proxy(show , document）（3，4);//可以这样传参数，但是这样相当于函数调用，直接执行。
    $(document).click( $.proxy(show,window,3,4)  );//可以这样传参数，这样是在事件操作时执行；
//noConflict() : 防止冲突的
    /*var miaov = $.noConflict();
    var aDiv = document.getElementsByTagName('div');  //；类似数组，并不是真正数组；
    
    $.makeArray(aDiv).push();//将类似数组转换成数

15.插件

//即使插件写错，也不影响库的使用，

//$.extend : 扩展工具方法下的插件形式  $.xxx() $.yyy()

//$.fn.extend  :  扩展到JQ对象下的插件形式（只能jq对象用）  $().xxx()  $().yyy()

$.extend({
    leftTrim : function(str){
        return str.replace(/^s+/,'');
    },
    rightTrim : function(){},
    aaa : function(){
        alert(1);
    },
    bbb : function(){}
});

16.绑定事件

<script>
    $(document).ready(function(){
    //bind绑定单击事件；
    $('p').bind('click',function(){
    alert($(this).text())});
    $('p').mouseover(function(){
    $(this).css('background','red');});
    //unbind移除绑定事件，可以同时移除好几个；
    $('p').unbind('click mouseover');
    })
</script>
<body>
<p>这是个标签</p>
</body>
</html>
//bind和unbind事件；
/*使用绑定事件可以防止事件冒泡。
对于表单submit事件，为了防止提交后跳转（默认事件？），需要.preventDefault（）；
为了阻止冒泡，click事件的冒泡，需要.stopPropagation();
使用bind，只要在bind参数里加true或false就可以了。默认是true；(试验中，发现只有不写第三个参数时编译才通过。）*/
//******************************************************
//one事件，只执行一次事件，就销毁事件；
//delegate事件,对新增加的标签添加事件；用click效果一样，但是没有为新增的标签加事件的功能；undelegate；
/*
    $('p').delegate('p',function(){
    $('body').append('<p>我是新增的标签</p>');
    });
*/

官方推荐用delegate时用on代替，undelegate用off代替，实际用的不多；//用bind还可以为事件绑定命名空间，这样在unbind时就可以删除指定命名空间的事件。.bind('click.mingmingkongjian',function(){});

四种方式的异同和优缺点（bind（），on（），delegate（），live（）；）

相同点：

　　1.都支持单元素多事件的绑定；空格相隔方式或者大括号替代方式;

　　2.均是通过事件冒泡方式，将事件传递到document进行事件的响应；

比较和联系:
1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；
2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；
3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差。
4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；　
总结
　　如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替