一、 jQuery获取对象的方式
首先区分一下JavaScript对象和jQuery对象
- JS对象:使用JavaScript的语法创建的对象叫做dom对象, 也就是js对象。
var obj= document.getElementById("txt1");
obj是dom对象,也叫做js对象
- jQuery对象: 使用jquery语法表示对象叫做jquery对象
- 注意:jquery表示的对象都是数组
var jobj = $("#txt1")
jobj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。现在数组中就一个值。
dom对象可以和jquery对象相互的转换
- dom对象可以转为jQuery对象
- 语法:
$(dom对象)
<script type="text/javascript">
function btnClick(){
//获取dom对象
var obj= document.getElementById("btn");
//使用dom的value属性,获取值
alert("使用dom对象的属性="+obj.value);
//把dom对象转jQuery,使用jQuery库中的函数
var jobj = $(obj)
//调用jQuery中的函数,获取value的值
alert("调用jquery中的函数"+jobj.val());
}
</script>
- jQuery对象转为dom对象
- 语法: 从数组中获取第一个对象, 第一个对象就是dom对象, 使用[0]或者get(0)
<script type="text/javascript">
function btnClick(){
//使用jQuery的语法,获取页面中的dom对象
//var obj = $("#txt")[0];//从数组中获取下表是0的dom对象
var obj =$("#txt").get(0);//从数组中获取下表是0的dom对象
//alert( obj.value)
var num =obj.value;
obj.value =num*num;
}
</script>
<div>
<input type="button" value="计算平方" onclick="btnClick()" /><br />
<input type="text" value="整数" id="txt"/>
</div>
二、 jQuery的函数书写方式(标准与简写)
标准写法:
<script type="text/javascript">
/*
1.$(doucument).$是jQuery中的函数名称,document是函数的参数作用
是document对象编程jQuery函数库可以使用的对象
2.ready是jQuery中的函数:是准备的意思。当页面的dom对象加载成功后,会执行read函数的内容
read相当于js中的onLoad事件
3,function()自定义的表示onLoad后要执行的功能
*
* */
$(document).ready(function(){
//自定义功能代码
alert("Hello jQuery");
})
</script>
函数简写(开发常用)
$(function(){
alert("Hello jQuery");
})
三、 选择器
3.1基本选择器
用来定位dom对象的。定位了dom对象,就可以通过jquery的函数操作dom
常用的选择器:
-
id选择器, 语法:
$("#dom对象的id值")
通过dom对象的id定位dom对象的。 通过id找对象, id在当前页面中是唯一值。 -
类选择器, 语法:
$(".class样式名)
class表示css中的样式, 使用样式的名称定位dom对象的。 -
标签选择器, 语法:
$("标签名称")
使用标签名称定位dom对象的。将所有的div都会进行选择 -
所有选择器,语法:
$("*")
。表示任意全部dom对象 -
混合选择器,语法:
$("id选择器,class选择器,标签选择器 ")
。混合使用
案例:
<head>
<meta charset="utf-8">
<style type="text/css">
div{
background: gray;
width: 200px;
height: 100px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
function fun1(){
//id选择器
var obj = $("#one");
//使用jquery中改变样式的函数
obj.css("background","red");
}
function fun2(){
//使用样式选择器
var obj = $(".two");
obj.css("background","yellow");
}
function fun3(){
//标签选择器
var obj = $("div"); //数组有3个对象
//jquery的操作都是操作数组中的全部成员.
//所以是给所有的div都设置的背景色
obj.css("background","blue");
}
function fun4(){
var obj = $("*");
obj.css("background","green");
}
function fun5(){
var obj = $("#one,span");
//obj.css("background","red");
//obj是一个数组, 有两个成员, 1 是span dom对象
//$( obj[1] ) : jquery对象
// $( dom 对象) : 是把dom对象转为jquery对象, 之后就可以调用jquery的css函数了
$( obj[1] ).css("background","green");//就是span
}
document.getElementById("one"); //js的语法规则 ,value
$("#one"); //jquery语法
</script>
</head>
<body>
<div id="one">我是one的div</div><br/>
<div class="two">我是样式是two的div</div>
<br/>
<div>我是没有id,class的div</div>
<br/>
<span class="two">我是span标签</span>
<br/>
<input type="button" value="获取id是one的dom对象" onclick="fun1()" />
<br/>
<input type="button" value="使用class样式获取dom对象" onclick="fun2()" />
<br/>
<input type="button" value="使用标签选择器" onclick="fun3()" />
<br/>
<input type="button" value="所有选择器" onclick="fun4()"/>
<br/>
<input type="button" value="组合选择器" onclick="fun5()"/>
</body>
</html>
3.2表单选择器
使用<input>
标签的type属性值,定位dom对象的方式。
-
语法:
$(":type属性值")
-
例如:
$(":text")
,选择的是所有的单行文本框,
$(":button")
,选择的是所有的按钮。
案例:
<input type="button" id="btn1" value="选择所有input元素" />
<input type="button" id="btn2" value="选择文本框" />
<br/>
<form>
<input type="text" /><br />
<input type="checkbox" /><br />
<input type="radio" /><br />
<input type="image" /><br />
<input type="file" /><br />
<input type="submit" />
<input type="reset" /><br />
<input type="password" /><br />
<input type="button" /><br />
<select><option/></select><br />
<textarea></textarea><br />
<button></button>
</form>
案例获取:
<script>
$(function(){
$("#btn1").click(function(){
$(":input").css("background-color","pink");
});
$("#btn2").click(function(){
$(":text").css("background-color","pink");
});
});
</script>
3.3层级选择器
- ancestor(空格)descendant:
在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子) - parent > child : 在给定的父元素下匹配所有的子元素(儿子)
- prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
- prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
<script>
$(function(){
$("#btn1").click(function(){
$("body div").css("background-color","pink");
});
$("#btn2").click(function(){
$("body>div").css("background-color","deeppink");
});
$("#btn3").click(function(){
$("#two+div").css("background-color","deeppink");
});
$("#btn4").click(function(){
$("#one~div").css("background-color","deeppink");
});
});
</script>
<body>
<input type="button" id="btn1" value="选择body中的所有的div元素"/>
<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
四、 过滤器
4.1基本过滤器
jQuery对象存储的DOM对象顺序与页面标签为生命位置关系
如:
<div>1</div>——dom1
<div>2</div>——dom2
<div>3</div>——dom3
$(“div”) =[dom1,dom2,dom3]
过滤器就是过滤条件,对已经定位到数组中DOM对象进行过滤筛选,过滤条件不能独立出现再jquery函数中,如果使用只能在选择器的后方。
在定位了dom对象后,根据一些条件筛选dom对象。
过滤器有是一个字符串,用来筛选dom对象的。
过滤器不能单独使用, 必须和选择器一起使用。
$("选择器:first")
: 第一个dom对象$("选择器:last")
: 数组中的最后一个dom对象$("选择器:eq(数组的下标)")
:获取指定下标的dom对象$("选择器:lt(下标)")
: 获取小于下标的所有dom对象$("选择器:gt(下标)")
: 获取大于下标的所有dom对象
案例:
<script>
$(function(){
$("#btn1").click(function(){
//body下的div的第一个
$("body div:first").css("background-color","pink");
});
$("#btn2").click(function(){
//最后一个div是666的那个div
$("body div:last").css("background-color","deeppink");
});
$("#btn3").click(function(){
//从第一个div开始往后数奇数
$("body div:odd").css("background-color","lightpink");
});
$("#btn4").click(function(){
//从第二个div后面开始数偶数
$("body div:even").css("background-color","lightpink");
});
});
</script>
<body>
<input type="button" id="btn1" value="body中的第一个div元素"/>
<input type="button" id="btn2" value="body中的最后一个div元素"/>
<input type="button" id="btn3" value="选择body中的奇数的div"/>
<input type="button" id="btn4" value="选择body中的偶数的div"/>
<hr/>
<div id="one">
<div class="mini">
111
</div>
</div>
<div id="two">
<div class="mini">
222
</div>
<div class="mini">
333
</div>
</div>
<div id="three">
<div class="mini">
444
</div>
<div class="mini">
555
</div>
<div class="mini">
666
</div>
</div>
<span id="four">
</span>
</body>
4.2表单属性过滤器
根据表单中dom对象的状态情况,定位dom对象的。
-
启用状态, enabled
例如:选择可用的文本框,
$(“:text:enabled”)
-
不可用状态 disabled
例如:选择不可用的文本框
$(“:text:disableed”)
-
选择状态 , checked ,
例如radio, checkbox
$(“:checkbox:checked”)
案例:
<script type="text/javascript">
// $(document).ready( 函数 ): 当页面中的dom对象加载成功后,会执行ready(),
// 相当于是onLoad().
$(function() {
//当页面dom对象加载后,给对象绑定事件,因为此时button对象已经在内存中创建好了才能使用.
$("#btn1").click(function(){
//获取所有可以使用的text
var obj = $(":text:enabled");
//设置 jquery数组值所有dom对象的value值
obj.val("hello");
})
$("#btn2").click(function(){
//获取选中的checkbox
var obj = $(":checkbox:checked");
for(var i=0;i<obj.length;i++){
//alert( obj[i].value);
alert( $(obj[i]).val() )
}
})
$("#btn3").click(function(){
//获取select选中的值
//var obj= $("select>option:selected");
var obj = $("#yuyan>option:selected");
alert(obj.val());
})
})
</script>
<body>
<input type="text" id="txt1" value="text1" /><br/>
<input type="text" id="txt2" value="text2" disabled="true"/><br/>
<input type="text" id="txt3" value="text3" /><br/>
<input type="text" id="txt4" value="text4" disabled/><br/>
<br/>
<input type="checkbox" value="游泳" />游泳 <br/>
<input type="checkbox" value="健身" checked />健身 <br/>
<input type="checkbox" value="电子游戏" checked />电子游戏 <br/>
<br/>
<select id="yuyan">
<option value="java">java语言</option>
<option value="go" selected>go语言</option>
<option value="python">python语言</option>
</select>
<br/>
<input type="button" value="设置可以的text的value是hello" id="btn1"/>
<br/>
<button id="btn2">显示选中的复选框的值</button>
<br/>
<button id="btn3">显示选中下拉列表框的值</button>
</body>
五、 函数
1. val
操作数组中DOM对象的value属性
$(选择器).val()
:无参数调用形式,读取数组中第一个DOM对象的value属性值$(选择器).val(值):
有参形式调用;对数组中所有DOM对象的value属性值同意赋值。
2. text
操作操作数组中所有DOM对象的文本显示内容
$(选择器).text()
:无参数调用,读取数组中所有的DOM对象的文字显示内容,将得到内容拼接为一个字符串返回$(选择器).text(值)
:有参方式,对数组中所有的DOM对象文字显示内容进行统一赋值。
3. attr
对val,text之外的其他属性操作
$(选择器).attr(“属性名“)
:获取DOM数组中第一个对象的属性值$(选择器).attr(“属性名”,”值”)
:对数组中所有DOM对象的属性设为新值
例如:
$("#btn").click(function(){
//读取指定属性的值
alert($("img").attr("src"));
})
$("#btn2").click(function(){
//设置指定属性的,指定值
$("img").attr("src","img/ex2.jpg");
//val(), text();
})
4. remove
$(选择器).remove()
:将数组中所有DOM对象及其子对象一并删除
5. empty
$(选择器).empty()
:将数组中所有DOM对象的子对象删除
6. append
为数组中所有DOM对象添加子对象
$(选择器).append(“<div>增加一个div标签</div>”)
案例
$("#btn1").click(function(){
//使用remove:删除父和子所有的dom对象
$("select").remove();
})
$("#btn2").click(function(){
//使用empty 删除子dom对象
$("select").empty();
})
$("#btn3").click(function(){
//使用append,增加dom对象
//$("#fatcher").append("<input type='button' value='我是增加的按钮' />")
//增加一个table
$("#fatcher").append("<table border=1><tr><td>第一列</td><td>第二列</td></tr></table>");
})
7. html
设置或返回被选元素的内容(innerHTML)
$(选择器).html()
:无参调用方法,获取DOM数组第一个匹元素的内容$(选择器).html(值)
:有参数调用,用于设置DOM数组中所有元素的内容
案例:
$("#btn4").click(function(){
//使用html()函数,获取数组中第一个dom对象的文本值(innerHTML)
//alert($("span").text()); // 我是mysql数据库
alert( $("span").html() ); //我是mysql <b>数据库</b>
})
$("#btn5").click(function(){
//使用 html(有参数):设置dom对象的文本值
$("span").html("我是新的<b>数据</b>");
})
<span>我是mysql <b>数据库</b></span>
<br/>
<span>我是jdbc</span>
<input type="button" value="获取第一个dom的文本值" id="btn4"/>
<input type="button" value="设置span的所以dom的文本值" id="btn5"/>
8. each
对数组,json和dom数组等的遍历,对每个元素调用依次函数
语法1:
$.each(要遍历的对象,function(index,element){处理程序})
语法2:
jQuery对象.each(function(index,element){处理程序})
- index:数组下标
- element:数组的对象
案例:
$("#btn6").click(function(){
//循环普通数组,非dom数组
var arr = [ 11, 12, 13];
$.each(arr, function(i,n){
alert("循环变量:"+i + "=====数组成员:"+ n);
})
})
$("#btn7").click(function(){
//循环json
var json={"name":"张三","age":20};
//var obj = eval("{'name':'张三','age':20}");
$.each(json,function(i,n){
alert("i是key="+i+",n是值="+n);
})
})
$("#btn8").click(function(){
//循环dom数组
var domArray = $(":text");//dom数组
$.each( domArray, function(i,n){
// n 是数组中的dom对象
alert("i="+i+" , n="+n.value);
})
})
$("#btn9").click(function(){
//循环jquery对象, jquery对象就是dom数组
$(":text").each(function(i,n){
alert("i="+i+",n="+ n.value);
})
})
六、 jQuery的ajax
没有jquery之前,使用XMLHttpRequest
做ajax ,有4个步骤。jquery简化了ajax请求的处理。
使用三个函数可以实现ajax请求的处理。
$.ajax()
: jquery中实现ajax的核心函数。$.post()
: 使用post方式做ajax请求。$.get()
: 使用get方式发送ajax请求。$ .post()
和$.get()
他们在内部都是调用的$.ajax()
函数的参数表示请求的url,请求方式,参数值等信息。
$.ajax()
参数是一个json的结构。
json结构的参数说明:
-
async
:是一个boolean类型的值, 默认是true ,表示异步请求的。可以不写async这个配置项,xmlHttp.open(get,url,true),第三个参数一样的意思。 -
contentType
: 一个字符串,表示从浏览器发送服务器的参数的类型。 可以不写。例如你想表示请求的参数是json格式的, 可以写application/json -
data
: 可以是字符串,数组,json,表示请求的参数和参数值。 常用的是json格式的数据 -
dataType
: 表示期望从服务器端返回的数据格式,可选的有: xml , html ,text ,json
当我们使用$.ajax()发送请求时, 会把dataType的值发送给服务器, 那我们的servlet能够
读取到dataType的值,就知道你的浏览器需要的是 json或者xml的数据,那么服务器就可以
返回你需要的数据格式。 -
error
: 一个function ,表示当请求发生错误时,执行的函数。
error:function() { 发生错误时执行 } -
sucess
:一个function , 请求成功了,从服务器端返回了数据,会执行success指定函数
之前使用XMLHttpRequest对象, 当readyState==4 && status ==200的时候。 -
url
:请求的地址 -
type
:请求方式,get或者post, 不用区分大小写。 默认是get方式。主要使用的是 url , data ,dataType, success .
主要模板
1.$.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"
}
)
2. $ .get(url,[data],[fn],[type])和$.post(url,[data],[fn],[type])
其中:
- url:代表请求的服务器端地址
- data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)
- callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)
- type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)
- 常用的返回类型:text、json、html等中括号代表可选。