jQuery学习笔记
1.什么是jQuery
jQuery 全称：javaScript Query是js的一个框架，本质上仍然是js
2.jQuery特点
支持各种主流的浏览器
使用简单
拥有便捷的插件扩展机制和丰富的插件
3.使用JQuery
引入jQuery文件
（1）jQuery的选择器
注意：
jQuery中选择器获取的是存储了HTML元素对象的数组
jQuery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容
<html>
<head>
<meta charset="utf-8" />
<title>jQuery选择器</title>
<!--引入jQuery文件-->
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
//id选择器
function testId(){
//jQuery--id
var inp=$("#uname");
alert(inp.val());
}
//标签选择器
function testEle(){
var inps=$("input");
}
//类选择器
function testClass(){
var inps=$(".common");
}
//组合选择器
function testAll(){
var eles=$("h3,input");
}
//层级选择器
//parent>child:在给定的父元素下匹配所有子元素
//prev+next:匹配所有紧接在prev元素后的next元素
//prev~sibling:匹配prev元素之后的所有sibling元素
function testChild(){
var inps=$("div>input");
}
//简单选择器
//内容选择器
//可见性选择器
//属性选择器
//表单选择器
</script>
<style type="text/css">
.common{}
#showdiv{
width: 300px;
height: 300px;
border: solid 2px orange;
}
</style>
</head>
<body>
<h3>jQuery选择器</h3>
<input type="button" name="" id="" value="测试id" onclick="testId()" class="common"/>
<input type="button" name="" id="" value="测试标签选择器" onclick="testEle()" />
<input type="button" name="" id="" value="测试类选择器" onclick="testClass()" />
<input type="button" name="" id="" value="测试组合选择器" onclick="testAll()" />
<hr/>
用户名：<input type="text" name="uname" id="uname" value="张三" class="common"/>
<hr />
<input type="button" name="" id="" value="测试子选择器" onclick="testChild()" />
<hr />
<div id="showdiv">
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
<input type="text" name="" id="" value="" />
</div>
</body>
</html>
（2）jQuery操作元素的属性
获取：
对象名.attr("属性名") //返回当前属性值
注意此中方式不能获取value属性的实时数据，使用对象名.val()进行获取
修改：
对象名.attr("属性名","属性值");
<html>
<head>
<meta charset="utf-8" />
<title>jquery操作元素属性</title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
<!--声明js代码域-->
<script type="text/javascript">
function testField(){
//获取元素对象
var uname=$("#uname");
//获取
alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}
function testFiled2(){
//获取元素对象
var uname=$("#uname");
uname.attr("type","button");
}
</script>
</head>
<body>
<h3>jquery操作元素属性</h3>
<input type="button" name="" id="" value="测试获取元素属性" onclick="testField"/>
<hr />
用户名：<input type="text" name="uname" id="uname" value="" />
</body>
</html>
（3）jQuery操作元素的内容
获取元素对象
获取
对象名.html() //返回当前对象的所有内容，包括HTML标签
修改
对象名.html("新的内容") //新的内用会将原有的内容覆盖，HTML标签会解析执行
对象名.text("新的内容") //新的内用会将原有的内容覆盖，HTML标签不会解析执行
<html> <head> <meta charset="utf-8"> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> function testHtml(){ //获取元素对象 var showdiv = $("#showdiv"); //获取元素的内容 alert(showdiv.html()); //<b>啦啦啦啦啦</b> } function testHtml2(){ //获取元素对象 var showdiv = $("#showdiv"); //修改元素的内容 showdiv.html("<i>今天天气真好</i>"); showdiv.html(showdiv.html()+"<i>今天天气真好</i>"); } function testText(){ //获取元素对象 var showdiv = $("#showdiv"); //修改元素的内容 alert(showdiv.testText()); //啦啦啦啦啦 } </script> <title></title> </head> <body> <h3>操作HTML元素</h3> <hr/> <div id="showdiv"> <b>啦啦啦啦啦</b> </div> </body>i </html>
（4）jQuery操作元素的样式
使用css()
对象名.css("属性名") //返回当前属性的样式值
对象名.css("属性名","属性值") //增加、修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"}) //使用json传参,提升代码书写效率
使用addClass()
对象名.addClass("类选择器名") //追加一个类样式
对象名.removeClass("类选择器名") //删除一个类样式
<html> <head> <meta charset="utf-8"> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 1px; } .common{ width: 300px; height: 300px; border: solid 1px; background-color: blueviolet; } </style> <script type="text/javascript"> //jQuery操作样式---css() function testCss(){ //获取元素对象 var showdiv=$("showdiv"); //操作样式---增加 showdiv.css("background-color","orange"); //操作样式---获取 alert(showdiv.css("width")); //操作样式---修改 showdiv.css("background-color","black"); } function testCss2(){ //获取元素对象 var div=$("div01"); //操作样式 div.css({"border":"solid 1px","width":"300px","height":"300px"}); } //jQuery()---addClass() function testAddClass(){ //获取元素对象 var showdiv=$("div01"); //操作元素样式 div.addClass("common"); } function testRemoveClass(){ //获取元素对象 var showdiv=$("div01"); //操作元素样式 div.removeClass("common"); } </script> </head> <body> <h3>操作元素样式</h3> <input type="button" name="" id="" value="增加样式" onclick="testCss()"/> <input type="button" name="" id="" value="增加样式---Css()" onclick="testCss2()"/> <input type="button" name="" id="" value="增加样式---addCss()" onclick="testAddClass()"/> <hr/> <div id="showdiv"></div> <div id="div01"></div> </body> </html>
（5）jQuery操作元素的文档结构
获取元素对象
内部插入
append("内容") //将指定的内容追加到对象的内部
appendTo("元素对象或者选择器") //将指定的元素对象追加到指定的对象内部
prepend() //将指定的内容追加到对象的内部前面
prependTo() //将指定的元素对象追加到指定的对象内部前面
外部插入
after 将指定的内容加到指定的元素后面
before 将指定的内容加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个指定的元素集合的后面
insertBefore 把所有匹配的元素插入到另一个指定的元素集合的前面
包裹
wrap
wrapAll
wrapInner
替换
replaceWith
replaceAll
删除
empty
remove
clone
<html> <head> <title>操作文档结构</title> <meta charset="utf-8"> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //内部插入 function testAppend(){ //获取元素对象 var div=$("showdiv"); //使用内部插入 div.append("<i>123</i>"); } function testAppendto(){ //获取元素对象 var div=$("showdiv"); //使用appendTo() $("#u1").appendTo("#showdiv"); } function testPrepend(){ //获取元素对象 var div=$("showdiv"); //使用Prepend() div.prepend("<i>你好</i>"); } //外部插入 function test(){ //获取元素对象 var div=$("showdiv"); //使用after外部插入 div.after("<b>今天天气不错</b>"); //使用before外部插入 div.before("<b>今天天气不错</b>"); } </script> <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 1px #FFA500; } </style> </head> <body> <h3>操作文档结构</h3> <hr/> <u id="u1">8888888</u> <div id="showdiv"> <b>啦啦啦啦啦</b> </div> </body> </html>
（6）jQuery动态操作事件
元素对象.bind("事件名",function) //动态给指定的元素对象追加指定的事件及监听函数
注意：
js中的是一次添加，多次添加时覆盖的效果
jQuery是追加的效果，可以实现给一个事件添加不同的监听函数
元素对象.unBind("事件名") //移除指定的元素对象指定的指定事件
注意：
js方式添加的事件不能移除
元素对象.one("事件名",function) //给指定的元素对象添加一次事件
注意：
可以给事件添加多个一次性事件，unBind可以用来解绑
页面载入
$(document).ready(function);
页面载入成功后会调用传入的函数对象
注意：
此方式可以给页面载入动态的多个函数对象，不会被覆盖
<html> <head> <title>操作事件</title> <meta charset="utf-8"> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //js动态添加事件 function testThing(){ //获取元素对象 var btn=document.getElementById("btn"); //添加事件 btn.onclick=function(){ alert("我是js"); } } //jquery //测试bind绑定 function testBind(){ $("#btn2").bind("click",function(){ alter("我是bind绑定单机事件") }); } //测试unbind解绑 function testUnfBind(){ $("#btn2").unbind("click"); } //测试one function testOne(){ $("btn3").one("click",function(){ alert("我是one") }); } //页面载入事件 //js方式 window.onload=function(){ alert("我是js方式页面加载"); } //jQuery方式 $(document).ready(function(){ alert("我是jQuery"); }) </script> </head> <body> <h3>操作事件</h3> <hr /> <input type="button" name="" id="" value="测试js动态添加事件" onclick="testThing()"/> <input type="button" name="" id="" value="测试jquery动态添加事件--bind" onclick="testBind()"/> <input type="button" name="" id="" value="测试jquery动态添加事件--bind" onclick="testOne()"/> <hr /> <input type="button" name="" id="btn" value="测试js" /> <input type="button" name="" id="btn2" value="测试jQuery-bind" /> <input type="button" name="" id="btn3" value="测试jQuery-one" /> </body> </html>
（7）jQuery中的动画效果
<html> <head> <title>动画效果</title> <meta charset="utf-8"> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #showdiv{ height: 300px; background-color: #FFA500; display: none; } #div01{ height: 300px; background-color: #8A2BE2; display: none; } </style> <script type="text/javascript"> function test(){ $("showdiv").show(3000); $("div01").hide(3000); $("div").toggle(3000); $("showdiv").slideDown(3000); $("#div01").slideUp(2000); $("#showdiv").fadeOut(3000); $("#showdiv").fadeIn(3000); } </script> </head> <body onload="test()"> <div id="showdiv"> </div> <div id="div01"> </div> </body> </html>
（8）案例
<!DOCTYPE html> <html> <head> <title>菜单案例</title> <meta charset="utf-8"> <style type="text/css"> ul li{ list-style-type: none; } #na{ position:relative; left: 20px; } img{ width: 15px; height: 15px; } </style> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> var flag=true; function testNa(){ // $("#na").toggle(1000); } //页面载入 $(function(){ $("ul>label").bind("click",function(){ if(flag){ $("#na").slideUp(1000); flag=false; }else{ $("#na").slideDown(1000); flag=true; } }) }) </script> </head> <body> <h3>jQuery-菜单案例</h3> <hr /> <ul> <img src="img/timg.png"/> <label for="" onclick="testNa()">国际动态</label> <div id="na"> <li><img src="" alt="蝴蝶"/><label for="">国内新闻</label></li> <li><img src="" alt="蝴蝶"/><label for="">国际新闻</label></li> </div> </ul> </body> </html>
