jQuery

回顾JavaScript

1-JavaScript的主要作用是：操作DOM对象。

2-原生的js代码定位DOM对象常用的三种方式：

　　1）通过ID属性：    var domObj1 = document.getElementById("id名");
       2）通过class属性：var domObj2 = document.getElementsByClassName("样式名称")；
       3）通过标签名：    var domObj3 = document.getElementsByTagName("标签名称");

3-缺点：

　　1）JavaScript，定位DOM对象命令，过于冗长；

　　2）JavaScript，定位DOM对象方式，过于单一；

　　3）JavaScript，定位DOM对象中属性操作，过于繁琐；

　　总之js原生代码的编写十分繁琐，操作不方便,容易影响开发效率。在实际开发中，开发者通常选择使用jQuery这种更便捷的方式去操作dom对象。（jQuery的本质：在内部封装了相应的JS方法）

4-jQuery定位DOM对象的方式：
       1）$("#id值")
       2）$(".class名")
       3）$("标签名")

一、jQuery

1-介绍

　　 jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法的调用。

　　使用jQuery能简化JavaScript对DOM对象的定位以及DOM对象属性操作开发步骤。

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

2-使用

1）下载jQuery工具文件 ；（官网：https://jquery.com）

压缩版 (去除空格，体积更小。不方便阅读。但是网络传输速度更快。——项目上线时使用)　　　　
未压缩版（可读性比较高——项目开发时使用）

2）jQuery导入到工程中；

<script type="text/javascript" src="">  需要在src值中指定jquery文件在该项目中的相对路径。
     
</script>

3）会将jQuery文件加载到浏览器上；

3-jQuery对象与DOM对象

DOM对象 —— 使用javascript的语法创建的对象叫做dom对象，也就是js对象。　

1) 在浏览器加载网页时，由浏览器负责创建的。

2) 一个html标签对应一个DOM对象。

3) 可以通过管理DOM对象，来对关联html标签中属性进行操作。

 var obj=  document.getElementById("txt1");  //obj是dom对象，也叫做js对象
 obj.value;

jQuery对象 —— 使用jquery语法表示对象叫做jquery对象，【注意：jquery表示的对象都是数组。】　

1) 是[jquery函数 $() ]负责创建的

2) jquery对象就是一个【数组】

3) jquery对象中存放的本次定位【dom对象】

4) 可以通过jquery对象中【功能函数】,来快速的对定位【dom对象】进行操作管理

 var jobj =  $("#txt1"); //obj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。现在数组中就一个值。

4-jQuery对象与DOM对象转换

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

1) 将jQuery对象转换为DOM对象？—— 语法：从数组中获取第一个对象，第一个对象就是dom对象，使用[0]或者get{0).
如：$(dom对象)[0] 或 $(dom对象) 实质：就是通过循环从数组中提取DOM对象的过程。

for(var i=0;i<$obj.length;i++){
    var domObj =  $obj[i];
}

2) 将DOM对象转换为jQuery对象？—— 语法： $(dom对象)实质：就是把一个DOM对象添加到数组中的过程。

var $obj = $(domObj);

3) 为什么要进行DOM和jQuery的转换？——目的是要使用对象的方法，或者方法。

　 jQuery对象与DOM对象之间属性和函数彼此不能调用。　
只有DOM对象才可以使用dom对象的属性或者方法。
只有jQuery对象才可以使用jquery提供的函数。

注意：在实际开发中，便于区分JS对象和 JQ对象。在定义变量的时候，通常在JQ变量前加一个$ 美元符号。

JQUERY中最常见的异常：

...............

二、基本选择器

　　选择器就是用来定位dom对象的一类字符串。

　　DOM对象被定位后，就可以通过jQuery的函数来操作DOM对象。

　　定位条件：

可以根据ID编号，根据标签类型名,根据标签采用样式选择器

基本选择器的使用：

1-id选择器

　　$("#id编号") ———— 代替 document.getElementById("id号")

根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中并返回。返回这个数组就是【jquery对象】

2-class选择器

　　$(".样式选择器名称") ———— 代替document.getElementsByClassName("样式选择器名")

使用样式的名称定位dom对象。将使用了指定的样式选择器的dom对象保存到同一个数组中，并返回。返回这个数组就是【jquery对象

3-标签选择器　

　　 $("标签类型名") ———— 代替JS中的document.getElementsByTagName()

将所有指定的标签类型关联的DOM对象保存到同一个数组中并返回，返回的这个数组就是【jquery对象】

4-所有选择器　

　　$("*"): 定位浏览器中所有的DOM对象保存到同一个数组中并返回。返回的这个数组就是【jquery对象】

5-组合选择器

　 $("id选择器,.class选择器,标签选择器")

$("条件1,条件2")：只要DOM对象满足其中的一种条件，就会被定位到数组中

相当于mysql or where sal>=3000 or job='mangaer'

三、层级选择器

1 定位条件：

可以根据标签之间父子关系定位

可以根据标签之间兄弟关系定位

2 层级选择器标签之间关系：

3 层级选择器的选择：

1） $("定位父标签条件>定位子标签条件")	定位当前父标签下，所有满足条件的【直接子标签】
2） $("定位父标签条件定位子标签条件")	定位当前父标签下，所有满足条件的【直接子标签】和【间接子标签】
3) $("定位当前标签条件~定位兄弟标签条件")	定位当前标签【后面】，所有满足条件的兄弟标签
4） $("定位当前标签条件+定位兄弟标签条件")	定位当前标签【后面与之紧邻的】，并且满足条件的所有兄弟标签
5） $("定位当前标签条件").siblings("定位兄弟标签条件")	定位当前标签【前面与后面】所有满足条件的兄弟标签

四、表单选择器（input标签选择器）

1-使用<input>标签的type属性值，定位dom对象的方式。
2-语法： $(":type属性值")

3-注意：跟是否有from表单标签无关

0）常见的input标签类型：

<input type="text"> 文本框

<input type="password"> 密码框

<input type="radio"> 单选框

<input type="checkbox"> 复选框

<input type="file"> 文件选择框

<input type="button"> 命令按钮 (该按钮一定会关联一个脚本函数，否则无含义)

<input type="submit"> 提交按钮（该按钮用于唤醒浏览器。浏览器则根据form表单中的内容发生请求）

<input type="reset"> 重置按钮

1）INPUT标签作用：

作为浏览器向网站发送请求是携带请求参数

2）INPUT标签的使用：

格式 $(":type属性名字")

过滤器语法

　　过滤器是一个用来筛选DOM对象的字符串。用于在定位了DOM对象后，根据一些条件进行筛选DOM对象。

　　1）对已经定位到jquery对象中DOM对象，进行二次过滤筛选的;

　　2）过滤器不能独立使用，必须和选择器一起使用。且声明在选择器后面;

　　3）六种过滤器（三种常见过滤器）;

　　4）将多个过滤器放到同一个jquery函数，进行层层过滤 ;

五、基本过滤器

1.基本过滤器

过滤条件:

根据已经定位的DOM对象在jquery对象中存储位置进行二次过滤筛选

使用

$("选择器:first")：留下满足条件中的第一个DOM对象

例子：$(":button:first"):定位页面中第一个button

$("选择器:last")：留下满足条件中的最后一个DOM对象

例子：$(":button:last"):定位页面中最后一个button

$("选择器:eq(下标值)"): 留下满足条件中的指定位置的DOM对象

例子：$("div:eq(2)") 定位页面中第三个DIV

$("选择器:lt(下标值)")：留下满足条件中的指定位置之前的所有Dom对象

例子： $(":checkbox:lt(2)"):页面中前两个checkbox

$("选择器:gt(下标值)"): 留下满足条件中的指定位置之后的所有Dom对象

例子: $(":button:gt(3)"):位置在第四个butotn之后的所有的button

2.基本属性过滤器

过滤条件：

根据标签在声明时是否为指定属性进行手动赋值

根据标签的属性内容与【指定内容】关系进行过滤器

问题1：哪一个DIV中没有name属性？

所有DIV标签都有name属性

问题2：哪一个DIV中name属性的值是""空字符串？

第一个DIV没有手动为name属性赋值，因此name属性值是默认值，就是""。（属性的默认值不会为null）

使用

1). $("选择器[属性名]"):留下满足定位条件的并且在声明时为指定属性进行手动赋值的DOM对象

            例子: $("div[name]")
 
                                              <div name="two">2</div>
                                              <div name="three">3</div>

2). $("选择器[属性名='值']")：留下满足定位条件的并且指定属性内容【等于】指定内容DOM

 $("div[name='two']")  
                                     <div name="two">2</div>
                                         
               $("div[name='']")
                                      <div>1</div>
                                         
  
               $("div[name!='four']")
                                       <div>1</div>
                                       <div name="two">2</div>
                                       <div name="three">3</div>

3. $("选择器[属性名^='值']"):留下满足定位条件的并且指定属性内容以【指定内容为开头】所有DOM

          例子: $("div[name^='t']")   
                                   <div name="two">2</div>
                                   <div name="three">3</div>
 
 

4. $("选择器[属性名$='值']")留下满足定位条件的并且指定属性内容以【指定内容为结尾】所有DOM

             例子:$("div[name$='e']")  
                                <div name="three">3</div>

5.$("选择器[属性名*='值']")留下满足定位条件的并且指定属性内容【包含】指定内容的所有DOM

          例子: $("div[name*='o']")  
                                 <div name="two">2</div>
                                 <div name="four">4</div>

6.$("选择器[属性名1][属性名2*='值'][属性名3^='值']")

回顾：html标签属性分类：

　　　　表单域标签：　　

1）基本属性： id,name,title,rowspan 绝大多数标签都拥有的属性。

2) 样式属性：背景，字体，边框

3) value属性：只存在表单域标签 <input>,<select>,<textarea>中

4) 工作状态属性: chekced，disabled，selected 只存在表单域标签中

5) 监听事件属性 ： onclick ,onchange....

六、表单对象属性过滤器（工作状态属性过滤器的使用）

1-概述

　　根据表单中DOM对象的状态情况，来定位DOM对象的。

启用状态 enabled
不可用状态 disabled
选择状态 checked —— 例如radio， checkbox

2-类型

1) $("选择器:enabled")：留下满足条件的并且处于【可用状态】的DOM

$(":button:enabled")  // 定位所有处于可用状态的button按钮
$(":text:enabled")   // 定位所有处于可用状态的文本框

2) $("选择器:disabled")：留下满足条件的并且处于【不可用状态】的DOM

$(":button:disabled")：// 定位所有处于不可用状态的button按钮
$(":text:disabled")    // 定位所有处于不可用状态的的文本框

3）$("选择器:checked")：留下满足条件的并且处于【选中状态的】DOM

$(":checkbox:checked")         //定位复选框中被选中的元素  
$(":checkbox:checked:first")  // 定位复选框中第一个被选中的元素
$(":radio:checked")           // 定位单选框被选中的元素

4) $("选择器:selected")：留下满足条件的并且处于【选中状态的】DOM

$("select>option:selected")    // 定位下拉列表中被选中的元素

回顾：JavaScript中事件绑定方式

1.嵌入式绑定

 <input type="button" onclick="fun1()">

缺点：一次只能为一个标签绑定监听事件

2.基于DOM对象绑定方式

var array = docuemnt.getElementsByName("ck");
    for(var i=0;i<array.length;i++){
         var domObj =  array[i];
         domObj.onclick = fun1;
}

缺点：需要开发人员自行遍历数组，来绑定监听事件

四、 jQuery监听事件函数

jQuery监听事件函数名字就是【jquery监听事件函数】去掉on

1-jQuery给DOM对象绑定事件方式

方式1- $(选择器).jQuery监听事件名称( 事件的处理函数)

$(选择器) —— 定位dom对象， dom对象可以有多个，这些dom对象都绑定事件了。
事件名称 —— 就是JS事件去掉on的部分。

　　　　例如 js中的单击事件 onclick()，去掉on，得到的就是 jQuery中的事件名称click。(都是小写的）

事件的处理函数 —— 就是一个function定义，当事件发生时，会执行这个函数的内容。

例一： 
$("#btn").click(funtion(){   //例如为id值为btn的按钮绑定单击事件。
                  alert("btn按钮单击了")
    })


例二： 
$(":button").click(fun1);  // 为页面中所有的btton按钮绑定onclick以及对应处理函数fun1

方式2-$(选择器).on( 事件名称 , 事件的处理函数)

例： <input type="button" id="btn">

$("#btn").on("click", function(){ 
　　　　alert("btn按钮单击了") 
} )

2-常见的jQuery监听事件绑定类型

　　 $obj.bind("jquery监听事件函数名",处理函数) //以这种方式绑定监听事件，可以解除的

　　$obj.unbind("jquery监听事件函数名") //将指定监听事件从DOM对象身上移除。

　　$obj.unbind(): //将所有监听事件从DOM对象身上移除。

五、jQuery中属性操作函数

1. val函数:

　　—— 操作数组中 DOM 对象的 value 属性.

$obj.val(): 无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
$obj.val(值):有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

2.prop函数:

　　—— 工作状态属性 checked,disabled,selected

1) $obj.prop("checked",true)：为jquery对象中所有DOM对象的checked属性值赋值为true

2) $obj.prop（"checked"）：读取jquery对象中第一个DOM对象的【checked属性值】

3.attr函数

　　—— 基本属性 id name title rowspan

$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值
$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值

$obj.attr("name","ck") //为jquery对象中所有DOM对象的【name属性】统一赋值为[ck]
 
$obj.attr("title")   //读取jquery对象中第一个DOM对象的【title属性】的值

4.text函数

　　—— 操作属性innerText，双目标签的文本显示内容 <div>123<div> <br/>123

$(选择器).text() 无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值) 有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

 $obj.text("123")    //为jquery对象中所有DOM对象的innerText属性赋值为"123"
 
 $obj.text();       //读取jquery对象中所有DOM对象的innerText属性内容，拼接为一个字符串返回操作数组中所有 DOM 对象的【文字显示内容属性】

5.css函数

6.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<arr.length;i++){
                               var item = arr[i]; //数组成员
           //操作数组成员
           shuchu( i , item);
      }

     function shuchu(index, emlemnt){
        输出index ，element
      }

2).第二种语法规则：
循环jquery对象， jquery对象就是dom数组
    jquery对象.each( function(index,element) {} )

一、show() & hide()：

show(): 负责让jquery对象包含的所有DOM对象关联的标签在浏览上显示 style="display:block"

hide(): 负责让jquery对象包含的所有DOM对象关联的标签在浏览上隐藏 style="display:none"

二、remove() & empty():

empty：将当前标签子标签进行清除处理

remove：将当前标签及其子标签一并删除

三、append() & appendTo()

1.共同点:都是操作标签中innerHTML，为当前标签添加子标签

2.append(): 父标签.append（子标签）；父亲给自己找了一个儿子

appendTo(): 子标签.appendTo(父标签); 儿子各自找了一个爹

回顾：使用原生的js代码运用ajax技术实现页面的局部刷新效果。

使用jquery的函数，实现ajax请求的处理。 (重要！！！！)

    没有jquery之前，使用XMLHttpRequest做ajax ，有4个步骤。

jquery简化了ajax请求的处理，使用三个函数可以实现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"
                                                   } )

json结构的参数说明：

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

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

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 .

-------------------
先使用原生的js代码运用ajax技术，实现界面的局部刷新效果
再将代码进行升级，使用jquery 来实现ajax请求。
---------------------

2.6 AJAX
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法，您能够使用 HTTP Get
和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新
到 DOM 对象。

2.6.1 $.ajax()
$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：
$.ajax( { name:value, name:value, ... } )
说明：参数是 json 的数据，包含请求方式，数据，回调方法等
async ：布尔值，表示请求是否异步处理。默认是 true
contentType ：发送数据到服务器时所使用的内容类型。默认是：
"application/x-www-form-urlencoded"。
data：规定要发送到服务器的数据，可以是：string，数组，多数是 json
dataType：期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能
的类型
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串
"json" - 以 JSON 运行响应，并以对象返回
error(xhr,status,error)：如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
success(result,status,xhr)：当请求成功时运行的函数，其中 result, status, xhr 是自定义的形参
名
type：规定请求的类型（GET 或 POST 等），默认是 GET， get，post 不用区分大小写
url：规定发送请求的 URL。
以上是常用的参数。
error() , success()中的 xhr 是 XMLHttpRequest 对象。
2.6.2 $.get()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
语法：$.get(url,data,function(data,status,xhr),dataType)
url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的
类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串北京动力节点 www.bjpowernode.com
50
"json" - 以 JSON 运行响应，并以对象返回
2.6.3 $.post()
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
语法：$.post(URL,data,function(data,status,xhr),dataType)
参数同$get()

jQuery

回顾JavaScript

一、jQuery

1-介绍

2-使用

3-jQuery对象与DOM对象

4-jQuery对象与DOM对象转换

二、基本选择器

1-id选择器

2-class选择器

3-标签选择器

4-所有选择器

5-组合选择器

三、层级选择器

3 层级选择器的选择：

四、表单选择器 （input标签选择器）

过滤器语法

五、基本过滤器

1.基本过滤器

2.基本属性过滤器

回顾：html标签属性分类：

六、表单对象属性过滤器 （工作状态属性过滤器的使用 ）

1-概述

2-类型

回顾：JavaScript中事件绑定方式

1.嵌入式绑定

2.基于DOM对象绑定方式

四、 jQuery监听事件函数

1-jQuery给DOM对象绑定事件方式

方式1- $(选择器).jQuery监听事件名称( 事件的处理函数)

方式2-$(选择器).on( 事件名称 , 事件的处理函数)

2-常见的jQuery监听事件绑定类型

五、jQuery中属性操作函数

使用jquery的函数，实现ajax请求的处理。 (重要！！！！)

3-标签选择器　

4-所有选择器　

四、表单选择器（input标签选择器）

六、表单对象属性过滤器（工作状态属性过滤器的使用）