<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <!--novalidate 告诉浏览器不要帮我做 额外的校验--> <form action="" method="post" enctype="multipart/form-data" novalidate="" disabled> <!-- 默认 enablers 可以不加 ; disabled 禁用--> <p> <label for="d1">username<input type="text" id="d1"></label> </p> <p> <label for="d2">password<input type="password" id="d2"></label> </p> <input type="submit"> <input type="checkbox" name="hobby">篮球 <input type="checkbox" name="hobby" checked>足球 <input type="checkbox" name="hobby">肉球 <select name="" id=""> <option value="">111</option> <option value="" selected>222</option> <option value="">333</option> </select> </form> <script> // 属性筛选器 var $userEle = $("input[type='text']"); console.log($userEle[0]); // <input type="text" id="d1"> // 表单(form)筛选器:通过 input type 的属性查找 基本等价于属性筛选器 console.log($(':text')); console.log($(':password')); console.log($(':checked')); // 小bug 会把 input option 也找到,解决 console.log($('input:checked')); console.log($(':selected')); // 只找option </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <span>span1</span> <span>span2</span> <div id="d1">div <span>div>span</span> <p class="c1">div>p <span class="c2">div>p>span</span> </p> <span id="d2">div>span</span> </div> <span>span1</span> <span>span2</span> <span id="d3"></span> <ul> <li>001</li> <li>002</li> <li>003</li> <li>004</li> <li>005</li> <li>006</li> <li>007</li> <li>008</li> </ul> <script> // 1.下一个元素 console.log($('#d1').next); // 同级别标签下一个 console.log($("#d1").nextAll()); // 同级别标签下面的全部 console.log($('#d1').nextUntil('#d3')); // 同级别下查找直到 d3 停止,不包含 d3 // 2.上一个元素(方法与 1 对应相同) console.log($('#d1').prev); // console.log($('#d1').prevAll()); console.log($('#d1').prevUntil('span')); // 3.层级查找 console.log($('.c1').parent()); // 找父亲 console.log($('.c1').parent().parent().parent().parent().parent().parent()); // 链式操作 console.log($('.c2').parents()); // 找父类 无法如链式般找到Document 对象 console.log($('.c2').parentsUntil('html')); // 到此为止,不包括 HTML // 找儿子 console.log($('#d1').children()); // 所有子标签 console.log($($('#d1').children()[1].children())); // 去里面具体值 ,因为需要使用 jq 方法 ,一定要记得转换 // 找兄弟 ,上下同级别所有 console.log($('#d1').siblings()); // 确定好的范围内部查找 console.log($('#d1').find('.c2')); //补充 first last not has eq console.log($('ul li').first()); console.log($('ul li').last()); console.log($('ul li').eq(4)); // 指定索引 console.log($('ul li').has('c1')); // 保留包含特定后代的元素 console.log($('ul li').not()); // 从匹配集合中删除 not 中的元素 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>左侧菜单示例</title> <style> .left { position: fixed; left: 0; top: 0; width: 20%; height: 100%; background-color: rgb(47,53,61); } .right { width: 80%; height: 100%; } .menu { color: white; } .title { text-align: center; padding: 10px 15px; border-bottom: 1px solid #23282e; } .items { background-color: #181c20; } .item { padding: 5px 10px; border-bottom: 1px solid #23282e; } .hide { display: none; } </style> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="left"> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="items"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="items hide"> <div class="item">111</div> <div class="item">222</div> <div class="item">333</div> </div> </div> </div> </div> <div class="right"></div> <script> $(".title").click(function () { // jQuery绑定事件 // 隐藏所有class里有.items的标签 // $(".items").addClass("hide"); //批量操作 // $(this).next().removeClass("hide"); // jQuery链式操作 $(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide') }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .left{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 20%; height: 100%; background-color: green; } .title{ font-size: 24px; color: white; text-align: center; } .items{ background-color: black; padding: 10px 15px; } .hidden{ display: none; } </style> </head> <body> <div class="left"> <div class="menu"> <div class="title">菜单一 <div class="items">111</div> <div class="items">222</div> <div class="items">333</div> </div> <div class="title">菜单二 <div class="items">111</div> <div class="items">222</div> <div class="items">333</div> </div> <div class="title">菜单三 <div class="items">111</div> <div class="items">222</div> <div class="items">333</div> </div> </div> </div> <script> $('.title').click(function () { // 先将所有的div全部隐藏 $('.items').addClass('hidden'); // 然后将被点击的div的hidden移除 // console.log(this) // this指代的就是当前被操作对象 原生js对象 $(this).children().removeClass('hidden'); $(this).siblings().children().addClass('hidden') }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div> <p>111</p> <p>222</p> </div> <script> // 开关灯 和 模态框 // addClass 添加指定的类名 // removeClass 删除指定类 // hasClass 判断类存在与否 // toggleClass 切换Css类名 ,如果没有就添加 有删除 // p标签 1 红色 2. 绿色 $('div').children().first().css('color','red').next().css('color','blue') </script> </body> </html>
class Demo(object): def foo(self): print('foo is running') return self def func(self): print('func is running') return self obj = Demo() obj.foo().func() """ AttributeError: 'NoneType' object has no attribute 'func' 解决: return self 对象 foo is running func is running """
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .c1 { position: relative; } p { position: absolute; top: 100px; left: 200px; margin: 0; } </style> </head> <body> <div class="c1"> </div> <p>ppp</p> <script> $('p').offset(); // 允许检索一个元素相对于文档 的当前位置 // {top: 100.00000762939453, left: 200.00001525878906} $('p').position(); // 相对于父级 标签的 位移 // {top: 100.00000762939453, left: 200.00001525878906} $(window).scrollTop(); // 当前滚动条 距离顶部的标签 $(window).scrollTop(0) // 回到顶部实例 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .c1 { position: fixed; height: 50px; width: 100px; background-color: yellow; color: black; bottom: 20px; right: 10px; } .hidden { display: none; } </style> </head> <body> <a href="" id="d1"></a> <div style="background-color: red;height: 1000px"></div> <div style="background-color: green;height: 1000px"></div> <div style="background-color: mediumspringgreen;height: 1000px"></div> <div class="c1 hidden"> <a href="#d1">回到顶部</a> </div> <script> $(window).scroll(function () { if($(window).scrollTop() > 600){ $('.c1').removeClass('hidden') } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> p { margin: 5px 10px 15px 20px; padding: 3px 6px 7px 9px; } </style> </head> <body> <p>ppp</p> <script> // 文本 $('p').height(); // 21 $('p').width(); // 1305 // + padding $('p').innerHeight(); // 31 $('p').innerWidth(); // 1320 // + boder $('p').outerWidth() // 1320 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div>div <span>span</span> <p>div>p<span>p>span</span></p> <span>div>span</span> </div> <input type="text"> <script> // 文本操作 // 获取内部文本 // js var divEle = document.getElementsByTagName('div')[0]; console.log(divEle.innerText,divEle.innerHTML); // jq $('div').text(); $('div').HTML(); // 设置 $('div').text('哈哈哈'); $('div').HTML('<p>hah</p>') </script> <script> // js var inputEle = document.getElementsByTagName('input')[0]; console.log(inputEle.value); // jq $('input').val() </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> .errors { color: red; } </style> </head> <body> <h3>登录页面</h3> <form action=""> <p> <label for="d1">username: <input type="text" id="d1"> <span class="errors"></span> </label> </p> <p> <label for="d2">password: <input type="text" id="d2"> <span class="errors"></span> </label> </p> <input type="submit" id="d3"> </form> <script> var submitEle = document.getElementById('d3'); submitEle.onclick = function () { // 先获取input框中的内容 var userNameVal = $('#d1').val(); var passWordVal = $('#d2').val(); // 判断是否为空 if (userNameVal.length === 0){ // 将username对应的span标签渲染内容 $('.errors').first().text('用户不能为空'); } if (passWordVal.length === 0){ // 将password对应的span标签渲染内容 $('.errors').last().text('密码不能为空') } // 取消标签默认的动作 return false }; var inputEle = document.getElementsByTagName('input'); for (let i=0; i<inputEle.length;i++){ inputEle[i].onfocus = function () { $(this).next().text('') } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <p><input type="checkbox">111 <input type="checkbox" checked id="d1">222 <input type="checkbox">333 </p> <p><input type="radio" checked id="d2">444 <input type="radio">555 <input type="radio">666</p> <select name="" id=""> <option value="" selected id="d3">111</option> <option value="">222</option> <option value="">333</option> </select>> <a href="">aaa</a> <script> // 给 a + 一个属性 // js var aEle = document.getElementsByTagName('a')[0]; aEle.setAttribute('alt','这是一个无用的标签') aEle.setAttribute('xxx','xxxx'); // jq 不加参数就是获取 + 参数就是设置 $('a').attr('xxx') ;// xxxx $('a').attr('yy'); // undefined // 设置 $('a').attr('yy','yy语言'); // + 1 $('a').attr({'name':'jason','pwd':123}) // + 多 </script> <script> // attr 与 prop 区别 // attr 无法识别checed 多选 $('#d1').attr('checked'); // checked $('#d1').next().attr('checked'); // undefined // Prop 可以动态 识别 多选 $('#d1').prop('checked'); // true $('#d1').next().prop('checked'); //false // 是否用于 selected ok $('#d3').prop('selected'); //true $('#d3').next().prop('select'); //false </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div class="c1"> <span id="d1">span</span> <p id="d2">ppp</p> </div> <script> var aEle = document.createElement('a'); // undefined aEle.href = 'http://www.baidu.com'; aEle.innerText = '选我吧'; // + c1下 效果一样 append尾部 prepend 头部 $('.c1').append(aEle); $(aEle).appendTo('.c1'); $('.c1').prepend(aEle); // 添加到指定元素外部的后面 $('.c1').after(aEle); // 放在 c1后面 $('.c1').insertAfter(aEle); // 把c1放在 aEle 的后面 // 添加到指定元素外部的前面 $('.c1').before(aEle); // 放在 c1前面 $('.c1').insertBefore(aEle); // 把c1放在 aEle 的前面 // 删除 自己也删 $('.c1').remove(); // 删除所有匹配的元素 // 清空 自身存在 $('.c1').empty(); // 删除匹配集合中所有子节点 </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> button { height: 50px; width: 100px; background-color: orange; } </style> </head> <body> <button>多重影分身之术</button> <script> // var butEle = document.getElementsByTagName('button')[0]; // butEle.onclick = function () { // $(this).after($(this).clone(true)) // // clone 只克隆标签和文本 不克隆事件 加参数true即可克隆事件 // // $(this).clone(true).insertAfter(this); // }; $('button').on('click',function () { $(this).clone(true).insertAfter(this); }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <span>宜春院</span> <script> $('span').hover( // 鼠标悬浮上去 如果只写一个函数 那么悬浮和移开都会执行 function () { alert('大爷你终于来了') }, // 鼠标移开 function () { alert('没钱掼蛋') } ) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text"> <script> // 自动实时与后端数据比较 $('input').on('input',function () { console.log($(this).val()) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <form action=""> <input type="submit"> </form> <script> $('input').click(function (e) { alert(123); // 第一种 // return false // 第二种 e.preventDefault() }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div>div <p>p <span>span</span> </p> </div> <script> $('div').click(function (e) { alert('div') }) ; $('p').click(function (e) { alert('p'); // 第一种取消事件冒泡的方式 // return false e.stoPropagation() }); $('span').click(function (e) { alert('span'); // 第二种取消事件冒泡的方式 // e.stopPropagation() }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button>屠龙宝刀,点击就送!</button> <script> // $('button').on('click',function () { // alert(123) // }); // 事件委托 // 将点击事件委托给body内所有的button按钮 $('body').on('click','button',function () { alert(123) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> div { height: 1000px; width: 400px; background-color: mediumspringgreen; } </style> </head> <body> <div>111</div> <div>222</div> <div>333</div> <div>444</div> <div>555</div> <div>666</div> <script> $('div').hide(5000); // 隐藏 $('div').show(5000); // 展示 $('div').slideDown(5000); //拉下来 $('div').slideUp(5000); //卷起来 $('div').fadeOut(5000); // 颜色越来越浅 $('div').fadeIn(5000); // 颜色越来越深 $('div').fadeTo(5000,0.4); // 颜色 透明 度到 0.4 停止 // $.each 类似for 循环 $.each($('div'),function (index,obj) { console.log(index,obj) }); $('div').each(function(index,obj) { // console.log(index, obj); console.log(this) // this 指代被操作对象 }); </script> </body> </html>
昨日内容回顾 BOM和DOM BOM浏览器对象模型 // 小窗口打开另一个页面 window.open(url,'','width=400px,height=400px') window.opener() 子页面能够直接通过该方法调用父页面中的函数 window.close() window.location.href 获取当前网页所在的url window.location.href = url 当前跳转到指定的url 通常是结合ajax一起使用 定时器相关 setTimeOut 过几秒触发我的动作 clearTimeOut 清除触发 clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。 setInterval 每隔多长时间 做事 clearInterval 清除事件联系 定时器示例 弹出框 alert 警告 confirm 确认框 prompt 提示框 DOM文档对象模型 DOM树的概念 文档 - html - (1.heard 2.boday) 如何查找标签 基本选择器 document.getElementById 标签对象本身 id document.getElementsByClassName 数组 class document.getElementsByTagName 数组 标签 如何操作标签 变量名如果指代的是一个标签那么推荐书写格式为 xxxEle 如果指代的是一个jQuery对象那么建议在变量名前面加上一个$ eg:p标签 pEle $pEle 节点操作 document.createElement('标签名') appendChild 父标签.insertBefore(新创建的标签,本来就有的标签) 设置标签属性 自定义属性:setAtrribute():既可以设自定义的也可以设默认 默认属性:直接标签.属性名设置 获取值 .value innerText:文本 不识别标签的 innerHTML:文本标签 识别 classList.remove() >>> removeClass() classList.add() >>> addClass() classList.contains >>> hasClass() classList.toggle >>> toggleClass() 开关灯示例 css操作 style.color style.fontSize js绑定事件 js代码书写位置 1.window.onload 2.推荐写在body内最下方 引入外部文件亦是如此 开关灯示例 xxxEle.事件名 = function(){ // 事件代码 } 点击事件 onclick input框获取/失去焦点 onfocus 获取 onblur 失去 计时器 省市联动 jQuery 类库 $() jQuery() $(选择器).action(参数) 基本选择器 后代选择器 属性选择器 原生js对象和jQuery对象转换 jQuery对象就类似于是一个数组 里面是一个个的标签对象(原生的js对象) $(原生的js对象) >>> jQuery对象 模态框 jQuery标签查找 day2 今日内容 属性操作 文本操作*** 后面用到 事件 15. 前端框架 教你如何复制粘贴 CDN内容分发网络:提高使用效率 知名网络多地多国使用,所以 各地都有小仓库(服务器),类似京东直营模式,就近获取 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 事件 jQuery绑定事件有两种方式 1. $(选择器).事件名(function(){ 事件代码 }) eg:$('button').click(function(){ alert(123) }) 2. $(选择器).on(事件名,function(){ 事件代码 }) $('button').on('click',function(){ alert(123) }) on 还可以做事件委托 用的比较多 GIThub 找找写的 项目看 阻止标签默认的事件 第一种方式:return false 第二种方式: $('input').click(function (e) { alert(123); // 第一种 // return false // 第二种 e.preventDefault() }) 页面加载 第一种 $(document).ready(function(){ // 在这里写你的JS代码... }) 类似 window.onload() 有覆盖现象 必须图片加载完 才能调用 第二种 $(function(){ // 你在这里写你的代码 }) 第三种 直接写在body内最下方 事件委托 **** data() 可以使前端的所有标签都变为小仓库 $('div').data("k",100); //给所有div 标签保存一个 名 k 值100 $('div').data("k") // 返回 k的值 $('div').removeData("k") // 移除元素上对应的数据
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery选择器筛选器练习</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .my-padding { padding: 10px 0; } .my-dark { background-color: #f5f5f5; } .footer { background: #111; font-size: 0.9em; position: relative; clear: both; } .my-white { color: #ffffff; } body { margin: 0; } #progress { height: 2px; background-color: #b91f1f; transition: opacity 500ms linear; } #progress.done{ opacity: 0; } </style> </head> <body> <div id="progress"></div> <!--导航栏开始--> <nav class="navbar navbar-inverse my-nav"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.oldboyedu.com/"><strong>OldBoy Edu</strong></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Python学院<span class="sr-only">(current)</span></a></li> <li><a href="#">Linux学院</a></li> <li><a href="http://luffy.oldboyedu.com">路飞学城</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">好好学习</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Rain</a></li> <li><a href="#">Egon</a></li> <li><a href="#">Yuan</a></li> <li role="separator" class="divider"></li> <li><a href="#">Q1mi</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--导航栏结束--> <div class="container"> <div class="jumbotron"> <div id="i1" class="container"> <h1 class="c1">元少</h1> <h1 class="c1">带你学习jQuery</h1> <p id="p1"><a class="btn btn-primary btn-lg" href="https://q1mi.github.io/Blog/2017/07/10/about_jQuery/" role="button">查看更多</a></p></div> </div> <hr> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Egon</td> <td>减肥</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> <tr> <th>2</th> <td>Kevin</td> <td>腰子汤</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> <tr id="tr3"> <th>3</th> <td>Alex</td> <td>吹牛逼</td> <td> <button class="btn btn-warning">编辑</button> <button class="btn btn-danger">删除</button> </td> </tr> </tbody> </table> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <form id="f1"> <div class="form-group"> <label for="exampleInputEmail1">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">上传头像</label> <input type="file" id="exampleInputFile"> <p class="help-block">只支持img格式。</p> </div> <button id="btnSubmit" type="submit" class="btn btn-default">提交</button> </form> </div> </div> <hr> <div class="row"> <div class="col-md-12"> <div class="checkbox-wrapper"> <div class="panel panel-info"> <div class="panel-heading">jQuery学习指南</div> <div id="my-checkbox" class="panel-body"> <div class="checkbox"> <label> <input type="checkbox" value="0"> jQuery一点都不难 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="1" checked> jQuery一学就会 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="2"> jQuery就要多练 </label> </div> <div class="checkbox"> <label> <input type="checkbox" value="3" disabled> jQuery学不好 </label> </div> </div> </div> </div> <hr> <div class="radio-wrapper"> <div class="panel panel-info"> <div class="panel-heading">我来老男孩之后...</div> <div class="panel-body"> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 我的心中只有学习 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 学习真的太TM有意思了 </label> </div> </div> </div> </div> </div> </div> <hr> <div> <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i> <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a> </div> <hr> <div class="row"> <div class="col-md-12"> <h2>练习题：</h2> <ol id="o1"> <li>找到本页面中id是<code>i1</code>的标签</li> <li>找到本页面中所有的<code>h2</code>标签</li> <li>找到本页面中所有的<code>input</code>标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签</li> <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li> <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li> <p id="p2" class="divider"></p> <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li> <li>找到本页面中被包裹在<code>label</code>标签内的<code>input</code>标签</li> <li>找到本页面中紧挨在<code>label</code>标签后面的<code>input</code>标签</li> <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li> <p id="p3" class="divider"></p> <li>找到id值为<code>f1</code>的标签内部的第一个input标签</li> <li>找到id值为<code>my-checkbox</code>的标签内部最后一个input标签</li> <li>找到id值为<code>my-checkbox</code>的标签内部没有被选中的那个input标签</li> <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li> </ol> </div> </div> </div> <div class="my-dark my-padding"> <div class="container"> <div class="col-sm-8 my-center"> <p>写很少的代码，做很多的事。</p> <h4>所以说</h4> <p>学好jQuery真的很重要，学好jQuery真的很重要，学好jQuery真的很重要。</p> </div> </div> </div> <div class="footer"> <div class="row"> <div class="col-md-12 text-center"> <span class="my-white">©2018 元少</span> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
