jQuery之核心函数与核心对象
jQuery核心函数
介绍：
简称jQuery函数，jQuery库向外直接暴露的就是$/jQuery，引入jQuery库后，直接使用$即可。
作为函数使用：$(param)
参数为函数：当DOM加载完成后，执行此回调函数，相当于window.onload = function(文档加载完成的监听)。
参数为选择器字符串：查找所有匹配的DOM元素，返回包含所有DOM元素的jQuery对象。
参数为DOM对象：将DOM元素对象包装为jQuery对象返回$(this)。
参数为html标签字符串 (用得少)：创建标签对象并封装成jQuery对象。
作为对象使用：$.xxx()
$.each()：隐式遍历数组。
$.trim()：去除两端的空格。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery核心函数</title> </head> <body> <div> <button id="btn">测试</button> <br/> <input type="text" name="msg1"/><br/> <input type="text" name="msg2"/><br/> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.点击按钮：显示按钮的文本，显示一个新的输入框 * 2.遍历输出数组中所有元素值 * 3.去掉" my atguigu "两端的空格 */ //点击按钮：显示按钮的文本，显示一个新的输入框 $(function () { var $btn = $("#btn"); $btn.click(function () { var text = $(this).html(); alert(text); $('<input type="text" name="msg3" /><br />').appendTo('div'); }) }) //遍历输出数组中所有元素值 var arr = [123, 'atguigu', true]; $.each(arr, function (index, item) { console.log('第' + (index + 1) + '个元素的值为' + item); }); //去掉" my atguigu "两端的空格 var str = " my atguigu "; console.log(str.trim() === 'my atguigu'); console.log($.trim(str) === 'my atguigu'); //true </script> </body> </html>
jQuery核心对象
介绍：
简称jQuery对象，是一个包含所有匹配的任意多个dom元素的伪数组对象，执行$()返回的就是jQuery对象。
得到jQuery对象：执行jQuery函数返回的就是jQuery对象。
使用jQuery对象：$obj.xxx()。
基本行为：
size()/length：包含的DOM元素个数。
[index]/get(index)：得到对应位置的DOM元素。
each()：遍历包含的所有DOM元素。
index()：得到在所在兄弟元素中的下标。
示例一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery对象</title> </head> <body> <button>测试一</button> <button>测试二</button> <button id="btn3">测试三</button> <button>测试四</button> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> /* * 需求： * 1.统计一共有多少个按钮 * 2.取出第2个button的文本 * 3.输出所有button标签的文本 * 4.输出'测试三'按钮是所有按钮中的第几个 */ $(function (){ var $btns = $('button'); console.log($btns); //1.统计一共有多少个按钮 console.log($btns.size(), $btns.length); //2.取出第2个button的文本 console.log($btns[1].innerHTML, $btns.get(1).innerHTML); //3.输出所有button标签的文本 $btns.each(function () { console.log(this.innerHTML); }); //4.输出'测试三'按钮是所有按钮中的第几个 console.log($('#btn3').index()); }); </script> </body> </html>
示例二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>核心函数与核心对象</title> </head> <body> <button>测试</button> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> //$是一个function console.log(typeof $); //true，$与jQuery等同 console.log($ === jQuery); //true，$是一个全局函数 console.log($ === window.$); //"object"，这个对象就是jQuery对象 console.log(typeof $()); $('button').click(function () { alert(this.innerHTML); }); </script> </body> </html>
