本文共 2731 字，大约阅读时间需要 9 分钟。

JQuery 是一个功能强大的 JavaScript 开发框架，它通过将原生 JavaScript 代码封装成一个函数库，使开发者能够使用其特有的语法来实现各种操作。为了使用 jQuery，开发者需要在项目中引入 jquery.min.js 文件。

JQuery 的加载事件

JQuery 提供了三种主要的 DOM 加载事件绑定方式：

• $(document).ready(function() { ... });：在 DOM 加载完成后执行函数。
• $(function() { ... });：简洁的写法，等价于上述方法。
• jQuery(document).ready(function($) { ... });：更灵活的写法，允许在函数内部使用 jQuery。

选择器

JQuery 提供多种选择器，允许你快速定位 DOM 元素。

id 选择器

使用 # 符号指定 id：

JQuery:

var div = $('#d1');

类选择器

使用 . 符号指定类名：

JQuery:

var div = $('.d1');

元素选择器

使用通用选择器 div：

JQuery:

$('div');

可以使用 :eq(n) 指定特定索引的元素：

$('div:eq(0)');

组选择器

使用逗号分隔多个选择器：

JQuery:

var elements = $('.d1, h1, span, #p1');

后代选择器

使用 > 指定子元素：

JQuery:

var inputs = $('form input');

子选择器

使用 > 或 > 定义层级关系：

JQuery:

var inputs = $('form > input');

选择第一个元素

使用 :first 或 :eq(0)：

JQuery:

var item = $('ul li:first');

选择最后一个元素

使用 :last 或 :eq(-1)：

JQuery:

var item = $('ul li:last');

not 选择器

使用 :not() 过滤不符合条件的元素：

打球看书睡觉写代码

JQuery:

var boxes = $('input:not(:checked)');

偶数和奇数选择器

使用 :even 和 :odd 进行过滤：

JQuery:

var trs = $('table tr:even');

var trs = $('table tr:odd');

eq、gt、lt 选择器

使用 eq(), gt(), lt() 进行精确选择：

JQuery:

$('div:eq(2)')； // 第三个 div 元素$('div:gt(0)')； // 索引大于 0 的元素$('div:lt(0)')； // 索引小于 0 的元素

属性选择器

使用 [属性名] 或 [属性名=值] 进行筛选：

JQuery:

$('#div[id]')； // 选择 id 有值的元素$('#div[name=’d2’]')； // 选择 name 属性为 "d2" 的元素$('#div[name!=’d2’]')； // 选择 name 属性不为 "d2" 的元素$('#div[id ^=’d’]')； // 选择 id 属性以 "d" 开头的元素$('#div[id *=’d’]')； // 选择 id 属性包含 "d" 的元素$('#div[id $=’1’]')； // 选择 id 属性以 "1" 结尾的元素$('#div[class=’c’]')； // 选择 class 属性为 "c" 的元素

事件绑定

JQuery 提供多种方法绑定事件：

• 使用 click 方法：

  $(function() {  $('a').click(function() {    // 处理点击事件  });});

• 使用 click 方法并传递函数：

  $(function() {  $('a').click(add);});function add() {  // 处理点击事件}

• 使用 on 方法：

  $(function() {  $('a').on('click', function() {    // 处理点击事件  });});

• 使用 bind 方法：

  $(function() {  $('a').bind('click', function() {    // 处理点击事件  });});

常用方法

获取子元素

• 获取指定元素下的所有子元素：

       
    
          
        hhh  
        
       

  JQuery:

  $('div').children(); // 返回数组：[input, span, input]

• 获取指定元素下的指定元素：

       
    
          
        hhh  
        
       

  JQuery:

  $('div').children('#s1'); // 返回数组：[span]

父类查找

• 获取元素的父类：

       
    
          
        hhh  
        
       

  JQuery:

  $('span[id=’s1’]').parents(); // 返回所有父类元素

• 获取指定父类：

  $('span[id=’s1’]').parents('div[class=’d1’]'); // 返回指定父类元素

元素操作

• 在指定元素末尾追加子元素：

  JQuery:

  $('div').append('
  追加文本
  ');

• 删除指定元素：

       
    
          
        hhh  
        
       

  JQuery:

  $('span[id=’s1’]').remove();

转载地址：http://eipk.baihongyu.com/