jQuery介绍

 1.jQuery概述

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.使用版本

jquery-1.11.0.js

3.  基本语法

3.1  jQuery语法

<input name="name" id="in" value="lucy" />
<script type="text/javascript">
    //根据id获取jquery对象
    var $input = $("#in");
    alert($input.val());
</script>

3.2 jQuery对象和dom对象转换

<input type="text" id="username" value="jack"/>
<script type="text/javascript">
    //1.dom如何获取
    var username =document.getElementById("username");
    //alert(username.value);
    //2.将dom转jquery对象
    // 语法      $(dom对象)
    var $username =$(username);
    //alert($username.val());
    //3.jquery转成dom对象
    //jquery对象内部使用“数组”存放所有的数据,可以通过数组下标来获取
    var username2 = $username[0];
    //alert(username2.value);
    
    //3.1jquery提供了一个函数get()  jq转dom对象
    var username3 = $username.get(0);
    alert(username3.vaule);
</script>

 

4. 选择器

①  #id        id选择器    根据id获取标签jQuery对象

②  Element     标签选择器     根据标签获取jQuery对象

③  .class           类选择器           根据类名获取jQuery对象

④  s1,s2,s3…     多选择器       将多个选择器添加到一个数组中

⑤  *        所有            使用的不多

 

5.层级

  A  B     取A元素内部所有的B后代元素(爷孙)

  A > B   获取A元素内部所有的B子元素(父子)

  A + B   获取A元素后面的第一个兄弟元素

  A ~ B    获取A元素后面的所有兄弟B

 

6.基本过滤

      

  : first                  第一个

  : last                  最后一个

  : eq(index)         获取指定索引

  : gt(index)          获取大于指定索引

  : lt(index)           获取小于指定索引

  : even               偶数

  : odd                 奇数

  : not(selector)   去除所有与给定选择器匹配的元素

  : header      获取所有的标题元素 h1 – h6

  : animated        获取所有的动画

  : focus              获得焦点

 

7.内容

Contains(text)            标签体是否包含指定的文本

Empty                        当前元素是否为空

Has(…)                 当前元素是否含有指定的子元素

Parent                       当前元素是否是父元素

 

8.可见性过滤 

  : hidden              隐藏

  : visible              可见

9.属性 

[属性名]                             获取指定属性名的元素

[属性名=属性值]                 获取属性名 等于   指定值 的元素

[属性名!=属性值]                获取属性名 不等于 指定值得元素

[attr1][attr2][attr3]               符合选择器     多个条件同时成立  相当于and

-----------------------------------------------

[属性名^=属性值]           获取属性名  以指定值开头 的元素

[属性名$=属性值]           获取属性名  以指定值结尾 的元素

[属性名*=属性值]            获取属性名  含有指定值   的元素

10.子元素过滤

11.表单过滤

12.表单对象属性

13.属性和CSS

14. 文档处理 

14.1 内部插入

A.append(B)                 将B插入到A的内部后面

A.prepend(B)                将B插入到A的内部前面

A.appendTo(B)                  将A插入到B的内部后面

A.prependTo(B)                   将A插入到B的内部前面

14.2 外部插入

A.after(B)                             将B插入到A的外部 (同级)

A.before(B)                   将B插入到A的前面    

A.insertAfter(B)           将A插入到B的后面

A.insertBefore(B)        将A插入到B的前面

 

15.筛选

eq(index)   根据索引获取jq对象  $(“div:eq(0)”)  $(“div”).eq(0)

 first()         获取第一个

 last()            获取最后一个

 is()               判断

hasClass()       判断 专业类样式

filter()            过滤筛选指定的元素集合

not()                删除指定元素

16.查找

<A>

  <B>

    <C><C>

    <D><D>

    <E><E>

    <F><F>

  <B>

<A>

 

B.children()        获取所有的孩子 CDEF

A.find(D)            查找         D

D.next()             下一个兄弟 E

D.nextAll()          后面所有兄弟 E F

E.prev()             上一个兄弟     D

E.prevAll()         前面所有兄弟 CD

E.siblings()        所有兄弟         CDF

E.parent()         父元素     B

E.closest(A)      向上获取指定的父元素,如果有返回一个对象,如果没有就不返回

 

17.串联

A.add(B)     讲A和B组合一个对象 $(“A B”)

end()           回到最近一次”破坏性” 操作之前

contents()         获取所有的子节点(子元素和文本)

addBack()         把当前和上一次操作的元素 组合

 

18.事件

19.页面加载

页面加载完毕执行   $(document).ready(fn)

简化版            $(fn)

20.事件处理

on(events,fun)     提供绑定事件处理程序所需要的功能,完成3个方法 .bind(), .delegate(), 和 .live().

off(enents)           解绑

one(type,fun)       为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数

trigger(type)         会执行浏览器默认动作,会产生事件冒泡。    

triggerHandler(type)       这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。

21.事件切换

hover(overfun,outfun)

 简化版;

A.mouseover(fun).mouseout(fun);

A.hover(fun,fun);

toggle(fn,fn,fn,fn…)   切换   执行click事件,每点击一次执行一个fn

22.效果、动画

 show()     显示

 hide()       隐藏

 toggle()    切换

 

posted @ 2018-12-29 14:00  晴清情倾  阅读(232)  评论(0编辑  收藏  举报