jQuery

来源：互联网发布：手机流量开关软件编辑：程序博客网时间：2024/05/29 02:49

1、介绍

为了简化JavaScript的开发,出现了一些 JavaScript库。在JavaScript库中，封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的页面, 并且兼容各大浏览器。
jQuery就是当前流行的JavaScript库之一。

2、使用

⑴ 通过script标签导入jQuery库

<script type="text/javascript" src="jquery-1.7.2.js"></script>

这里使用jQuery-1.7.2版本

在开发测试时,用的是未压缩的版本: jquery-1.7.2.js
在上线项目中,会使用压缩后的版本: jquery-1.7.2.min.js

压缩版本和未压缩本的区别：未压缩版本按照格式书写，有换行和注释【文件体积稍大】；而压缩版本没有换行和注释【文件体积较小】

⑵ 再写一个script标签，并在里面写js代码

Tips：可以同时使用JS代码和jQuery代码

注意：一定要在另外一个script标签里面写js或jQuery代码，而不能在导入jQuery库的script标签里面写js或jQuery代码

3、核心函数

$();

jQuery库中为window对象定义了一个$函数(方法) jQuery();

function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced'  return new jQuery.fn.init( selector, context, rootjQuery );}

$函数会根据参数数据类型的不同做不同的工作, 返回一个jQuery封装的伪数组的对象

Tips：window.jQuery = window.$ = jQuery;

4、$可以接收的参数

function

当$接收的参数是一个function(){}【函数对象】时，其和window.onload = function(){}; 的意思相同。都代表等待文档加载完成之后，再调用此函数

  window.onload = function(){  };  $(function(){  });  jQuery(function(){  });  $(document).ready(function(){  });

这几个函数的作用相同，都代表等待文档加载完成之后，再调用此函数

HTMLString

当$接收的参数是一个HTML元素字符串时，会创建一个jQuery元素对象

CSS选择器

当$接收的参数是一个CSS选择器时，代表查找元素

注意：通过$()查找到的元素的类型是Object类型；而通过document.getElementById()找到的元素类型则不是Object类型

DOM对象

当$接收的参数是一个DOM对象时，会将该DOM对象转换为一个jQuery对象

jQuery对象和DOM对象的互转

之所以要转换是为了调用jQuery对象或DOM对象的方法，不转换就无法使用

DOM对象：通过js原生的方法查找到的元素对象

document.getElementById("#id")

或

document.getElementsByTagName("h1")

jQuery对象：通过jQuery的方法查找或者创建的元素对象

$("font")

或

$("<font>字体</font>")

⑴ jQuery对象转DOM对象
jQuery查找到的对象，其实就是一个数组对象，里面的元素就是一个个的DOM对象，所以可以通过下标获取对应位置的DOM对象

 var 名 = jQuery对象[index]; // 取jQuery对象的第index个元素，即将jQuery对象转换成DOM对象

⑵ DOM对象转jQuery对象

 var 名 = $(DOM对象);

使用示例

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>Hello jQuery</title>    <!-- 导入jQuery库 -->    <script type="text/javascript" src="jquery-1.7.2.js"></script>    <script type="text/javascript">      /*        $(function(){}); 等同于 window.onload = function(){};      */      $(function(){        // 传入一个HTML元素字符串，创建一个jQuery元素对象【推荐接收的变量名使用$开头】        var $h1Ele = $("<h1>1级标题</h1>");        // 可以同时写JavaScript代码和jQuery代码        var bodyEle = document.getElementsByTagName("body")[0]; // 只有一个body标签，所以取第一个元素        // 调用jQuery对象的追加元素方法，将h1添加到body中        $h1Ele.appendTo(bodyEle);        // 查找id为btn的元素        var $btn = $("#btn"); // 【jQuery对象】        alert($btn); // [object Object]        $btn.click(function(){          alert("点我");        });        var btnEle = document.getElementById("btn"); // 【DOM对象】        alert(btnEle); // [object HTMLButtonElement]        // jQuery对象和DOM对象互转        var bEle = $btn[0]; // jQuery对象其实就是一个数组对象        alert(bEle); // [object HTMLButtonElement]        var $b = $(bEle);        alert($b); // [object Object]      });    </script>  </head>  <body>    <button id="btn">按钮</button>  </body></html>

5、选择器

基本选择器 ⑴

⑴ 标签选择器

$("标签名");

根据给定的元素名匹配一个或多个元素

⑵ #id选择器

$("#id");

根据给定的ID匹配一个元素

⑶ .class选择器

$(".class");

根据给定的class匹配一个或多个元素

⑷ 组选择器

$("标签名, #id, .class");

选择符合选择器规则的所有的标签

⑸ 通配选择器

 $("*");

选择页面中所有的元素

层级选择器

主要选择父子关系的元素

⑴ 选择指定的所有后代元素

$("祖先元素 后代元素");

注意：⑴ 空格隔开祖先和后代元素
⑵ 既会选择子代元素，又会选择孙子代元素

例如：

$("body div");

选择body中所有的后代div元素，包括子代和孙子代

⑵ 选择指定的所有子代元素

$("父元素>子元素");

注意：⑴ >隔开父代和子代元素，中间不要有空格
⑵ 既会选择子代元素，又会选择孙子代元素

例如：

$("body>div");

选择body中所有的子代div元素

⑶ 选择指定元素的下一个兄弟元素

$("指定元素+兄弟元素");

注意：+隔开指定和兄弟元素，中间不要有空格

例如：

$("#d1+div");

选择id为d1的元素的下一个div兄弟元素

⑷ 选择指定元素的之后所有的兄弟元素

$("指定元素～兄弟元素");

注意：～隔开指定和兄弟元素，中间不要有空格

例如：

$("#d1~div");

选择id为d1的元素的之后所有的div兄弟元素

基本选择器 ⑵

⑴ 选择指定元素的第一个元素

 $("元素:first");

例如：

$("div:first");

选择第一个div元素

⑵ 选择指定元素的最后一个元素

$("元素:last");

例如：

$("div:last");

选择最后一个div元素

⑶ 选择去除所有与给定选择器匹配的元素

$("元素:not(选择器)");

注意：not里头不需要写引号

例如：

$("div:not(.cls)");

选择所有class不为cls的div元素

⑷ 选择所有索引值为偶数的指定元素

$("元素:even");

注意：索引值从0开始

例如：

$("span:even");

选择索引值为偶数的所有的span

⑸ 选择所有索引值为奇数的指定元素

$("元素:odd");

注意：索引值从0开始

例如：

$("span:odd");

选择索引值为奇数的所有的span

⑹ 选择指定索引值的一个指定元素

$("元素:eq(索引值)");

注意：index从0开始

例如：

$("div:eq(4)")

选择索引值为4的div元素

⑺ 选择大于指定索引值的所有的指定元素

$("元素:gt(索引值)");

注意：index从0开始

例如：

$("span:gt(3)");

选择索引值大于3的所有的span元素

⑻ 选择小于指定索引值的所有的指定元素

$("元素:lt(索引值)");

注意：index从0开始

例如：

$("p:lt(2)");

选择索引值小于2的所有的p元素

⑼ 选择所有的h1～h6标题元素

$(":header");

⑽ 选择所有正在执行动画效果的元素

$(":animated");

内容选择器

⑴ 选择所有包含指定文本内容的指定元素

$("指定元素:contains(指定文本)");

例如：

$(".cls:contains('abc')");

选择所有class为cls的，且包含abc字符串的元素

⑵ 选择所有包含指定子元素的制定元素

$("指定元素:has(指定子元素)");

例如：

$("div:has(span)");

选择所有包含span子元素的div父元素

⑶ 选择所有指定的不包含子元素或文本内容的元素

$("指定元素:empty");

例如：

$("span:empty");

选择所有的不包含子元素或文本内容的span元素

⑷ 选择所有指定的包含子元素或文本内容的元素

$("指定元素:parent");

例如：

$("div:parent");

选择所有的包含子元素或文本内容的div元素

可见性选择器

⑴ 选择所有可见的指定元素

$("制定元素:visible");

例如：

$("span:visible");

选择所有可见的span元素

⑵ 选择所有不可见的指定元素

$("指定元素:hidden");

注意：该方法查找到的是通过display属性设置为none或visible设置为hidden的元素

如果查找的是隐藏域【<input type="hidden" />】，则是根据属性type来匹配的

例如：

$("div:hidden");

选择所有隐藏的div元素

$("input:hidden");

选择所有的隐藏域

属性选择器

⑴ 选择包含指定属性值的所有指定元素

$("指定元素[指定属性名]");

例如：

$("div[name]");

选择所有包含name属性的所有div

⑵ 选择包含指定属性值的所有指定元素

$("指定元素[指定属性名=指定属性值]");

例如：

$("span[title='abc']");

选择所有title属性为’abc’的所有span

⑶ 选择不是指定属性值的所有指定元素

$("指定元素[属性名!=属性值]");

注意：该方法会把没有指定属性以及不是指定属性值的指定元素选择上

例如：

$("div[title!='test']");

选择所有title属性值不是test的、以及没有title属性的所有div

⑷ 选择以指定属性值开头的所有指定元素

$("指定元素[指定属性名^=指定开头]");

例如：

$("span[title^='ta']");

选择所有title属性值以’ta’开头的所有span

⑸ 选择以指定属性值结尾的所有指定元素

$("指定元素[指定属性名$='指定结尾']");

例如：

$("div[title$='ad']");

选择所有title属性值以’ad’结尾的所有div

⑹ 选择指定属性值包含指定字符的所有指定元素

$("指定元素[指定属性名*='指定要包含的字符']");

例如：

$("div[name*='dde']");

选择所有name属性包含’dde’字符的所有div

⑺ 复合属性选择器

$("指定元素[属性选择器1][属性选择器2]...");

例如：

$("span[title][name*='te']");

选择所有包含title属性的、且name属性包含’te’的所有span

子元素选择器

⑴ 匹配指定父元素下的第index个子元素

$("父元素 子元素:nth-child(index)");

注意：index从1开始

例如：

$("div span:nth-child(3)");

选择所有div的后代span，且span的序号为3

⑵ 匹配指定父元素下的第一个子元素

$("父元素 子元素:first-child");

例如：

$("table tr:first-child");

选择table的第一个tr（选择table的第一行）

⑶ 匹配指定父元素下的最后一个子元素

$("父元素 子元素:last-child");

例如：

$("ol li:last-child");

选择有序列表的最后一项

⑷ 选择父元素中只包含一个指定子元素的子元素

$("父元素 子元素:only-child");

例如：

$("ul li:only-child");

选择无序列表中只有包含一项的li

表单选择器

⑴ 选择所有input,textarea,select和button元素

$(":input");

⑵ 选择所有的文本框

$(":text");

⑶ 选择所有的密码框

$(":password");

⑷ 选择所有的单选按钮

$(":radio");

⑸ 选择所有的多选框

$(":checkbox");

⑹ 选择所有的提交按钮

$(":submit");

⑺ 选择所有的img标签

$(":image");

⑻ 选择所有的重置按钮

$(":reset");

⑼ 选择所有的button

$(":button");

注意：该方法会选择：

<input type="button" value="" />

或

<button></button>

⑽ 选择所有的文件框

$(":file");

⑾ 选择所有的隐藏域

$(":hidden");

表单对象属性

⑴ 选择所有可用的文本框

$(":enabled");

⑵ 选择所有不可用的文本框

$(":disabled");

⑶ 选择所有的被选中的单选框、复选框以及下拉框的选项

$(":checked");

注意：该方法会把：

① <input type="radio" checked="checked" />

和

② <input type="checkbox" checked="checked" />

和

③ <select>     <option selected="selected"></option>   </select>

选择上

在jQuery的帮助文档上，描述该函数是：
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
事实上，该函数会选中select中的option

⑷ 选择所有的被选中的下拉框的选项

$(":selected");

注意：该方法会选择：

<select>   <option selected="selected"></option></select>

6、属性相关函数

attr

获取或设置指定元素的属性值
获取属性：

$("选择器").attr("属性名");

设置属性：

$("选择器").attr("属性名", "属性值");

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的属性值时，会将所有的元素的属性值都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的属性值时，只有第一个匹配到的元素的属性值会被获取到。即获取时不会迭代所有的元素
    ⑶ 让指定的单选按钮【radio】或多选框【checkbox】选中时，一般修改checked属性为true；若不选中，就修改为false

示例：

$("div:first").attr("name");

获取第一个div的name属性值

$("span:last").attr("class", "abc");

设置最后一个span的class属性值为”abc”

$(":checkbox").attr("checked", true);

选中所有的多选框

removeAttr

移除指定元素的一个或多个属性值
移除一个属性值：

$("选择器").removeAttr("属性名");

移除多个属性值：

$("选择器").removeAttr("属性名1 属性名2 ...");

注意：
⑴ 如果选择器匹配多于一个的元素，则移除属性值会将所有的元素的属性值都移除了。因为移除属性值时存在隐式迭代
⑵ 不可以不传参数

示例：

$(":text").removeAttr("name value");

移除所有的文本框的name和value属性

html

获取或设置指定元素的内容
获取元素内容：

$("选择器").html();

设置元素内容：

$("选择器").html("要修改的内容");

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的HTML内容时，会将所有的元素的内容都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的HTML内容时，只有第一个匹配到的元素的内容会被获取到。即获取时不会迭代所有的元素

注意：获取的内容有两种情况：
⑴ 元素里头没有子元素，而是文本，则返回文本内容
⑵ 元素里头有子元素，则返回子元素的HTML代码

示例：

$("ul:eq(1)").html();

获取第二个无需列表里的HTML代码

$("ul").html("<li>修改!</li>");

设置所有的ul元素内容

text

获取或设置指定元素的文本内容
获取文本内容：

$("选择器").text();

设置文本内容：

$("选择器").text("要修改的文本内容");

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的文本内容时，会将所有的元素的文本内容都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的文本内容时，结果是由所有匹配元素包含的文本内容组合起来的文本【字符串拼接】

示例：

$("p").text();

获取所有的p标签的文本内容，并将所有的文本内容拼接起来，返回一个拼接后的文本

$("p").text("修改!");

设置所有的p元素的文本内容

val

获取或设置指定元素的value属性值
获取文本内容：

$("选择器").val();

设置文本内容：

$("选择器").val("要修改的值");

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的value属性值时，会将所有的元素的value属性值都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的value属性值时，只有第一个匹配到的元素的value属性值会被获取到。即获取时不会迭代所有的元素
     ⑶ 获取select的value属性值时，获取的是select内部的option的value属性值。如果option有value属性值，则获取的就是其value属性值，如果option没有value属性值，则获取的就是其文本内容
    ⑷ 设置select的value属性值时，设置的是select内部的option的value属性值。如果option有value属性值，则设置其value属性值，如果option没有value属性值，则设置其文本内容
    ⑸ 设置单选按钮【radio】或多选按钮【checkbox】的value属性值时，需要传入一个数组，即在中括号（[ ]）中写要选中的元素对应的value属性值。多个value属性值用逗号（,）隔开。注意单选按钮的value属性值必须写在中括号中

示例：

$(":hidden:last").val();

获取最后一个隐藏域的value属性值（文本框的内容）

$(":text").text("修改!");

设置所有的文本框的value属性值（文本框的内容）

$(":radio[name='rd']").val(["rd3"]);

选中name为’rd’的，且value属性值为”rd3”的单选按钮
注意：一定要加上中括号

$(":checkbox[name='ck']").val(["ck2", "ck3"]);

选中name为’ck’的，且value属性为”ck2”和”ck3”的多选框
注意：一定要加上中括号，多个值之间用逗号隔开

7、jQuery对象访问函数

size

$("选择器").size();

返回jQuery对象中元素的个数

Tips：该方法等同于length属性

示例：

$("p").size(); 【等同于 $("p").length】

获取所有p的个数

each

$("选择器").each(function(){});

    循环方法，自动遍历jQuery对象【数组】，每个数组元素【DOM对象】都会调用function()【函数】一次。
    可以理解为增强for循环
    每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素。该元素就是每一个被遍历到的DOM元素

each函数的使用场景

jQuery对象在进行设置、修改、删除操作时，会自动遍历数组中的每一个DOM对象，然后再进行相关操作。所以查找元素的相关属性，jQuery会隐式迭代
而在查找操作时，一般都需要我们进行手动的遍历。如果不使用普通for循环，则可以使用each函数

使用示例

$("p").each(function(){   alert(this.innerHTML);});

遍历弹出每个p标签的文本内容

8、CSS函数

css

$("选择器").css();

获取或设置元素的样式属性
获取CSS样式：

$("选择器").css("CSS样式名");

设置CSS样式：
⑴ 设置单个样式：

$("选择器").css("CSS样式名", "要设置的样式值");

⑵ 设置多个样式：

$("选择器").css({  "样式1":"样式值1",  "样式2":"样式值2",   ...});

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的CSS样式值时，会将所有的元素的CSS样式值都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的CSS样式值时，只有第一个匹配到的元素的CSS样式值会被获取到。即获取时不会迭代所有的元素
    ⑶ 设置多个样式时，样式名和样式值要用引号引起来。样式名和样式值用冒号连接（:）。多个样式键值对用逗号（,）隔开。注意不要加分号（;）

示例：

$("p:first").css("font-size");

获取第一个p标签的字体大小样式值

$("p").css("font-size", "30px");

设置所有的p标签的字体大小为30像素

$("p").css({   "background-color":"orange",   "text-align":"center"});

设置所有的p标签的背景颜色为橘黄色，同时让文本内容居中显示

width

获取或设置指定元素的宽度。注意：返回结果没有单位（px）。而通过css(“width”) 函数获取的结果会有单位（px）

获取宽度：

$("选择器").width();

设置宽度：

$("选择器").width("宽度数值");

Tips：不要加px单位

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的宽度值时，会将所有的元素的宽度值都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的宽度值时，只有第一个匹配到的元素的宽度值会被获取到。即获取时不会迭代所有的元素

示例：

$(":button").width();

获取第一个按钮的宽度

$(":button").width("200");

设置所有的按钮的宽度为200像素（px）

height

获取或设置指定元素的高度。注意：返回结果没有单位（px）。而通过css(“height”) 函数获取的结果会有单位（px）

获取高度：

$("选择器").height();

设置高度：

$("选择器").height("高度数值");

Tips：不要加px单位

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的高度值时，会将所有的元素的高度值都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的高度值时，只有第一个匹配到的元素的高度值会被获取到。即获取时不会迭代所有的元素

示例：

$("div").height();

获取第一个div的高度

$("div").height("100");

设置所有的div的高度为100像素（px）

offset

获取或设置指定元素的偏移量。返回值类型为一个对象：Object{top,left} 。该对象包含了top和left两个属性，分别是指定元素的：左上角距离原点（当前浏览器窗口的左上角）的高度【top】，宽度【left】

获取偏移量：

var $offset = $("选择器").offset();var left = $offset.left;var top = $offset.top;

设置高度：

$("选择器").offset({  "top":顶偏移量,  "left":左偏移量});

Tips：不要加px单位

注意：
    如果选择器匹配多于一个的元素：
    ⑴ 设置元素的偏移量时，会将所有的元素的偏移量都设置上。因为设置时存在隐式迭代
    ⑵ 获取元素的偏移量时，只有第一个匹配到的元素的偏移量会被获取到。即获取时不会迭代所有的元素

示例：

var $offset = $("div").offset();var left = $offset.left;var top = $offset.top;

获取第一个div的偏移量

$("div").offset({  "top":100,  "left":600});

设置所有的div的顶偏移为100像素（px），左偏移为600像素（px）

9、筛选函数

应用于已经过滤产生了一个jQuery对象，而这时又需要继续筛选时

eq

$("选择器").eq(index);

获取第index个元素

注意：
index为正数时，代表指定元素的位置是index + 1（从0算起）
index可以为负数，代表从最后一个开始倒数（从1算起）

示例：

$("div").eq(2);

选择第3个div元素

$("div").eq(-2);

选择倒数第2个div元素

first

获取第一个元素

示例：

$("span").first();

选择第1个span元素

last

获取最后一个元素

示例：

$("div").last();

选择最后1个div元素

filter

筛选出与指定的选择器匹配的所有元素

$("选择器").filter("选择器");

示例：

$("div").filter(":last");

选择最后一个div元素

is

查询指定元素是否复合给定的表达式，返回值为true或false

$("选择器").is("表达式");

示例：

$("div:last").is("empty");

判断最后一个div元素是否为空【有没有元素或文本内容】

has

查询包含指定元素的父元素

$("选择器").has("选择器");

示例：

$("div").has("span");

查找包含span元素的所有div

not

查询不符合给定表达式的所有元素

$("选择器").not("表达式");

示例：

$("div").not(".cls");

查找class不为cls的所有div

children

获取指定父元素中包含的所有指定的子元素

$("选择器").children("选择器");

注意：该函数是找子元素

示例：

$("div").children(".cls")

查找div的子元素中class为’cls’的所有子元素

find

获取指定父元素中包含的所有指定的后代元素

$("选择器").find("选择器");

注意：该函数是找子元素以及孙子元素

示例：

$("div").find(".cls")

查找div的子元素中class为’cls’的所有后代元素

获取指定元素的下一个指定兄弟元素

$("选择器").next("选择器");

示例：

$("#d1").next("span")

查找id为d1的下一个span兄弟元素

nextAll

获取指定元素的之后所有的指定兄弟元素

$("选择器").nextAll("选择器");

示例：

 $("#d1").nextAll("span")

查找id为d1的之后所有的span兄弟元素

nextUntil

获取指定的起始元素到指定的结束元素之间的所有指定的兄弟元素。起始元素和结束元素都是从左（头部）开始找。注意不包括起始和结束元素

$("起始元素").nextUntil("结束元素");

示例：

$("#d1").nextUntil("span")

查找id为d1的元素到下一个span兄弟元素，之间的所有的兄弟元素

获取指定元素的前一个指定兄弟元素

$("选择器").prev("选择器");

示例：

$(".cls").prev("div")

查找class为cls的前一个div兄弟元素

prevAll

获取指定元素的之前所有的指定兄弟元素

 $("选择器").prevAll("选择器");

示例：

$(".cls").prevAll("div")

查找class为cls的之前所有的div兄弟元素

prevUntil

获取指定的起始元素到指定的结束元素之间的所有指定的兄弟元素。起始元素和结束元素都是从右（尾部）开始找。注意不包括起始和结束元素

$("起始元素").prevUntil("结束元素");

示例：

$(".cls").prevUntil("div")

查找class为cls的元素到前一个div兄弟元素，之间的所有的兄弟元素

parents

查找当前子元素的指定父元素

$("子元素").prev("父元素");

示例：

$("td :text").first().parents("tr")

查找表格中，第一个包含文本框的那行

siblings

查找当前元素的所有兄弟元素

$("选择器").prev("兄弟元素");

示例：

$("div[class='a']").siblings()

选择class为’a’的div的所有兄弟元素

add

并集。把多个jQuery对象，连接到一起

$("选择器").add("选择器");

示例：

$(".a").add("#b");

选择所有的class为”a”和id为”b”的所有元素

10、文档处理函数

append

给某元素追加指定的子元素

$("某元素").append("被添加的子元素");

示例：

$("body").append($("<b>粗体</b>"));

让body添加一个b标签

appendTo

把指定元素追加为某元素的子元素

$("指定子元素").appendTo("某元素");

示例：

$("<li>最后一个列表项</li>").appendTo("ul");

把li标签添加为无序列表的最后一个子元素

prepend

给某元素添加一个最前面的子元素

$("指定子元素").prepend("某元素");

示例：

$("ol").prepend("<li>第一个列表项</li>");

给有序列表添加一个最前面的子li元素

prependTo

把指定元素添加为某元素的第一个子元素

$("指定子元素").prependTo("某元素");

示例：

$("<td>第一个单元格</td>").prependTo("tr:first");

让td成为表格的第一行的第一个子元素

after

让某元素的下一个兄弟元素是指定元素
$(“某元素”).after(“指定元素”);

示例：

$("h3").after("<p>p标签</p>");

给3级标题的后面添加一个p兄弟标签

before

让某元素的前一个兄弟元素是指定元素

$("某元素").before("指定元素");

示例：

$("font").before("<b>粗体</b>");

给font标签的前面添加一个b兄弟标签

insertAfter

让指定元素称为某元素的下一个兄弟元素

$("指定元素").insertAfter("某元素");

示例：

$("<p>p标签</p>").insertAfter("h1");

让p标签成为1级标题的下一个兄弟元素

insertBefore

让指定元素成为某元素的前一个兄弟元素

$("指定元素").insertBefore("某元素");

示例：

$("<b>粗体</b>").insertBefore("font");

让b标签成为font标签的前一个兄弟元素

注意事项

如果append或者after、before的节点（元素）不是新创建的，而是通过DOM查询到的HTML页面中已经存在的节点，则append或after、before操作变为移动操作

replaceWith

把所有的某元素用指定元素替换

$("某元素").replaceWith("指定元素");

示例：

$("h4").replaceWith("<p>p标签</p>");

把所有的4级标题用p标签替换

replaceAll

让指定元素替换所有的某元素

$("指定元素").replaceAll("某元素");

示例：

$("<font>字体</font>").replaceAll("a");

用font标签替换所有的a标签

empty

清空某元素的所有子元素

$("指定元素").empty();

示例：

$("ul").empty();

清空所有的无需列表（删除所有无序列表中的li元素）

remove

删除某元素

$("指定元素").remove();

示例：

$("font").remove();

删除所有的font标签

11、修改标签的默认行为

有的标签有特定的含义，例如a标签会跳转到指定的href连接；submit按钮会提交表单数据到action指定的资源文件等。而这些行为就是标签的默认行为
标签的默认行为比设置的点击事件的级别要高。所以要取消标签的默认行为，就要在点击事件的最后写上return false; 这就是告诉含有特定含义的标签，不要指定其默认行为

示例：取消a标签的跳转功能

  $("a").click(function(){    return true;  });

12、事件的冒泡

事件会按照DOM层次结构像水泡一样不断向上，直到根节点【body】。例如给父元素和子元素都设置了单击事件，这时如果单击子元素，则也会触发父元素的单击事件。
取消事件的冒泡就是在事件处理函数中返回false (return false;)

13、CSS类属性函数

addClass

给指定元素添加一个或多个class属性

添加一个class属性：

addClass("class属性名");

添加多个class属性：

addClass("class属性名1 class属性名2 ...");

多个class之间用空格隔开

注意：class不要加点（.）

示例：

$("div").addClass("a");

给所有的div添加一个class类：”a”

removeClass

移除指定元素的一个或所有class属性

移除一个class属性：

removeClass("class属性名");

移除多个class属性：

removeClass("class属性名1 class属性名2 ...");

多个class之间用空格隔开
移除所有的class属性：

removeClass();

不要写引号
什么都不传就是移除所有的class属性

示例：

$("span").removeClass("a b");

移除所有span元素的【a和b】class属性

$("div").removeClass();

移除所有div元素的所有的class属性

toggleClass

判断指定元素是否有指定的一个或多个class属性，如果有就移除；如果没有就添加
一个class属性：

toggleClass("class属性名");

多个class属性：

toggleClass("class属性名1 class属性名2 ...");

多个class之间用空格隔开

示例：

$("div").toggleClass("a b");

添加或移除所有div的【a和b】class属性

hasClass

判断指定元素是否包含指定的一个或多个class属性。返回值为true或false
一个class属性：

hasClass("class属性名");

多个class属性：

hasClass("class属性名1 class属性名2 ...");

多个class之间用空格隔开

注意：如果查询的结果有多个，则只会判断第一个元素

示例：

$("div").hasClass("a b");

判断第1个div是否包含【a和b】class属性

14、效果函数

基本

⑴ hide

隐藏指定的显示元素

$("指定元素").hide();

注意：
    ⑴ 该方法对已经隐藏的元素无效果
    ⑵ 调用该方法时，会将元素的display属性修改为none
    ⑶ 可以传入参数，以控制隐藏的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
    ⑷ 如果匹配到的结果是多个，则会隐藏多个元素

示例：

$("div").hide("slow");

隐藏所有的div，历时600毫秒

⑵ show

显示指定的隐藏元素

 $("指定元素").show();

注意：
    ⑴ 该方法使用的前提是指定元素已经被隐藏了，否则调用无效果
    ⑵ 调用该方法时，会将元素的display属性修改为block
    ⑶ 可以传入参数，以控制显示的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
    ⑷ 如果匹配到的结果是多个，则会显示多个元素

示例：

$("div").show(1000);

显示所有的div，历时1000毫秒

⑶ toggle

判断指定元素是否可见。如果可见，则设置为隐藏；如果不可见，则设置为显示

$("指定元素").toggle();

注意：
    ⑴ 可以传入参数，以控制显示或隐藏的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
    ⑵ 如果匹配到的结果是多个，则会切换多个元素的显示或隐藏效果
    ⑶ 此动画效果默认包含缩放、透明度和位移三个动画

示例：

$("div").toggle("slow");

显示或隐藏所有的div，历时600毫秒

滑动

⑴ slideUp

向上滑动指定元素【让指定的元素的高度（height）从设置的height变为0】

$("指定元素").slideUp();

注意：
    ⑴ 该方法对已经向上滑动过的元素无效果
    ⑵ 可以传入参数，以控制滑动的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
    ⑶ 如果匹配到的结果是多个，则会切换多个元素的滑动效果

示例：

$("div").slideUp(800);

向上滑动所有的div，历时800毫秒

⑵ slideDown

向下滑动指定元素【让指定的元素的高度（height）从0变为设置的height】

$("指定元素").slideDown();

注意：
    ⑴ 该方法使用的前提是指定元素已经向上滑动过了
    ⑵ 可以传入参数，以控制滑动的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
    ⑶ 如果匹配到的结果是多个，则会切换多个元素的滑动效果

示例：

$("div").slideDown("fast");

向下滑动所有的div，历时200毫秒

⑶ slideToggle

向上或向下滑动指定元素【如果已经向上滑动过，则向下滑动；如果没有滑动或已经向下滑动过，则向上滑动】

$("指定元素").slideToggle();

注意：
⑴ 可以传入参数，以控制滑动的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
⑵ 如果匹配到的结果是多个，则会切换多个元素的滑动效果

示例：

$("div").slideToggle("fast");

向上或向下滑动所有的div，历时200毫秒

淡入淡出

⑴ fadeOut

让指定元素淡出【透明度从1变为0】

$("指定元素").fadeOut();

注意：
⑴ 可以传入参数，以控制淡出效果的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
⑵ 如果匹配到的结果是多个，则会切换多个元素的淡出效果

示例：

$("div").fadeOut(300);

让所有的div淡出，历时300毫秒

⑵ fadeIn

让指定元素淡入【透明度从0变为1】

$("指定元素").fadeIn();

注意：
    ⑴ 该方法对没有淡出的元素无效果
    ⑵ 可以传入参数，以控制淡入效果的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
    ⑶ 如果匹配到的结果是多个，则会切换多个元素的淡入效果

示例：

$("div").fadeIn(700);

让所有的div淡入，历时700毫秒

⑶ fadeTo

让指定元素淡入到指定透明度或淡出到指定透明度

$("指定元素")..fadeToggle(速度, 指定透明度);

注意：
    ⑴ 可以传入参数，以控制淡入或淡出效果的速度。参数可以是可选的3个默认参数：”slow”,”normal”,”fast”，分别表示动画时长的毫秒数：600毫秒，400毫秒，200毫秒；也可以传入数值，代表指定的动画时长的毫秒数
    ⑵ 如果匹配到的结果是多个，则会切换多个元素的淡入或淡出效果
    ⑶ 透明度的变化为：完全透明【0】，完全不透明【1】
    ⑷ 如果当前透明度小于要指定的透明度，则是淡入；如果当前透明度大于要指定的透明度，则是淡出

示例：

$("div").fadeToggle(500, 0.5);

让所有的div淡入或淡出到透明度为0.5，历时500毫秒

⑷ fadeToggle

让指定元素淡入或淡出

$("指定元素").fadeToggle();

示例：

$("div").fadeToggle("slow");

让所有的div淡入或淡出，历时600毫秒

15、事件函数

click

给指定元素设置单击事件。需要传入一个响应函数

$("指定元素").click(function(){    // 单击事件});

示例：

 $("a").click(function(){   alert(1);   return false; // 取消默认行为 });

给所有的a标签设置弹框的单击事件

mouseenter

给指定元素设置鼠标移入事件。需要传入一个响应函数

$("指定元素").click(function(){    // 鼠标移入事件});

mouseleave

给指定元素设置鼠标移出事件。需要传入一个响应函数

$("指定元素").click(function(){    // 鼠标移出事件});

mousemove

给指定元素设置鼠标移动事件。需要传入一个响应函数

$("指定元素").click(function(){    // 鼠标移动事件});

Tips：当事件被触发时，浏览器会创建一个事件对象。其封装了如鼠标的坐标信息，或者是键盘的按键信息等。在调用事件处理函数时，会将事件对象传递给事件的响应函数。如果想获取响应对象，就需要给响应函数传递一个参数，来代表该对象

$("指定元素").click(function(event){    // 鼠标移动事件});

这里的event就是响应对象

示例：

$("div").mousemove(function(event){  var left = event.clientX; // 获取鼠标指针的水平坐标  var top = event.clientY; // 获取鼠标指针的垂直坐标  $("font").text("left:" + left + ", top:" + top);});

获取鼠标指针的水平和垂直坐标，并将其作为font元素的内容

bind

为每个匹配元素的特定事件绑定事件处理函数。需要传入两个参数，第一个为事件类型的字符串，比如”click”或”submit”。可以写多个事件，用空格隔开。第二个为响应函数

$("指定元素").bind("事件名称", function(){     // 事件响应操作});

示例：

$("div").bind("mouseenter mouseleave", function(){   $(this).fadeToggle();});

鼠标移入和移出div元素，对应地淡入和淡出div

live

给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
使用场景：可以给已经存在的指定元素和使用DOM操作添加进来的指定元素，都绑定上相应的事件

使用示例：

$("a").live("click", function(){     alert(1);     return false;});$("<a href='#'>超链接</a>").appendTo("body");

通过live函数设置的a标签的单击事件，不仅可以让页面上已有的a标签绑定上单击事件，同时通过JS添加到页面中的元素也有了单击事件。

16、$(function(){})和window.onload=function(){}的区别

src（source）：引入的资源。如果没有引入可能会造成页面显示出问题
href（HyperText Reference）：引用的资源。即时不存在，页面也可以显示

window.onload = function(){};
会等所有的页面加载完成后，浏览器才会调用此函数。因为它会考虑src引入的资源

$(function(){});
当前页面中的内容加载完成后，此函数就会被浏览器调用。它不会考虑src引入的资源

0 0