一 JQery概述
JQery是一个简洁高效的且功能丰富的javaScript工具库，是对原生javaScript二次封装的工具函数的集合。JQery具有开源，选择器简洁，拥有简化的Ajax操作，良好的浏览器兼容，强大的链式操作的特点。
二 jq选择器
jq选择器是用于获取jq对象，是绑定事件，提供功能的前提。在jq中可以对获取的对象进行转换，jq对象可以转换成js对象，js对象也能转换成jq对象。
// 获取满足条件的所有页面元素jq对象 $('css3选择器语法'); // 拿到指定索引的页面元素jq对象 $('css3选择器语法').eq(index); // 拿到指定索引的页面元素js对象 (jq对象转js对象) $('css3选择器语法').get(index); // js对象转jq对象 $(js对象);
三 页面文档加载
// js // 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法 window.onload = function() { } // jq // 页面结构加载完毕, 能绑定多个事件方法, 可以简写 // 一:可以保证页面结构一定加载完毕, 二:可以保证数据的局部化(不会被外界直接读写) $(function(){ })
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面加载</title> <script src="js/jquery-3.3.1.js"></script> <!--在页面加载前的脚步语句中,如何获取页面对象 => 主动睡觉,页面一加载完毕,就醒 --> <!--js中window提供了一个 window.onload = fn 事件: 页面结构及页面所需资源全部加载完毕, 只能绑定一个事件方法--> <!--jq中document提供了一个 $(document).ready(fn) 事件: 页面结构加载完毕, 能绑定多个事件方法, 可以简写--> <script> // 时间得当就可以处理, 问题多多 // setTimeout(function () { // var $box = $('#box'); // // console.log($box); // }, 1) </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"); }); $(function() { console.log("document load 3"); }); // 简写: $(fn) </script> <script> $(function () { // 页面结构加载完毕 $('.box').eq(1).text("000"); }); </script> </head> <body> <div id="box" class="box">123</div> <div class="box">456</div> <img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/> </body> <script> // 一,可以保证页面结构一定加载完毕, 二,可以保证数据的局部化(不会被外界直接读写) $(function () { var $box; }); </script> <script> </script> </html>
四 jq操作元素对象
// 链式操作: (几乎)每一个方法都具有返回值(元素对象) // 1.文本内容 var res = $('.box:first-child').text("100").html("<b>888</b>"); // console.log(res); // 2.样式 res = $('.box').eq(1) .css("color", "pink") .css("font-size", "30px") .css({ backgroundColor: "orange", "height": "80px" }) .css("width", function (index,oldVal) { console.log(this); // js对象 转化为jq对象来使用 console.log($(this).height()); // 宽度为自身高度的2倍 return $(this).height() * 2; }) .css("border-radius"); // 能获取计算后样式 // console.log(res); // 3.类名 res = $('.box:nth-child(3)').addClass("abc").removeClass("abc"); console.log(res); // 4.全局属性 $('img').attr("src", "http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg") .removeAttr("src"); console.log($('img').attr("ooo"));
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq控制元素对象</title> <style> .abc { background-color: red; /*...*/ } .box { border-radius: 5px; } </style> </head> <body> <div class="box">001</div> <div class="box">002</div> <div class="box">003</div> <img src="" alt="" ooo="100w"> </body> <script src="js/jquery-3.3.1.js"></script> <script> $(function () { // 链式操作: (几乎)每一个方法都具有返回值(元素对象) // 1.文本内容 var res = $('.box:first-child').text("100").html("<b>888</b>"); // console.log(res); // 2.样式 res = $('.box').eq(1) .css("color", "pink") .css("font-size", "30px") .css({ backgroundColor: "orange", "height": "80px" }) .css("width", function (index,oldVal) { console.log(this); // js对象 转化为jq对象来使用 console.log($(this).height()); // 宽度为自身高度的2倍 return $(this).height() * 2; }) .css("border-radius"); // 能获取计算后样式 // console.log(res); // 3.类名 res = $('.box:nth-child(3)').addClass("abc").removeClass("abc"); console.log(res); // 4.全局属性 $('img').attr("src", "http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg") .removeAttr("src"); console.log($('img').attr("ooo")); }) </script> </html>
五 jq获取盒子信息
1.显示信息
// 盒子信息: // 宽高 | 内边距 | 宽边 | 外边距 var res = $('.box').css("padding"); console.log(res); // 宽高 res = $('.box').width(); console.log(res); // 宽高+内边距 res = $('.box').innerWidth(); console.log(res); // 宽高+内边距+边框 res = $('.box').outerWidth(); console.log(res); // 宽高+内边距+边框+外边距 res = $('.box').outerWidth(true); console.log(res);
2.位置信息
// 相对窗口偏移: 算margin产生的距离 console.log($('.box').offset().top, $('.box').offset().left); // 绝对定位偏移(top,left): 不算margin产生的距离 console.log($('.box').position().top, $('.box').position().left);
六 事件
// 事件名, 函数 $('.box').on('click', function (ev) { // jq事件对象对js事件对象 兼容 console.log(ev); }) // 取消默认事件: 取消系统自带的功能, 右键的右键框, a标签点击的href转跳 ev.preventDefault(); | 事件方法 return false; // 阻止事件的传播(阻止事件的冒泡): 父子有同样事件,子响应了事件,会将事件传递给父,父级也会响应同样的事件 // 只让子点击子相应,只点击到父,父相应,子级需要阻止事件的传播 ev.stopPropagation();