jQuery的引入方式:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>1.jquery的工作原理</title> </head> <body> <h2>基本语法:<span>$(选择器).方法()</span></h2> <h2>基本流程:使用选择器找到DOM元素并进行打包成jquery对象</h2> <h2>调用jquery中的方法找到元素进行操作</h2> <button>总结:找到元素,然后操作</button> </body> </html> <script type="text/javascript"> // document.querySelector('button').style.backgroundColor='red' // var button = document.querySelector('button') // button.style.color = 'white' // 1.querySeletor只获取一个元素 // 2.querySelectorAll返回的是一个数组,需要用循环遍历 // var h2 = document.querySelectorAll('h2') // for(var i=0; i<h2.length;i++){ // h2[i].style.color='red' // } </script> <!-- 本地引入js外部文件:离线操作 --> <!-- <script type="text/javascript" src="../jquery-3.3.1.js"></script> --> <!-- cnd在线引入:在线操作 (百度静态资源公共库)--> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $('h2').css('color','#ccc') $('button').click(function(){ $('h2').hide() $('button').hide() }) $('h2+h2+h2').html('变了吗') // $(selector)用来选择DOM元素并转为jquery对象 // $():还可以创建一个html元素.addClass() var img = $('<img src="images/k.jpg" alt="图片" width="100">') img.insertBefore('button') // 将jQuery对象转为DOM对象 $('h2')[0].style.color='red' $('h2').get(1).style.color='lightgreen' // 将原生转jquery? $():工厂函数 $('h2:eq(2)').css('color','skyblue') </script>
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行效果图:
jQuery的执行方式:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery执行方式</title> <style type="text/css"> .horiz{ float: left; list-style-type: none; margin: 20px; } </style> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> <script type="text/javascript"> // window.onload = function(){ // $('.table > li').addClass('horiz') // } //window.onload:在页面元素全部加载完成后会自动调用的事件 // $(document).ready(function(){ // $('.table > li').addClass('horiz') // }) $(function(){ $('.table > li').addClass('horiz') }) // $(document).ready() ========== window.onload() // //页面的渲染顺序 // 1.第一步生成DOM结构 // 2.加载资源:图片,文件 // window.onload():必须要等到加载资源全部完成才会触发 // $(document).ready():只要生成DOM结构就会触发 </script> </head> <body> <h2>一季度成绩表</h2> <ul class="table"> <li>语文 <ul> <li>96</li> <li>97</li> <li>98</li> </ul> </li> <li>数学 <ul> <li>99</li> <li>98</li> <li>100</li> </ul> </li> <li>英语 <ul> <li>96</li> <li>97</li> <li>98</li> </ul> </li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例