JQ初级
Posted wangke0917
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ初级相关的知识，希望对你有一定的参考价值。
1.JQ导入
什么是jQuery？
jQuery是一个简洁高效的且功能丰富的javascript工具库，是对原生JavaScript二次封装的工具函数集合。
优点：开源 | 简洁的选择器 | 简化的Ajax操作 | 良好的浏览器兼容 | 强大的链式操作
2.JQ选择器
// 获取满足条件的所有页面元素jq对象 $(‘css3选择器语法‘); // 拿到指定索引的页面元素jq对象 $(‘css3选择器语法‘).eq(index); // 拿到指定索引的页面元素js对象 (jq对象转js对象) $(‘css3选择器语法‘).get(index); // js对象转jq对象 $(js对象);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq选择器</title> <style> body .box:first-child {} </style> </head> <body> <div class="box">123</div> <div class="box">456</div> </body> <script src="js/jquery-3.3.1.js"></script> <script> // 使用jq => 该html页面有jq环境 => 引入jq => 依赖jq,所以jq要提前引入 console.log(jQuery); console.log($); // jq选择器 // $("css3选择器位") // 命名小规范, jq变量一般以$开头 var $boxs = $(‘.box‘); console.log($boxs) // 拿到123 // js与jq对象的相互转化 // jq拿到文本 console.log($boxs.text()) // 只获取第一个box var $box = $(‘.box:nth-child(1)‘); console.log($box); console.log($box.text()); console.log($box[0].innerText); // 总结: jq对象就是用数组包裹的js对象, 可以包裹0个到多个 // jq转js => 使用js语法 var box1 = $boxs[0]; console.log(box1); var box2 = $boxs.get(1); console.log(box2) // js转jq => 使用jq语法 var $box1 = $(box1); console.log($box1); </script> </html>
3.文档加载
// 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>
4.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"));
5.JQ获取盒子信息
1.显示信息
// 盒子信息: // 宽高 | 内边距 | 宽边 | 外边距 var res = $(‘.box‘).css("padding"); console.log(res); // 宽高 res = $(‘.box‘).width(); res = $(‘.box‘).height(); console.log(res); // 宽高+内边距 res = $(‘.box‘).innerWidth(); res = $(‘.box‘).innerHeight(); console.log(res); // 宽高+内边距+边框 res = $(‘.box‘).outerWidth(); res = $(‘.box‘).outeHeight(); console.log(res); // 宽高+内边距+边框+外边距 res = $(‘.box‘).outerWidth(true); res = $(‘.box‘).outerHeight(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);
6.事件
//事件名，函数 $(‘.box‘).on(‘click‘,function (ev) { //jq事件对象对js事件对象兼容 console.log(ev); }) //取消默认事件：取消系统自带的功能，右键的右键框，a标签点击的href转跳ev.preventDefault(); | 事件方法 return false; //阻止事件的传播（阻止事件的冒泡）：父子有同样事件，子响应了事件，会将事件传递给父，父级也会响应同样的事件 //只让子点击相应，只点击到父，父响应，子级需要阻止事件的传播 ev.stopPropagation();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq事件</title>
<style>
.sup {
width: 200px;
height: 200px;
background-color: red;
}
.sub {
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">
<span class="sss">123</span>
<i>456</i>
</div>
<div class="sup">
<div class="sub"></div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// $(‘.box‘).on(‘click‘, function () {
// // alert(this.innerText);
// alert($(this).text())
// })
// $(‘.box‘).click(function () {
// alert($(this).text())
// })
var d = "AAA";
// 事件名, 委派的子类(可选,了解), 参数(可选,了解), 函数
$(‘.box‘).on(‘click‘, ‘span‘, {aaa: d}, function (ev) {
// jq事件对象对js事件对象 兼容
console.log(ev);
console.log(ev.data.aaa) // 拿到传入的参数
})
// sup右键,弹出自身背景颜色
// 右键有系统自带的功能, 取消掉 => 取消默认事件
$(‘.sup‘).on(‘contextmenu‘, function (ev) {
// 取消默认事件
ev.preventDefault();
var bgColor = $(this).css(‘background-color‘);
alert(bgColor);
// return false;
})
// sup和sub都具有单击事件
$(‘.sup‘).click(function () {
console.log("父点击")
})
// 子父拥有同样事件时,子响应了事件,会将事件传递给父,父级也会响应同样的事件
$(‘.sub‘).click(function (ev) {
// 阻止事件的传播 => 阻止事件的冒泡
ev.stopPropagation();
console.log("子点击")
})
</script>
</html>
以上是关于JQ初级的主要内容，如果未能解决你的问题，请参考以下文章
[AndroidStudio]_[初级]_[配置自动完成的代码片段]
[AndroidStudio]_[初级]_[配置自动完成的代码片段]