一，概念
1.一个javaScript的框架，简化js开发
二，快速入门
1.使用步骤
<1>下载JQuery
<2>导入JQuery的js文件
<3>使用
<4>初次使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery快速入门</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="div1">div1....</div>
<div id="div2">div2....</div>
</body>
<script>
//使用Jquery获取元素对象
var div1=$("#div1");
alert(div1.html());
var div2=$("#div2");
alert(div2.html());
</script>
</html>2.JQuery对象和js对象的区别和转换
<1>Jquery对象在操作时，更加方便
//1.通过js获取名称叫div1的所有html元素对象
var divs=document.getElementsByTagName("div");
//2.通过JQuery获取名称叫div的所有html元素对象
var $divs=$("div");
alert(divs);//可以当做数组使用
//对divs中的所有div，让其标签体内容变成aaa
for(var i=0;i<divs.length;i++){
divs[i].innerHTML="aaa";
}
alert($divs);//可以当做数组使用
//对divs中的所有div，让其标签体内容变成bbb
$divs.html("bbb");<2>Jquery对象和js对象的方法是不通用的
<3>两者相互装换
*jq---->js:jq对象(索引)或者js对象.get(索引)
//1.通过js获取名称叫div1的所有html元素对象
var divs=document.getElementsByTagName("div");
//2.通过JQuery获取名称叫div的所有html元素对象
var $divs=$("div");
var change=$divs.get(0);
alert(change);
alert(divs);
var change=$divs[0];
alert(change); *js---->jq:$(js对象)
//1.通过js获取名称叫div1的所有html元素对象
var divs=document.getElementsByTagName("div");
//2.通过JQuery获取名称叫div的所有html元素对象
var $divs=$("div");
var change=$(divs);
alert(change);
alert($divs);三，选择器
1.基本语法
*事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<div></div>
<input type="button" value="点我" id="bt">
<body>
<script>
// var button=$("#bt");
$("#bt").click(function () {
alert("abc");
});
</script>
</body>
*入口函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
window.onload=$(function () {
alert("hahaha");
})
$(function () {
alert("sy");
})
</script>
</head>
<div id="div1">div1......</div>
<input type="button" value="点我" id="bt">
<body>
</body>
</html>*样式控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#div1").css("backgroundColor","red");
})
</script>
</head>
<div id="div1">div1......</div>
<input type="button" value="点我" id="bt">
<body>
<script>
$("#bt").click(function () {
alert("abc");
});
</script>
</body>
</html>2.基本选择器
<1>元素选择器
语法:$("html标签名")获得所有匹配标签的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('div').css('font-size', '12px');
});
</script>
</head>
<body>
<div> test </div>
<div> haha </div>
<span> qqqq </span>
</body>
</html><2>id选择器
语法:$("#id的属性值")获得指定id属性值匹配的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('#div1').css('font-size', '12px');
});
</script>
</head>
<body>
<div id="div1"> test </div>
<div id="div2"> test </div>
</body>
</html><3>类选择器
语法:$(".class的属性值")获得与指定class属性值匹配的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$('.myclass').css('font-size', '12px');
});
</script>
</head>
<body>
<div class="myclass"> test </div>
<div class="yourclass"> test </div>
<span class="myclass">test</span>
</body>
</html><4>并集选择器
语法:$("选择器一，选择器二.........")获得多个选择器中的所有元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$(".myclass","yourclass").css('font-size', '12px');
});
</script>
</head>
<body>
<div class="myclass"> test </div>
<div class="yourclass"> test </div>
<span class="myclass">test</span>
</body>
</html>3.层级选择器
<1>后代选择器
语法:$("A B"):选择A元素内部的所有B元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("div div").css('font-sze', '12px');
});
</script>
</head>
<body>
<div>
<span>
<div>
test
</div>
</span>
<div>
test
</div>
</div>
</body>
</html><2>子选择器
语法:$("A > B"):选择A元素内部的所有B子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("div>div").css('font-sze', '12px');
});
</script>
</head>
<body>
<div>
<span>
<div>
test
</div>
</span>
<div>
test
</div>
</div>
</body>
</html>4.属性选择器
<1>属性名称选择器
语法:$("A[属性名]")包含指定属性的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("div[title]").css('color', 'blue');
});
</script>
</head>
<body>
<div>
<span>
test
</span>
</div>
<div title="hahahahaha">test</div>
</body>
</html><2>属性选择器
语法:$("A[属性名='值']")包含指定属性等于指定值的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
$("div[title='sy']").css('color', 'blue');
});
</script>
</head>
<body>
<div>
<span>
test
</span>
</div>
<div title="hahahahaha">test</div>
<div title="sy">test</div>
</body>
</html><3>复合属性选择器
语法:$("A[属性名='值']")包含多个指定属性等于指定值的选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
//以某个元素开头
$("div[title^='sy']").css('color', 'blue');
//以某个元素结尾
$("div[title$='sy']").css('color', 'blue');
//包含某个元素
$("div[title*='sy']").css('color', 'blue');
});
</script>
</head>
<body>
<div title="zaf">
test
</div>
<div title="asysy">test</div>
<div title="sy">test</div>
</body>
</html>5.过滤选择器
<1>首元素选择器
语法: :first 获得选择元素中的第一个元素
<2>尾元素选择器
语法: :last 获得选择元素中的最后一个元素
<3>非元素选择器
语法: :not(selector) 不包括指定内容的元素
<4>偶数选择器
语法: :even 偶数，从零开始计数
<5>奇数选择器
语法: :old 偶数，从零开始计数
<6>等于索引选择器
语法: :eq(index)指定索引元素
<7>大于索引选择器
语法: :gt(index)大于指定索引元素
<8>小于索引选择器
语法: :lt(index)小于指定索引元素
<9>标题选择器
语法: :header 获得标题元素，固定写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
// $("div:first").css("color","blue");
// $("div:last").css("color","blue");
// $("div:not(div[title='zaf'])").css("color","blue");
// $("div:even").css("color","blue");
// $("div:odd").css("color","blue");
// $("div:gt(1)").css("color","blue");
// $("div:eq(0)").css("color","blue");
// $("div:lt(1)").css("color","blue");
$(":header").css("color","blue");
});
</script>
</head>
<body>
<div title="zaf">
test
</div>
<div title="asysy">test</div>
<div title="sy">test</div>
</body>
</html>6.表单过滤选择器
<1>可用元素选择器
语法: :enabled 获得可用元素
<2>不可用元素选择器
语法: :disabled 获得不可用元素
<3>选中选择器
语法: :checked 获得单选/复选框选中的元素
<4>选中选择器
语法: :selected 获得下拉框选中的元素
四，DOM操作
1.内容操作
*html()：获取/设置元素标签体内容
*text()：获取/设置元素的标签体纯文本内容
*val()：获取/设置元素的value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//获取myinput的value值
// var value=$("#myinput").val();
// alert(value);
// //获取mydiv的标签内容
// var html=$("#mydiv").html();
// alert(html);
// $("#mydiv").html("<p>aaaaaaaa</p>");
// //获取mydiv文本内容
var text=$("#mydiv").text();
alert(text);
})
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三"/><br/>
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>2.属性操作
<1>通用属性操作
*attr():获取/设置元素的属性
*removeAttr():删除属性，自定义属性
*prop():获取/设置元素属性
*removeProp():删除属性，固有属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function (){
//获取北京节点的name属性值
// var value=$("#bj").attr("name");
// alert(value);
//设置北京节点的属性值为dabeijing
//$("#bj").attr("name","dabeijing");
//alert($("#bj").attr("name"));
//新增北京节点的description属性值值为didv
//$("#bj").attr("description","didv");
//删除北京的name属性值，并检验name属性值是否存在
//$("#bj").removeAttribute("name");
//获取hobby的选中内容
//alert($("#hobby").prop());
})
</script>
</head>
<body>
<ul>
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjing">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>
</html><2>对class属性的操作
*addClass():添加class属性值
*removeClass():删除class属性值
*toggleClass():切换class属性， toggleClass(“one”)如果元素对象上存在class=“one”则删除，没有的话添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#button1").click(function () {
$("#div1").addClass("class2");
alert($("#div1").hasClass("class2"));
$("#div1").removeClass("class1");
alert($("#div1").hasClass("class1"));
$("#div1").toggleClass("class1");
alert($("#div1").hasClass("class1"));
})
})
</script>
</head>
<body>
<div id="div1" class="class1">hahahahah</div>
<input id="button1" type="button">
</body>
</html>3.CRUD操作
*append():父元素将子元素追加到末尾
*prepend():父元素将子元素追加到开头
*appendTo():将对象添加到另一个对象内部，并放在尾部
*prependTo():将元素对象添加到另一个元素对象内部，并在首部
*after():添加元素在元素后面
*before():添加元素在元素前面
*insertAfter()：插入元素在自身后面
*insertBefore():插入元素在自身前面
*remove():移除元素
*empty():清空所有的后代元素
4.动画
<1>默认显示和隐藏方式
*show([speed],[erase],[fn])
****speed：动画的速度
****erase：用来指定切换效果1
****fn：在动画完成时执行的函数
*hide([speed],[erase],[fn])
*toggle([speed],[erase],[fn])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>insert title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function hideFn(){
$("#showdiv").hide("slow","swing",function () {
alert("隐藏了");
});
}
function showFn(){
$("#showdiv").show("slow","swing",function () {
alert("显示了");
});
}
function toggleFn(){
$("#showdiv").toggle("slow","swing",function () {
alert("切换了");
});
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮隐藏显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showdiv" style="...">
div显示和隐藏
</div>
</body>
</html><2>滑动显示和隐藏方式
*slideDown([speed],[erase],[fn])
*sildeUp([speed],[erase],[fn])
*slideToggle([speed],[erase],[fn])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>insert title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function hideFn(){
$("#showdiv").slideUp("slow","swing",function () {
// alert("隐藏了");
});
}
function showFn(){
$("#showdiv").slideDown("slow","swing",function () {
//alert("显示了");
});
}
function toggleFn(){
$("#showdiv").slideToggle("slow","swing",function () {
// alert("切换了");
});
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showdiv" style="...">
div显示和隐藏
</div>
</body>
</html><3>淡入浅出显示和隐藏方式
*fadeIn([speed],[erase],[fn])
*fadeOut([speed],[erase],[fn])
*fadeToggle([speed],[erase],[fn])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>insert title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function hideFn(){
$("#showdiv").fadeOut("slow","swing",function () {
// alert("隐藏了");
});
}
function showFn(){
$("#showdiv").fadeIn("slow","swing",function () {
//alert("显示了");
});
}
function toggleFn(){
$("#showdiv").fadeToggle("slow","swing",function () {
// alert("切换了");
});
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showdiv" style="...">
div显示和隐藏
</div>
</body>
</html>5.for循环
*jq对象.each(callback)
*$.each(object,[callback])
*for...of
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//方式1
// $("#city li").each(function () {
// alert(this.innerHTML);
// })
// $("#city li").each(function (i,e) {
// alert(i+":"+e.innerHTML);
// })
//方式二
// $.each($("#city li"),function () {
// alert(this.innerHTML);
// })
// $.each($("#city li"),function (i,e) {
// alert(i+":"+$(e).html());
// })
//方式三
// for(i of $("#city li")){
// alert(i.innerHTML);
// }
})
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>青岛</li>
</ul>
</body>
</html>6.事件绑定
<1>Jquery标准绑定方式
*jq对象.事件方法(回调函数)
<2>on绑定事件/off解除绑定
*jq对象.on("事件名称","回调函数")
*jq对象.off("事件名称")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// $("#name").click(function () {
// alert("hahaha");
// });
// $("#name").on("click",function () {
// alert("方式二");
// })
// $("#name").off("click",function () {
// alert("方式二");
// })
// $("#name").toggle(function () {
// $("div").css("color","red");
// },function () {
// $("div").css("color","blue");
// });
})
</script>
</head>
<body>
<input id="name" type="button" value="绑定点击事件">
<div>sysysy</div>
</body>
</html>
198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
