一、概括
1. jQuery核心函数 * 简称: jQuery函数($/jQuery) * jQuery库向外直接暴露的就是$/jQuery * 引入jQuery库后, 直接使用$即可 * 当函数用: $(xxx) * 当对象用: $.xxx() 2. jQuery核心对象 * 简称: jQuery对象 * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象 * 使用jQuery对象: $obj.xxx()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的二把利器</title>
</head>
<body>
<button>测试</button>
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
// 1.jQuery函数:直接可用
console.log($,typeof $) // ƒ(selector, context){} 'function'
console.log(jQuery===$) // true
// 2.jQuery对象:执行函数得到它
console.log($(),$() instanceof Object) // jQuery.fn.init 'true'
//jQuery库实际整体模型
/*
(function (window) {
var jQuery = function () {
return new xxx()
}
window.$ = window.jQuery = jQuery
})(window)
*/
</script>
</body>
</html>
二、jQuery核心函数
1. 作为一般函数调用: $(param) 1). 参数为函数 : 当DOM加载完成后,执行此回调函数 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 3). 参数为DOM对象: 将dom对象封装成jQuery对象 4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象 2. 作为对象使用: $.xxx() 1). $.each() : 隐式遍历数组 2). $.trim() : 去除两端的空格
<!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>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉" my onedean "两端的空格
*/
/*需求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)
})
/*需求3. 去掉" my onedean "两端的空格*/
// 2). $.trim() : 去除两端的空格
var str = ' my onedean '
// console.log('---'+str.trim()+'---')
console.log('---'+$.trim(str)+'---')
</script>
</body>
</html>
二、jQuery核心对象
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象 2. 基本行为 * size()/length: 包含的DOM元素个数 * [index]/get(index): 得到对应位置的DOM元素 所有DOM元素 * index(): 得到* each(): 遍历包含的在所在兄弟元素中的下标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_jQuery对象</title>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
需求1. 统计一共有多少个按钮
需求2. 取出第2个button的文本
需求3. 输出所有button标签的文本
需求4. 输出'测试三'按钮是所有按钮中的第几个
*/
//需求1. 统计一共有多少个按钮
var $buttons = $('button')
/*size()/length: 包含的DOM元素个数*/
console.log($buttons.size(), $buttons.length)
//需求2. 取出第2个button的文本
/*[index]/get(index): 得到对应位置的DOM元素*/
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
//需求3. 输出所有button标签的文本
/*each(): 遍历包含的所有DOM元素*/
/*$buttons.each(function (index, domEle) {
console.log(index, domEle.innerHTML, this)
})*/
$buttons.each(function () {
console.log(this.innerHTML)
})
//需求4. 输出'测试三'按钮是所有按钮中的第几个
/*index(): 得到在所在兄弟元素中的下标*/
console.log($('#btn3').index()) //2
/*
1. 伪数组
* Object对象
* length属性
* 数值下标属性
* 没有数组特别的方法: forEach(), push(), pop(), splice()
*/
console.log($buttons instanceof Array) // false
// 自定义一个伪数组
var weiArr = {}
weiArr[0] = 'abc'
weiArr[1] = 123
weiArr[2] = false
weiArr.length = 3
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i]
console.log(i, obj)
}
console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined
</script>
</body>
</html>