jQuery | HTML/CSS 方法完整参考

简介

本文将介绍 jQuery 中常用的 HTML/CSS 相关方法符。如果你是一名程序员，使用 jQuery 进行开发，那么本文将为你提供所有相关的指导。

选择器

选择器是 jQuery 中最重要功能之一，它可以根据特定的条件来选取符合条件的元素。

// ID 选择器
$('#myElement');

// Class 选择器
$('.myClass');

// 属性选择器
$('[data-toggle="tooltip"]');

// 多元素选择器
$('p, .myClass, input[type="text"]');

// 父子选择器
$('ul li');

// 相邻选择器
$('ul + p');

// 后代选择器
$('ul li a');

有关元素的方法

HTML

// 获取元素 HTML
var myHtml = $('#myElement').html();

// 设置元素 HTML
$('#myElement').html('<p>New HTML</p>');

// 添加元素 HTML
$('#myElement').append('<p>Appended HTML</p>');

// 在元素前添加 HTML
$('#myElement').before('<p>Before HTML</p>');

// 在元素后添加 HTML
$('#myElement').after('<p>After HTML</p>');

Text

// 获取元素纯文本
var myText = $('#myElement').text();

// 设置元素纯文本
$('#myElement').text('New Text');

// 追加文本
$('#myElement').append('Appended Text');

// 在元素前添加文本
$('#myElement').before('Before Text');

// 在元素后添加文本
$('#myElement').after('After Text');

CSS

// 获取元素 CSS
var myWidth = $('#myElement').width();
var myHeight = $('#myElement').height();

// 设置元素 CSS
$('#myElement').css('background-color', '#000');

// 多 CSS 属性设置
$('#myElement').css({
  'background-color': '#000',
  'color': '#fff',
  'font-size': '16px'
});

Class 操作

// 添加 CSS Class
$('#myElement').addClass('myClass');

// 移除 CSS Class
$('#myElement').removeClass('myClass');

// 切换 CSS Class
$('#myElement').toggleClass('myClass');

元素属性操作

获取属性

// 获取元素属性
var myAttr = $('#myElement').attr('data-toggle');

设置属性

// 设置元素属性
$('#myElement').attr('data-toggle', 'tooltip');

事件

// 点击事件
$('#myElement').click(function() {
  // 代码块
});

// 如需在点击事件中防止链接跳转，请牢记以下代码
$('#myElement').click(function(e) {
  e.preventDefault();
});

// 鼠标放置事件
$('#myElement').hover(function() {
  // 鼠标放置前的样式
}, function() {
  // 移开鼠标后的样式
});

// 表单提交事件
$('#myForm').submit(function() {
  // 表单提交前执行代码
});

动画

显示和隐藏

// 隐藏元素
$('#myElement').hide();

// 显示元素
$('#myElement').show();

// 切换元素状态
$('#myElement').toggle();

// 动画隐藏元素（200 毫秒）
$('#myElement').fadeOut(200);

// 动画显示元素（200 毫秒）
$('#myElement').fadeIn(200);

// 动画切换元素状态（200 毫秒）
$('#myElement').fadeToggle(200);

滑动

// 隐藏元素
$('#myElement').slideUp();

// 显示元素
$('#myElement').slideDown();

// 切换元素状态
$('#myElement').slideToggle();

自定义动画

// 自定义隐藏
$('#myElement').animate({
  opacity: 0,
  left: '+=50',
  height: 'toggle'
}, 500, function() {
  // 执行完毕的代码块
});

// 自定义显示
$('#myElement').animate({
  opacity: 1,
  left: '-=50',
  height: 'toggle'
}, 500, function() {
  // 执行完毕的代码块
});

其他

延迟

// 延迟该函数执行 500 毫秒
setTimeout(function() {
  // 代码块
}, 500);

队列

// 在队列中添加一个新动作
$('#myElement').queue(function(next) {
  // 代码块
  next();
});

// 清除队列
$('#myElement').clearQueue();

结束语

完成了！在本教程中，我们涵盖了 jQuery 中的几乎所有 HTML/CSS 方法和功能，以及各种常用技术，从而让你在开发过程中变得更加流畅和高效。