jQuery总结

 

1 什么是Jquery

 

是一款轻量级的js框架，可以更方便的进行dom操作、事件处理、动画实现以及ajax异步数据传输，并解决了兼容性问题;

 

 

版本介绍

  V1.11.1   1.x 支持ie6+

  V2.1.1    2.x 支持ie9+

 

 

2 网页中引入jquery

 

1) 从jquery.com 下载jquery库;

2) 从cdn中载入 例如百度或谷歌的服务器

 

3 $(document).ready(function(){  代码  });

 

 

简写:  $(function(){ 代码 })

 

 

 

 

4   addClass(“类名”)     给元素增加类名;

removeClass(‘类名’)   删除元素类名

 

5  html()        无参数  读---获取元素的里的内容

   html(“内容”)  有参数   写---设置元素的内容

 

6  on(“click”,function(){  代码  })   绑定事件

   on(‘click’,fn1)                  绑定事件

   off(“click”, fn1)                 解除绑定

 

7 $()  -- 找对象 

基本选择器:  $(“p”)   $(“.pc”)  $(“#box”)

层级选择器:  #box p   后代选择器

#box>p  #box盒内儿子辈的p

             p.pc +p  紧邻的下一个p元素;

             p.pc ~p  后面所有的兄弟p元素;

 

位置选择器1:  索引0

             li:first  li:last  li: eq(n)

             gt(n) 大于  lt(n) 小于

             even 偶数   odd 奇数

 

位置选择器2: 索引1;

     li:first-child   每个ul里的第一个li  li:last-child;

     li:nth-child(n) 每个ul中第第n个元素;

     li:nth-child(even)   even 偶数  odd 奇数

     li:nth-child(3n+1)   n=0 1 2;

 

内容选择器:

contains(“text”)  empty 空元素  parent 有文本子节点

has(“选择器”)

 

属性选择器

$(“a[href]”)         包含href属性的所有a标签;

$(“a[href=’#’]”)      空链接;

$(“a[href^=’http’]”)   所有外链;

$(“a[href$=’.html’]”)  站内链接

 

$(“a[title*=’data’]”)   内容中包含”data”;

$(“a[title~=’data’]”)   内容中包含”data’”单词

$(“a[title|=’data’]”)   内容是以 “data-”开头;

$(“a[href][title|=’data’]”)  有href属性并且title以” data-”开头

$('a[href!="#"]')   href值不是”#’或者没有href属性或者;

 

8 元素显示和隐藏

show()  显示 |  hide()  隐藏 | toggle() 显示/隐藏切换

9 元素淡入淡出

fadeIn()  淡入  |  fadeout()  淡出  | fadeToggle(); 切换;

“fast/slow” – 单词加引号    2000 --  2000毫秒  不加单位;

10 滑动展开/卷起

slideUp()  卷起  |  slideDown()  展开  |  slideToggle()  切换

 

11  改变样式

    css(“属性名”,’值’)    |  css({“属性1” : ”值1” , ”属性2” : ”值2”})

font-size   ---  >   fontSize  ;

 

12 动画 

animate({“属性名1”:”值1”, “属性2”:”值2”} , 2000)

 

13 原生js对象包装成jquery对象后,会新增加方法, 例如 :

document ----  >  $(document).ready()

  js对象转jq对象    增加$()    document--$(document)

  jq 对象转js对象   增加[0]   $(“#box”)[0]

 

14 text()  获取元素内部的文本—会忽略文本中的标签;

  使用: 操作dom结构,html() , 文本操作 text( );

15 var p=$(“元素”).position();  p.left  p.top   绝对坐标;

  Var q=$(“元素”).offset();    q.left   q.top  相对于浏览器偏移;

 

16 find()   $(“父元素”).find(“后辈元素”)  父元素中查找后辈元素;

 

17 each()   $(“元素组”).each(function(index,element){ 代码 })

  index     当前元素的索引值

  element   js的原生对象

  each()  遍历元素组中的每个元素,执行代码的功能;

 

 18 index()   获取一组元素中某个元素的索引值;

  $(“子元素”).index();

  

  19 prev() 上一个兄弟元素  

next() 下一个

siblings( ) 所有的兄弟元素;

first()  last()  eq(n)

 

20 mouseover  鼠标悬停事件;

21 is()   $(“A”).is( $(“B”))     判断两个元素是否为同一元素;

22 JSON.stringify (json对象)   转换对象为字符串;

 

23 attr()   属性设置函数

  attr(“属性名”)       读--获取元素属性值;

  attr(“属性名”,”值”);   写---设置元素属性值;

24  scroll  窗体滚动事件;

25  $(document).scrollTop()  浏览器窗口滚动的距离;

26  stop()  停止当前正在运行的所有动画;

 

27 remove();  

  $(“要被删除的元素”).remove();    删除指定元素;

 

28 append(son);   后追加;

  prepend(son);   前追加;

  son.appendTo()  追加到;

  before(son)         在”我”前面追加;

  after(son)           在”我”后面追加;

  son.insertBefore();    追加到…前面;

  son.insertAfter();      追加到…后面;

 

29 val()   无参—获取值;   有参—设置值;

30 e.preventDefault();  阻止默认事件;

31 $(“子元素”).parents(“选择器”);  查找指定的父辈元素;

32  e.type 获取事件类型;

 

33  mouseover  mouseout    进入或离开被选中元素或子元素;

    mouseenter  mouseleave  进入或离开被选中元素;

 

34 事件委托

   给li绑定的事件,对于静态li生效; 

   为了对于动态li也生效, 使用事件委托;

   把事件监听委托给li的父级ul;

   $(“ul”).on(“click”,”li”,function(){ 代码 })

   

35 keyup   键盘按键弹起事件;

  e.keyCode  获取键码;

 

36  代码模拟事件点击;

   $(“按钮”).trigger(“click”)

 

37 $(“窗口”).scrollTop( h );       

窗口向上滚动指定的距离h;

 

38 $(“窗口”).prop(“scrollHeight”);

获取窗口滚动内容高度;

 

39  e.stopPropagation();  阻止事件冒泡

 

40  

blur()  失去焦点事件;  on(“blur”,fn )

41  input:radio     单选框

input:checkbox  复选框

Input:checkbox:checked 被选中的复选框;

select[name=’mz’] 属性选择器

 

42 empty()   $(“#res”).empty()  清空元素的内容;

43 change()   当表单控件值变化时;

44 prop() -- 获取属性值;

prop(“属性名”)  -- 只有属性名没有值的情况

45 removeAttr()   移除属性

  removeAttr(“属性名”)

 

46 slideUp( 时间, 类型, 回调函数 )

  动画类型:  swing  平滑(默认)  |  linear  匀速

  easeOutElastic 弹性;   easeInBounce 反弹;

 

47 animate({ 属性1:值1, 属性2,值2}, 时间, 类型, 回调函数 )

属性1: [“值1”, “linear”] , 属性2: [“值2”, “easeInOutExpo”]

 

48  width()  height()  获取元素的宽高;

 

49  stop()   立刻停止之前的所有动画;

finish()  立刻完成之前的所有动画;

 

50 hover() 鼠标移入移除函数;

  hover(function(){ 鼠标移入效果 } , function(){ 鼠标移出效果 })

 

51  $.trim()  去除字符串两端的空格;

var newStr=$.trim(oldStr);

 

52 $.map()  将数组中的元素逐个处理形成一个新数组;

  var newArr=$.map(oldArr,function(val){  代码  }) 

 

 

 

 

 

 

 

53 $.ajax(); 向服务器发起局部数据更新的请求;

  $.ajax({

     type:”GET”,            // 请求类型 GET  POST

     url:”data/product.json”   // 请求的url资源;

     dataType:”json”     // 期望返回数据类型, 默认自动判断;

     success: function( data){ }  //回调函数,处理服务器的请求内容;

                         // function(data,status,xhr){}  

// data  返回的数据,

//status  描述状态字符串

// xhr – 原始的XMLHttpRequest对象

     error:function(xhr,status,exception){ }  // 请求失败的回调函数;

     catch:true             //默认true , 是否缓存数据;

})

 

简写 :

(1)  $.getJSON( url,dataObj,function(data) { 回调函数 })

(2)  $.get(url,  dataObj , callback );

(3)  $.post(url,  dataObj, callback );

参数设置

$.ajaxSetup({dataType:”json”})

 

(4) load()   $(“#result”).load(url)  将url请求的内容插入目标盒;

 

54  headers: {“apikey”:”XXX”}  头文件信息设置;

 

55  $.isArray( )  判断变量是否是数组;

 

56  $.isEmptyObject()  判断变量是否是空对象;

 

57  $.parseJSON()   将json字符串转换为js对象;

 

58  $.type()  获取对象类型;

 

59 $.each()   遍历js对象集合;

$.each(obj,function(prop,val){   代码   })

prop 属性名  val – 属性值;