jQuery.pdf
北京动力节点-王鹤-AJAX-jQuery.pdf

一、jQuery基本概述

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             //自定义方法, 获取js中的dom对象 , $ 是一个函数的名称
  8.             function $( domId){
  9.                 var obj = document.getElementById(domId);
  10.                 return obj
  11.             }
  13.             //单击按钮获取 文本框的 value值
  14.             function fun1(){
  15.                 // 通过js中的 id 获取dom对象
  16.                 //var obj = document.getElementById("txt1");
  17.                 var obj = $("txt1");
  19.                 alert(obj.value);
  20.             }
  22.             function fun2(){
  23.                 // 通过js中的 id 获取dom对象
  24.                 //var obj = document.getElementById("txt2");
  25.                 var obj =$("txt2");
  26.                 alert(obj.value);
  27.             }
  30.         </script>
  31.     </head>
  32.     <body>
  33.         <input type="text" id="txt1" value="我是txt1" /> <br/>
  34.         <input type="text" id="txt2" value="我是txt2" /> <br/>
  35.         <input type="button" value="单击按钮 1 " onclick="fun1()" /> <br/>
  36.         <input type="button" value="单击按钮 2 " onclick="fun2()" />
  38.     </body>
  39. </html>

1. jQuery是js库

库：相当于java的工具类，库是存放东西的， jQuery是存放js代码的地方， 放的用js代码写的function

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>第一个例子</title>
  6.         <!-- 指定jquery的库文件位置， 使用相对路径，当前项目的js目录下的指定文件 -->
  7.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  8.         <script type="text/javascript">
  9.             /* 
  10.               1.  $(document) ,  $是jQuery中的函数名称， document是函数的参数
  11.                    作用是 document对象变成  jQuery函数库可以使用的对象。 
  12.               2.  ready：是jQuery中的函数， 是准备的意思， 当页面的dom对象加载成功后
  13.                   会执行ready函数的内容。  ready 相当于js中的onLoad事件
  14.               3.  function()自定义的表示onLoad后要执行的功能。
  15.             */
  16.             /* $(document).ready(function(){
  17.                 //自定义的功能代码
  18.                 alert("Hello jQuery")
  19.             }) */
  23.             $( function(){
  24.                 //代码内容
  25.                 alert("Hello JQuery 快捷方式")
  26.               }    
  27.             ) 
  28.         </script>
  29.     </head>
  30.     <body>
  31.     </body>
  32. </html>

2. dom对象和jquery对象

dom对象，使用javascript的语法创建的对象叫做dom对象， 也就是js对象。
var obj= document.getElementById(“txt1”); obj是dom对象，也叫做js对象
obj.value;
jquery对象： 使用jquery语法表示对象叫做jquery对象， 注意：jquery表示的对象都是数组。
例如 var jobj = $(“#txt1”) , jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。
现在数组中就一个值。

3. dom对象可以和jquery对象相互的转换

  1.  dom对象可以转为jquery ， 语法： $(dom对象)<br />     jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用[0]或者get{0).<br />   为什么要进行dom和jquery的转换：目的是要使用对象的方法，或者方法。<br />     当你的dom对象时，可以使用dom对象的属性或者方法， 如果你要想使用jquery提供的函数，必须是jquery对象才可以。
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>dom对象转为jquery</title>
  6.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  7.         <script type="text/javascript">
  8.             function btnClick(){
  9.                 //获取dom对象
  10.                 var obj = document.getElementById("btn");
  11.                 //使用dom的value属性,获取值
  12.                 alert("使用dom对象的属性="+obj.value)
  14.                 //把dom对象转jquery,使用jquery库中的函数
  15.                 var jobj = $(obj);
  16.                 //调用jquery中的函数,获取value的值
  17.                 alert( jobj.val() )
  19.             }
  21.         </script>
  22.     </head>
  23.     <body>
  24.          <input type="button" id="btn" value="==我是按钮==" onclick="btnClick()" />
  25.     </body>
  26. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  6.         <script type="text/javascript">
  7.             function btnClick(){
  8.                 //使用jquery的语法,获取页面中的dom对象
  9.                 //var obj = $("#txt")[0]; // 从数组中获取下标是0的dom对象
  10.                 var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
  11.                 //alert( obj.value)
  13.                 var num  = obj.value;
  14.                 obj.value = num * num;
  15.             }
  17.         </script>
  18.     </head>
  19.     <body>
  20.          <div>
  21.              <input type="button" value="计算平方" onclick="btnClick()" /><br/>
  22.              <input type="text" id="txt" value="整数" />
  23.         </div>
  24.     </body>
  25. </html>

二、常用的选择器：

  • 选择器： 就是一个字符串， 用来定位dom对象的。定位了dom对象，就可以通过jquery的函数操作dom

1、基本选择器
1） id选择器， 语法： $(“#dom对象的id值”)
通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。
2） class选择器， 语法： $(“.class样式名)
class表示css中的样式， 使用样式的名称定位dom对象的。
3） 标签选择器， 语法： $(“标签名称”)
使用标签名称定位dom对象的

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 background: gray;
  8.                 width: 200px;
  9.                 height: 100px;
  10.             }
  12.             .two{
  13.                 background: gold;
  14.                 font-size: 20pt;
  15.             }
  16.         </style>
  17.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  18.         <script type="text/javascript">
  19.             function fun1(){
  20.                 //id选择器
  21.                 var obj = $("#one");
  22.                 //使用jquery中改变样式的函数
  23.                 obj.css("background","red");
  24.             }
  26.             function fun2(){
  27.                 //使用样式选择器
  28.                 var obj = $(".two");
  29.                 obj.css("background","yellow");
  30.             }
  32.             function fun3(){
  33.                 //标签选择器
  34.                 var obj = $("div"); //数组有3个对象
  35.                 //jquery的操作都是操作数组中的全部成员.
  36.                 //所以是给所有的div都设置的背景色
  37.                 obj.css("background","blue");
  38.             }
  40.             function fun4(){
  41.                 var obj = $("*");
  42.                 obj.css("background","green");
  43.             }
  45.             function fun5(){
  46.                 var obj = $("#one,span");
  47.                 //obj.css("background","red");
  49.                  //obj是一个数组, 有两个成员, 1 是span dom对象
  50.                  //$(  obj[1] ) : jquery对象
  51.                 // $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
  52.                 $(  obj[1]  ).css("background","green");//就是span
  54.             }
  56.             document.getElementById("one"); //js的语法规则 ,value
  57.             $("#one"); //jquery语法
  59.         </script>
  60.     </head>
  61.     <body>
  62.         <div id="one">我是one的div</div><br/>
  63.         <div class="two">我是样式是two的div</div>
  64.         <br/>
  65.         <div>我是没有id，class的div</div>
  66.         <br/>
  67.         <span class="two">我是span标签</span>
  68.         <br/>
  69.         <input type="button" value="获取id是one的dom对象" onclick="fun1()" />
  70.         <br/>
  71.         <input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
  72.         <br/>
  73.         <input type="button" value="使用标签选择器" onclick="fun3()" /> 
  74.         <br/>
  75.         <input type="button" value="所有选择器" onclick="fun4()"/>
  76.         <br/>
  77.         <input type="button" value="组合选择器" onclick="fun5()"/>
  78.     </body>
  79. </html>

2、表单选择器
使用标签的type属性值，定位dom对象的方式。
语法： $(“:type属性值”)
例如： $(“:text”) ,选择的是所有的单行文本框，
$(“:button”) ,选择的是所有的按钮。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  7.         </style>
  8.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  9.         <script type="text/javascript">
  10.             function fun1(){
  11.                 //使用表单选择器 $(":type的值")
  12.                 var obj = $(":text");
  13.                 //获取value属性的值 val()是jquery中的函数, 读取value属性值
  14.                 alert( obj.val());
  15.             }
  17.             function fun2() {
  18.                 //定位radio
  19.                 var obj = $(":radio");//数组,目前是两个对象 man ,woman
  20.                 //循环数组,数组中的成员是 dom对象,可以dom的属性或者函数
  21.                 for(var i=0;i<obj.length;i++){
  22.                     //从数组值获取成员,使用下标的方式
  23.                     var  dom = obj[i];
  24.                     //使用dom对象的属性,获取value值
  25.                     alert(dom.value)
  26.                 }
  27.             }
  29.             function fun3(){
  30.                 //定位checkbox
  31.                 var obj = $(":checkbox"); //数组,有三个对象
  32.                 for(var i=0;i<obj.length;i++){
  33.                     var dom = obj[i];
  34.                     //alert(dom.value);
  35.                     //使用jqueyr的val函数, 获取value的值
  36.                     //1. 需要jquery对象
  37.                     var jObj = $(dom); // jObj 是jquery对象
  38.                     //2. 调用jquery函数
  39.                     alert("jquery的函数调用=" + jObj.val());
  41.                 }
  43.             }
  47.         </script>
  48.     </head>
  49.     <body>
  50.         <input type="text" value="我是type=text" /><br/>
  51.         <br/>
  52.         <input type="radio" value="man" /> 男 <br/>
  53.         <input type="radio" value="woman" /> 女 <br/>
  54.         <br/>
  55.         <input type="checkbox" value="bike" /> 骑行 <br/>
  56.         <input type="checkbox" value="football" /> 足球 <br/>
  57.         <input type="checkbox" value="music" /> 音乐 <br/>
  58.         <br/>
  59.         <input type="button" value="读取text的值" onclick="fun1()"/>
  60.         <br/>
  61.         <input type="button" value="读取radio的值" onclick="fun2()"/>
  62.         <br/>
  63.         <input type="button" value="读取checkbox的值" onclick="fun3()"/>
  64.     </body>
  65. </html>

三、过滤器

1、基本过滤器
过滤器：在定位了dom对象后，根据一些条件筛选dom对象。
过滤器有是一个字符串，用来筛选dom对象的。
过滤器不能单独使用， 必须和选择器一起使用。
1）$(“选择器:first”) : 第一个dom对象
2）$(“选择器:last”): 数组中的最后一个dom对象
3）$(“选择器:eq(数组的下标)”) ：获取指定下标的dom对象
4）$(“选择器:lt(下标)”) ： 获取小于下标的所有dom对象
5）$(“选择器:gt(下标)”) ： 获取大于下标的所有dom对象

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 background: gray;
  8.             }
  9.         </style>
  10.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11.         <script type="text/javascript">
  13.             // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
  14.             // 相当于是onLoad().
  15.             $(function() {
  16.                 //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
  17.                  $("#btn1").click(function(){
  18.                     //过滤器
  19.                     var obj = $("div:first");
  20.                     obj.css("background","red");
  21.                 }) 
  23.                 //绑定事件
  24.                 $("#btn2").click(function(){
  25.                     var obj = $("div:last");
  26.                     obj.css("background","green");
  27.                 })
  29.                 //绑定btn3的事件
  30.                 $("#btn3").click(function(){
  31.                     var obj = $("div:eq(3)");
  32.                     obj.css("background","blue");
  33.                 })
  35.                 $("#btn4").click(function(){
  36.                     var obj = $("div:lt(3)");
  37.                     obj.css("background","orange");
  38.                 })
  40.                 $("#btn5").click(function(){
  41.                     var obj = $("div:gt(3)");
  42.                     obj.css("background","yellow");
  43.                 })
  45.                 $("#txt").keydown(function(){
  46.                     alert("keydown")
  47.                 })
  48.             })
  52.         </script>
  53.     </head>
  54.     <body>
  55.         <input type="text" id="txt" />
  56.         <div id="one">我是div-0</div>
  57.         <div id="two">我是div-1</div>
  58.         <div>我是div-2
  59.             <div>我是div-3</div>
  60.             <div>我是div-4</div>
  61.         </div>
  62.         <div>我是div-5</div>
  63.         <br />
  64.         <span>我是span</span>
  66.         <br/>
  67.         <input type="button" value="获取第一个div" id="btn1"/>
  68.         <br/>
  69.         <input type="button" value="获取最后一个div" id="btn2"/>
  70.         <br/>
  71.         <input type="button" value="获取下标等于3的div" id="btn3"/>
  72.         <br/>
  73.         <input type="button" value="获取下标小于3的div" id="btn4"/>
  74.         <br/>
  75.         <input type="button" value="获取下标大于3的div" id="btn5"/>
  76.     </body>
  77. </html>

2、表单属性过滤器
表单属性过滤器： 根据表单中dom对象的状态情况，定位dom对象的。
启用状态， enabled ,
不可用状态 disabled
选择状态 ， checked ， 例如radio， checkbox 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 background: gray;
  8.             }
  9.         </style>
  10.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11.         <script type="text/javascript">
  13.             // $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(), 
  14.             // 相当于是onLoad().
  15.             $(function() {
  16.                 //当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了.才能使用.
  17.                  $("#btn1").click(function(){
  18.                     //获取所有可以使用的text
  19.                     var obj  = $(":text:enabled");
  20.                     //设置 jquery数组值所有dom对象的value值
  21.                     obj.val("hello");
  22.                 }) 
  24.                 $("#btn2").click(function(){
  25.                     //获取选中的checkbox
  26.                     var obj  = $(":checkbox:checked");
  27.                     for(var i=0;i<obj.length;i++){
  28.                         //alert( obj[i].value);
  29.                         alert(    $(obj[i]).val()  ) 
  30.                     }
  31.                 })
  33.                 $("#btn3").click(function(){
  34.                     //获取select选中的值
  35.                     //var obj= $("select>option:selected");
  36.                     var obj = $("#yuyan>option:selected");
  37.                     alert(obj.val());
  38.                 })
  41.             })
  45.         </script>
  46.     </head>
  47.     <body>
  48.         <input type="text"  id="txt1" value="text1" /><br/>
  49.         <input type="text"  id="txt2" value="text2" disabled="true"/><br/>
  50.         <input type="text"  id="txt3" value="text3" /><br/>
  51.         <input type="text"  id="txt4" value="text4" disabled/><br/>
  52.         <br/>
  53.         <input type="checkbox" value="游泳" />游泳 <br/>
  54.         <input type="checkbox" value="健身" checked />健身 <br/>
  55.         <input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
  56.         <br/>
  57.         <select id="yuyan">
  58.             <option value="java">java语言</option>
  59.             <option value="go" selected>go语言</option>
  60.             <option value="python">python语言</option>
  61.         </select>
  63.         <br/>
  64.         <input type="button" value="设置可以的text的value是hello" id="btn1"/>
  65.         <br/>
  66.         <button id="btn2">显示选中的复选框的值</button>
  67.         <br/>
  68.         <button id="btn3">显示选中下拉列表框的值</button>
  69.     </body>
  70. </html>

四、each函数

1、each语法
1). 可以对 数组， json ，dom数组循环处理。 数组， json中的每个成员都会调用一次处理函数。
var arr = { 1, 2, 3} //数组
var json = {“name”:”lisi”,”age”:20 }
var obj = $(“:text”);
语法： $.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，
都会执行后面的“处理函数”一次。
$: 相当于是java的一个类名
each:就是类中的静态方法。
静态方法调用，可以使用 类名.方法名称
处理函数:function(index, emelent) :
index, element都是自定义的形参， 名称自定义。
index：循环的索引
element：数组中的成员
js循环数组：
for(var i=0;i var item = arr[i]; //数组成员
//操作数组成员
shuchu( i , item);
}
function shuchu(index, emlemnt){
输出index ，element
}
2).循环jquery对象， jquery对象就是dom数组
jquery对象.each( function(index,element) {} )

五、jquery中给dom对象绑定事件

1） $(选择器).事件名称( 事件的处理函数)
$(选择器)：定位dom对象， dom对象可以有多个， 这些dom对象都绑定事件了
事件名称：就是js中事件去掉on的部分， 例如 js中的单击事件 onclick(),
jquery中的事件名称，就是click，都是小写的。
事件的处理函数：就是一个function ，当事件发生时，执行这个函数的内容。
例如给id是btn的按钮绑定单击事件
$(“#btn”).click(funtion(){
alert(“btn按钮单击了”)
})

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 background: yellow;
  8.             }
  9.         </style>
  10.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11.         <script type="text/javascript">
  12.             //在dom对象创建好后,绑定事件
  13.             $(function(){
  14.                 $("#btn1").click(function(){
  15.                     //val() 获取dom数组中第一个对象的value属性值
  16.                     var text = $(":text").val();
  17.                     alert(text)
  18.                 })
  20.                 $("#btn2").click(function(){
  21.                     //设置所有的text的value为新值
  22.                     $(":text").val("三国演义");
  23.                 })
  25.                 $("#btn3").click(function(){
  26.                     //获取div ,text()无参数,获取dom对象的文本值,连接成一个字符串
  27.                     alert($("div").text());
  28.                 })
  30.                 $("#btn4").click(function(){
  31.                     //设置div的文本值
  32.                     $("div").text("新的div文本内容");
  33.                 })
  35.                 $("#btn5").click(function(){
  36.                     //读取指定属性的值
  37.                     alert($("img").attr("src"));
  38.                 })
  40.                 $("#btn6").click(function(){
  41.                     //设置指定属性的,指定值
  42.                     $("img").attr("src","img/ex2.jpg");
  43.                     //val(), text();
  44.                 })
  45.             })
  49.         </script>
  50.     </head>
  51.     <body>
  52.         <input type="text" value="刘备" /><br/>
  53.         <input type="text" value="关羽" /><br/>
  54.         <input type="text" value="张飞" /><br/>
  55.         <br/>
  56.         <div>1.我第一个div</div>
  57.         <div>2.我第二个div</div>
  58.         <div>3.我第三个div</div>
  59.         <br/>
  60.         <img src="img/ex1.jpg" id="image1" />
  61.         <br/>
  63.         <input type="button" value="获取第一文本框的值" id="btn1"/>
  64.         <br/>
  65.         <br/>
  66.         <input type="button" value="设置所有文本框的value值" id="btn2"/>
  67.         <br/>
  68.         <br/>
  69.         <input type="button" value="获取所有div的文本值" id="btn3"/>
  70.         <br/>
  71.         <br/>
  72.         <input type="button" value="设置div的文本值" id="btn4"/>
  73.         <br/>
  74.         <br/>
  75.         <input type="button" value="读取src属性的值" id="btn5"/>
  76.         <br/>
  77.         <br/>
  78.         <input type="button" value="设置指定的属性值" id="btn6"/>
  79.     </body>
  80. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 background: yellow;
  8.             }
  9.         </style>
  10.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11.         <script type="text/javascript">
  12.             //在dom对象创建好后,绑定事件
  13.             $(function(){
  14.                 $("#btn1").click(function(){
  15.                     //使用remove:删除父和子所有的dom对象
  16.                     $("select").remove();
  18.                 })
  20.                 $("#btn2").click(function(){
  21.                     //使用empty 删除子dom对象
  22.                     $("select").empty();
  23.                 })
  25.                 $("#btn3").click(function(){
  26.                     //使用append,增加dom对象
  27.                     //$("#fatcher").append("<input type='button' value='我是增加的按钮' />")
  29.                     //增加一个table
  30.                     $("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
  31.                 })
  33.                 $("#btn4").click(function(){
  34.                     //使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
  35.                     //alert($("span").text()); // 我是mysql数据库
  36.                     alert( $("span").html() ); //我是mysql <b>数据库</b>
  38.                 })
  40.                 $("#btn5").click(function(){
  41.                     //使用 html(有参数):设置dom对象的文本值
  42.                     $("span").html("我是新的<b>数据</b>");
  44.                 })
  46.                 $("#btn6").click(function(){
  47.                     //循环普通数组,非dom数组
  48.                     var  arr = [ 11, 12, 13];
  49.                     $.each(arr, function(i,n){
  50.                         alert("循环变量："+i + "=====数组成员:"+ n);
  51.                     })
  52.                 })
  54.                 $("#btn7").click(function(){
  55.                     //循环json
  56.                     var json={"name":"张三","age":20};
  58.                     //var  obj = eval("{'name':'张三','age':20}");
  61.                     $.each(json,function(i,n){
  62.                         alert("i是key="+i+",n是值="+n);
  63.                     })
  65.                 })
  67.                 $("#btn8").click(function(){
  68.                     //循环dom数组
  69.                     var domArray = $(":text");//dom数组
  71.                     $.each( domArray, function(i,n){
  72.                         // n 是数组中的dom对象
  73.                         alert("i="+i+"  , n="+n.value);
  74.                     })
  75.                 })
  77.                 $("#btn9").click(function(){
  78.                     //循环jquery对象, jquery对象就是dom数组
  79.                     $(":text").each(function(i,n){
  80.                         alert("i="+i+"，n="+ n.value);
  81.                     })
  83.                 })
  84.             })
  88.         </script>
  89.     </head>
  90.     <body>
  91.         <input type="text" value="刘备" />
  92.         <input type="text" value="关羽" />
  93.         <input type="text" value="张飞" />
  95.         <br/>
  96.         <select>
  97.             <option value="老虎">老虎</option>
  98.             <option value="狮子">狮子</option>
  99.             <option value="豹子">豹子</option>
  100.         </select>
  101.         <br/>
  102.         <br/>
  103.         <select>
  104.             <option value="亚洲">亚洲</option>
  105.             <option value="欧洲">欧洲</option>
  106.             <option value="美洲">美洲</option>
  107.         </select>
  108.         <br/>
  109.         <br/>
  110.         <div id="fatcher">我是第一个div</div>
  111.         <br/
  112.         <br/>
  113.         <span>我是mysql <b>数据库</b></span>
  114.         <br/>
  115.         <span>我是jdbc</span>
  116.         <br/>
  117.         <br/>
  119.         <input type="button" value="使用remove删除父和子对象" id="btn1"/>
  120.         <br/>
  121.         <br/>
  122.         <input type="button" value="使用empty删子对象" id="btn2"/>
  123.         <br/>
  124.         <br/>
  125.         <input type="button" value="使用append,增加dom对象" id="btn3"/>
  126.         <br/>
  127.         <br/>
  128.         <input type="button" value="获取第一个dom的文本值" id="btn4"/>
  129.         <br/>
  130.         <br/>
  131.         <input type="button" value="设置span的所以dom的文本值" id="btn5"/>
  132.         <br/>
  133.         <br/>
  134.         <input type="button" value="循环普通数组" id="btn6"/>
  135.         <br/>
  136.         <br/>
  137.         <input type="button" value="循环json" id="btn7"/>
  138.         <br/>
  139.         <br/>
  140.         <input type="button" value="循环dom数组" id="btn8"/>
  141.         <br/>
  142.         <br/>
  143.         <input type="button" value="循环jquery对象" id="btn9"/>
  144.     </body>
  145. </html>

2) on 事件绑定
$(选择器).on( 事件名称 , 事件的处理函数)
事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
事件的处理函数： function 定义。
例如，
$(“#btn”).on(“click”, function() { 处理按钮单击 } )

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <style type="text/css">
  6.             div{
  7.                 background: yellow;
  8.             }
  9.         </style>
  10.         <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  11.         <script type="text/javascript">
  12.             //在dom对象创建好后,绑定事件
  13.             $(function(){
  14.                 $("#btn1").click(function(){
  15.                     //使用append增加dom对象
  16.                     $("#mydiv").append("<input id='newBtn' type='button' value='我是新加入的按钮'/>");
  17.                     //使用on给按钮绑定事件
  18.                     $("#newBtn").on("click",function(){
  19.                         alert("新建的按钮被单击了");
  20.                     })
  21.                 })
  24.             })
  28.         </script>
  29.     </head>
  30.     <body>
  32.         <div id="mydiv">
  33.             我是一个div ，需要增加一个button
  34.         </div>
  36.         <input type="button" value="创建一个button,绑定一个click" id="btn1"/>
  37.         <br/>
  39.     </body>
  40. </html>

六、使用jquery的函数，实现ajax请求的处理。

  • 没有jquery之前，使用XMLHttpRequest做ajax ， 有4个步骤。 jquery简化了ajax请求的处理。
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>使用json格式的数据</title>
  5.     <script type="text/javascript">
  6.         function  doSearch() {
  7.             //1.创建异步对象
  8.             var xmlHttp = new XMLHttpRequest();
  9.             //2.绑定事件
  10.             xmlHttp.onreadystatechange = function() {
  11.                 if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
  12.                     var data = xmlHttp.responseText;
  13.                     //eval是执行括号中的代码， 把json字符串转为json对象
  14.                     var jsonobj = eval("(" + data + ")");
  15.                     //更新dom对象
  16.                     callback(jsonobj);
  17.                 }
  18.             }
  20.             //3.初始异步对象的请求参数
  21.             var proid = document.getElementById("proid").value;
  23.             // true :异步处理请求。 使用异步对象发起请求后，不用等待数据处理完毕，就可以执行其它的操作。
  24.             // false:同步，异步对象必须处理完成请求，从服务器端获取数据后，才能执行send之后的代码。 任意时刻只能执行一个异步请求。
  26.             xmlHttp.open("get","queryjson?proid="+proid,false);
  28.             //4.发送请求
  29.             xmlHttp.send();
  32.             //也可以创建其它的 XMLHttpRequest， 发送其它的请求处理。
  34.             alert("====在send之后的代码====")
  35.         }
  37.         //定义函数，处理服务器端返回的数据
  38.         function callback(json){
  39.             document.getElementById("proname").value = json.name;
  40.             document.getElementById("projiancheng").value=json.jiancheng;
  41.             document.getElementById("proshenghui").value= json.shenghui;
  42.         }
  44.     </script>
  45. </head>
  46. <body>
  47.     <p>ajax请求使用json格式的数据</p>
  48.     <table>
  49.         <tr>
  50.             <td>省份编号：</td>
  51.             <td><input type="text" id="proid">
  52.                 <input type="button" value="搜索" onclick="doSearch()">
  53.             </td>
  54.         </tr>
  55.         <tr>
  56.             <td>省份名称：</td>
  57.             <td><input type="text" id="proname"></td>
  58.         </tr>
  59.         <tr>
  60.             <td>省份简称：</td>
  61.             <td><input type="text" id="projiancheng"></td>
  62.         </tr>
  63.         <tr>
  64.             <td>省会名称：</td>
  65.             <td><input type="text" id="proshenghui"></td>
  66.         </tr>
  67.     </table>
  68. </body>
  69. </html>

  • 使用三个函数可以实现ajax请求的处理。

    1） $.ajax() : jquery中实现ajax的核心函数。
    2） $.post() : 使用post方式做ajax请求。
    3） $.get() : 使用get方式发送ajax请求。

    $.post()和$.get() 他们在内部都是调用的 $.ajax()

    介绍 $.ajax函数的使用， 函数的参数表示请求的url， 请求的方式，参数值等信息。
    $.ajax()参数是一个json的结构。

    例如： $.ajax( {名称:值， 名称1:值1….. } )
    例如： $.ajax( { async:true ,
    contentType:”application/json” ,
    data: {name:”lisi”,age:20 },
    dataType:”json”,
    error:function(){
    请求出现错误时，执行的函数
    },
    success:function( data ) {
    // data 就是responseText, 是jquery处理后的数据。
    },
    url:”bmiAjax”,
    type:”get”
    }

    )

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3. <head>
  4.     <title>使用json格式的数据</title>
  5.     <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
  6.     <script type="text/javascript">
  8.         $(function(){
  9.             $("#btn").click(function () {
  10.                 //获取dom的value值
  11.                 var proid = $("#proid").val();
  12.                 //发起ajax请求
  13.                 $.ajax({
  14.                     url:"queryjson",
  15.                     data:{
  16.                         "proid":proid
  17.                     },
  18.                     dataType:"json",
  19.                     success:function (resp) {
  20.                         //resp是json对象
  21.                         //alert(resp.name + " === "+resp.jiancheng)
  22.                         $("#proname").val(resp.name);
  23.                         $("#projiancheng").val(resp.jiancheng);
  24.                         $("#proshenghui").val(resp.shenghui);
  25.                     }
  26.                 })
  27.             });
  28.         })
  29.     </script>
  30. </head>
  31. <body>
  32.     <p>ajax请求使用json格式的数据</p>
  33.     <table>
  34.         <tr>
  35.             <td>省份编号：</td>
  36.             <td><input type="text" id="proid">
  37.                 <input type="button" value="搜索" id="btn">
  38.             </td>
  39.         </tr>
  40.         <tr>
  41.             <td>省份名称：</td>
  42.             <td><input type="text" id="proname"></td>
  43.         </tr>
  44.         <tr>
  45.             <td>省份简称：</td>
  46.             <td><input type="text" id="projiancheng"></td>
  47.         </tr>
  48.         <tr>
  49.             <td>省会名称：</td>
  50.             <td><input type="text" id="proshenghui"></td>
  51.         </tr>
  52.     </table>
  53. </body>
  54. </html>
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <html>
  3.   <head>
  4.     <title>ajax根据省份id获取名称</title>
  5.     <script type="text/javascript">
  6.         function search() {
  7.            //发起ajax请求，传递参数给服务器， 服务器返回数据
  8.            //1.创建异步对象
  9.            var  xmlHttp  = new XMLHttpRequest();
  10.            //2.绑定事件
  11.            xmlHttp.onreadystatechange = function () {
  12.                if( xmlHttp.readyState == 4 && xmlHttp.status== 200){
  13.                  //alert(xmlHttp.responseText)
  14.                  //更新页面，就是更新dom对象
  15.                  document.getElementById("proname").value= xmlHttp.responseText;
  16.                }
  17.            }
  18.            //3.初始异步对象
  19.           //获取proid文本框的值
  20.            var proid = document.getElementById("proid").value;
  21.            xmlHttp.open("get","queryProvice?proid="+proid,true);
  23.            //4.发送请求
  24.            xmlHttp.send();
  25.         }
  26.     </script>
  27.   </head>
  28.   <body>
  29.     <p>ajax根据省份id获取名称</p>
  30.     <table>
  31.       <tr>
  32.         <td>省份编号：</td>
  33.         <td><input type="text" id="proid"/>
  34.             <input type="button" value="搜索" onclick="search()" />
  35.         </td>
  36.       </tr>
  37.       <tr>
  38.         <td>省份名称：</td>
  39.         <td><input type="text" id="proname" /></td>
  40.       </tr>
  41.     </table>
  42.   </body>
  43.   <a href="html/main.jsp">link</a>
  44. </html>

七、json结构的参数说明：

1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
xmlHttp.open(get,url,true),第三个参数一样的意思。

2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
例如你想表示请求的参数是json格式的， 可以写application/json

  1.  3)data: 可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据

4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够
读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
返回你需要的数据格式。

5)error: 一个function ，表示当请求发生错误时，执行的函数。
error:function() { 发生错误时执行 }
6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。

7)url:请求的地址

8)type:请求方式，get或者post， 不用区分大小写。 默认是get方式。
主要使用的是 url , data ,dataType, success .