jQuery两把利器

最新推荐文章于 2022-04-30 08:02:10 发布

悠闲的线程池

最新推荐文章于 2022-04-30 08:02:10 发布

阅读量65

点赞数

文章标签： jquery javascript ajax

本文链接：https://blog.csdn.net/weixin_44235759/article/details/120473374

版权

在这里插入图片描述

<!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>

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

    window.$ = window.jQuery = jQuery
  })(window)

jQuery核心函数

函数也是对象，所以有两种用法

当作一般函数调用$(param)

在这里插入图片描述
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

示例

需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框

//1). 参数为函数 : 当DOM加载完成后，执行其中的函数     回调函数
  $(function () {
      //2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
    var $btn = $("#btn")
    $btn.click(function () {
      //显示按钮的文本
      //this就是发生事件的dom元素对象(也就是button)
      //3). 参数为DOM对象: 将dom对象封装成jQuery对象
      var text = $(this).html()
      alert(text)
      //显示一个新的输入框
      //4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
      $('<input type="text" name="msg3" /><br />').appendTo('div')
    })
  })

<div>
  <button id="btn">测试</button>
  <br/>

  <input type="text" name="msg1"/><br/>
  <input type="text" name="msg2"/><br/>
</div>

作为对象使用

在这里插入图片描述

示例

  /*需求2. 遍历输出数组中所有元素值*/
  var arr = [123, 'atguigu', true]
  // 1). $.each() : 隐式遍历数组
  $.each(arr, function (index, item) {
    console.log('第' + (index + 1) + '个元素的值为' + item)
  })

  /*需求3. 去掉"  my atguigu  "两端的空格*/
  var str = "  my atguigu  "
  // 2). $.trim() : 去除两端的空格
  console.log(str.trim() === 'my atguigu')
  console.log($.trim(str) === 'my atguigu') //true

jQuery核心对象

jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
基本行为

size()/length: 包含的DOM元素个数
[index]/get(index): 得到对应位置的DOM元素
each(): 遍历包含的所有DOM元素
index(): 得到在所在兄弟元素中的下标

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>04_jQuery对象</title>
</head>

<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>

<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
  * size()/length: 包含的DOM元素个数
  * [index]/get(index): 得到对应位置的DOM元素
  * each(): 遍历包含的所有DOM元素
  * index(): 得到在所在兄弟元素中的下标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">

  /*
   需求:
   需求1. 统计一共有多少个按钮
   需求2. 取出第2个button的文本
   需求3. 输出所有button标签的文本
   需求4. 输出'测试三'按钮是所有按钮中的第几个
   */
  $(function () {
    var $btns = $('button')
    console.log($btns)
    // 需求1. 统计一共有多少个按钮
      /*size()/length: 包含的DOM元素个数*/
    console.log($btns.size(), $btns.length)

    // 需求2. 取出第2个button的文本
      /*[index]/get(index): 得到对应位置的DOM元素*/
    console.log($btns[1].innerHTML, $btns.get(1).innerHTML)

    // 需求3. 输出所有button标签的文本
      /*each(): 遍历包含的所有DOM元素*/
    $btns.each(function () {
      console.log(this.innerHTML)
    })

    // 需求4. 输出'测试三'按钮是所有按钮中的第几个
      /*index(): 得到在所在兄弟元素中的下标*/
    console.log($('#btn3').index())
  })
</script>
</body>
</html>

悠闲的线程池

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery两把利器

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jQuery的二把利器</title></head><body><button>测试</button><!--1. jQuery核心函数 * 简称: jQuery函数($/jQuery) * jQuery库向外直接暴露的就是$/jQue.
复制链接

扫一扫