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

jQuery入门与实践指南

1. jQuery简介

jQuery是一款开源的轻量级JavaScript库，自2006年创立以来，极大地简化了HTML文档操作、事件处理、动画和AJAX等开发任务。其强大的选择器、完善的DOM操作封装以及丰富的插件支持，使其成为前端开发的首选工具。

2. $(document).ready()的理解

$(document).ready()与window.onload的区别在于时机上。前者在页面结构加载完毕后立即执行，适合执行DOM操作；后者在页面及其资源加载完毕后执行，适合处理资源加载后的逻辑。$(document).ready()支持多个函数绑定，而window.onload仅能执行单一函数。

3. jQuery对象与原生对象

• 原生对象：通过document.getElementById获取的对象，直接可调用原生方法。
• jQuery对象：通过jQuery选择器获取的对象，仅能调用jQuery方法。
• 转换与包装：jQuery对象可通过[index]或get(index)转换为原生对象，或通过$()包装原生对象。

4. jQuery选择器

基本选择器

• id、class、tag选择器。
• 动态选择所有元素：$('*')。

层次选择器

• 后代选择器：$("ul > h3")。
• 子元素选择：$("ul h3")。
• 相邻元素选择：$("#six + h3")。
• 兄弟元素选择：("#six ~ h3")。

过滤器

• 索引过滤：$('li:lt(3)')。
• 具体位置过滤：$('li:eq(3)')。
• 偶奇过滤：$('li:even')和$('li:odd')。
• 排除过滤：$('li:not(.six)')。

属性过滤器

• 属性检索：$("li[title]")。
• 属性值匹配：$("li[title=web]")和$("li[title!=web]")。
• 正则表达式匹配：$("li[title^=w]")和$("li[title$=b]")。
• 部分匹配：$("li[title*=w]")。

表单选择器

• 输入类型：$(':input')、$(':text')、$(':password')等。

5. jQuery节点操作

• 子节点操作：$('div').children().css('background', 'red')。
• 后代节点操作：$('div').find('*').css('background', 'red')。
• 兄弟节点操作：$('#li3').siblings().css('background', 'red')。
• 上下文操作：$('#li3').next()、$.prev()。
• 统计操作：$('div').children('p').css('background', 'red')和$('div').find('p').css('background', 'red')。

6. 属性操作

• 获取属性：$('#box').attr('id')。
• 设置属性：$('#box').attr('class', 'classhaha')。
• 删除属性：$('#box').removeAttr('class')。
• 原子属性：$('input').prop('checked', true)。

7. 类操作

• 添加类：$('#box').addClass('classbox')。
• 删除类：$('#box').removeClass('classbox')。
• 判断类：$('#box').hasClass('haha')。
• 切换类：$('#box').toggleClass('haha')。
• 判断元素类型：$('#box').is('div')和$('#box').is('p')。

8. CSS操作

• 获取样式：$('div').css('width')。
• 设置样式：$('div').css('width', '500px')。
• 动态样式设置：$('div').css({width: 300, height: 300})。

9. 内容操作

• 获取内容：$('div').html()和$('div').text()。
• 设置内容：$('div').html('<em>这是em标签</em>')和$('div').text('<em>这是em标签</em>')。

通过以上实践，可以快速熟悉jQuery的核心功能，从基础到高级功能的掌握都能有效提升开发效率。

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