jQuery概述

jQuery是存放js代码的地方，放的是用js代码写的函数
jQuery是为了简化js的操作

jquery核心

$符号在jquery中代表对jquery对象的引用，jQuery是核心对象

第一个例子

$(document)
- $是jQuery中的函数名称，document是函数的参数
- 作用是将document对象变成jQuery函数库可以使用的对象
ready函数
- ready是jQuery中的函数，是准备的意思
- 当页面的dom对象加载成功后，会执行ready函数的内容
- ready相当于是js中的onLoad事件
funciton()
- funciton()自定义的表示onLoad后要执行的功能

入口函数

$(document).ready === $() === jQuery() === window.jQuery()

$(function(){
	alert("Hello,jQuery!")
})

jQuery对象

jQuery表示的对象都是数组
在命名jQuery对象时，为了与DOM对象进行区分，习惯上以＄开头

DOM、JQuery转化

DOM对象转为jQuery对象

jQuery对象 = $(dom对象);

JQuery对象转为DOM对象

//从数组中获取第一个对象，第一个对象就是dom对象，使用下标的方式（[0] 或者 get(0)）

为什么要转换？

目的是要使用对象的方法或属性
当你是dom对象时，可以使用dom对象的属性或者方法
如果要想使用jquery提供的函数，必须是jquery对象才可以
当对象是一个jquery对象时，调用jquery函数库中函数来简化对dom的操作

选择器

定位条件，通知 jquery函数定位满足条件的dom对象

基本选择器

id选择器

$( "#dom对象的id值" )

class选择器

$( ".class样式名" )

标签选择器

$( "标签名称" )

所有选择器

$("*")

组合选择器

$("#id, .class , 标签名")

表单选择器

$(" : type属性值")
//示例
$(":text") // 选择的是所有的单行文本框
$(":password") // 选取所有的单选框
$(":radio") // 选取所有的单选框
$(":checkbox") // 选取所有的多选框
$(":button") // 选择的是所有的按钮

过滤器

对已经定位的dom对象根据条件再进行一遍筛选
过滤条件只能出现在选择器后方，和选择器一起使用
过滤器也是一个字符串，用来筛选dom对象的
jQuery对象中存储的DOM对象顺序与页面标签声明位置关系

基本过滤器

选择第一个first，保留数组中第一个DOM对象
```
$("选择器:first")
```
选择最后一个last，保留数组中最后DOM对象
```
$("选择器:last")
```
选择数组中指定对象
```
$("选择器:eq(数组索引)")
```
选择数组中小于指定索引（下标）的所有DOM对象
```
$("选择器:lt(数组索引)")
```
选择数组中大于指定索引（下标）的所有DOM对象
```
$("选择器:gt(数组索引)")
```

表单对象属性过滤器

根据表单中dom对象的状态情况定位
状态情况
- 启用状态：enabled
- 不可用状态：disabled
- 选中状态：checked（例如：radio，checkbox）
选择可用的文本框
```
$("text:enabled")
```
选择不可用的文本框
```
$("text:disabled")
```
复选框选中的元素
```
$("checkbox:checked")
```
选择指定下拉列表的被选中元素
```
选择器 > option : selected
```

函数

第一组

val
text
attr

第二组

remove将数组中所有DOM对象及其子对象一并删除
```
$(选择器).remove()
```
empty将数组中所有DOM对象的子对象删除
```
$(选择器).empty()
```

append为数组中所有的DOM对象添加子对象

$(选择器).append("<div>动态添加的div</div>")

html（innerhtml）

$(选择器).html()
$(选择器).html(值)

each

$.each(遍历的对象,function(index,element){处理程序})
jQuery对象.each(function(index,element){处理程序})

jQuery绑定事件方式

$(选择器).监听事件名称(处理函数)

$(选择器).on(event,function)

jQuery和AJAX

$.ajax()

$.ajax({
	async:true,
	contentType:"application/json",
	data:{name:"lisi",age:20},
	dataType:"json",
	error:function(){
		//执行的函数
	},
	success:function(data){
		//data就是responseText,jQuery处理过后的数据
	}，
	url："xxxxx",
	type:"get"
})

async 一个boolean类型的值，默认是true，表示异步请求
contentType 表示从浏览器发送服务器的参数类型，json可用application/json表示
data 可以是字符串、数组、json，表示请求的参数和参数值
dataType 从服务器返回的数据格式
error 请求错误时执行的函数
- error:function(){}
sucess 请求成功时执行的函数
url 请求的地址
type 请求方式，默认是get

主要使用的是url、data、dataType、success

$.get()和$.post()

$.get(请求的服务器端地址,请求的参数,处理函数,数据格式)
$.post(请求的服务器端地址,请求的参数,处理函数,数据格式)

级联查询

思路还算比较清晰

<script type="text/javascript">
  $(function (){
    $.ajax({
      url:"queryProvince",
      dataType:"json",
      success:function (provincedata){
        $.each(provincedata,function (i,n){
          $("#provice").append("<option value='"+n.id+"'>"+n.name+"</option>")
        })
      }
    })
    $("#provice").change(function () {
      var proviceid = $("#provice>option:selected").val()
      $("#city").empty()
      $.post("queryCity",{proid:proviceid},function (Citydata){
        $.each(Citydata, function (i, n) {
          $("#city").append("<option value='" + n.id + "'>" + n.name + "</option>")
        })
      },"json")
    })
  })
</script>

jQuery学习笔记