jQuery(m)

作者: 幺七 | 来源:发表于2017-02-18 15:31 被阅读0次

jQuery基础

什么是JQ？一个优秀的JS库，大型开发必备
JQ的好处？
一简化JS的复杂操作
二不再需要关心兼容性
三提供大量实用方法
如何学习JQ？
一www.jquery.com
二JQ只是辅助工具，要正确面对
三需要分阶段学习
JQ设计思想？
选择网页元素模拟CSS选择元素独有表达式选择器多种筛选方法
JQ写法方法函数化链式操作取值赋值合体
JQ与JS关系可以共存，不能混用
模拟CSS选择元素的示例yp

$('#div1').css('background','red');
$('div').css('background','red');
$('.box').css('background','red');

总结：选择一组元素后省略了循环
独有表达式选择的示例

$('li:first').css('background','red'); 
$('li:last').css('background','red'); 
$('li:eq(2)').css('background','red'); //从0开始
$('li:even').css('background','red'); //奇数行
$('li:odd').css('background','red');  //偶数行

多种筛选方法的示例

$(‘li.box’).css('background','red');
$('li').filter('.box').css('background','red');          //过滤出带有.box的li
$('li').filter('[title=hello]').css('background','red'); //筛选出title属性为hello的li

方法函数化的示例

原生：window.onload = function(){};
  JQ: $(function(){});      jQ的源码中相当于有一个function $(){}这个函数
原生：innerHTML = 123;
  jQ: html(123);            jQ的源码中相当于有一个function html(){}这个函数
原生：onclick = function(){};
  JQ：click(function(){})； jQ的源码中相当于有一个function click(){}这个函数
原生：window.onload = function(){
    var oDiv = document.getElementById('div1');
    oDiv.onclick = function(){alert( this.innerHTML );};
     };
 JQ：$(function(){
        $('#div1').click(function(){alert( $(this).html() );});
     });

总结：原生中的赋值，大多由JQ中的传参来完成。
调用时一定带上括号。eg:html();$('ul').children().css('background','red');
链式操作的示例

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

取值赋值合体的示例

$('#div1').html('hello');    //赋值
    alert( $('#div1').html() );  //取值
    css('width','200px')         //赋值
    alert(css('width')  )        //取值

总结：alert( $('li').html() ); //当一组元素的时候，取值是一组中的第一个
$('li').html('hello'); //当一组元素的时候,赋值是一组中的所有元素,省略了循环
可以共存，不能混用的示例

        alert( $(this).html() );    //jq的写法
    alert( this.innerHTML );    //js的写法
    alert( $(this).innerHTML ); //错误的
    alert( this.html() );       //错误的

$()下的常用方法
has() 专对这个元素里面的

$('div').has('span').css('background','red');//包含span元素的div变红
$('div').has('.box').css('background','red');

not() 是filter的反义词

$('div').not('.box').css('background','red'); //类名不是.box的div变红

filter() 专对当前这个元素自身的,对一组元素时行过滤

$('div').filter('.box').css('background','red');//类名是.box的div变红

next() 下一个兄弟结点
prev() 上一个兄弟结节
find()

$('div').find('h2').css('background','red');//找div下面的h2

eq() 充当下标的作用，从0开始

$('div').find('h2').eq(1).css('background','red');//一组元素中的第二个

index()索引,索引就是当前元素在所有兄弟节点中的位置

    alert($(‘#h’).index());

attr()

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

总结：
1filter与has的区别
filter和not是针对前面这个元素的，而has是看这个元素里面的东西的

html:<div>div1<span class="box">span</span></div>
<div class="box">div2</div>
Js:  $('div').has('.box').css('background','red');    //div1变红
     $('div').filter('.box').css('background','red'); //div2变红

2关于next

html:<div>div1</div>
<div>div2</div>
<span>span</span>
Js:  $('div').next().css('background','red');

//div2和span都变红，理解为分别让div1和div2的下一个兄弟节点都变红
3find与has的区别
has()后代中如果有符合筛选条件的，会将整个后代作为一个整体，对这个整体进行操作；
find()筛选出符合条件的后代，对筛选出的dom单独进行操作。

$('div').find('h2').css('background','red');

//在div里面找h2，让div里面的h2 变红

$('div').has('h2').css('background','red');

//在div里面是否包含h2,如果包含,让div变红
应用---编写选项卡

$(function(){
    $('#div1').find('input').click(function(){
        $('#div1').find('input').attr('class','');
        $('#div1').find('div').css('display','none');
        $(this).attr('class','active');
        $('#div1').find('div').eq( $(this).index() ).css('display','block');
    });
});

总结：1省略循环 2eq($(this).index())
jQuery方法之属性操作
addClass()
$('div').addClass('box2 box4');
removeClass()
$('div').removeClass('box1');
width()：纯宽width
innerWidth()：width + padding
outerWidth()：width + padding + border
outerWidth(true)：width + padding + border + margin
jQuery方法之DOM操作
动词名词
A.insertBefore(B) A.before(B)
把A剪切到B的前面 A的前面必须是B
A.insertAfter(B) A.after(B)
把A剪切到B的后面
A.appendTo(B) append()
把A添加到B元素里面的最后面
A.prependTo(B) prepend()
把A添加到B元素里面的最前面
remove()删除节点
$(‘<div>’)创建节点
jQuery方法之事件操作和scrollTop
on()绑定事件:不仅可以加系统自带事件，也可以绑定自定义事件，还可以加多个事件

示例1：$('div').on('click mouseover',function(){
        alert(123);});
//点击和移入时都弹出123

示例2：$('div').on({
            'click' : function(){alert(123);},      //点击时弹123
            'mouseover' : function(){alert(456);}   //移入时弹456
        });

off()取消事件

示例：$('div').on('click mouseover',function(){
        alert(123);             //$(‘div’).off();取消所有事件
        $('div').off('mouseover');  //只取消mouseover事件，写on的里面或外面有区别
    });

scrollTop()纵向的滚动距离

示例：$(document).click(function(){
        alert( $(window).scrollTop() );  
    });

scrollLeft()横向的滚动距离
总结：1addClass关于重复的不会重复添加
2alert($(‘oDiv’).width())与alert($(‘oDiv’).css(‘width’))区别:前者无单位，后者有单位
3insertBefore与before区别：后续操作不一样

  $('span').insertBefore( $('div') ).css('background','red');//span变红
  $('div').before( $('span') ).css('background','red');//div变红

4$作用 1相当于window.onload 2选择元素 3创建节点
应用---编写弹窗
样式中

<style>
*{ margin:0; padding:0;}
#login{ width:300px; height:300px; border:1px #000 solid; position:absolute;}
#close{ position:absolute; right:0; top:0;}
</style>
JS中：$(function(){
    $('#input1').click(function(){
        var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>');
        $('body').append( oLogin );
        oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
        oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 );
        $('#close').click(function(){oLogin.remove();});
        $(window).on('resize scroll',function(){
            oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 );
            oLogin.css('top' ,($(window).height() - oLogin.outerHeight())/2 +                       $(window).scrollTop() );
        });
    });
});

总结:1创建元素$(‘<div>’) 2居中($(window).width() - oLogin.outerWidth())/2 ；
3 $(window),$(document)不写引号
jQuery方法之事件细节
ev event对象
ev.pageX ev.pageX(相对于文档的);clientX(相对于可视区); 可视区+滚动条距离 =文档
ev.which ev.which类似于keyCode,比keyCode强大,用which时鼠标的键值也能取到
ev.preventDefault(); 阻止默认事件
ev.stopPropagation(); 阻止冒泡的操作
return false;阻止默认事件 + 阻止冒泡的操作
one() 只执行事件一次
示例：$('div').one('click',function(){
alert(123);
});
jQuery方法之位置操作
offset() 是原生的left 和top的集合;到屏幕的左距离，上面的距离
示例：alert( $('#div2').offset().left ); //获取到屏幕的左距离
示例：alert( $('#div2').offset().top ); //获取到屏幕的上距离
position()到有定位的父级的left值,把当前元素转化成类似定位的形式

示例：<div id="div1">
        <div id="div2"></div>
</div>
#div1{ width:200px; height:200px; background:red; overflow:hidden; margin:20px;                 position:absolute;}
#div2{ width:100px; height:100px; background:yellow; margin:30px; }
alert( $('#div2').position().left );                  //输出：0
如果div1没有定位,alert( $('#div2').position().left );    //输出：20

parent()获取父级原生的parentNode
offsetParent()获取有定位的父级原生的offsetParent
val()获取表单元素的值
示例：alert( $('input').val() ); 取值
$('input').val(456); 赋值
size()获取一组元素的长度，类似length
each()
$('li').each(function(i,elem){ //一参：下标二参 : 每个元素
$(elem).html(i); //0 1 2 3 4
});
应用---拖拽

$('div').mousedown(function(ev){
        var disX = ev.pageX - $(this).offset().left;
        var disY = ev.pageY - $(this).offset().top;
        $(document).mousemove(function(ev){
            $('div').css('left',ev.pageX - disX);
            $('div').css('top',ev.pageY - disY);
        });
        $(document).mouseup(function(){$(document).off();});
        return false;});

hover() 鼠标移入移出的时候

示例：$('#div1').hover(function(){
        $(this).css('background','blue');
    },function(){
        $(this).css('background','red');
});

show() hide()显示隐藏

示例：$('#div1').hover(function(){
        $('#div2').hide(3000);      //移入隐藏,3S内隐藏
    },function(){
        $('#div2').show(3000);      //移出显示,3S内显示
});

fadeIn() fadeOut()淡入淡出

示例：$('#div1').hover(function(){
        $('#div2').fadeOut(3000);   //淡出，默认400MS
    },function(){
        $('#div2').fadeIn(3000);    //淡入
});

slideDown() slideUp()

示例：$('#div1').hover(function(){
        $('#div2').slideDown();     //向下展开
      },function(){
        $('#div2').slideUp();       //向上卷曲
  });

fadeTo(时间，透明度)关于透明度范围的方法

示例：$('#div1').hover(function(){
        $('#div2').fadeTo(1000,0.5); //1S内到半透明
     },function(){
        $('#div2').fadeTo(1000,1);   //1S内到透明度1
      });

英文：http://api.jquery.com/
中文： http://www.css88.com/jqapi-1.9/

jQuery高级
get() : 把JQ转成原生JS，不写下标，获取的是集合

示例1：alert( $('#div1').get(0).innerHTML );//就算只有一个元素,也是一个集合，所以要写下标
示例2：for(var i=0;i<$('li').get().length;i++){//转成一组li的集合
        $('li').get(i).style.background = 'red';
       }
    for(var i=0;i<$('li').length;i++){  //jq下也有length
        $('li').get(i).style.background = 'red';
     或  $('li')[i].style.background = 'red';
}

总结：jq转原生法1get() 法2[i]
Jq中outerWidth()与原生的offsetWidth区别
原生的offsetWidth获取不到隐藏元素的值，但outerWidth可以，innerWidth也可以
text(): 设置文本,合体的特例

示例<div>div1<span>span</span></div>
<div>div2</div>
<div>div3</div>
alert( $('div').html() );   输出：div1<span>span</span>

特点1取值赋值合体 2取值只取到第一个 3包括文本和标签
alert( $('div').text() ); 输出：div1 span div2 div3
特点1会获取所有的内容 2不包括标签
$('div').text('<h3>h3</h3>');设置文本，标签也当做文本来设置
remove() 与 detach()
detach() 跟remove方法一样,会删除元素，只不过会保留删除这个元素的操作行为

示例：$('div').click(function(){
        alert(123);
     });

var oDiv = $('div').detach();//用remove删除,则在次添加后点击事件不存在
$('body').append( oDiv );//用detach删除,则在次添加后点击事件仍然存在
总结：$('div').remove();$('div').detach();删除元素的返回值就是当前这个元素
关于$
$(function(){ })是$(document).ready(function(){})的简写
等DOM加载完就可以执行了 , 性能要好,比window.onload加载的快
jQuery的DOM操作
parents() : 获取当前元素的所有祖先节点，参数就是筛选功能

示例1html中：
<body class="box">
    <div id="div1" class="box">aaa
              <div id="div2" class="box">bbb</div>
    </div>
   </body>
$('#div2').parents().css('background','red');//div2的祖先节点有div1 body html
$('#div2').parents(‘body’).css('background','red');//   div2的祖先节点只选body
$('#div2').parents(‘.box’).css('background','red');//div1 body变红

closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
示例2:$('#div2').closest('.box').css('background','red');// 自身变红
siblings() : 找所有的兄弟节点，不包括自身。参数也是筛选功能。

示例一:$('span').siblings().css('background','red');

//span元素的所有兄弟节点全变红，但不包括span元素

示例二:$('span').siblings('em').css('background','green');

//找span元素的兄弟节点em，使其变红
nextAll() : 下面所有的兄弟节点，参数也是筛选功能

示例：$('span').nextAll().css('background','green');

//span下面的所有兄弟节点都变绿，不包括span
prevAll() : 上面所有的兄弟节点

示例：$('span').prevAll().css('background','green');

//span上面的所有兄弟节点都变绿，不包括span
Until() : 截止
nextUntil（）载止到哪为止,不写参数时和nextAll()作用一样
示例一:$('span').nextUntil().css('background','red');
//，从span(不包括span)下面的所有兄弟节点变红

示例二:$('span').nextUntil('h2').css('background','red');

//从span到h2之间的兄弟结节全变红，但不包括span和h2
parentsUntil() nextUntil() prevUntil()
clone() :复制节点.可以接收一个参数，作用是可以复制之前的操作行为

示例：$('div').click(function(){
        alert(123);});
     $('div').clone(true).appendTo( $('span') );

//克隆div元素,添加到span里面的最后位置.并且点击克隆后的div可以弹出123.
总结:clone()可以复制节点，也可以复制行为

wrap()包装
示例html:
<span>span</span>
<div>
<span>span</span>                  $('span').wrap('<div>');//给每个span包装一个div
</div>
<span>span</span>
输出
<div><span>span</span></div>
<div>
<div><span>span</span></div>        
</div>
<div><span>span</span></div>
wrapAll() 整体包装
示例：<span>span</span>
      <span>span</span>
      <p>p</p>
      <span>span</span>                 $('span').wrapAll('<div>');
<div>
     <span>span</span>
      <span>span</span>
      <span>span</span> 
</div>
<p>p</p>
//把p剪切出来，wrapAll会改变dom节点方式
wrapInner() 内部包装
示例： <span>span</span>
       <span>span</span>
        <span>span</span>           $('span').wrapInner('<div>');  
       <span><div>span</div></span>
       <span><div>span</div></span>
        <span><div>span</div></span> 
unwrap() 删除包装 ( 删除父级) : 不包括body
总结1：wrap(‘<div>’); 这里面的元素要用<>括起来。
add()
示例：var elem = $('div');         //elem装了div
      var elem2 = elem.add('span'); //elem2装了div和span
      elem.css('color','red');
      elem2.css('background','yellow');
slice():截取指定节点的范围，包头不包尾
示例：$('li').slice(1,4).css('background','red');//截取到第1 2 3个
serialize()    serializeArray()对数据进行数据串联化的方法
示例：<form>
        <input type="text" name="a" value="1">
        <input type="text" name="b" value="2">
            <input type="text" name="c" value="3">
     </form>
console.log($('form').serialize());  输出： a=1&b=2&c=3(是个字符串)
console.log( $('form').serializeArray() );  输出:
    [
        { name : 'a' , value : '1' },
        { name : 'b' , value : '2' },
        { name : 'c' , value : '3' }
    ]

jQuery中的运动
animate()
第一个参数 : {} 运动的值和属性
第二个参数 : 时间(运动快慢的) 默认 : 400ms
第三个参数 : 运动形式只有两种运动形式 ( swing(缓冲,慢快慢,默认) linear(匀速) )
第四个参数 : 回调函数

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

链式运动法一：应用第四个参数

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

链式运动法二：应用链式运动

    $(this).animate({width : 300} , 2000).animate({height : 300} , 2000);

stop()停止运动,默认只会阻止当前运动，不会阻止后续运动

示例：$('#div1').click(function(){
            $(this).animate({width : 300} , 2000).animate({height : 300} , 2000);
  });    //  链1：宽                               链2：高
$('#div2').click(function(){
    $('#div1').stop(); 
});

总结:当div1在链式1中运动时被stop,=>链1运动停止，链2运动仍然继续
当div1在链式2中运动时被stop,=>当即停止链2运动
stop(true) 阻止后续的运动
示例：$('#div1').stop(true);
总结:无论div1在链式1还是链式2中被stop时，当即全部停止
stop（true,true);可以立即停止到指定的目标点
示例：$('#div1').stop(true,true);
总结：当div1在链式1中运动时被stop,=>链1马上停到宽为300的位置，链2不动
当div1在链式2中运动时被stop,=>链2马上停到高为300的位置
示例：$('#div1').stop(false,true);
总结:当div1在链式1中运动时被stop,=>链1马上停到宽为300的位置，链2依然以swing方式运动
finish()立即停止到所有指定的目标点

示例：$('#div2').click(function(){
            $('#div1').finish(); 
});

总结：无论div1在链式1还是链式2中被finish时,宽高马上都停到300的位置
delay()延迟
示例：$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);
宽走完后延迟1S后在走高

delegate() 事件委托 undelegate()取消事件委托

示例:$('ul').delegate('li','click',function(){
        this.style.background = 'red';
        $('ul').undelegate();
    });

原理:利用冒泡原理，事件加给了ul,li本身没有事件
好处 1省略了循环操作，(只给ul加事件),大大提高性能
2后续添加的li都拥有事件的操作
trigger()主动触发特别适合自定义事件

示例一：$('#div1').on('click',function(){
        alert(123);
     });
    $('#div1').trigger('click'); //不用点击加载后马上弹出123
示例二：$('#div1').on('show',function(){
        alert(123);});
    $('#div1').on('show',function(){
        alert(456);});
    $('#div1').trigger('show'); //输出123 456
事件细节ev.data    ev.target事件源   ev.type 事件类型
示例：$('#div1').on('click',{name:'hello'},function(ev){
        console.log(ev.data);  控制台输出：{name:'hello'}
        alert(ev.data.name);   输出:hello
        alert( ev.target );    输出: div
        alert( ev.type );      输出：click
}

总结：如何往function里传参，就在’click’后面写,ev.data可以取到这个参数
$下的常用方法，又叫做工具方法
示例$().css() $().html() $().val() : 只能给JQ对象用
$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 ,叫做工具方法
type() 判断类型
示例：var a = null;alert( $.type(a) );比alert( typeof a );判断的类型更多,更强大
trim() 去掉前后空格
示例：var str = ' hello ';
alert('('+$.trim(str)+')');
inArray() 针对数组，类似于 indexOf
示例：var arr = ['a','b','c','d'];
alert( $.inArray('b',arr) ); 输出：1
proxy()改变this指向的

示例一：function show(){
        alert(this);
        }
    show();  指向windwow
        $.proxy(show , document)();指向document

示例二:关于传参

function show(n1,n2){
        alert(n1);
        alert(n2);
        alert(this);
    }
$.proxy(show , document)(3,4);   //输出 3  4  document
或$.proxy(show , document,3,4)();
或$.proxy(show , document,3)(4);

总结：1$.proxy(函数名,新的this指向,参数);
2 $.proxy(函数名,新的this指向,参数)() => 后面加括号即调用
3 在前面传参的目的，是在事件执行时才发生
例如在事件函数中

  $(document).click( $.proxy(show,window,3,4)  );//点击时才弹 3 4 window
  $(document).click( $.proxy(show,window)(3,4)  );//不用点击，马上就执行

noConflict()防止冲突
var hjr = $.noConflict(); 用hjr来替换$
很多库都是以$为命名空间，为防止冲突

示例：var hjr= $.noConflict();
  var $ = 10;
  hjr(function(){
         hjr('body').css('background','red');
      });
$==jQuery  即 $(function(){  })==jQuery(function(){  });

parseJSON() 把字符串解析成json,注意:此字符串必须是严格模式的json

示例：var str = '{"name":"hello"}';
  alert($.parseJSON( str ).name);

makeArray() 把类数组转成真正的数组

示例：var aDiv = document.getElementsByTagName('div');  //类数组只有下标和长度
  $.makeArray(aDiv).push();

ajax() : json形式的配置参数
url success error contentType data type dataType cache timeout
抽象出来的方法 get() post() getJSON()
支持jsonp的形式：指定?callback=?
写法一：$.ajax({
url : 'xxx.php',
data : 'name=hello&age=20',
type : 'POST', //默认是get
success : function(data){
alert(1);
},
error : function(){
alert(2);
}});
写法2：$.get('xxx.php?name=hello',function(){ 成功的回调； });
写法3：$.get('xxx.php',{name:’hello’},function(){ });
写法4：$.post('xxx.php',function(){ });
$.get():ajax的get提交方式; $().get():jq对象转成原生
$.getJSON('xxx.php?callback=?',function(data){
data
});
名字随机({});
插件
$.extend({插件名，函数})：扩展工具方法下的插件形式 $.xxx() $.yyy()
$.fn.extend：扩展到JQ对象下的插件形式 $().xxx() $().yyy()

示例一：
<script src="jquery-1.10.1.min.js"></script>
<script>
$.extend({
    leftTrim : function(str){
        return str.replace(/^\s+/,'');
    },
    rightTrim : function(){}
});
</script>
<script>
var str = '  hello  ';
alert( '('+$.leftTrim(str)+')' );
</script>

示例二：
<script src="jquery-1.10.1.min.js"></script>
<script>
   $.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;
        });
    </script>
<script>
$(function(){
    $('#div1').drag();
});
<script>

jQuery(m)

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

js进阶---...