一、概述
1、jQuery是js库，库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方， 里面有很多function函数
2、作用：使用jQuery简化对dom的操作，执行事件处理，动画，ajax请求
二、dom对象和jQuery对象
1、dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj = document.getElementById(“txt1”); obj是dom对象，也叫做js对象
obj.value;
2、jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”), jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。
现在数组中就一个值。
3、dom对象可以和jquery对象相互的转换。
dom对象可以转为jquery ， 语法： $(dom对象)
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).
4、为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。
当你使用dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。
示例代码1：
<body> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> function btnClick(){ //获取dom对象 var obj = document.getElementById("btnClick"); //使用dom对象的value属性,获取值 alert(obj.value); //把dom对象转成jquery对象,使用jquery库中的函数 var jobj = $(obj); //调用jquery中的函数,获取value的值 alert(jobj.val()); } </script> <input type="button" value="==我是按钮==" id="btnClick" onclick="btnClick()"/> </body>
示例代码2：
<body> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> function btnClick(){ //使用jquery的语法,获取dom对象 // var obj = $("#txt")[0];//从数据中获取下标是0的dom对象 var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象 var num = obj.value; obj.value = num * num; } </script> <input type="button" value="计算平方" onclick="btnClick()" /> <br> <input type="text" id="txt" /> </body>
三、基本使用
1、获取jquery的js文件
2、在你的程序中加入js文件的地址
<script type="text/javascript" src="js/jquery-3.4.1.js "></script>
3、获取jquery对象，调用它的函数
4、jquery3.4.1的压缩和非压缩版本的地址
链接：https://pan.baidu.com/s/1OoYRjPkM7DE_YAN8hDLMIA
提取码：acbk
四、选择器
就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom
1、基本选择器
（1）id选择器
语法： $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
（2）class选择器
语法： $(".class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
（3）标签选择器
语法： $(“标签名称”)
使用标签名称定位dom对象的
（4）所有选择器
语法：$(“*”)
选择页面中所有的dom对象
（5）组合选择器
语法：$(“#id,class,标签名”)
使用id，class，标签的选择器，多个dom对象的定位
2、表单选择器
语法： $(“:type属性值”)
使用标签的type属性值，定位dom对象的方式。
例如，所有的单行文本，$(“:text”)
根据type属性值定位dom对象的，页面中的组件一定有type属性才可以使用
表单选择器和form标签无关
示例代码：
<body> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> function fun1(){ //使用表单选择器$(:type的值"") var obj = $(":text"); //获取value属性的值 val()是jquery中的函数,读取value属性值 alert(obj.val()); } function fun2(){ //定位radio var obj = $(":radio");//数组,目前是两个对象,man,woman for(var i=0;i<obj.length;i++){ //循环数组,数组中的成员是dom对象,可以使用dom的属性或者函数 //从数组中获取成员,使用下标的方式 var dom = obj[i]; //使用dom对象的属性,获取value值 alert(dom.value); /* var jobj = $(obj); alert(jobj.val()); */ } } function fun3(){ //定位checkbox var obj = $(":checkbox");//数组,有三个对象 for(var i=0;i<obj.length;i++){ var dom = obj[i]; // alert(dom.value); //使用jquery的val函数,获取value的值 //1.需要jquery对象 var jobj = $(dom); //2.调用jquery函数 alert(jobj.val()); } } </script> <input type="text" value="我是type=text" /><br> <input type="radio" value="man" />男<br> <input type="radio" value="women" />女<br> <input type="checkbox" value="bike" />骑行<br> <input type="checkbox" value="football" />足球<br> <input type="checkbox" value="music" />音乐<br> <input type="button" value="我是type=text" onclick="fun1()" /><br> <input type="button" value="获取radio属性值" onclick="fun2()" /><br> <input type="button" value="获取checkbox属性值" onclick="fun3()" /><br> </body>
五、过滤器
1、概念
在定位了dom对象后，根据一些条件筛选dom对象。
过滤器又是一个字符串，用来筛选dom对象的。
过滤器不能单独使用， 必须和选择器一起使用。
2、基本过滤器
（1）$(“选择器:first”)
语法：$(“选择器:first”)
定位数组中的第一个dom对象
（2）$(“选择器:last”)
语法：$(“选择器:last”)
定位数组中的最后一个dom对象
（3）$(“选择器:eq(下标)”)
语法：$(“选择器:eq(数组的下标)”)
定位到制定下标的dom对象
（4）$(“选择器:lt(下标)”)
语法：$(“选择器:lt(下标)”)
定位小于指定下标的dom对象
（5）$(“选择器:gt(下标)”)
语法：$(“选择器:gt(下标)”)
定位大于指定下标的dom对象
示例代码：
<style type="text/css"> div{ background: gray; } </style> </head> <body> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //$(document).ready(函数):当页面中的dom对象加载成功后,会执行ready() //相当于是onload() $(function(){ //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了,才能使用 $("#btn1").click(function(){ //过滤器 var obj = $("div:first"); obj.css("background","red"); }) }) //绑定btn2的事件 $(function(){ $("#btn2").click(function(){ var obj = $("div:last"); obj.css("background","green"); }) }) //绑定btn3的事件 $(function(){ $("#btn3").click(function(){ var obj = $("div:eq(3)"); obj.css("background","blue"); }) }) //绑定btn4的事件 $(function(){ $("#btn4").click(function(){ var obj = $("div:lt(3)"); obj.css("background","orange"); }) }) //绑定btn5的事件 $(function(){ $("#btn5").click(function(){ var obj = $("div:gt(3)"); obj.css("background","yellow"); }) }) </script> <div id="one">我是div-0</div> <div id="two">我是div-1</div> <div>我是div-2 <div>我是div-3</div> <div>我是div-4</div> </div> <div>我是div-5</div> <br/> <span>我是sapn</span> <br/> <input type="button" value="获取第一个div" id="btn1" /><br> <input type="button" value="获取最后一个div" id="btn2" /><br> <input type="button" value="获取下标为3的div" id="btn3" /><br> <input type="button" value="获取下标3前面的div" id="btn4" /><br> <input type="button" value="获取下标3后面的div" id="btn5" /><br> </body>
3、表单属性过滤器
使用dom对象的状态作为筛选条件，定位dom对象
（1）$(“选择器:enabled”)
语法：$(“选择器:enabled”)
定位可用的dom对象
（2）$(“选择器:disabled”)
语法：$(“选择器:disabled”)
定位不可用的dom对象
（3）$(“选择器:checked”)
语法：$(“选择器:checked”)
定位选中的dom对象
（4）$(“选择器>option:selected“)
语法：$(“选择器:>option:selected”)
定位下拉列表框选中选中的值
示例代码：
<body> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //获取所有可以使用的text var obj = $(":text:enabled"); //获取jquery数组值所有dom对象的value值 obj.val("Hello"); }) $("#btn2").click(function(){ //获取选中的checkbox var obj = $(":checkbox:checked"); for(var i=0;i<obj.length;i++){ // alert(obj[i].value);//第一种方式 var jobj = $(obj[i]);//第二种方式 alert(jobj.val()); } }) $("#btn3").click(function(){ //获取select选中的值 var obj = $("select>option:selected"); for(var i=0;i<obj.length;i++){ var dom = obj[i]; var jobj = $(dom); alert(jobj.val()); } }) }) </script> <input type="text" value="text1" id="txt1" /><br> <input type="text" value="text2" id="txt2" disabled="true"/><br> <input type="text" value="text3" id="txt3" /><br> <input type="text" value="text4" id="txt4" disabled="true"/><br> <br> <input type="checkbox" value="游泳" />游泳<br> <input type="checkbox" value="健身" checked />健身<br> <input type="checkbox" value="电子游戏" checked />电子游戏<br> <br> <select id="yuyan"> <option value="java">java语言</option> <option value="go" select >go语言</option> <option value="python">python语言</option> </select> <br> <br> <input type="button" value="设置可以的text的value是hello" id="btn1" /><br> <button id="btn2">显示选中的复选框的值</button><br> <button id="btn3">获取select选中的值</button> </body>
六、函数
1、val()
操作对象的value属性值
2、text()
操作标签的文本内容
3、attr()
操作对象的value，文本以外的属性，例如：转换图片
4、remove()
删除dom对象和它的子对象，例如：删除多选框全部内容
5、empty()
删除dom的子对象
6、apppend()
添加dom对象
7、html()
操作文本标签，和JS中的innerHTML的作用一样
8、each()
循环函数，还可以循环数组，JSON对象，jquery对象
静态函数调用：$.each(要遍历的对象，function(index,element){处理程序})
使用jquery对象调用：jquery对象.each(function(index,element){处理程序})
示例代码1：
<body> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $("#btn1").click(function(){ //读取第一个文本框的值 //val()获取dom数组中第一个对象的value属性值 var obj = $(":text").val(); alert(obj); }) $("#btn2").click(function(){ //设置所有的text的value为新值 var obj = $(":text").val("三国演义"); }) $("#btn3").click(function(){ //获取div,text()参数,获取文本值,连接成字符串 alert($("div").text()); }) $("#btn4").click(function(){ //设置div的文本 var obj = $("div").text("给div文本赋值"); }) $("#btn5").click(function(){ //读取相片属性的值 alert($("img").attr("src")); }) $("#btn6").click(function(){ //设置照片属性的值 $("img").attr("src","img/a.jpg.jpeg"); }) }) </script> <input type="text" value="刘备" id="txt1" /> <input type="text" value="关羽" id="txt2" /><br> <input type="text" value="张飞" id="txt3" /><br> <br> <div>我是第一个div</div> <div>我是第二个div</div> <div>我是第三个div</div> <br> <img src="img/aa972d47dec755eea813c22d2d42870d.jpeg" id="img" /> <br> <input type="button" value="获取第一文本框的值" id="btn1" /><br> <input type="button" value="设置所有的text的value为新值" id="btn2" /><br> <input type="button" value="获取div,text()参数,获取文本值,连接成字符串" id="btn3" /><br> <input type="button" value="设置div的文本" id="btn4" /><br> <input type="button" value="读取相片属性的值" id="btn5" /><br> <input type="button" value="设置相片属性的值" id="btn6" /><br> </body>
示例代码2：
<body> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //在dom对象创建好后,绑定事件 $(function(){ $("#btn1").click(function(){ //使用remove:删除父与子所有的dom对象 $("select").remove(); }) $("#btn2").click(function(){ //使用empty 删除子dom对象 $("select").empty(); }) $("#btn3").click(function(){ //使用append,增加dom对象 $("div").append("<input type='button' value='新增加的按钮'>"); }) $("#btn4").click(function(){ //使用html()函数,获取数组中第一个dom对象的文本值(innerHTML) alert($("span:first").text());//我是mysql数据库 alert($("span:first").html());//我是mysql数据库 }) $("#btn5").click(function(){ $("span:first").text("我是张三！") $("span:first").html("我是张三！") }) $("#btn6").click(function(){ //循环普通数组,非dom数组 var arr = [12,58,35]; $.each(arr,function(index,element){ alert("循环变量" + index + "=========数组成员" + element); }) }) $("#btn7").click(function(){ //循环json var json = {"name":"张三","age":"20"}; $.each(json,function(i,n){ alert("i的key值=" + i + ",n的值value=" + n); }); }) $("#btn8").click(function(){ //循环dom数组 var domArray = $(":text"); $.each(domArray,function(i,n){ alert("i= " + i + " ,n=" + n.value); }) }) $("#btn9").click(function(){ //循环jquery数组 $(":text").each(function(i,n){ alert("i= " + i + " ,n=" + n.value); }) }) }) </script> <input type="text" value="刘备" id="txt1" /><br> <input type="text" value="关羽" id="txt2" /><br> <input type="text" value="张飞" id="txt3" /><br> <select> <option value="老虎">老虎</option> <option value="狮子">狮子</option> <option value="豹子">豹子</option> </select> <br> <br> <select> <option value="亚洲">亚洲</option> <option value="欧洲">欧洲</option> <option value="美洲">美洲</option> </select> <br> <br> <span>我是mysql <b>数据库</b></span> <br> <span>我是jdbc</span> <br> <br> <div id="father">我是第一个div</div> <br> <input type="button" value="使用remove删除父和子对象" id="btn1" /><br> <input type="button" value="使用empty删除子对象" id="btn2" /><br> <input type="button" value="使用appand,增加dom" id="btn3" /><br> <input type="button" value="使用获取第一个dom的文本值" id="btn4" /><br> <input type="button" value="设置span的dom文本值" id="btn5" /><br> <input type="button" value="循环普通数组" id="btn6" /><br> <input type="button" value="循环json" id="btn7" /><br> <input type="button" value="循环dom数组" id="btn8" /><br> <input type="button" value="循环jquery对象" id="btn9" /><br> </body>
七、事件
1、绑定事件
$(选择器).事件名称(事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),
jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$("#btn").click(funtion(){ alert("btn按钮单击了") })
2、on绑定事件
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
事件的处理函数： function 定义。
例如，
<input type="button" id="btn"> $("#btn").on("click", function() { 处理按钮单击 } )
