JQuery内容讲解，方法讲解及示例
JQ
1.简单介绍
JQ是JS写的插件库，说白了，就是一个js文件
凡是用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>
操作样式
<!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>
浙公网安备 33010602011771号