jQuery笔记

1.jQuery是js库

库：相当于java的工具类，jQuery库就是存放js代码的地方，将原本的javascript代码封装成一个个方法。简化javascript的使用。

2.dom对象和jquery对象

dom对象：使用javascript语法创建的对象叫做dom对象，也就是js对象。本质上就是html元素。

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

jquery对象：使用jquery语法表示的对象叫做jquery对象，jquery对象本质上是一个数组，里面封装这dom对象。他们可以互相转换。 例如  var jobj =  $("#txt1") 

dom对象和jquery对象可以互相转换：两种对象只能使用自己的语法，所以需要互相转换

dom对象可以转为jquery ， 语法： $(dom对象)
jquery对象也可以转为dom对象， 语法： 从数组中获取第一个对象， 第一个对象就是dom对象， 使用$("#btn")[0]或者$("#btn").get（0).

3.选择器

常见的选择器：只有id选择器选择一个dom元素，其他两种都可以选择多个

1） id选择器， 语法： $("#dom对象的id值")
      通过dom对象的id定位dom对象的。 通过id找对象， id在当前页面中是唯一值。

2） class选择器， 语法： $(".class样式名)
       class表示css中的样式， 使用样式的名称定位dom对象的。

3）标签选择器， 语法： $("标签名称")
       使用标签名称定位dom对象的

表单选择器

  使用<input>标签的type属性值，定位dom对象的方式。
        :text                                文本框
        :password                      密码框
        :radio                              单选按钮
        :reset                              重置按钮
        :input                              所有input
        :file                                  文件域
        :checkbox                      复选框
        :submit                           提交按钮
        :image                            image按钮
        :hidden                           选取所有不可见元素

表单属性过滤器：

        :checked                        选中的单选和多选元素
        :enabled                         选取可用元素
        :disable                          选取所有不可用元素
        :selected                        选取select中被选中的option元素
 

过滤器：一般搭配选择器使用，由于选择器可以选择多个dom元素，所以可以使用过滤器来对选中的元素过滤

  1）$("选择器:first") : 第一个dom对象
  2）$("选择器:last"): 数组中的最后一个dom对象
  3）$("选择器:eq(数组的下标)") ：获取指定下标的dom对象
  4）$("选择器:lt(下标)") ： 获取小于下标的所有dom对象
  5）$("选择器:gt(下标)") ： 获取大于下标的所有dom对象

4.jquery中的方法

each语法

可以对数组，json，dom数组循环处理

语法： $.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，
             都会执行后面的“处理函数”一次。

处理函数:function(index, emelent) :
         index, element都是自定义的形参， 名称自定义。
         index：循环的索引
         element：数组中的成员

(1)一般的使用方式：each函数是一个类函数，可以直接通过$符号调用

$.each(arr,function(index,element){   /这里的两个参数就是序号和数组的值

})

$.each(json,function(key,value){   /这里的两个参数就是json的key和value

})

$.each(jquery对象,function(index,dom){   /这里的两个参数就是索引和dom对象

})

2).循环jquery对象， jquery对象就是dom数组
    $("#btn").each( function(index,element) {} )

jquery中给dom对象绑定事件

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() { 处理按钮单击 } )

 使用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(  {  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)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 .