视频

jQuery主要结构详解

(function(window){
  var jQuery = function(){
    return new xxx();
  }
  window.$ = window.jQuery = jQuery;
})(window)

核心函数和核心对象

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>jQuery的二把利器</title>
</head>
<body>
<button>测试</button>
<!--
1. jQuery核心函数
  * 简称: jQuery函数($/jQuery)
  * jQuery库向外直接暴露的就是$/jQuery
  * 引入jQuery库后, 直接使用$即可
    * 当函数用: $(xxx)
    * 当对象用: $.xxx()
2. jQuery核心对象
  * 简称: jQuery对象
  * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
  * 使用jQuery对象: $obj.xxx()
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">

  console.log(typeof $)   //$是一个function
  console.log($ === jQuery) //true  $与jQuery等同
  console.log($ === window.$) //true  $是一个全局函数

  console.log(typeof $()) //"object"  这个对象就是jQuery对象

  $('button').click(function () {
    alert(this.innerHTML)
  })
</script>
</body>
</html>

核心函数对应备注

  1. 作为一般函数调用: $(param)
    1). 参数为函数 : 当DOM加载完成后,执行此回调函数
    2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    3). 参数为DOM对象: 将dom对象封装成jQuery对象
    4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
  2. 作为对象使用: $.xxx()
    1). $.each() : 隐式遍历数组
    2). $.trim() : 去除两端的空格

核心对象对应备注

  1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
  2. 基本行为
  • size()/length: 包含的DOM元素个数
  • [index]/get(index): 得到对应位置的DOM元素
  • each(): 遍历包含的所有DOM元素
  • index(): 得到在所在兄弟元素中的下标
posted on 2023-01-10 08:40  垂序葎草  阅读(14)  评论(0编辑  收藏  举报