jQuery的工厂函数$()的妙用

1.理解DOM结构:祖先元素,父元素,子元素,兄弟元素,每一个元素都是一个DOM对象

2.必须先用工厂函数$()将DOM对象转为jQuery对象,才可以使用jQuery中的方法

3.$(选择器): 将选择获取到的DOM对象包装/转化为jquery对象

4.jQuery对象与DOM对象的区别:

4-1:jquery对象是将一个或组一组DOM对象进行打包,统一进行处理,默认自带循环迭代

4-2:DOM对象对应着页面中一个或多个可视元素,它给jquery对象提供原材料

5.DOM对象与jquery对象之间的转换:

5-1:DOM对象转jquery对象: $()

5-2:jquery对象转DOM对象: get(index)或[index]

注: $()就是一个DOM对象打包器,只要逐个取出来就是DOM对象

6.$()总结: 将DOM对象转为jQuery对象,以便使用jQuery方法对页面元素进行统一快速的处理

jQuery的工厂函数$()的妙用

  • 我是列表项1
  • 我是列表项2
  • 我是列表项3
  • 我是列表项4
  • 我是列表项5

//任务:将第一个列表项背景换成天蓝色

//1.先用原生的js来实现:getElementsByTagName()是原生DOM对象上的方法

// document.getElementsByTagName('li')[0].style.backgroundColor = 'skyblue'

//2.用jqery来实现 :css()是定义在jquery对象上的方法

// $('li:first-child').css('backgroundColor','skyblue')

//思考?能不能直接在jQuery对象上调用原生DOM对象的方法呢?答案是否定的

// $('li:first-child').style.backgroundColor = 'skyblue'

//思考?能不能在原生DOM对象上面调用jquery中的方法呢?答案是否定的

// document.getElementsByTagName('li')[0].css('backgroundColor','skyblue')

//这是为什么呢?,因为这是二个不同的对象,下面我们进行测试

// document.write((document.getElementsByTagName('li')[0] === $('li:first-child')) ? '我们完全一样' : '我们不一样')

//将jquery对象转为DOM对象,再调用原生对象方法

$('li')[0].style.backgroundColor = 'coral'

$('li').get(2).style.backgroundColor = 'cyan'

//将DOM对象转为jquery对象,就是使用工厂函数 $(),前面已说过,不更多言

html工厂函数,jQuery的工厂函数$()的妙用相关推荐

  1. [译] ES6+ 中的 JavaScript 工厂函数(第八部分)

    本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliot ...

  2. 【译】JavaScript 工厂函数 vs 构造函数

    译者:前端小智 原文:medium.com/@chamikakas- 当谈到JavaScript语言与其他编程语言相比时,你可能会听到一些令人困惑东西,其中之一是工厂函数和构造函数. 想优质文章请猛戳 ...

  3. GOLANG工厂模式、简单工厂模式、抽象工厂模式、创建者模式

    设计模式可以大大提高代码复用性,使得程序的修改更加灵活.另外将各个功能模块抽象解耦出来,在某个模块需要更改时不至于会对整体代码进行修改,解耦的好的话只简单修改几个地方即可以切换某个模块在实现上的切换, ...

  4. 工厂好的html页面,jquery中被誉为工厂函数的是什么?

    jquery中被誉为工厂函数的是"$()".在jQuery中,无论我们使用哪种类型的选择符都需要从一个"$"符号和一对"()"开始.下面本篇 ...

  5. python在工厂中的运用_Python常见工厂函数用法示例

    工厂函数:能够产生类实例的内建函数. 工厂函数是指这些内建函数都是类对象, 当调用它们时,实际上是创建了一个类实例. Python中的工厂函数举例如下: 1. int(),long(),float() ...

  6. JavaScript中的工厂函数vs构造函数vs class

    原文链接:JavaScript Factory Functions vs Constructor Functions vs Classes 作者:Eric Elliott 译者:sunny 转载需提前 ...

  7. python3精要(19)-全局变量global和工厂函数,lambda,变量作用范围,nonlocal

    一.全局变量global语句: 1.全局变量是位于模块文件的内部顶层的变量名 2.全局变量是在函数内被赋值的话,必须通过global声明 3.全局变量名在函数内部不经营声明也可被引用 二.工厂函数 d ...

  8. Vue——props默认值为工厂函数时[工厂函数:undefined]问题解决方案

    问题描述 methods: {sayHi(){alert('hi');} }, props: {keyword: {default: 'a'},say: {type: Function,default ...

  9. boost::signals2::deconstruct 作为构建后的工厂函数的测试程序

    boost::signals2::deconstruct 作为构建后的工厂函数的测试程序 实现功能 C++实现代码 实现功能 boost::signals2::deconstruct 作为构建后的工厂 ...

最新文章

  1. 独家 | 在Python编程面试前需要学会的10个算法(附代码)
  2. sql2005导出Excel错误解决方法
  3. ux设计中的各种地图_如何在UX设计中使用颜色
  4. web站点性能测试经验点滴
  5. HDU Integer's Power(容斥原理)
  6. 昔日互联网影视巨头现在连三包服务都无法履行?客服:建议亲自行维修呢
  7. python连乘函数_动态规划之矩阵连乘问题Python实现方法
  8. php7.1 伪静态失效,解决CodeIgniter伪静态失效
  9. [Flash开发笔记] List控件--删除指定label或data的项
  10. mysql order优化2019_mysql 增加排序 性能差很多 怎么优化
  11. java省市区树_Java后台以树形结构返回省市区三级区域信息
  12. 线性代数基础知识点回顾与总结(一):行列式与矩阵
  13. 随机数生成器Random类
  14. 利用stm32cubemx生成单极性倍频spwm调制代码步骤
  15. android8 保卫萝卜,保卫萝卜挑战8攻略图解,学会这些,轻松过第八关
  16. 财报向好背后,特步的持续爆发力
  17. SMB 协议操作共享盘
  18. html 鼠标图标做成动画效果,7 个让人惊叹的 HTML5 鼠标动画
  19. 这些好看的皮肤,这不嗖的一下,统统都到电脑里了~
  20. 【区块链技术与应用】(一)

热门文章

  1. 如何用Java自己写一个.exe程序
  2. 说服别人的六种好方法
  3. 大家都是怎么样去做销售的
  4. word文档段落左侧的十字图标怎么去掉
  5. 第七章第二十二题(计算一个字符串中大写字母的数目)(Calculates the number of uppercase letters in a string)
  6. 2022年重庆二级建造师多选专项练习题及答案
  7. 公需科目必须学吗_会计继续教育公需课必须学吗?
  8. netty write 和flush 源码解析
  9. LINUX 查询已安装的软件信息
  10. 欢迎和老飞博客交换网站链接