jQuery基础

1、应用jQuery库： <script  src="  路径/名称.js "  ><  /script>

导入 外链式css样式：<link  rel="stylesheet"  href=" 路径/名称.css  />

2、$(document).ready（function(){ ...//代码区  }）; ---作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码

3、jQuery对象与DOM对象不一样：

原生js方式：

    var p = document.getElementById('imooc');
    p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';
    p.style.color = 'red';

jQuery方式：

var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

           【 通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。】

4、转化。jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素:注意“” 是否需要

   1） jQ转化为DOM对象

   var div=$("div").get( 0 );  //利用get(  0  )将jQ对象转化为DOM对象  var $div = $('div');    // jQuery对象--->DOM对象  var div = $div[0]; //转化成DOM对象---$div.get(0);                           div.style.color = 'red' ;     //操作dom对象的属性

 

 2）DOM对象转化为jQ对象

var div=$ (  document.getElementById( "div" ));  //利用$(DOM对象)，将DOM对象转化为jQ对象var div = document.getElementsByTagName('div');      //DOM对象--->jQuery对象var $div = $(div);         //转化为jQuery对象var $first = $div.first();        //找到第一个div元素$first.css('color', 'red');                //给第一个元素设置颜色

【在jQuery事件中，this是原生js对象，转化为jQuery对象：$(this)     】

外部样式 < 内部样式 < 内联样式

5、jQuery、$  ---变量名已被使用，二者作用是一样的

也可以自己命名一个变量作为jQuery对象，同时可以释放$或jQuery, 其一可以作为正常变量来声明、赋值、使用

var jq=jQuery.noConflict( );     ---注意只能定义一个（$、jQuery）,且和释放时使用的要不同【因为变量的提升】

6、入口函数三种方式

1）jQuery(document).ready(function($) {...})

2）$(document).ready(function($) {...})

3）$(function(){ ..} )

7、jQuery入口函数不会实现覆盖，加载完所有的标签后执行

     js的入口函数window.onload会覆盖，只执行最后的一个，加载完所有的标签和内容 后 执行

8、选择器：$("div")  或   $("#idName")   或    $(".className")  ---根据选择器的类型传参

        1）下一个兄弟选择器  $("#li2+li")   ---先找到基准结点，再用+标签

        后面的所有兄弟选择器  $("#li2~li")   ---    .....用~

2）筛选选择器（都是以: 开头）

   " li : eq( 4 ) "---先选中：前面的所有元素 在筛选第几个【参数是index，选中的集合中，从0开始】

       : even/odd    ---下标是偶数/奇数的元素 

: lt( 5 )   ---less than 小于下标的元素，不包括自身

: gt(6 )   ---greater than 大于下标的元素，不包括自身

: first/last  ----第一个/最后一个

3）子元素筛选选择器

$('.first-div a:first-child');       //父元素是class 为 first-div ,第一个子元素是a的 【元素只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)  】

$('.last-div a:nth-child(2)');       //n值是“索引”，也就是说，从1开始计数

 ".tag : eq( 2 ) "  区别：索引、若两个指定class下，会将两个class下的元素当成一个集合，从0开始往下排列，而  nth-child(2) 则将两个父元素分别当成一个集合，各自从

4）属性选择器（属性写在【】中）

 " a [ href ] " ---  有href 属性的标签

      [ href = ' value ' ]  ---属性值为 value 的标签  （注意‘’ 这个得和外面的“” 相区分）

      [ href  ! = ' value ' ]    --- 属性不为href 和  属性是href 但 属性值 不为 value 的标签

       [ href ^/$ = ' value ' ]   ---- 属性值以 value 开头/结尾 的标签

     [ href  * = ' value ' ]     ----  属性值 包含 value 的标签

       [  ...]   [   ...]   ---多个属性选择满足 的标签

5）表单选择器/表单属性选择器

$('input: text');  -----要写input

9、css函数 ：

$(" li ").css( "backgroundColor" , function( index  ,value){  ...   }  )  ;    ---本来，css样式的第二个参数就是前一个参数样式值，现在用一个匿名函数去生成，函数的返回值就是样式值 【index 选中标签的下标索引，value 是样式值】

事件：

  1）只需要把之前的名字的on去掉（使用事件名称） 如 onclick-> click   onchange -> change

$(" #box " ).hover( function(){  ..} ,function(){  ..} );   ----hover()方法的两个参数，相当于鼠标进入、离开的事件

   2)）on监听 ---推荐

$( " #button " ).on ("click" , function(){  ...} );    ---on( ) 第一个参数设定什么点击事件（事件名称） ，第二是事件处理程序 （off移除）

函数:  

 1）$("button").addClass(" fl ") ;   --- addClass()  添加类型

 2）          ...     removeClass(...) ;  -------移除类型

 3）          ...    .toggleClass(...);    -- ----  如果存在（不存在）就删除（添加）一个类型

 4）          ...    .attr( { " id " :  " btn " ,  "class": " fl " } ) ;

     .attr("  " )   /  removeAttr(  )   //一个参数（属性名）

 5）          ...    .html( "  设置文本，会覆盖 " );   ---- html() 没有参数则是获取文本内容

.text()结果返回一个字符串，包含所有匹配元素的合并文本 ---

.html处理的是元素内容.text处理的是文本内容

.val( ) ----处理表单元素的值，比如 input, select 和 textarea

 6）.eq( 2 ) ; ----类似于选择器:eq() ，找到下标为2的元素标签

7）.index( ); -----获取当前元素的下标---从整个指定的集合来看

8）     .show("slow" , function() {  ...//动画结束后的行为 });   ----显示，无参则无动画

9）    .hide(  );           ---隐藏

       10）   .toggle(   );       ---切换 ，显示与隐藏

       11）  .slideDown/slideUp/slideToggle( );  ---向下出现，向上隐藏，切换

       12）  .fadeIn/fadeOut/fadeToggle( );  ---淡入淡出（慢慢出现、消失）通过透明度的改变实现【fade是有状态的，toggle下，连续点同样一个，会改变，in和out的状态需要主动改变】

       13）  .fadeTo( 1000, 0.3 );  ---第二个参数是透明度的值，一秒后透明度的变化

       14）.animate( { width:"30px" ,left:" +=30px" } ，'fast' ，'swing' , function(){  ...} ) ;  ---动画，第一个参数{....}是要改变的属性(注意如果是要移动的话指定left的前提下要是有定位的，第二个是时间 ，第三个是动画的效果【速率，先慢后快，加速...】，第四个是动画完成时执行的函数【回调函数】

       15） .stop( true , true) ;   ---结束动画，无参则结束一切动画 ，第一个参数是true则清空队列，立即结束动画，第二个参数true则 当前正在执行的和在执行队列的立即完成动画

        16）  .delay( 1000) ;     ----延迟队列中项目执行

17）  .map( ) ;   ----将一组元素转换成其他数组（不论是否是元素数组)，可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。

var arr=$('span').map(function(index, elem) {    return $(this);  }) ;    ---函数返回的值就是元素是span的数组

18）.children( ' .li' );   ---取得子元素的集合，无参则获取所有匹配的元素，参数是进一步的筛选条件

19）   .parent/parents(  );        ---该元素的父元素/祖先元素的集合

20）  .offsetParent(  ) ;    ----最近的、带有定位的父元素【如果都没有，找到html】

21）   .next( ' #box' );     ---下一个兄弟元素【多个满足元素匹配的集合，则查找到多个】，并且id是box ，参数是进一步的筛选条件，若没有则是当前元素的下一个

22）   .nextAll(   ) ;     ---当前元素的下面所有兄弟 元素

23）   .prev/prevAll() ;   ---        ....上一个/上面所有兄弟元素

24）   .siblings( ':odd') ;     ---   所有兄弟元素【同辈元素】，当进一步筛选时，比如下标奇数的元素，则整个兄弟元素集合排序时看，当前元素是不能算进去的

10、结点

1）$( " html结构 ");----使用HTML结构创建： $(" <div id=" box"  class=" layout" > 文本内容</div>"  )  ;

2）  A.append(B) =  B.appendTo(A)  ;    ----向结点元素插入内容，放在最末尾

append()    前面是被插入的对象，后面是要在对象内插入的元素内容appendTo()  前面是要插入的元素内容，而后面是被插入的对象

3）A.prepend(B) = B.prependTo(A) ;   ----向结点元素插入内容，放在首位

4）.after( content) /  before(content) ;   ---在匹配的每个元素后面/前面  c插入结点元素作为其兄弟结点

• 都可以接收HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插入到集合中每个匹配元素的前面或者后面
• 2个方法都支持多个参数传递after(div1,div2,....) 

B.insertAfter(A ) /  B.insertBefore( A)     ---内容和目标的位置

    5） $('.box').empty();   ---移除指定元素的所有子节点和文本（不包括自己）【移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中  】

       6） $('p').remove(" :contains('3') ")  ;   ---移除指定元素及其所有子节点（包括自己），若带参数，则表示进一步筛选再删除  ，可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点

$("p").filter(":contains('3')").remove();

7）   .detach();     ---删除，保留数据的删除【界面不可见，节点还是保存在内存中，数据与事件都不会丢失】，通过append(  )方法可以将删除的恢复过来。JQuery特有的，所以它只能处理通过JQuery的方法绑定的事件或者数据

8） .clone( ) ;---克隆：复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点

注意：如果参数为true ，则代表连事件也一起拷贝

9）A.replaceWith( B);           ---用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

10）   B.replaceAll( A ) ;          ---同样是替换

11）  .wrap(  );   ---给一个指定元素添加一个父元素包裹起来

$('p').wrap('<div></div>') ；     ----参数可以是元素，也可以是一个回调函数

$('p').wrap(function() {     return '<div></div>' ；    //与第一种类似,只是写法不一样     })；

12）  .unwrap() ;     ---删除匹配元素的父元素

13）  .wrapAll( );   ---将集合中的每一个元素用其他元素包裹起来，给每一个匹配的元素增加一个父元素

参数是元素 $('p').wrapAll(' <div></div>');   ----  <div>  <p> </p>    <p> </p>  </div>

参数是回调函数   function(){ return  "<div> </div>"｝<div>  <p> </p>  </div>     <div>   <p> </p>   </div>

14）  .wrapInner( );   ---将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素

11、样式、窗体属性、方法

1)$('p').outerWidth( false) /outerHeight(true );  --- 获取第一个匹配元素外部高度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。【设置为 true 时，计算边距在内】---（对应js的offsetWidth）

2)$(window).scrollTop() ;   ---窗体 滚动的距离

3)   .html(  );    ---获取第一个匹配元素里面的html内容，包括标签【有参数就是设置内容的值】

4)   .text(   );    ---获取 匹配元素里面的文本内容

5) $('input').val( ' 设置的内容' );  ---获取/设置 输入框的内容值

6)  $.each( $(" li ")，function( index ，value) {  ...}   );    ---调用全局变量$的循环遍历数组方法，两个参数：第一个参数是要遍历的数组名，第二个是回调方法，index是索引，value是值

=  $( " li " ).each(  function() {  ...}  ) ;  ---直接用 数组 调用方法

$.each( { 'key1': "value1", name: 'cc' }，function(  key ,value ) {   ...} ) ;    ---遍历json数据，只需将index变为key

类似第一个方法，只是第一个参数变为一个json数据对象名，第二个参数同样是回调函数，用来对对象进行操作

7)  .end( );  ---回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作，则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作

   $('li : eq(2 ) ').next().css(' ..' ).end.prev().css(' ..' );    ---保证了，在设置第三个li 的下一个兄弟样式后，再设置第三个li 的前一个兄弟的样式【若没有end，则设置完next() 之后，会改变当前$(this)】

8)  A.find(' li' );  ---查找到相应元素。遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以

9)  .closest( );  ---从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素;向上查找，直到找到一个匹配的就停止查找  [ul.class/ul .class]

10)   .add( );   ---添加一新的元素,可以接受几乎任何一个jQ对象、js对象---注意这个添加

$('li').add('p');

$('li').add(document.getElementsByTagName('p')[0]);

$('li').add('<p>新的p元素</p>').appendTo(目标位置);

相关例子（转侵删）：http://www.imooc.com/code/10393

12、 事件

1)点击：     .click() ; ---单击       .dbclick();    ---双击         

$('button').click( function(){   ...//事件   } );    ---

相关例子（转侵删):http://www.imooc.com/code/9710

2)  mousedown()/mouseup() ;      ---鼠标按下

3)  mouseover( )/mouseout();    ---鼠标移入移出

4)  mouseenter()/mouseleave() ;   ---鼠标进入/移出，阻止 子元素事件的冒泡

5)  hover(   function(){  ...//鼠标进入触发事件} ，function(){   ...//鼠标移出事件  }   );  ---鼠标移入移出事件,参数不固定

6)  focusin(  ..)/focusout( ) ;  【表单事件】 ---元素获得/失去焦点时触发的事件

$("#test").focusin(11111,function(e) {    //this指向 div元素    //e.data  => 11111 传递数据});

focus()在元素本身产生，focusin()在元素包含的元素中产生   http://www.imooc.com/code/9796

7)  change( );   【表单事件】---监听value值的变化。<input>、<textarea>、<select>元素，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发

8)  select(  );   【表单事件】---input 中，textarea 或  text 的元素中的文本被选择时触发

 $("input").select(function(e){  //监听input元素中value的选中        alert(e.target.value);       //触发元素的select事件    });

9)  submit(  );   【表单事件】---提交表单

   例子（如侵删）：http://www.imooc.com/code/9800

10) keydown( )/ keyup() ;   【键盘事件】---键盘按下和抬起触发的事件

注意：同步输入时，keydown() 会之后 一个字符

 $('.target1').keydown(function(e) {    //监听键盘按键
        $("em:first").text(e.target.value);       //获取输入的值
    });

11) keypress( );   【键盘事件】---类似keydown()

12) .on( events ,function(){  ....//事件  }   ) ;----事件绑定

 例子（如侵删）：http://www.imooc.com/code/10033

13) off("mousedown mouseup" ,function(){  ..}  );    ---解除on的绑定，第一个为要解绑的事件，可一个或多个，若无参数则解绑所有事件

14) event.target  ---事件对象。代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素

一个ul里有多个li，为了给每个li添加事件，一个一个添加过于繁琐，就直接给其父元素ul添加，由于事件的冒泡，点击li就触发了ul，为了找到是哪个li就用 事件对象

//多事件绑定        $("ul").on('click',function(e){           alert('触发的元素是内容是: ' + e.target.textContent)        })

15)事件对象的属性和方法

event.type---触发元素的事件类型

event.pageX  /  event.pageY   ---获取鼠标当前相对于页面的坐标

event.preventDefault()       ----阻止默认行为

   event.stopPropagation()     ----阻止事件冒泡

event.which     ----获取在鼠标单击时，单击的是鼠标的哪个键

event.currentTarget     ----事件冒泡过程中的当前DOM元素

this 和event.target   ----DOM对象，通过$(  )  转化为jQ对象【例子（如侵删）：http://www.imooc.com/code/10048】

16) .trigger( 'click') ;    ----主动去触发事件。根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('#elem').on('click', function() {    alert("触发系统事件"); });

$('#elem').trigger('click');

$('#elem').on('Aaron', function(event,arg1,arg2) {//传递参数方式    alert("自触自定义时间"); });

$('#elem').trigger('Aaron',['参数1','参数2']);

17) .triggerHandler( );  ---类似trigger()

       

13、动画

1)  $( " li " ).show/hide( "fast"，function() {   ...//动画完成之后的事件 }  ) ; ---显示/隐藏动画，可无参

2)  .toggle(  );    ---切换显示、隐藏动画,,   通过设置display来实现隐藏

· show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置

· 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式

· 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

3)  .slideDown/slideUp(  ) ;   ---上卷下拉效果，，通过设置高度来实现隐藏

4)  .slideToggle(  ) ;    ---切换上卷下拉

5)  .fadeIn/fadeOut( 1000, "linear"   ) ;    ---淡入淡出,,  通过设置透明度来实现隐藏

6)  .fadeToggle(  ) ;    ---切换淡入淡出

7)  .fadeTo( "fast"，0.3，function(){   ..}  )  ;    ---指定淡入淡出的最终效果透明度（0-1）

淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，变化的区间[0,1]     转，倾删：来源

8)  . animatr( ....);    ---执行动画【看上面】转侵删示例来源

$('#elem').animate({    width: 'toggle',      height: 'toggle'  }, {    duration: 5000,    specialEasing: {      width: 'linear',      height: 'easeOutBounce'    },    complete: function() {      $(this).after('<div>Animation complete.</div>');    }  });

9)  .stop(queue ... );     ---停止动画

 .stop(); 停止当前动画，点击在暂停处继续开始· .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行· .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

10)  .each( array/object ,function(index ,value ){  ....//回调函数   } ) ; --遍历数组或对象数据的方法

11)  jQuery.inArray( value, array  ,[ fromIndex ]);  用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。【索引>-1则代表查找的值存在于数组之中】

  //指定索引开始的位置                                                                                  var index = $.inArray('a' , ['a','b','c','d','a','c'] , 2);                                          $arrObject.text('a的索引是: '+ index );    

12)  jQuery.trim(   $('input').val()   );    ---用于去除字符串两端的空白字符

13)  .get( index) ;  ----单独获取操作合集中的的某一个元素

1. get方法是获取的dom对象，也就是通过document.getElementById获取的对象2. get方法是从0开始索引3. 可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

14)  .index( ) ;  ---已知元素在合集中找到对应的索引

<ul>    <a></a>    <li id="test1">1</li>    <li id="test2">2</li>    <li id="test3">3</li></ul>

$("li").index();        ---没有传递参数，结果是1，意思是返回同辈的排列循序，第一个li之前有a元素,同辈元素是a开始为0，所以li的开始索引是1
.index( selector )     ---dom对象作为参数
.index( element )  ---jQuery对象作为参数

· 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
· 如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
· 如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1              侵删：示例

14、jQuery 扩展插件（增加方法）

1)给jQuery对象追加函数： 

$.fn.funName=function() {   ...} ;      --调用： $( ' div' ).funName();  

2)给全局变量$/jQuery追加函数

$.funName=function() {  ...} ;      ---调用： $.funName( );

3)背景颜色动画---背景颜色改变动画

4)懒加载---有的图片只有滚动到相应位置才会加载

15、json数据

1)  jsonObject 和jsonArray ,一个是json对象，一个是json数组

jsonObject有key: value 组成，key必须为字符串。 ---以{ key: value   }

jsonArray     ---以[     ]，值可以为jsonObject,也可以嵌套 jsonArray

2)  解析

 var json=$.parseJSON(data);     / /解析 为jsonObjectvar  json_1=json.name;      //获取json数据下的name的值var  json_arr=json.Array;    //获取到了Array下的值，是一个数组【只是key为Array,可以是其他名字】$.each( json_arr，function( index ,value ){        //通过each遍历获取数组里的值var hei=value.height;    //找出所有height的值} ); 

var myUrl = "http://7lrzfo.com1.z0.glb.clouddn.com/mydata.txt";$.ajax({//使用ajax解析网络数据url: myUrl,//请求 数据的地址type: 'get',//请求的方式dataType: 'text'//返回的数据类型//data: {param1: 'value1'},   ---get请求方式不用这个}).done(function(data) {//请求成功之后触发,data接收返回的数据的参数var json=$.parseJSON(data);   //可以将text转化为json数据console.log(json);}).fail(function() {console.log("error");}).always(function() {console.log("complete");});