一,JQ入门
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq入门</title> </head> <body> what is jQuery ??? <!--1.jQuery是对原生JavaScript二次封装的工具函数集合--> <!--注: 使用jq,基本上都是完成函数的调用, 函数调用需要()--> <!--2.jQuery是一个简洁高效的且功能丰富的JavaScript工具库--> <!--注:本质还是js,采用的还是原生js语法,只是对js做二次封装--> 优势 <!-- 1. 简洁的选择器 2. 强大的DOM操作 3. 简化的Ajax操作 4. 开源可拓展性(丰富的插件) --> </body> </html>
二,引入JQ
## 1.引入JQ - 本地 ```html <!-- 下载jq到本地 --> <script src="js/jquery-3.3.1.js"></script> ``` - CDN ```html <!-- jq CDN 地址 --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> ``` ## 2.JQ对象 ```js // jQuery: 具有jq框架规定的所有功能的调用者, 也就是框架产生的唯一对象 // $本质上就是jQuery对象, 开源通过 var JQ = jQuery.noConflict();来自定义jQuery对象 ```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>引入jq</title> </head> <body> <div class="box">12345</div> </body> <!--js的依赖库 head中 | 自身js脚本前--> <!--第一种: CDN导入方式 --> <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>--> <!--第二种: 本地导入方式--> <script src="js/jquery-3.3.1.min.js"></script> <script> // 将box内容修改为54321 // js // var box = document.querySelector('.box'); // box.innerText = '54321'; // jq操作 $('.box').text('呵呵'); </script> <script> console.log(jQuery); jQuery('.box').html("<b>嘻嘻</b>"); // jQuery对象: 具有jquery框架设置的所有功能的调用者, 就是该框架的对象 // $又是什么?: $就是jQuery对象, jQuery对象为window的全局属性, 所以可以直接使用 // 如何自定义jQuery对象: 如用 JQ 替换 jQuery | $ var JQ = jQuery.noConflict(); JQ('.box').html("<b>哈哈</b>"); </script> </html>
三,页面加载
``js
// jq的延迟加载: 文档树加载完毕, 即回调
$(document).ready(function() {})
// 1. 早于window.onload
// 2. 可以多次绑定事件
// 3. 可以简写为$(function() {})
```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面加载</title> <script> // 延迟执行 window.onload = function () { var box = document.querySelector('.box'); console.log(box); } </script> <script src="js/jquery-3.3.1.min.js"></script> <script> // 延迟执行 $(document).ready(function () { // 在原来只使用jq框架时,大家习惯给变量前加$用来标识这是jq的变量 var $box = $('.box'); console.log($box); $box.text('12345'); // 无结果, jq已有,但box未有 }) // 总结: $(document).ready() 要早于 window.onload // $(document).ready(): 文档树加载完毕即回调, 无需关系页面资源加载 // window.onload: 文档树及文档所需所有资源加载完毕才回调 </script> <script> window.onload = function() { console.log("window load 1"); }; window.onload = function() { console.log("window load 2"); }; $(document).ready(function() { console.log("document load 1"); }); // $(document).ready(fn) 简写 $(fn) $(function() { console.log("document load 2"); }); // $(document).ready(fn)可以绑定多个事件 </script> </head> <body> <div class="box"></div> <img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/> </body> </html>
四,.jq操作
1- 选择器 ```js // $(css选择器语法) // eg: $('.box') 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用 ``` 2- 对象间转换 ```js // js对象: box jq对象: $box // 将js对象转换为jq对象: $(box) // 将jq对象转换为js对象: $box[index] ``` 3- 文本操作 ```js // 获取原有文本 $box.text() | $box.html() // 设置新文本 $box.text('newData') | $box.html('<b>newData</b>') ``` 4- 事件绑定 ```js // $box为jq对象 $box.click(function(ev) { }) // 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件 // ev事件为jq事件, 兼容js事件 // this为js对象, $(this)就转换为jq对象 // 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始) ``` 5- 类名操作 ```js $box.addClass("newClass") // 添加一个新类名 $box.removeClass("oldClass") // 删除一个已有的类名 // 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名 ``` 6- 样式操作 ```js $box.css('background-color') // 获取背景颜色 $box.css('background-color', 'red') // 设置背景颜色 $box.css('background-color', function() {return 'yellow'}) // 通过函数返回值设置背景颜色 ``` 7- 文档结构关系 ```js // 父 $sup.parent() // 父,父的父... $sup.parents() // 子们 $sup.children() ***** // 上兄弟 $sup.prev() *** // 上兄弟们 $sup.prevAll() // 下兄弟 $sup.next() *** // 下兄弟们 $sup.nextAll() // 同级别的兄弟们 $sup.siblings() *** // 在sup下查找类名为inner的子级 $sup.children('.inner') // 获得的结果都是jq对象, 还可以接着使用jq方法 ```
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQ操作</title> <style> .li { font-size: 38px; } .li.active { color: orange; } .ele { width: 100px; height: 100px; background-color: orange; } </style> </head> <body> <div class="box">box1</div> <div class="box">box2</div> <div class="box">box3</div> <div class="sup"> <div class="sub">嘿嘿</div> <div class="inner"></div> <div class="inner"></div> </div> <ul> <li class="li active">标题</li> <li class="li">标题</li> <li class="li">标题</li> </ul> <div class="ele"></div> </body> <!-- 使用jq大前提: 导入jq --> <script src="js/jquery-3.3.1.js"></script> <!-- 使用jq语法完成自身js代码 --> <script> // 1.选择器: $(css3选择器语法) var $sub = $('.sub'); // 2.操作文本 text() | html() var text = $sub.text(); // 获取文本 console.log(text); $sub.html('<i>虎虎 vs 刘XX</i>'); // 设置(html)文本 // 3.jq对象与js对象是一样的吗? 不一样 // 那么能相互转换吗? $sub.innerText = "tank"; // 无效果, jq对象不能使用原生js方法和属性 // i) jq对象 转换 js对象 // $sub[0].innerText = "tank"; $sub.get(0).innerText = "tank"; // ii) js对象 转换 jq对象 var sub = document.querySelector('.sub'); sub.innerText = "egon"; $(sub).html("<b>egon</b>"); // 总结: // js => jq $(box) box为js对象 // jq => js $box[0] | $box.get(0) $box为jq对象 // 4.事件 console.log($('.box')); // $('.box')[1].innerText = "test"; // 通过索引一取值,就是js对象 // 不需要循环绑定, 直接对数组对象绑定后,所有的数组内对象都拥有了该事件 $('.box').click(function (ev) { console.log(ev); // jq.event 兼容 js事件 // 鼠标点 console.log(ev.clientX); // console.log(123) // this 是 js对象还是jq对象? this是js对象, $(this)就是jq对象 console.log(this); // 用索引区分 // index()为jq获取标签在其结构下的索引位置, 从0开始 console.log($(this).index()) }) // 5.类名 $('.li').click(function () { // $(this).addClass('active'); // $(this).removeClass('active'); // 点击者变成活跃状态, 其他变为非活跃状态 // 全部删除 $('.li').removeClass('active'); // 自身添加 $(this).addClass('active'); // siblings()所有兄弟标签 // $(this).siblings().removeClass('active'); }) // 6.样式操作 // 取值 var w = $('.ele').css('width'); console.log(w); console.log($(".ele").css('background-color')) // 设值 $(".ele").css("border-radius", "50%"); // 7.文档结构关系 var $sup = $('.sup'); // 父 console.log($sup.parent()); // 父,父的父... console.log($sup.parents()); // 子们 console.log($sup.children()); // 上兄弟 console.log($sup.prev()); // 上兄弟们 console.log($sup.prevAll()); // 下兄弟 console.log($sup.next()); // 下兄弟们 console.log($sup.nextAll()); // 同级别的兄弟们 console.log($sup.siblings()); // 在sup下查找类名为inner的子级 console.log($sup.children('.inner')) </script> </html>
五,菜单栏案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>菜单栏案例</title> <style> body, h2, ul { margin: 0; padding: 0; list-style: none; user-select: none; } .menu { width: 180px; cursor: pointer; /*background-color: orange;*/ } .menu h2 { padding-left: 20px; } .menu h2:hover { background-color: red; color: white; } .menu ul { background-color: yellow; height: 0; overflow: hidden; transition: .3s; } .menu ul li { padding-left: 30px; line-height: 26px; } .menu ul li:hover { background-color: cyan; color: deeppink; font-size: 1.1em; } </style> </head> <body> <div class="menu"> <h2>菜单标题</h2> <ul> <li>子标题1</li> <li>子标题2</li> <li>子标题3</li> <li>子标题4</li> <li>子标题5</li> </ul> </div> <div class="menu"> <div class="menu-cell"> <h2>菜单标题</h2> <ul> <li>子标题1</li> <li>子标题2</li> <li>子标题3</li> <li>子标题4</li> <li>子标题5</li> </ul> </div> <div class="menu-cell"> <h2>菜单标题</h2> <ul> <li>子标题1</li> <li>子标题2</li> <li>子标题3</li> <li>子标题4</li> <li>子标题5</li> </ul> </div> </div> </body> <script src="js/jquery-3.3.1.js"></script> <script> $('.menu h2').click(function () { var $ul = $(this).next(); var height = $ul.height(); if (height == 0) { // 将函数的返回值作为结果赋值给属性height $ul.css('height', function() { var $lis = $ul.children('li'); // ul下li的高度 * li的个数 return $lis.height() * $lis.length; }); } else { $ul.css('height', '0'); } }) </script> </html>