jquery

JQuery
1.id            $(‘#box’)          可以选择标签的#id
2.class             $(‘.box’)           选择标签的.class
3.标签obj         $(‘div’)             直接获得标签
4.并集选择器          $(‘#box,#box2’)      选择多个有id或class的标签
5.交集选择器          $(‘div#box1’)          选择同一标签中有某个class或id
6.派生选择器          $(‘div span’)         选择标签中的所有span标签
7.子类选择器          $(‘div>span’)          选择div下的span子集（仅包括子级）
8.紧邻兄弟选择器    $(‘div+span’)          获取div下紧挨着的span标签
9.后续选择器          $(‘div~span’)          这个div后的所有span标签
10.得到第一个         $(‘li:first’)          （’某标签 冒号 first’）获得第一个某标签
11.最后一个      $(‘li:last’)          获得li的最后一个标签
12.下表索引      $(‘li:eq(3)’)        获得第几li标签的     （从0开始）
13.Get大于范围          $(‘li:gt(5)’)        获得第5+1个li标签往后的   （>5）
14.Lt小于某个范围       $(‘li:lt(3)’)         获得123之前的标签
15.Even偶数           $(‘li:even’)         获得下标为偶数的li标签
16.Odd 奇数           $(‘li:odd’)          获得下标为奇数的li标签
17.Not节点       $(‘li:not(#li1)’)   获得除了class为li1的标签外的所有li
18.标题选择      $(‘:header’)       获得文本中所有带《h》的标签
19.标题+class         $(‘:header.h’)          获得标题中带class为h的标签
20.lt+gt规定范围     $(‘li:gt(1):lt(3)’)  gt是从那个位置（下标）lt是个数 gt不包括本身
21.标签+class         $(‘li.list’)           获得li标签下的class为list的li标签
22.包含选择器         $(‘div:contains(我)’)  div中有一个内容是“我”的个标签
23.空节点         $(‘div:empty’)               如果有div为空，就可以获得空的div       
24.删除元素      $(‘div.detach()’)            用detach删除的元素，
25.插入元素      $(‘div’).append(‘span’)    在div中插入span标签
26.Has选择器         $(‘div:has(p)’)               获取有这个标签的div 
27.Parent父节点      $(‘div:parent’)               div或标签里有内容的
属性选择器：attr 属性的意思
28.$（”a[href]”）     èè           a标签属性带有href的标签
29.$(“a[href=’http://baidu.con’]”) èèa标签属性等于这个连接，获取这个a标签
30.[attr!=value] $(“a[href != ‘xxxx’]”)      a标签属性值不等于“xxx”获取
31. [attr^=value]    $(“a[href ^= ‘http’]”)           a标签属性开头不是http(正则)获
32. [attr$=value]     $(“a[href $= ‘com‘]”)           a标签属性结尾不是com(正则)获
33. [attr*=value]     $(“a[href *= ‘cn’]”)        a标签有cn的（正则）*=（所有）
34.[attr][attr]          $(“a[href][title*=x]”)           a标签同时有俩个属性的获取
过滤器：
35. eq()下标           $(div).eq()              div的下标（空值后面解释）
36.parent()       $(‘#li1’).parent()           获取li1的父亲元素
37.兄弟元素      $(“#li1”).siblings()         除了li1其他兄弟元素被选中
38.查找元素      $(‘div’).find(‘li1’)       查找div里面的li1
39.filter()类       $(‘div’).filter(‘.box’)        查找所有div类是 class=“box”40.not()类         $(‘div’).filter(‘.box’)           查找所有div类不是 class=“box”
41.本身选择      $(‘div’).has(‘span’)         当前div包含span标签的本身
42.本身类         $(‘div’).has(‘.box’)         当前div包含类是box标签的本身
43.子节点         $(‘div’).children()           div的子级，可以添加id class
44.next()          $(‘div’).next()                从第一个div开始往后的
45.index()         $(‘div’).index()              下标，已经有值
46.val()      $(“#box:checked”).val() 复选单选内容（选中）
47.val()      $(“option:selected”).val()     下拉框的内容（选中）
48.appendTo()  $(‘span’).appendTo($(‘div’))  （div里面有文字）
把span拼接到div里面，文字的后面
49.prependTo() $(‘span’).prependTo($(‘div’))   (div里面有文字)
把span拼接到div里面，文字的前面
50.insertBefore()     $(‘div’). insertBefore($(‘span’))    div插在span前面
51.insertAfter()  $(‘span’). insertAfter($(‘div’))      span插在div后面
52.距离选择èconsole.log($(‘#box’).offset().left) div,box到屏幕的左边距离
53.$(‘#box’).position().left     è     有定位的父级到左边距离
54.offsetParent()     $(‘#box’).offsetParent()  选中有定位的父级
55.parents()           $(‘div’).parents(‘#box)   选中自己本身的祖节点
56.closest()       $(‘div’).closest(‘#box’)         选中最近的祖节点（包括自己）
57.nextAll()       $(‘span’).nextAll(‘p’)         从span元素开始，往后查找到所有p元素
58.prevAll()       $(‘span’). prevAll(‘p’)              从span元素开始，往前查找到所有p元素
59.nextUntil()          $(‘span’).nextUntil(‘h2’)   spanàh2 截止   (往后)
60.prevUntil()          $(‘span’).nextUntil(‘h2’)   spanàh2 截止    （往前）
61.wrap()包装         $(‘span’).wrap(‘<div>’)   所有的span元素被新创建的div包裹（个体）
62.wrapAll（）   $(‘span’).wrapAll(‘<div>’)     所有的span元素全部整体包装63.wrapInner()      $(‘span’).wrapInner(‘<div>’) span里面的所有文字被div包裹
64.unwrap()删除      $(‘span’).unwrap()         只能 删除父级包装。
动画：
65.hide()消失          $(‘#box’).hide(3000)      div，box消失（）里面加秒
66.show()出现        $(‘#box’).show(3000)          div，box出现（）里面加秒
67.fadeOut()淡出     $(‘#box’).fadeOut(3000) div,淡出（）里面加秒
68.fadeIn()淡入 $(‘#box’).fadeIn(3000)   div,淡入（）里面加秒
69.fadeTo()      $(‘#box’).fadeTo(3000)  div,淡入加淡出（）里面加秒
70.slideUp()动画出   $(‘#box’).slideUp (3000) div动画出（）秒
71.slideDown()动画入    $(‘#box’).slideDown(3000)   div动画入（）秒
一：页面加载后，执行JQ：
      $( function( ){       })
二：内容改变：
      1.<divid=”box”>我爱学习</div>à      html();
      $(“#box”).click(function(){  $(“#box”).html(”谁信”)  })è<div>谁信</div>
      2.<pid=”p1”>我喜欢你</p>à         text();
      $(“#p1”).click(function(){   $(“#p1”).text(‘鬼才信’)   })è<p>鬼才信</p>
      3.<input  type=”text” id=”text”  value=”加油努力”>
         <button id=”btn”>点击</button>
          $(“#btn”).click(function(){   $(“#text”).val(‘奋斗，拼搏’)     })
三：事件：（绑定，清除，传递,  自动）
      1.$(‘#box’).on(‘click  mouseover’ , function(){  alert(1) }) 
// 绑定俩个事件同时执行
      2.$(‘#box’).on({
           “click”:function(){alert(1) },
           ‘mouseover’:function(){alert(2) }
})
3.清除函数（事件）：
  $(‘box’).off(‘click’)  // 清除点击事件
  $(‘box’).off()    // 清除所有事件
4.清除右键菜单：
  $(document).contextmenu(function(){  return false  })
5.转为DOM对象：
  $(‘#box’).get(0).onclick = function ( ) {   }
6.事件的委托（传递）：delegate( )
  // ul的事件挂载到li元素上
  $(‘ul’).delegate(‘li’,’click’ , function( ){
       $(this).css(‘background’,”red”) 
})
           取消事件代理：$(‘ul’).undelegate() 
7.事件自动执行： trigger()
           $(‘box’).click(function(){   alert(1) })
           $(‘box’).trigger();  // 将点击事件成为一种自动执行事件
   $(‘box’).on(‘a’,function(){    alert(123)  })
//box绑定一个自定义的函数
   $(‘box’).on(‘a’,function(){    alert(456)  })
   $(‘box’).trigger( );  // 会依次执行俩个自定义的函数
8.事件细节：this指向改变----proxy（）
          function  show（n1,n2）｛console.log(n1);
 console.log(n2);     console.log(this) ｝
$.proxy(show,document )(3,4) // 将 show的this改成document
防止事件冲突： onconflict( )          

四：创建克隆标签：
  1.vara = $(“<li></li>”);    （创建）
  $(‘body’).append(a)  // 将创建的标签插入 body里面
  2.clone()  （克隆）
  <div  id=”box”></div>    <span></span>
  $(“#box”).clone( true ).appendTo( $(‘span’) )
五：添加属性：
           <div></div>
           $(‘div’).attr(‘class’,’box’)   // 给div添加一个  class=”box”
           $(‘div’).attr(‘title’,”123”) // 给div添加一个属性 title=“123”
六：删除类添加类：
           Css:   .box1{ background:red }    .box2{  background:blue}
           JQ:   $(‘div’).addClass(‘box1’)   // 给div添加box1 类（属性）
                   $(‘div’).removeClass(“box1”)   // 删除div的类（属性）
七：JQ中的元素的宽高：
           $(“div”).width()   /   height()   // div的宽高
           $(“div”).innerWidth()  / innerHeight()  // 宽高+padding
           $(“div”).outerWidth()  / outerHeight()  // 宽高+padding+border
           $(“div”).outerWidth(true)  / outerHeight(true)
 // 宽高+padding+border+margin  
八： JQ 中的for循环：
      $(“li”).each(function(i , elem ){    $(this).html(i)   })    
      // i  代表下标       elem元素 代表当前元素
九：元素绑定元素的css样式:
  <div></div>        var  a=$(“div”)
<span></span>       var b=    a.add(“span”)   //绑定前面的样式    
a.css(“color”,”red”)  
b.css(“color”,”green”) //给b加上样式颜色   b也会绑定a 的样式
十：将字符串转换为JSON    (JQ中)
var str=  ” {  ‘name’: ’baobao’ } ”
console.log(  $.parseJSON(str) );   //  parseJSON 将字符转化为JSON
console.log($.parseJSON(str).name);   //加.name取出值
十一:获取类数组:
var    arr  =   document.getElenmentByTagName(“div”);
console.log(  arr.push(1) )    //获取类数组
var arr2=  $.makeArray ( arr )   //转成数组  $.makeArray
console.log(arr2);
arr2.push(1);   （添加）                 console.log(arr2);
十 二：animate()动画：
      animate( )：
           第一个参数：｛｝运动值和属性
           第二个参数：动画执行的时间（运动的快慢）默认值400sm
           第三个参数：运动形式，只有俩种àswing(慢快慢，默认)-------linear（匀速）

   第四个参数：回调函数。

      案例：
1.------$(‘#box’).click(function(){       $(this).animate({width:300,height:300},4000,”linear”,
function( ){   } )  // 回调函数没有内容就可以用不用写
   })
2.------ $(‘#box’).click(function(){
$(this).animate({width:300},2000).delay(1000).animate({width:300},2000)     

// delay() // 延迟多少秒后在执行
})
3. $(‘#box’).stop()  à默认值   阻止当前运动（后续继续执行）
$(‘#box’).stop(true)  à阻止后续运动（当前运动继续执行）
$(‘#box’).stop(true，true)  à当前运动立即到达目标，停止后续运动
$(‘#box’).finish（）  à 立即停止所有，达到最后的目标