jQuery基础常用例
jQuery中的$符
$：jquery中的函数名
document：是参数
$(document)：把js中的document对象变成jquery可以使用的对象。然后调用ready()的函数。这个ready()是jquery中的函数
ready()的执行时间在页面dom对象加载后执行的，相当于js中onload事件
ready(函数)：表示在页面对象加载后执行·这个函数
对象的分类
dom对象和jquery对象。在一个文件中同时存在两种对象
dom对象：使用js的代码获取，创建的对象。html中的对象都是dom对象。
jquery对象：使用jquery获取获取的对象。
为什么要使用dom对象，还有jquery对象?
目的是要dom对象的函数或者属性，以及使用使用jquery中提供的函数或者属性。
dom对象和jquery对象可以相互转换的
DOM对象转换jQuery对象
使用$(DOM对象)方式，可以DOM对象转换为jQuery 对象，转换为jQuery对象才可以使用jQuery中的提供的方法，操作DOM对象。
一般情况下，在命名 jQuery对象时，为了与DOM对象进行区分，习惯性的以$开头，这不是必须的。
//使用jquery语法,获取jquery对象
var obj = $("#txt1"); //obj是jquery对象
//从数值中获取成员,成员是dom对象
// var dom = obj[0];
var dom = obj.get(0);
//调用dom的属性或者函数
//alert( dom.value);
var num = dom.value;
dom.value = num * num;
jquery对象转为dom对象
语法：jquery对象是一个数组，数组成员是dom对象。使用[下标]或get(下标)
<input type="text" id="txt1"/>
//使用jquery的方式表示这个dom对象
$("#txt1"):获取id是txt1的dom对象。
var obj = $("txt1");//obj是一个jquery对象，是一个包含了一个成员的dom数组。obj[0]就是dom对象
选择器
使用dom对象的id,class名称，标签名称等作为条件定位dom对象。
1.使用dom对象的id作为条件
语法：$("#id")
2.class选择器，使用对象的class名称定位dom对象
语法：$(".class名称")
3.标签选择器，使用标签名称作为条件定位dom对象
语法：$("标签名称)
4.所有选择器，选取页面中所有DOM对象。
语法：$(“*”）
5.组合选择器
组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合id，
语法：$("#id,.class,标签名称")
表单选择器
表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单<form>，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="button">
<input type="file">
<input type="submit">
//使用方法
var obj = $(":text")
语法：$("：type属性值")
过滤器
过滤器是一个字符串，用了筛选dom对象的，过滤器是和选择器一起使用的。在选择了dom对象后，在进行过滤筛选。
基本过滤器
使用dom对象在数组中的位置，作为过滤条件的。
- 选择数组中第一个dom成员
语法：$("选择器：first")
- 选择数组中最后一个成员
语法：$("选择器：last")
- 选择等于指定下标的dom成员
语法：$("选择器：eq(下标)")
- 选择大于某个下标的所有成员
语法：$("选择器：gt(下标)")
- 选择小于某个下标的所有成员
语法：$("选择器：lt(下标)")
表单过滤器
根据对象的状态作为条件，筛选dom对象
- 获取可用的文本框
语法：$("：text:enabled")
- 获取不可用的文本框
语法：$("：text:disabled")
- 获取选中的复选框
语法：$("：checkbox:checked")
- 获取选中下拉列表框
语法：$("选择器> option:selected")
函数
第一组函数
- val()：操作dom对象的value值
val()：没有参数，获取dom数组中第一个dom对象的value值
val(参数)：有参数，给dom数组中所有dom对象的value属性赋值
$("#btn1").click(function(){
//获取第一个dom对象的value值
// var txt = $(":text").val( );
var txt = $(":text:first").val();
alert("第一个文本框的value="+txt);
})
$("#btn2").click(function( ){
//给所有的文本框赋值,新的value
$(":text").val("这是新的值");
})
- text()：操作标签的文本内容，标签开始和结束之间的内容
text()：没有参数，把dom数组中所有dom对象的文本内容链接起来，形成一个字符串，并返回这个这个字符串。
text(参数)：给dom数组中的所有成员统—赋予新的文本
$("#btn3").click(function(){
//使用text()函数,读取文本内容
alert($("div" ).text( ));
})
$("#btn4").click(function(){
//使用text()函数,读取文本内容
alert($("div").text("我的div"));
})
- attr()：操作value ，文本以外的属性时。
attr("属性名")：获取dom数组中第一个dom成员的此属性值
attr("属性名"，"属性值")：给dom数组中所有dom成员此属性赋值
$("#btn5").click(function(){
//读取src的属性中,使用attr()
var txt = $("img").attr( "src" );
alert("图片的地址:"+txt);
})
$("#btn6" ).click(function(){
//设置新的图片
$("#img1" ).attr("src","img/02.jpg")
})
第二组函数
- remove()
$(选择器).remove()∶将数组中所有DOM对象及其子对象一并删除
语法：$("选择器").remove()
- empty()
删除dom对象的子对象
语法：$("选择器").empty()
- append()
给dom对象在他的后面增加新的dom对象
语法：$("选择器").append(子dom对象)
$("#btn3").click(function(){
//添加dom对象
$("#mydiv" ).append("<button id='newbtn'>我是新加的按钮</button>");
)}
- html()
html()：获取dom数组中第一个dom对象的文本值( html()返回结果相当于innertHTML )
html(参数)：给dom数组中所有成员设置新的文本内容。(html()返回结果相当于innertHTML )
- each()
each是循环函数，可以循环数组， json , dom对象数组
$.each(要循环的内容， function(index,element ){处理函数})
要循环的内容：可以是数组，json对象，dom对象数组。
function：循环的处理函数，每个成员都会执行函数一次。
index：是循环变量的值，名称自定义
element：和index对应的成员，element名称是自定义的
$("#btn7").click(function(){
var arr= [ "abc" , "hello", "jquery"];//需要循环的数组
$.each(arr,function(index,element){
console.log("循环变量i="+index+",数组成员="+element);
})
})
$("#btn8").click(function(){
var json={ "name":"李四", "age":20, "sex":"男"};
// key循环json 数组
$.each(json,function(i,n){
//i是key , n: value
console.log("i是json的key="+i+",n是json的value="+n);
})
})
事件
第一种事件绑定语法
语法：$("选择器").事件名称(事件的处理函数)
$("选择器")：选择0或多个dom对象。给他们绑定事件
事件名称：就是js中的去掉on的部分。例如单击事件onclick,这里的事件名称就是click
事件的处理函数：函数定义，当事件发生时，执行这个函数。
<input type="button" id="btn" value="绑定事件"/>
$(function(){
//页面dom对象加载后执行，相当于onload事件
//绑定事件
$("#btn").click(function(){
alert( "==button单击了，执行处理函数==")
})
})
第二种事件绑定语法
on()方法在被选元素上添加事件处理程序。该方法给API带来很多便利，推荐使用该方法
语法：$(选择器).on(event,function)
event：事件一个或者多个，多个之间空格分开
function：规定当事件发生时运行的函数。
on()绑定事件
语法：$("选择器").on(事件名称, function(){事件处理函数})
事件：就是js中去掉on的部分。
function：事件处理函数
<body>
<input type="button" id="btn" value="绑定事件"/><br/>
</body>
<script>
$("#btn").on("click" , function(){
a1ert("按钮单击了")
})
</script>
AJAX
jQuery提供多个与AJAX有关的方法。通过 jQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把接收的数据更新到DOM对象。
$.ajax()
$.ajax()是jQuery 中AJAX请求的核心方法，所有的其他方法都是在内部使用此方法。
语法：$.ajax( { json格式的参数 } )
参数是json 的数据，包含请求方式，数据，回调方法等
json格式的参数：key是定义好的，需要开发人员给key赋值。这些key是用来表示ajax请求必须的参数例如，请求的uri地址，是不是异步请求，请求的方式等等。
$.ajax(
{
url: "queryProvinceservlet",
type : "get",
data : { "name" :"李四", "age" : 20},
dataType: "json",
success : function(resp) {开发人员获取数据，更新dom对象 },
error :function(){alert("请求错误")}
}
)
url：服务器的地址，例如某个servlet的访问地址。queryProvinceServlet
type：表示请求的方式，get，post。默认是get。这个值不用区分大小写
data：表示提交的请求参数。可以是string，数组，json类型的。推荐使用json格式。
dataType：数据格式，可以是html, text , xml , json等等。表示发起请求后，希望服务器端返回的数据格式。jquery可以尝试使用对应格式处理返回的数据。比如你指定了dataType.json，表示希望服务器返回的是json格式数据。然后jquery把json数据转为json对象。服务器代码可以获取到dataType的内容。
success：函数function。当服务器端返回了数据，jquery处理完数据后，执行这个函数。等同于异步对象的readyState==4 $$ status=200的情况
例如：success:function( resp ){ 开发人员处理服务器返回的数据 }
resp是自定义形参，相当于resp= xhr.responseText
error:function()，当请求错误时，执行这个函数。
contentType：表示请求的参数数据格式。例如application/json，这个内容可以不写。
async：是一个boolean表示请求是同步的还是异步的。true是异步的，默认是true; false同步的.
$.get()
$.get()这个函数就是执行get请求方式的ajax
语法：$.get(url,请求参数，success函数，dataType)
$.get("queryName", {"proid":1}，function(resp){获取列表名称}，"text')
$.post()
$.post()执行post请求的ajax。
语法：$.post(url，请求参数， success函数，dataType)
$.post("queryName", {"proid":1}，function(resp){获取列表名称}，"text")
