使用jQuery实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01_初识jQuery</title> <!--使用原生DOM--> <script type="text/javascript"> window.onload = function () { var btn1 = document.getElementById('btn1') btn1.onclick = function () { var username = document.getElementById('username').value alert(username) } } </script> <!--使用jQuery实现--> <!--本引入--> <script type="text/javascript" src="../js/jquery-1.10.1.js"></script> <!--远程引入--> <!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> --> <script type="text/javascript"> //绑定文档加载完成的监听 jQuery(function () { var $btn2 = $('#btn2') $btn2.click(function () { // 给btn2绑定点击监听 var username = $('#username').val() alert(username) }) }) /* 1. 使用jQuery核心函数: $/jQuery 2. 使用jQuery核心对象: 执行$()返回的对象 */ //新的注释 </script> </head> <body> <!-- 需求: 点击"确定"按钮, 提示输入的值 --> 用户名: <input type="text" id="username"> <button id="btn1">确定(原生版)</button> <button id="btn2">确定(jQuery版)</button> </body> </html>
1. jQuery核心函数
简称: jQuery函数($/jQuery)
jQuery库向外直接暴露的就是$/jQuery
引入jQuery库后, 直接使用$即可
2. jQuery核心对象
简称: jQuery对象
得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
使用jQuery对象: $obj.xxx() （执行$()得到的）---->jQuery对象
3. 当函数用: $(xxx)
当对象用: $.xxx()
<!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>
基本行为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>04_jQuery对象</title> </head> <body> <button>测试一</button> <button>测试二</button> <button id="btn3">测试三</button> <button>测试四</button> <!-- 1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象 2. 基本行为 * size()/length: 包含的DOM元素个数 * [index]/get(index): 得到对应位置的DOM元素 * each(): 遍历包含的所有DOM元素 * index(): 得到在所在兄弟元素中的下标 --> <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.length = 0 weiArr[0] = 'aaa' weiArr.length = 1 weiArr[1] = 123 weiArr.length = 2 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>