前言
之前只是用过jQuery，但没有系统地学过。
jQuery官网
jQuery中文网
jQuery在线帮助文档
jQuery基本语法
一、了解jQuery
Write Less,Do More!
链式调用，读写合一
二、jQuery的基本使用
测试时用未压缩的版本：xxx.js
上线后用压缩的版本：xxx.min.js
<!-- 方式一: 使用原生JS实现功能 -->
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn1')
btn.onclick = function () {
alert(document.getElementById('username').value)
}
}
</script>
<!--
方式二: 使用jQuery实现功能
1. 引入jQuery库
* 本地引入
* 远程引入
2. 使用jQuery函数和jQuery对象编码
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn2').click(function () {
alert($('#username').val())
})
})
</script>
</head>
<body>
<!--
需求: 点击"确定"按钮, 提示输入的值
-->
用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
jQuery核心函数：$ / jQuery
jQuery核心对象：执行$()返回的对象
三、jQuery的两把利器
<!--
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">
// 1. jQuery函数：直接可用
console.log(typeof $) //$是一个function
console.log($ === jQuery) //true $与jQuery等同
console.log($ === window.$) //true $是一个全局函数
// 2. jQuery对象：执行jQuery函数得到它
console.log(typeof $()) //"object" 这个对象就是jQuery对象
// console.log($() instanceof Object); // true
$('button').click(function () {
alert(this.innerHTML)
})
四、jQuery函数的使用
作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
/*
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉" my atguigu "两端的空格
*/
/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
//1). 参数为函数 : 当DOM加载完成后，执行其中的函数 回调函数
$(function () {
//2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
var $btn = $("#btn")
$btn.click(function () {
//显示按钮的文本
//this就是发生事件的dom元素对象(也就是button)
// alert(this.innerHTML)
//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
五、jQuery对象的使用
size()/length：dom元素的个数