jQuery-jq选择器-页面加载-jq控制元素对象-jq获取盒子信息-jq事件-jq动画-jq结合css完成动画
2019-01-25 20:59
411 查看
文章目录
jq引入
什么是jQuery： jQuery是一个简洁高效的且功能丰富的JavaScript工具库，是对原生JavaScript二次封装的工具函数集合 优点： 开源 | 简洁的选择器 | 简化的Ajax操作 | 良好的浏览器兼容 | 强大的链式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq引入</title>
<style>
.wrap {
background-color: green;
}
</style>
</head>
<body>
<div class="box">jq引入</div>
<div class="box">jq引入</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
console.log(jQuery);
console.log($);
// jq简单使用
$('.box').text("呵呵").css("color", "red").addClass("wrap").on("click", function() {
alert("123");
})
</script>
</html>
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>
页面加载
// 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控制元素对象
<!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获取盒子信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq获取盒子信息</title>
<style>
body {
margin: 0;
}
.sup {
width: 350px;
height: 350px;
background-color: pink;
position: relative;
margin: 10px;
}
.box {
width: 200px;
height: 200px;
background-color: orange;
padding: 10px;
border: 20px solid black;
margin: 50px;
position: absolute;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div class="sup">
<div class="box"></div>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 盒子信息:
// 宽高 | 内边距 | 宽边 | 外边距
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);
</script>
<script>
// 相对窗口偏移
console.log($('.box').offset().top, $('.box').offset().left);
// 绝对定位偏移(top,left)
console.log($('.box').position().top, $('.box').position().left);
</script>
</html>
jq事件
<!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动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq动画(了解)</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.box').on('mouseenter', function () {
// console.log(11111111)
$(this).animate({
width: "400px",
height: "400px",
"background-color": "red"
}, 1000, function () {
console.log("变大结束")
})
})
$('.box').on('mouseleave', function () {
// console.log(22222222)
$(this).animate({
width: "200px",
height: "200px"
}, 1000, function () {
console.log("动画完成时的回调函数")
})
})
</script>
</html>
jq结合css完成动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq&css动画</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: brown;
margin: 100px auto;
transition: 1s;
}
.box.move {
margin-top: 50px;
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.box').on('mouseenter', function () {
$(this).addClass('move');
})
$('.box').on('mouseleave', function () {
$(this).removeClass('move');
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- 1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画
- jQuery控制DOM对象（获取页面详细信息）
- jquery对象及页面加载完成写法
- JavaScript DOM（一）--页面加载完成事件与获取元素节点
- 2015-07-22 JQuery 第二课（JQ元素获取，添加，删除，判断，遍历，取值，样式设置，改变对象，切换）
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
- [JavaScript]使用jquery获取iframe加载完成事件
- Jquery加载页面的方法(页面加载完成就执行)
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
- JQUERY获取当前页面的URL信息
- selenium webdriver学习（十一）------------如何等待页面元素加载完成
- JQuery实现滚动到页面底端时自动加载更多信息
- DIV+CSS结合js控制页面滚动的效果
- 转：使用jQuery和CSS控制元素对齐
- selenium webdriver学习（十一）-怎么等待页面元素加载完成
- jquery获取元素的值，获取当前对象的父对象等等
- javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分（scroll、scrollTop、scrollLeft、offset、offsetTop、offsetLeft）
- JQuery 中this和$(this)获取对象、操作DOM对象的元素属性
- jquery页面加载完成后执行方法