jQuery看这一文就够了!

目录

1.环境准备

2. 选择器

3.DOM 操作

4.事件处理


jQuery 是一款流行的 JavaScript 库,可以简化编写 JavaScript 代码的难度和复杂度。以下是一些 jQuery 的常用知识点及详细讲解:

1.环境准备

在使用 jQuery 之前,需要先将 jQuery 库文件引入 HTML 文档中。

2. 选择器

选择器是 jQuery 中最重要的概念之一,可以通过选择器来获取 DOM 元素并操作它们。jQuery 支持 CSS3 选择器以及自定义的一些选择器。

  • 基础选择器:根据元素的标签名、ID、class、属性等选择。
// 根据标签名选择元素
$('p')

// 根据 ID 选择元素
$('#myid')

// 根据 class 选择元素
$('.myclass')

// 根据属性选择元素
$('[name="myname"]')

  • 层次选择器:根据元素之间的层次关系选择。
// 后代选择器
$('ul li')

// 子元素选择器
$('ul > li')

// 相邻兄弟元素选择器
$('p + p')

// 兄弟元素选择器
$('p ~ p')
  • 过滤选择器:根据元素的状态或属性等进行过滤。
// 后代选择器
$('ul li')

// 子元素选择器
$('ul > li')

// 相邻兄弟元素选择器
$('p + p')

// 兄弟元素选择器
$('p ~ p')
  • 表单选择器:用于选择表单元素。
// :first 选择第一个元素
$('div:first')

// :last 选择最后一个元素
$('div:last')

// :even 选择偶数位置的元素
$('li:even')

// :odd 选择奇数位置的元素
$('li:odd')

// :eq(n) 选择第 n 个元素
$('li:eq(2)')

// :gt(n) 选择位置大于 n 的元素
$('li:gt(2)')

// :lt(n) 选择位置小于 n 的元素
$('li:lt(2)')

// :not(selector) 选择不符合 selector 的元素
$('li:not(.myclass)')

// :has(selector) 选择含有 selector 元素的元素
$('ul:has(li)')

其中:

在jQuery中,":gt" 是 "greater than" 的缩写,表示“大于”的意思;而":lt" 是 "less than" 的缩写,表示“小于”的意思。因此,":gt(n)" 选择位置大于 n 的元素,":lt(n)" 选择位置小于 n 的元素。

3.DOM 操作

jQuery 可以方便地对 DOM 元素进行操作,支持一系列的 DOM 操作方法。

  • 获取和设置元素内容
// 获取元素内容
var content = $('#mydiv').html();

// 设置元素内容
$('#mydiv').html('Hello, jQuery!');
  • 获取和设置元素属性
// 获取元素属性值
var value = $('#myinput').attr('value');

// 设置元素属性值
$('#myinput').attr('value', 'new value');
  • 添加和删除元素类名
// 添加类名
$('#mydiv').addClass('highlight');

// 删除类名
$('#mydiv').removeClass('highlight');
  • 遍历和查找 DOM 元素
// 遍历子元素
$('ul li').each(function(index, elem) {
    console.log(index + ": " + $(elem).text());
});

// 查找子元素
$('#mydiv').find('p');
  • 创建和插入 DOM 元素
// 创建元素
var newElement = $('

New element

'); // 插入到指定元素之后 $('#mydiv').after(newElement); // 插入到指定元素之前 $('#mydiv').before(newElement); // 插入到指定元素内部 $('#mydiv').append(newElement);

4.事件处理

jQuery 提供了一系列事件处理的方法,可以方便地对元素事件进行绑定、解绑等操作。

  • 绑定事件处理函数
// 绑定 click 事件处理函数
$('#mybutton').click(function() {
    alert('Button clicked');
});

  • 解绑事件处理函数
  • // 解绑 click 事件处理函数
    $('#mybutton').off('click');
    

  • 常用的事件类型
  • // click 点击事件
    $('#mybutton').click(function() { /* ... */ });
    
    // dblclick 双击事件
    $('#mybutton').dblclick(function() { /* ... */ });
    
    // hover 鼠标悬停事件
    $('#mybutton').hover(function() {
        // 鼠标进入时执行的代码
    }, function() {
        // 鼠标离开时执行的代码
    });
    
    // mouseenter 鼠标进入事件
    $('#mybutton').mouseenter(function() { /* ... */ });
    
    // mouseleave 鼠标离开事件
    $('#mybutton').mouseleave(function() { /* ... */ });
    
    // keydown 按键按下事件
    $(document).keydown(function(event) { /* ... */ });
    

你可能感兴趣的:(jQuery,web前端,web框架,jquery,javascript,前端)