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")