标签：oct col 问题 方法 之间 页面 对象 练习 style
需求:点击按钮，显示文本和隐藏文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 入门</title> <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script> <script> $ (function() { $(‘#btn‘).click(function () { /*toggle 是表示求和时间*/ $(‘#content‘).toggle(1000) }); }); </script> </head> <body> <!--点击按钮，显示文本和隐藏文本--> <div id="content" >等我工作了一定会个好的笔记本 等我工作了一定会个好的笔记本 等我工作了一定会个好的笔记本 等我工作了一定会个好的笔记本</div> <button id="btn">切换</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 入门</title> <script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script> </head> <body> <button id="btn">按钮</button> <script> //btn 存的是个dom 对象 var btn = document.getElementById("btn"); console.log(btn); //$btn 存的就是一个jQuery对象 var $btn = $(‘#btn‘); console.log($btn); console.log(‘------------------------------------‘); //DOM 对象转JQuery对象 这个用在事件处理函数里 console.log($(btn)); //本质jQuery 作者提供一个函数给我们使用 函数 是$ function $() { /* * 底层做判断 * 比如传的是一个字符串 ,找页面元素封装一个 jQuery 对象返回 * 比如传的是一个DOM对象 包裹成一个jQuery对象返回 * 比如传的是一个函数 找到 window对象 给对象 onload 绑定这个传过来的函数 * */ } /* * $(‘#btn‘)字符串 * $(btn) DOM对象 * $(function() {} ) 函数 * */ </script> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery 常用方法</title> <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js"> </script> <script> window.onload= function () { // 问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数 console.log($(‘p‘).size); //问题 2：获取 id 为 username 元素的 value 属性值 console.log($(‘#username‘).val() ); //问题 3：设置 id 为 username 元素的 value 属性值为"叩丁狼教育" console.log($(‘#username‘)); //设置的时候返回的就是被修改的元素 一个jQuery对象 $(‘#username‘).val(‘咖啡‘); //题 4：对比 h1 元素的内容和纯文本的区别 console.log($(‘#h1‘).html()); console.log($(‘#h1‘).text()); $(‘#h1‘).html(‘我想喝咖啡!!‘); //问题 5：把 h1 元素内容的颜色改为绿色 $(‘#h1‘).css(‘color‘ , ‘brown‘); } </script> </head> <body> <h1 id="h1">做人<i>要低调</i></h1> <input type="text" id="username" value="wolfcode"/><br/><br/> <div> jQuery 常用方法:<br/> jQuery对象.size(); // 获取 jQuery 中包含元素的个数<br/> jQuery对象.val(); // 操作元素的 value 属性<br/> jQuery对象.html(); // 操作元素内的 HTML 代码<br/> jQuery对象.text(); // 操作元素内的文本，忽略 HTML 标签<br/> jQuery对象.css(); // 操作元素的 style 属性 </div> <hr/> <div> <p> 问题 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数 </p> <p> 问题 2：获取 id 为 username 元素的 value 属性值 </p> <p> 问题 3：设置 id 为 username 元素的 value 属性值为"叩丁狼教育" </p> <p>问题 4：对比 h1 元素的内容和纯文本的区别 </p> <p> 问题 5：把 h1 元素内容的颜色改为黄色 </p> </div> </body>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery 常用选择器</title> <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js"> </script> <style type="text/css"> .selected{background-color: gray;}</style> <script> window.onload= function () { //问题 1：获取 id 为 msg 的元素的内容 console.log($("#msg").html()); //问题 2：获取所有的 li 元素并打印数量 console.log($(‘li‘).size()); //问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red //找到多少改多少 $(‘.selected‘).css(‘color‘ ,‘red‘); //, 是or的意思 console.log($(‘li,#msg‘).size()); //不要 , 号 是 and 意思 console.log($(‘li#msg‘).size()); } </script> </head> <body> <div id="msg">使用 ID 选择器获取当前 DIV元素</div> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> <ul id="myul"> <li>item1</li> <li class="selected">item2</li> <li>item3</li> <li class="selected">item4</li> </ul> <hr/> <div> <p> 问题 1：获取 id 为 msg 的元素的内容 </p> <p> 问题 2：获取所有的 li 元素并打印数量 </p> <p> 问题 3：获取所有 class 为 selected 的元素，字体颜色改为 red </p> </div> </body> </html>
标签：oct col 问题 方法 之间 页面 对象 练习 style
原文地址：https://www.cnblogs.com/k38-19/p/14672907.html
