初识jQuery
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>01_初识jQuery</title> 7 8 <!--使用原生DOM--> 9 <script type="text/javascript"> 10 window.onload = function () { 11 var btn1 = document.getElementById('btn1') 12 btn1.onclick = function () { 13 var username = document.getElementById('username').value 14 alert(username) 15 } 16 } 17 </script> 18 19 <!--使用jQuery实现--> 20 <!--本引入--> 21 <script type="text/javascript" src="js/jquery-1.12.3.js"></script> 22 <!--远程引入--> 23 <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>--> 24 <script type="text/javascript"> 25 //绑定文档加载完成的监听 26 jQuery(function () { 27 var $btn2 = $('#btn2') //jQuery核心对象 28 $btn2.click(function () { // 给btn2绑定点击监听 29 var username = $('#username').val() 30 alert(username) 31 }) 32 }) 33 34 /* 35 1. 使用jQuery核心函数: $/jQuery 36 2. 使用jQuery核心对象: 执行$()返回的对象 37 */ 38 //新的注释 39 </script> 40 </head> 41 <body> 42 <!-- 43 需求: 点击"确定"按钮, 提示输入的值 44 --> 45 46 用户名: <input type="text" id="username"> 47 <button id="btn1">确定(原生版)</button> 48 <button id="btn2">确定(jQuery版)</button> 49 50 </body> 51 52 </html>
jQuery的二把利器
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>jQuery的二把利器</title> 7 </head> 8 <body> 9 <button>测试</button> 10 <!-- 11 1. jQuery核心函数 12 * 简称: jQuery函数($/jQuery) 13 * jQuery库向外直接暴露的就是$/jQuery 14 * 引入jQuery库后, 直接使用$即可 15 * 当函数用: $(xxx) 16 * 当对象用: $.xxx() 17 2. jQuery核心对象 18 * 简称: jQuery对象 19 * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象 20 * 使用jQuery对象: $obj.xxx() 21 --> 22 23 <script type="text/javascript" src="js/jquery-1.12.3.js"></script> 24 <script type="text/javascript"> 25 //1. jQuery函数: 直接可用 26 console.log($, typeof $) 27 console.log(jQuery===$) // true 28 //2. jQuery对象: 执行jQuery函数得到它 29 console.log($() instanceof Object) // true 30 /* 31 (function (window) { 32 var jQuery = function () { 33 return new xxx() 34 } 35 36 window.$ = window.jQuery = jQuery 37 })(window) 38 */ 39 </script> 40 </body> 41 </html>
jQuery核心函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>03_jQuery核心函数</title> 6 </head> 7 8 <body> 9 10 <div> 11 <button id="btn">测试</button> 12 <br/> 13 14 <input type="text" name="msg1"/><br/> 15 <input type="text" name="msg2"/><br/> 16 17 </div> 18 19 20 <!-- 21 1. 作为一般函数调用: $(param) 22 1). 参数为函数 : 当DOM加载完成后，执行此回调函数 23 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 24 3). 参数为DOM对象: 将dom对象封装成jQuery对象 25 4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象 26 2. 作为对象使用: $.xxx() 27 1). $.each() : 隐式遍历数组 28 2). $.trim() : 去除两端的空格 29 --> 30 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 31 <script type="text/javascript"> 32 /* 33 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框 34 需求2. 遍历输出数组中所有元素值 35 需求3. 去掉" my atguigu "两端的空格 36 */ 37 /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/ 38 //1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数 39 $(function () { // 绑定文档加载完成的监听 40 // 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 41 $('#btn').click(function () { // 绑定点击事件监听 42 // this是什么? 发生事件的dom元素(<button>) 43 // alert(this.innerHTML) 44 // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象 45 alert($(this).html()) //获取标签的文本 46 // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象 47 $('<input type="text" name="msg3"/><br/>').appendTo('div') //将创建的标签对象添加到父元素中 48 }) 49 }) 50 51 /*需求2. 遍历输出数组中所有元素值*/ 52 var arr = [2, 4, 7] 53 // 1). $.each() : 隐式遍历数组 54 $.each(arr, function (index, item) { 55 console.log(index, item) 56 }) 57 // 2). $.trim() : 去除两端的空格 58 var str = ' my ' 59 // console.log('---'+str.trim()+'---') 60 console.log('---'+$.trim(str)+'---') 61 62 </script> 63 </body> 64 65 </html>
jQuery对象
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>04_jQuery对象</title> 7 </head> 8 9 <body> 10 <button>测试一</button> 11 <button>测试二</button> 12 <button id="btn3">测试三</button> 13 <button>测试四</button> 14 15 <!-- 16 1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象 17 2. 基本行为 18 * size()/length: 包含的DOM元素个数 19 * [index]/get(index): 得到对应位置的DOM元素 20 * each(): 遍历包含的所有DOM元素 21 * index(): 得到在所在兄弟元素中的下标 22 --> 23 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 24 <script type="text/javascript"> 25 26 /* 27 需求: 28 需求1. 统计一共有多少个按钮 29 需求2. 取出第2个button的文本 30 需求3. 输出所有button标签的文本 31 需求4. 输出'测试三'按钮是所有按钮中的第几个 32 */ 33 //需求1. 统计一共有多少个按钮 34 var $buttons = $('button') 35 /*size()/length: 包含的DOM元素个数*/ 36 console.log($buttons.size(), $buttons.length) 37 38 //需求2. 取出第2个button的文本 39 /*[index]/get(index): 得到对应位置的DOM元素*/ 40 console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML) 41 42 //需求3. 输出所有button标签的文本 43 /*each(): 遍历包含的所有DOM元素*/ 44 /*$buttons.each(function (index, domEle) { 45 console.log(index, domEle.innerHTML, this) 46 })*/ 47 $buttons.each(function () { 48 console.log(this.innerHTML) //简写，this就是每个button 49 }) 50 51 // $.each($buttons, function(){ 52 // console.log(this.innerHTML) 53 // }) 54 55 56 //需求4. 输出'测试三'按钮是所有按钮中的第几个 57 /*index(): 得到在所在兄弟元素中的下标*/ 58 console.log($('#btn3').index()) //2 59 60 /* 61 1. 伪数组 62 * Object对象 63 * length属性 64 * 数值下标属性 65 * 没有数组特别的方法: forEach(), push(), pop(), splice() 66 */ 67 console.log($buttons instanceof Array) // false 68 // 自定义一个伪数组 69 var weiArr = {} 70 weiArr.length = 0 71 weiArr[0] = 'atguigu' 72 weiArr.length = 1 73 weiArr[1] = 123 74 weiArr.length = 2 75 for (var i = 0; i < weiArr.length; i++) { 76 var obj = weiArr[i] 77 console.log(i, obj) 78 } 79 console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined 80 81 </script> 82 </body> 83 </html>
基本选择器
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>05_基本选择器</title> 7 </head> 8 9 <body> 10 <div id="div1" class="box">div1(class="box")</div> 11 <div id="div2" class="box">div2(class="box")</div> 12 <div id="div3">div3</div> 13 <span class="box">span(class="box")</span> 14 15 <br> 16 <ul> 17 <li>AAAAA</li> 18 <li title="hello">BBBBB(title="hello")</li> 19 <li class="box">CCCCC(class="box")</li> 20 <li title="hello">DDDDDD(title="hello")</li> 21 </ul> 22 23 <!-- 24 1. 是什么? 25 - 有特定格式的字符串 26 2. 作用 27 - 用来查找特定页面元素 28 3. 基本选择器 29 - #id : id选择器 30 - element : 元素选择器 31 - .class : 属性选择器 32 - * : 任意标签 33 - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器) 34 - selector1selector2selectorN : 取多个选择器的交集(相交选择器) 35 --> 36 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 37 <script type="text/javascript"> 38 /* 39 需求: 40 1. 选择id为div1的元素 41 2. 选择所有的div元素 42 3. 选择所有class属性为box的元素 43 4. 选择所有的div和span元素 44 5. 选择所有class属性为box的div元素 45 */ 46 //1. 选择id为div1的元素 47 // $('#div1').css('background', 'red') 48 49 //2. 选择所有的div元素 50 // $('div').css('background', 'red') 51 52 //3. 选择所有class属性为box的元素 53 //$('.box').css('background', 'red') 54 55 //4. 选择所有的div和span元素 56 // $('div,span').css('background', 'red') 57 58 //5. 选择所有class属性为box的div元素 59 //$('div.box').css('background', 'red') 60 61 // 整个页面 62 //$('*').css('background', 'red') 63 64 </script> 65 </body> 66 67 </html>
层次选择器
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>06_层次选择器</title> 7 </head> 8 9 <body> 10 <ul> 11 <li>AAAAA</li> 12 <li class="box">CCCCC</li> 13 <li title="hello"><span>BBBBB</span></li> 14 <li title="hello"><span class="box">DDDD</span></li> 15 <span>EEEEE</span> 16 </ul> 17 18 <!-- 19 层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器 20 1. ancestor descendant 21 在给定的祖先元素下匹配所有的后代元素 22 2. parent>child 23 在给定的父元素下匹配所有的子元素 24 3. prev+next 25 匹配所有紧接在 prev 元素后的 next 元素 26 4. prev~siblings 27 匹配 prev 元素之后的所有 siblings 元素 28 --> 29 30 <script src="js/jquery-1.10.1.js" type="text/javascript"></script> 31 <script type="text/javascript"> 32 /* 33 需求: 34 1. 选中ul下所有的的span 35 2. 选中ul下所有的子元素span 36 3. 选中class为box的下一个li 37 4. 选中ul下的class为box的元素后面的所有兄弟元素 38 */ 39 40 //1. 选中ul下所有的的span 41 // $('ul span').css('background', 'yellow') 42 43 //2. 选中ul下所有的子元素span 44 // $('ul>span').css('background', 'yellow') 45 46 //3. 选中class为box的下一个li 47 // $('.box+li').css('background', 'yellow') 48 49 //4. 选中ul下的class为box的元素后面的所有兄弟元素 50 $('ul .box~*').css('background', 'yellow') 51 </script> 52 </body> 53 </html>