JQ
1.简单介绍
凡是用jq能实现的，js都能实现，js能实现的，jq却不一定能实现
引入方式
本地文件引入
CDN引入（https://www.bootcdn.cn/jquery/）
基本内容
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="Box"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jQ.js"></script>
<script>
// js 获取对象
var oBox = document.getElementById("Box");
oBox.innerHTML = '999999999999'
//js ===> jq
//oBox ==> $(oBox)
$("#Box").html("88888888888")
//获取列表标签
var $li = $('ul li');
//js ===>jq
$li[1].innerHTML = "哈哈"; //修改值
$li.get(2).innerHTML = "嘿嘿" //修改值，两种方法一样
//还有一种修改值的方法，前两行是一样的
$li.eq(3).text('fdasfdas');
$li.eq(3).html('fdasfdas');
$li.html('fdasfdas'); //改所有值
</script>
</body>
</html>
each函数
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jQ.js"></script>
<script>
$("ul li").each(function (i) {
$(this).html("我是第" + i+ "个")
})
//让其内容与下标建立起联系，不用循环的方法了
</script>
</body>
</html>
输出：
-
我是第0个
-
我是第1个
-
我是第2个
-
我是第3个
2.基本使用
操作标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
.qiye{
color:red;
}
</style>
</head>
<body>
<div id="Box">
<p class="Box">1</p>
<p>2</p>
<p class="wrap">3</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script src="jQ.js"></script>
<script>
//获取属性
var $Box = $("#Box");
alert($Box.attr("id")); // 获取id为Box的id属性
//既是获取，又是设置属性
$Box.attr("class", "qiye");
//删除属性
//$Box.removeAttr("class")
//添加属性
$("p").eq(0).addClass("qiye");
//删除属性
$("p").eq(0).removeClass("Box"); //如果括号里什么都不写，会把class里所有东西都删除
//有就删除，没有就添加class属性
$("p").toggleClass("qiye")
//会把内容、标签等所有内容都找出来
console.log($("ul").parent()) //找爹：找ul的父级
console.log($("ul").children()) //找儿子：找ul的子级
console.log($("ul").siblings()) // 找兄弟：找ul的兄弟级
console.log($("div").find("li"))// 查找后代 一定要写元素否则无法找到
console.log($("p").eq(0).hasClass("qiye"));//有qiye这个属性就返回true，没有就返回false
</script>
</body>
</html>
Apache ECharts这是一个实例比较多的网站
操作样式
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#Box{
width: 100px;
height: 100px;
background: red;
margin: 50px auto;
border:10px solid chartreuse;
padding: 40px;
position: relative;
}
#wrap{
width: 50px;
height: 50px;
background: #58b2ff;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="Box">
<div id="wrap"></div>
</div>
<script src="jQ.js"></script>
<script>
alert($("#Box").Width()) //获取内容宽度
alert($("#Box").innerWidth()) //获取内容+padding的宽度
alert($("#Box").outerWidth()) //获取内容+padding+border的宽度
//修改样式
//这是直接指定修改
$("#Box").css({ //直接这么改就行，传的是键值对
'width':"200px",
'height':'200px',
'background':"blue",
})
//不论点击哪里都会变
//实际应用中就是有的网页弹出来广告，
//你明明没有点击广告区域，但不论点击哪里都会相当于点了广告
$(document).click(function () {
$("#Box").css({
'width':"200px",
'height':'200px',
'background':"blue",
})
})
//positon，父级padding的距离
alert($("#Box").positon().top)
//网页边距
alert($("#Box").offset().left)
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
text-align: center;
width: 50px;
height: 50px;
background: red;
margin: 10px;
}
ul{
border: 5px solid skyblue;
}
</style>
</head>
<body>
<ul id="Box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jQ.js"></script>
<script>
var $Box = $("#Box");
$Box.on({ //事件有针对on属性的加个on即可，没有on属性的不能这么写次数也会显示出来
"click":function () {console.log("click")}, //点击
"mouseenter":function () {console.log("mouseenter")}, //移入
"mouseleave":function () {console.log("mouseleave")}, //移出
"dblclick":function () {console.log("dblclick")}, //快速双击
//mousedown点击不松开 mouseup点击松开
})
//鼠标操作(用的比较多)
$Box.hover(function () {
console.log("我回来了!") //移入
},function () {
console.log("我走了!") //移出
});
</script>
</body>
</html>
3.动画
不传参 瞬间显示隐藏 传一个数字参数，代表毫秒，改变宽，高，透明度
show 显示
hide 隐藏
toggle
默认时间300毫秒 改变透明度
fadeIn
fadeOut
fadeto(1000,0.1) 可以把透明度设置一个值，时间参数不能省略
默认时间300毫秒 改变高度
slideDown
slideUp
slidetoggle 改变高度
这三组，不仅仅可以接受一个数字参数，能接受的参数有：
number / string 代表动画时间（可缺省）毫秒数 / ('fast' 'normal' 'slow')
string 代表运动曲线 （可缺省）
function 代表回调函数（可缺省）
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
#Box{
width: 200px;
height: 200px;
background:black;
}
</style>
</head>
<body>
<div id="Box"></div>
<script src="jQ.js"></script>
<script>
$(document).click(function () {
$('#Box').hide(); //点击隐藏，一次性的，回不来了
$('#Box').toggle(3000); //点一次渐渐变小，直至消失，再点一次渐渐变大，直至返回原图
$('#Box').fadeto(2000,0.1); //改变透明度，括号里为：(改变所用时间，透明度)，回不来了
$("#Box").slidetoggle(2000); //改变高度，可以变回，如果不给高度就直接缩为零了
})
//通过参数控制
var off = true;
$(document).click(function () {
if (off){
$("#Box").hide(2000); //两秒隐藏
$('#Box').fadeto(2000,0.1)
}else {
$("#Box").show(2000);
$('#Box').fadeto(2000,1)
}
off = !off;
})
</script>
</body>
</html>
动画案例
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Title</title>
<style>
.Box{
width: 200px;
height: 200px;
background: rebeccapurple;
}
</style>
<script src="jQ.js"></script>
<script>
$(function () {
var $btn =$('#btn');
var $div =$(".Box");
$btn.click(function () {
// $div.css({"width":"1000"}) //直接变了
// $div.animate({"width":"1000"}) //渐渐变化
$div.animate(
{"width":"1000" //第一次变化
},1000,function () {
$div.animate({
'margin-top':300 //第二次变化
},1000,function () {
$div.animate({
'width': 200, //第三次变化
'margin-top':0,
},1000)
})
})
})
})
</script>
</head>
<body>
<input type="button" value="动画" id="btn">
<div class="Box"></div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
