初识jQuery

最新推荐文章于 2022-05-02 11:15:12 发布

原创最新推荐文章于 2022-05-02 11:15:12 发布 · 148 阅读

CC 4.0 BY-SA版权

本文介绍jQuery的基本概念，包括其创建背景、设计理念（write less, do more）、语法结构、页面元素操作方法（如addClass(), css(), show(), hide()）及代码风格。同时，探讨了DOM模型、DOM对象与jQuery对象的区别及转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

jQuery简介

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
jQuery语法结构
工厂函数 $() ：将 D O M 对象转化为 j Q u e r y 对象选择器 s e l e c t o r ：获取需要操作的 D O M 元素方法 a c t i o n () ： j Q u e r y 中提供的方法，其中包括绑定事件处理的方法 * * j Q u e r y 操作页面元素 * * 使用 a d d C l a s s () 方法为元素添加样式使用 c s s () 方法设置元素样式使用 s h o w () 、 h i d e () 方法设置元素的显示和隐藏 j Q u e r y 代码风格 “$ ”等同于“ jQuery ”
$(document).ready()=jQuery(document).ready()
$(function(){…})=jQuery (function(){…})
链式操作
对一个对象进行多重操作，并将操作结果返回给该对象
$(“h2”).css(“background-color”,"#ccffff").next().css(“display”,“block”);
DOM模型
浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构
DOM对象和jQuery对象
var objDOM=document.getElementById(“title”);

var objHTML=objDOM.innerHTML;
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title").html( )\dots$ ()函数进行转化：$(DOM对象)
var txtName =document.getElementById(“txtName”);
var $t x t N a m e =$ (txtName);
注意
jQuery对象命名一般约定以$开头