jQuery阶段总结

1.jQuery简介

jQuery是一个JavaScript库，极大的简化了JavaScript的编写。

jQuery库包含以下功能：

• 1 、HTML 元素选取
• 2、HTML 元素操作
• 3、CSS 操作
• 4、HTML 事件函数
• 5、JavaScript 特效和动画
• 6、HTML DOM 遍历和修改
• 7、AJAX
• 
  

2.jQuery入口函数

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){     //此处编写正式代码})

入口函数有三种写法，其他两种分别如下：

jQuery(function(){     //此处编写正式代码})

$(function(){     //此处编写正式代码})

3.jQuery选择器

1、元素选择器

jQuery 元素选择器基于元素名选取元素。

//选取body中的所有<p>元素$（“p”）;

2、ID选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

//选取body中的ID名为btn的元素$("#btn");

3、类选择器

jQuery 类选择器可以通过指定的 class 查找元素。

//选取body中的所有class名为btn的元素$(".btn");

4、更多选择器

$("*")选取所有元素 $(this)选取当前 HTML 元素 $("p.intro")选取 class名 为 intro 的 <p> 元素 $("p:first")选取第一个 <p> 元素 $("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child")选取每个 <ul> 元素的第一个 <li> 元素 $("[href]")选取带有 href 属性的元素 $("a[target='_blank']")选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']")选取所有 target 属性值不等于 "_blank" 的 <a> 元素 $(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even")选取偶数位置的 <tr> 元素 $("tr:odd")选取奇数位置的 <tr> 元素 

4、jQuery元素操作

1.获得内容和属性

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() - 获取元素属性值

  //text()获取和返回所选元素的文本内容$(".test").text();  //获取文本$(".test").text(“hello world”);  //设置文本内容

• //html()获取和返回所选元素的文本内容(包括HTML标记)$(".test").html();  //获取文本(包括HTML标记)$(".test").html(“<b>hello world</b>”);  //设置文本内容(包括HTML标记)
  

• //val()获取和返回所选表单元素的值$(".test").val();  //获取值$(".test").val(“hello world”);  //设置值
  

• 
  
• 2.添加元素
• append() - 在所选的元素末尾插入内容
• prepend() - 在所选的元素开头插入内容
• after() - 在所选的元素之后插入内容
• before() - 在所选的元素之前插入内容

• $(".test").append("<li>list</li>");   //在所选的元素末尾插入内容$(".test").prepend("<li>list</li>");  //在所选的元素开头插入内容$(".test").after("<li>list</li>");    //在所选的元素之后插入内容$(".test").before("<li>list</li>");   //在所选的元素之前插入内容

  
  3.删除元素
• remove()   -  移除所选中的元素及其子元素
• empty()    -   移除所选中的元素的子元素
• 
  4.设置CSS
• addclass()         -   往所选元素添加一个或多个类
• removeclass()   -   移除所选元素一个或多个类
• toogleclass()     -  对被选元素进行添加/删除类的切换操作
• 
  

5、jQuery CSS操作

css()方法 - 设置或返回被选元素的一个或多个属性

$(".test").css("background-color")  //获取所选元素的背景颜色属性$(".test").css("background-color","red")  //设置所选元素背景颜色   单个属性设置$(".test").css("background-color":"red","margin-left"：“20px”);  //设置所选元素背景颜色和左边margin距离  多个属性设置

6、jQuery事件函数

1.常见事件

鼠标事件键盘事件表单事件文档/窗口事件clickkeypresssubmitloaddblclickkeydownchangeresizemouseenterkeyupfocusscrollmouseleave blurunload

2.绑定事件

事件名.function(){}

on("事件",function(){})

7、jQuery特效与动画

1.隐藏和显示

hide() - 隐藏面板

show() - 显示面板(前提：元素需设置 display : none)

toggle() - 隐藏和显示之间切换

2.淡入和淡出

fadeIn() - 淡入已隐藏的元素(前提：元素需设置 display : none)

fadeOut() - 淡出可见元素

fadeToggle() - 淡入和淡出之间切换

fadeTo() - 渐变为给定的透明度

3.滑动

slideUp() - 向上滑动元素

slideDown() - 向下滑动元素(前提：元素需设置 display : none)

slideToggle() - 向上和向下滑动之间切换

4.动画

animate() - 用于创建自定义动画

$("div").animate({left:'250px'}，1000);   //操纵单个属性,1s之内完成$("div").animate({left:'250px'，top:'100px'});   //操纵多个属性

5.停止动画

stop() - 用于动画完成之前对他们进行停止

$(selector).stop(stopAll,goToEnd);//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。//因此，默认地，stop() 会清除在被选元素上指定的当前动画。

8.HTML DOM 遍历和修改

1.祖先遍历

parents() - 返回所选元素的所有祖先元素

parent() - 返回所选元素的直接父元素

parentsUntil(obj) - 返回介于两个制定元素之间的所有的元素

2.后代遍历

children() - 返回所选元素的直接子元素

find(obj) - 返回所选元素的后代元素，一直到最后一个后代

$("div").find("span");   //返回所选元素后代中所有的<span>元素$("div").find("*");   // 返回所选元素的所有后代元素

3.同胞遍历

siblings()   -   返回所选元素的所有同胞元素

       next()           -   返回所选元素的下一个同胞元素

       nextAll()       -   返回所选元素所有的跟随的同胞元素

       nextUntil(obj)       -   返回介于两个给定参数之间的所有跟随的同胞元素。(obj位于所选元素之后)

       prev()                 -   返回所选元素的前一个同胞元素

              prevAll()             -   返回所选元素前面的所有同胞元素

              prevUntil(obj)    -   返回介于两个给定参数之间的所有跟随的同胞元素。（obj位于所选元素之前)

4.过滤

first()    -     返回被选元素的首个元素

       last()  -     返回被选元素的最后一个元素

       eq(index)   -     返回所选元素中带有指定索引的元素

      filter()   -     返回符合指定标准的元素

       not()   -     返回不匹配指定标准的元素，与filter()方法相反

$("*")选取所有元素