<!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.1). 参数为函数 : 当DOM加载完成后,执行此回调函数
$(function () { // 绑定文档加载完成的监听
// 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
$('#btn').click(function () { // 绑定点击事件监听
// this是什么? 发生事件的dom元素(<button>)
// alert(this.innerHTML)
// 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
alert($(this).html())
// 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3"/><br/>').appendTo('div')
})
})
/*需求2. 遍历输出数组中所有元素值*/
var arr = [2, 4, 7]
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
console.log(index, item)
})
// 2). $.trim() : 去除两端的空格
var str = ' my atguigu '
// console.log('---'+str.trim()+'---')
console.log('---'+$.trim(str)+'---')
</script>
</body>
</html>
03_jQuery核心函数
最新推荐文章于 2024-07-12 15:28:42 发布
本文介绍了jQuery的核心函数,包括其作为函数和对象的使用方式。通过示例展示了如何在DOM加载完成后操作DOM元素,如点击按钮显示文本及动态添加输入框。同时,文章还涉及了$.each()遍历数组和$.trim()去除字符串两端空格的功能。
摘要由CSDN通过智能技术生成