jQuery中的this以及$(this)的区别
不代表$()中可以是this，只是因为用的时候大多数this对应的是dom元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_jQuery核心函数</title>
</head>
<body>
<div>
<button id="btn">测试</button>
<br/>
<input type="text" name="msg1"/><br/>
<input type="text" name="msg2"/><br/>
</div>
<!--
1. 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉" my atguigu "两端的空格
*/
/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
//1). 参数为函数 : 当DOM加载完成后，执行其中的函数 回调函数
$(function () {
//2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
var $btn = $("#btn")
$btn.click(function () {
//显示按钮的文本
//this就是发生事件的dom元素对象(也就是<button id="btn">测试</button>)
//3). 参数为DOM对象: 将dom对象封装成jQuery对象
var text = $(this).html()
alert(text)
//显示一个新的输入框
//4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3" /><br />').appendTo('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
</script>
</body>
</html>
1.文档：一个页面就是一个文档，DOM中使用document表示
2.元素：页面中所有的标签都是元素，DOM中使用element表示
3.节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）