jQuery设计思想

简介: jQuery设计思想

jQuery的基本设计思想和主要用法,就是选择某个网页元素,然后对其进行某种操作 。


本文会讲解到以下知识点


  • jQuery 如何获取元素
  • jQuery 的链式操作是怎样的
  • jQuery 如何创建元素
  • jQuery 如何移动元素
  • jQuery 如何修改元素的属性


jQuery 如何获取元素


jQuery的第一种设计思想就是获取元素

jquery的第一步就是先获取元素


$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素


jQuery 的链式操作是怎样的


链式操作:每次方法执行完后返回this对象,同一个对象进行不同的操作可以连接起来

$('div').find('h3').eq(2).html('Hello');

分解后等同于:

$('div') //找到div元素
   .find('h3') //选择其中的h3元素
   .eq(2) //选择第3个h3元素
   .html('Hello'); //将它的内容改为Hello

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。


jQuery 如何创建元素


jQuery的第二种设计思想就是创建元素

创建元素,只要把新元素直接传入jQuery的构造函数就行了

$('<p>Hello</p>')
$('<li class="new">new list item</li>')
$('ul').append('<li>list item</li>')

jQuery 如何移动元素


jQuery的第三种设计思想就是元素的移动

第一种方法是使用.insertAfter(),把div元素移动p元素后面:

$('div').insertAfter($('p'));

第二种方法是使用.after(),把p元素加到div元素前面:

  $('p').after($('div'));

表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。

一共有四对操作方法:

 .insertAfter()和.after():在现存元素的外部,从后面插入元素
  .insertBefore()和.before():在现存元素的外部,从前面插入元素
  .appendTo()和.append():在现存元素的内部,从后面插入元素
  .prependTo()和.prepend():在现存元素的内部,从前面插入元素

jQuery 如何修改元素的属性


修改元素的属性也有两种方法

一是在一个类里写好各种属性,把类名添加上去:

$('div').addClass('red')

第二种是常见的取值和赋值函数

.html() //取出或设置html内容
.text() //取出或设置text内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出某个表单元素的值

具体请查看阮一峰的: jQuery的设计思想

目录
相关文章
|
存储 关系型数据库 MySQL
深入理解mysql
深入理解mysql
244 1
|
关系型数据库 分布式数据库 数据库
PolarDB产品使用问题之底层是否会自动对数据库表进行分区分表
PolarDB产品使用合集涵盖了从创建与管理、数据管理、性能优化与诊断、安全与合规到生态与集成、运维与支持等全方位的功能和服务,旨在帮助企业轻松构建高可用、高性能且易于管理的数据库环境,满足不同业务场景的需求。用户可以通过阿里云控制台、API、SDK等方式便捷地使用这些功能,实现数据库的高效运维与持续优化。
299 58
commons-httpclient 和 httpclient 区别
commons-httpclient 和 httpclient 区别
618 0
|
C语言
【C语言实现猜数游戏】
【C语言实现猜数游戏】
195 0
|
Android开发 Swift iOS开发
探索Android与iOS开发的差异:平台特性与用户体验
【7月更文挑战第30天】在移动应用开发的广阔天地中,Android与iOS两大平台各自展现出独特的魅力与挑战。本文将深入探讨这两个操作系统在开发环境、编程语言、用户界面设计以及发布流程等方面的主要差异,旨在为开发者提供一个清晰的对比视角,帮助他们根据项目需求和目标受众做出更明智的开发决策。
186 13
|
监控 IDE Serverless
浅谈Serverless IDE
Serverless IDE 是专为无服务器架构设计的集成开发环境,简化开发者构建、测试与部署流程。其核心功能包括项目管理模板、多语言支持的代码编辑、本地模拟调试、云服务集成、一键部署、日志监控及插件扩展等。通过这些功能,Serverless IDE 提升开发效率、降低学习成本、加强团队协作并确保应用质量。流行的选择有 Serverless Framework Dashboard、AWS Cloud9 及 Visual Studio Code 配套插件。随着无服务器技术的发展,Serverless IDE 将扮演更加关键的角色。
216 6
|
XML Java API
计算机软考之各领域专有名词缩写
计算机软考之各领域专有名词缩写
415 0
|
应用服务中间件
IDEA启动报错:Error running ‘Tomcat 8.5.34‘: Address localhost:1099 is already in use
IDEA启动报错:Error running ‘Tomcat 8.5.34‘: Address localhost:1099 is already in use
508 0
|
算法 Python
Python算法——树的重建
Python算法——树的重建
171 0
|
算法 Linux
百度搜索:蓝易云【5 种常见的 Linux 打包类型:tar、gzip、bzip2、zip 、 7z详细解释。】
这些是常见的 Linux 打包和压缩类型,每种类型都有其特定的用途和特点。根据你的需求和使用场景,选择适合的压缩类型可以帮助你有效地管理和传输文件。
418 0