jQuery是什么?

jQuery就是一个javascript的类库,函数库。

jQuery是如何实现的?

  • jQuery采用的是构造函数模式进行开发的,jQuery是一个类
  • 常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在jQuery.prototype上的 ,只有jQuery的实例才能使用这些方法

我们可否实现一个jQuery的API?

可以!
首先我们应该知道jQuery是一个函数对象,我们把需要的函数(一段可多次使用的代码块)放在里面,把它当做一个类库,函数库。其实jQuery不仅仅是一个类(在它的原型上定义了很多的方法,每一个jQuery的实例都可以使用这些方法),它还是一个普通的对象,在jQuery本身的属性中还增加了一系列的方法。
但是我们可以用封装一个函数的方式并且声明命名空间来建立一个jQuery对象,

建立jQuery函数库

  • 首先在 window 对象中定义一个 jQuery 方法,该方法接收一个参数 nodeOrSelector。
  • 在方法 jQuery 中,调用 document.querySelectorAll,将传入的字符串参数 nodeOrSelector把获取到的字符- 串通过该 API 获取成一个对象(伪数组),存入变量 nodes中。
  • 给 nodes设置两个方法: nodes.addClass 以及 nodes.text 。
  • 两个方法都会将 nodes对象进行遍历,然后通过参数 classes或 text对 nodes里的节点进行操作。
  • 返回该对象。
  • 将 jQuery 的内存地址赋值给 window.$ 。
  • 此时,将需要设置的元素 ('nodes') (括号里应为字符串)赋值给变量nodes,即可通过 $nodes调用 addClass 或 text方法。
window.jQuery = function(nodeOrSelector){
let nodes={}
nodes = document.querySelectorAll(nodeOrSelector)
nodes.addClass = function(classes){
classes.forEach((value) => {
for(let i=0;i<nodes.lenght;i++){
nodes[i].classList.add(value)
}
}) }
nodes.text = function(text){
if(text===undefined){
var texts=[]
for(let i=0;i<nodes.lenght;i++){
texts.push(nodes[i].textContent)
}
return texts
}else{
for(let i=0;i<nodes.lenght;i++){
nodes.textContent = text
} }
}
return nodes }
window.$ = jQuery var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

我们获取的是jQuery对象(他是jQuery的实例)不是我们的原生js对象

jQuery:$("#div1")
JS:document.getElementById("div1") 原生JS的对象不能直接的使用jQuery的方法,同理,jQuery的对象也不能使用原生js的方法
$("#div1").className = "box"; no
document.getElementById("div1").addClass();

调用jQuery

  • $是一个别名jQuery,jQuery是函数,
  • $div是返回值
  • jquery基本语法:例:$('选择器').方法()

为什么要学jQuery?

  • 各个浏览器之间的兼容性
  • jQuery 功能丰富,还有动画、AJAX 等模块,不止 DOM 操作
  • jQuery:写的更少,做的更多

如何使用css的语法来选择元素?

jquery基本语法:$('选择器').css('属性','值')

jquery 的编程思想:

查询+操作,内置循环,迭代

jquery基本语法:

例:$('选择器').方法()

jQuery对象与DOM对象之间的转换方法

jQuery对象转成DOM对象:

(1)jQuery对象实际上是一个数据对象,可以通过[index]方法获得相应的DOM对象。

      var $v=$("#v"); //得到jQuery对象
var v=$("v")[0];//转换成DOM对象

(2)jQuery本身可以通过.get(index)方法得到相应的DOM对象。

       var $v=$("#v"); //得到jQuery对象
var v=$v.get(0);
DOM对象转成jQuery对象:

对于已经是一个DOM对象,只需要用$()将DOM对象包装起来,就能获得jQuery对象。

     var v=document.getElementById("v"); //得到DOM对象
var $v=$(v); //转成jQuery对象

转换后可以任意使用jQuery的方法了


jquery固有的方法:

最新文章

  1. LNMP编译安装基于centos7.2
  2. 基于Hadoop 2.6.0运行数字排序的计算
  3. For,Function,Lazy
  4. Unity3D和OGRE资源管理机制
  5. POJ 1064 Cable master (二分答案)
  6. linux 已有目录挂载磁盘
  7. SQL错误:sql server 目录名无效
  8. Netbeans搭建Android环境
  9. 使用Castle扩展Ibatis.Net,面向接口编程-更优雅的代码
  10. JMeter接口测试系列:Jmeter+jenkins+ant 的自动化构建
  11. c语言中的#ifdef和#ifndef
  12. 【Qt编程】基于Qt的词典开发系列&lt;十三&gt;音频播放
  13. [dev] 中文版内核代码编码规范
  14. 小程序 新建项目底部tabbar
  15. [Swift]在Swift项目中创建桥接头文件,Swift文件和Objective-C文件相互调用
  16. AJAX请求返回HTTP 400 错误 - 请求无效 (Bad request)
  17. session_unset 与 session_destroy 区别
  18. Navicat使用ssh连接数据库
  19. SIMD指令集——一条指令操作多个数,SSE,AVX都是,例如:乘累加,Shuffle等
  20. 20155202《网络对抗》Exp9 web安全基础实践

热门文章

  1. JZOJ 【NOIP2017提高A组模拟9.14】捕老鼠
  2. 腾讯牛逼!终于开源了自家的 Tencent JDK——Kona!!.md
  3. 老猿学5G扫盲贴:3GPP规范文档命名规则及同系列文档阅读指南
  4. XSS挑战赛(1)
  5. linux常用快捷键总结
  6. 第 3 篇 Scrum 冲刺博客
  7. STL——容器(Map &amp; multimap)的查找
  8. 【Ubantu 系统显示ip为127.0.0.1 解决办法】
  9. Linux修改系统时间为东八区北京时间(上海时间)
  10. [OI笔记]NOIP2017前(退役前)模拟赛的总结